> ## 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.

# Colors

> Set your brand colors once, and every page and section follows them, in light and dark.

Keep your whole site on brand with one set of colors. Set them in **Site design**, and every page, section, button and form uses them.

 **Who can do this:** Editors, Admins and Owners.

## Open the colors

* 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 **Site design** window opens on **Colors · Brand**. The colors are spread over three tabs: **Colors · Brand**, **Colors · UI** and **Colors · Status**.

Each tab starts with **Live preview · Site palette**, a board of every color on your site. Switch it between **Dark** and **Light** to see both themes. Below it, the colors are grouped in cards. Choose a card to open it and see its colors.

![Site design open on Colors · Brand: the Live preview · Site palette board with Parker's colors, and the Main colors card opened below it.](https://mintcdn.com/fetchski-attract-api/5p16uJgtNdjvJND9/images/cms/guides/site-design/colors/guides-site-design-colors-screen-light.png?fit=max\&auto=format\&n=5p16uJgtNdjvJND9\&q=85\&s=01f1a4c5965230d85c8d9df94035e326)

Colors · Brand, with the live preview at the top and Main colors open.

## Two boxes for every color

Every color has two boxes: one for the dark theme and one for the light theme. Visitors can switch your site between the two.

* On **Colors · Brand** and **Colors · Status**, a light-theme box left empty uses the dark-theme color. Set only the dark box when one color works in both themes.
* On **Colors · UI**, each theme keeps its own built-in color. Backgrounds and text are usually different in light and dark, so set both boxes.
* Leave both boxes empty to keep the built-in color.

These rules are for your site colors. Button colors work a little differently. See [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

**Set a color**

1. Open the card that holds the color, such as **Main colors**.
2. Choose the color's box for the theme you want. A color picker opens.
3. Pick a color, choose one of the swatches, or type your brand color's code, such as #E8743B. A designer or brand guide gives you this code; it starts with #.
4. Do the same in the other box if that color needs a different shade in the other theme.

## Colors · Brand

**Main colors**

* **Primary / brand**: your main color. Main buttons, highlights and accents use it. The CMS makes a hover shade (the color a button changes to when a visitor points at it) and a soft tint from it for you.
* **Text on primary**: the color of text that sits on your primary color. An example is the highlighted word in a Hero headline. (A Hero is the big opening section at the top of a page; see [Hero](https://docs.fetchski-attract.com/guides/sections/hero.md).)

**Supporting colors**

* **Secondary**: a second color for small touches, such as eyebrows (the short labels that sit above some headings).
* **Tertiary**: a third, warmer color for extra accents.
* **Link**: the color of links in text. It matches your primary color until you set it.

## Colors · UI

UI stands for user interface. These are the quiet colors that make up most of the page: the backgrounds, the text and the lines.

**Backgrounds**

* **Page background**: the color behind everything.
* **Cards**: the color of cards and raised panels.
* **Bands between sections**: the slightly darker color some sections use as a band.

**Text and lines**

* **Text**: the main text color.
* **Muted text**: softer text for details and captions.
* **Lines and borders**: dividers and outlines.

## Colors · Status

**Status colors** appear in forms, alerts and badges.

* **Success**: confirmations, such as "Thanks, we got your message."
* **Warning**: gentle alerts.
* **Error**: problems, such as a missing form field.
* **Information**: neutral notes.

![The same Parker's Feature Cards section twice, side by side: on the left with the built-in colors, on the right with Parker's palette (warm primary, soft card color).](https://mintcdn.com/fetchski-attract-api/-xGXn_krfc_rfFbR/images/cms/guides/site-design/colors/guides-site-design-colors-before-after-light.png?fit=max\&auto=format\&n=-xGXn_krfc_rfFbR\&q=85\&s=623981569cae33ac97368fa53afacee1)

The same section with the built-in colors and with your own.

## Put your colors live

Choose **Update** to save your colors and put them live on your site. To save them 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.

Then open a page on your site and check it in both themes. Use the light and dark switch in your site's header. On a phone-sized screen, it's inside the menu. The moon in the CMS toolbar only changes the CMS, not your site.

![The top right of the Site design window with the Update button and its More save options arrow open, showing the draft option; Update ringed.](https://mintcdn.com/fetchski-attract-api/5p16uJgtNdjvJND9/images/cms/guides/site-design/colors/guides-site-design-colors-update-light.png?fit=max\&auto=format\&n=5p16uJgtNdjvJND9\&q=85\&s=14e2b0ec047a8b85d70b13f551279f9c)

Update puts your colors live. More save options lets you save a draft.

## Good to know

* **Check text on your primary color.** Highlighted words sit on it, so make sure **Text on primary** stays easy to read against **Primary / brand**.
* **Button labels have their own color.** Section buttons use their **Label color**, which follows your **Text** color unless you change it. See [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).
* **Sections can still have their own colors.** Many sections have color options of their own. Leave them empty and they follow your palette.
* **Readable text matters.** Light text on a pale background, or dark text on a dark one, is hard for many people to read. Keep strong contrast between text and its background.
* **FetchskiAI can help.** Ask the [FetchskiAI Agent](https://docs.fetchski-attract.com/fetchskiai/agent.md) to suggest a palette. Admins and Owners can let it change the colors for you.

## Related

> [card] [Typography](https://docs.fetchski-attract.com/guides/site-design/typography.md)
>
> choose your site's fonts.

> [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md)
>
> how buttons and cards use your colors.

> [card] [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md)
>
> section backgrounds and fonts.

> [card] [Site design](https://docs.fetchski-attract.com/guides/site-design/index.md)
>
> every tab on this screen.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.