> ## Documentation Index > Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt > Use this file to discover all available pages before exploring further. # Site design > How your whole site looks, set in one place: colors, fonts, width, motion, header and footer. Set how your whole site looks, once, in **Site design**. Choose your colors, fonts, page width and motion, and style the header and footer that sit on every page. Your content lives on the pages, and the look lives here. **Who can do this:** Editors, Admins and Owners. Only Admins and Owners can change **Custom CSS**. ## Open Site design * In the toolbar (the bar across the top of your site once you're signed in; see [The toolbar](https://docs.fetchski-attract.com/guides/get-started/toolbar-and-command-palette.md#the-toolbar)), choose **Site design**. * Or open the command palette (⌘K, or Ctrl+K on Windows) and choose **Site design**. The shortcut is T then Shift+G (press T, let go, then hold Shift and press G, while you're not typing in a box; see [Keyboard shortcuts](https://docs.fetchski-attract.com/guides/get-started/toolbar-and-command-palette.md#keyboard-shortcuts)). The tabs run down the left. Inside most tabs, settings are grouped in cards that show how many settings they hold. Choose a card to open it. ![The Site design window open on Colors · Brand: the full tab list on the left (Colors · Brand down to Footer: Social).](https://mintcdn.com/fetchski-attract-api/5p16uJgtNdjvJND9/images/cms/guides/site-design/index/guides-site-design-index-screen-light.png?fit=max\&auto=format\&n=5p16uJgtNdjvJND9\&q=85\&s=9626b1527ec1ca59b2f44be9786ede76) Site design, with its tabs down the left. ## The tabs The tabs appear in this order. > [card] [Colors](https://docs.fetchski-attract.com/guides/site-design/colors.md) > > the **Colors · Brand**, **Colors · UI** and **Colors · Status** tabs, your site's color palette for light and dark. > [card] [Typography](https://docs.fetchski-attract.com/guides/site-design/typography.md) > > the **Typography** tab, the three fonts your site uses. > [card] [Site width](https://docs.fetchski-attract.com/guides/site-design/site-width.md) > > the **Site Width** tab, how wide your page content gets on big screens. > [card] [Motion](https://docs.fetchski-attract.com/guides/site-design/motion.md) > > the **Motion** tab, one switch for the animations on your site. > [card] [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md) > > the **Custom CSS** tab, styling rules for when the settings aren't enough. Admins and Owners only. > [card] [Header](https://docs.fetchski-attract.com/guides/site-design/header.md) > > the five **Header:** tabs, from the bar's shape to the phone menu. > [card] [Footer](https://docs.fetchski-attract.com/guides/site-design/footer.md) > > the seven **Footer:** tabs, from the background to your social icons. ## See your changes A few tabs show a live preview at the top, so you can try things before you save: * **Colors · Brand**, **Colors · UI** and **Colors · Status** open with **Live preview · Site palette**. * **Typography** has the **Typography preview**, with your fonts loaded. * **Header: Button** has a **Live preview** of the header button. The other tabs have no preview in the window. To see their changes on your site, you put them live: choose **Update**, then open any page and check it. If you don't like the result, change it back and choose **Update** again. ## Put your changes live Choose **Update** to save your changes and put them live on every page. To save without putting them live yet, open the arrow next to **Update** (**More save options**) and choose **Save Draft**. Your changes wait there; open the window again and choose **Update** when you're ready to put them live. **Cancel** closes the window without saving. ![The top bar of the Site design window: Cancel on the left, the title, and Update with its More save options arrow open on the right; Update ringed.](https://mintcdn.com/fetchski-attract-api/5p16uJgtNdjvJND9/images/cms/guides/site-design/index/guides-site-design-index-update-light.png?fit=max\&auto=format\&n=5p16uJgtNdjvJND9\&q=85\&s=c5bbe069c20a25d62162250b113545d9) Update puts your design live. More save options lets you save a draft. ## Where to start On a new site, work through the tabs in this order: 1. **Colors.** Set your primary color and your backgrounds. See [Colors](https://docs.fetchski-attract.com/guides/site-design/colors.md). 2. **Typography.** Choose a headings font and a body text font. See [Typography](https://docs.fetchski-attract.com/guides/site-design/typography.md). 3. **Header.** Add your menu links and set the header button. See [Header](https://docs.fetchski-attract.com/guides/site-design/header.md). 4. **Footer.** Add your footer links and the copyright line. See [Footer](https://docs.fetchski-attract.com/guides/site-design/footer.md). Your logo, business name and contact details aren't here. They live in [Site settings](https://docs.fetchski-attract.com/guides/site-settings/index.md), and the header and footer use them. ## Good to know * **One change, every page.** Site design applies to your whole site at once. Sections can still set their own background and fonts, and pages their own fonts. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md). * **Everything works in light and dark.** Most color settings have a box for each theme, so your site looks right whichever theme a visitor picks. * **FetchskiAI can help.** Ask the [FetchskiAI Agent](https://docs.fetchski-attract.com/fetchskiai/agent.md) to suggest colors or fonts. Admins and Owners can let it change them for you. ## Related > [card] [Site settings](https://docs.fetchski-attract.com/guides/site-settings/index.md) > > your business name, logo and contact details. > [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md) > > the button and card looks your sections share. > [card] [The toolbar and the command palette](https://docs.fetchski-attract.com/guides/get-started/toolbar-and-command-palette.md) > > every way to open a screen. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.