Skip to content
Docs
    Menu

    Design

    Colors

    How to add, change, rename and delete your site's colors in the Tokens panel.

    Your site's colors live in Tokens → Colors. There are two kinds:

    • Color scales: a family of 11 shades (50, 100, 200 … 900, 950) generated from one base color. Good for brand colors you use in several strengths, such as a light tint for backgrounds and a dark shade for text.
    • Color swatches: single colors, such as error or a specific accent.

    Every site has three swatches, white, black and transparent. You can change their values, but you can't rename or delete them.

    Add a color scale

    1. 01

      Open Colors

      Click Tokens in the left rail, then the Colors tab.

    2. 02

      Start a new scale

      Next to Color Scales, click Add scale.

    3. 03

      Name it

      Type a Scale name, such as brand. Names use letters, numbers and hyphens, and start with a letter.

    4. 04

      Pick the base color

      Choose the Base color. The Preview shows the 11 shades that will be generated.

    5. 05

      Create it

      Click Create Scale.

    Add a single swatch

    Next to Color Swatches, click Add swatch. Enter a Swatch name, pick the Color, then click Create Swatch.

    Change a color

    • One shade of a scale: click the shade and enter the new color.
    • A whole scale from a new base color: open the scale's menu (…), choose Regenerate scale, adjust the base color, and click Regenerate. Confirm in Regenerate color scale?. This replaces all 11 shades, and everything that uses the scale changes.
    • A swatch: select it, open its menu, and choose Edit color.

    Changing a value is the safe way to recolor your site. Every element that uses the color keeps using it, with the new value.

    Rename a color

    Double-click a scale's name, or choose Rename from its menu. For a swatch, select it and choose Rename. Confirm in Rename color scale? or Rename color swatch?. Every place that uses the color is updated to the new name.

    See where a color is used

    Select a swatch to see how many places use it, such as 3 uses. Swatches nothing uses are marked Unused, which makes them easy to clean up.

    Delete a color

    Choose Delete scale or Delete swatch from the menu.

    • If nothing uses the color, it's deleted right away.
    • If it's in use, Token in use lists where. Click Remove Anyway to delete it. Elements that used it lose that color.
    • If your site builds the color name in code in a way that can't be cleaned up automatically, Referenced dynamically appears. Click Copy AI prompt and paste it into the AI chat. The AI removes the color and fixes every place that used it.

    Colors the AI adds

    When the AI uses a color your site doesn't have yet, it adds it to your tokens automatically. A standard palette color becomes a new scale. A custom color becomes a swatch with a descriptive name. Rename them whenever you like.

    Save a custom color from the Style panel

    You can create a swatch while styling an element.

    1. In the Style panel, open any color control.
    2. In the swatches row, click + (New color — pick or paste any value).
    3. Pick the color with the sliders (L for lightness, C for how vivid it is, H for hue, A for opacity), or type a value in hex, rgb, hsl or oklch.
    4. Click Save swatch.

    The new swatch gets a name based on its color and is applied to the element. Rename it in Tokens → Colors if you want a clearer name.

    Ask the AI instead

    • Make the primary color a deeper green across the site.
    • Add a soft yellow color for highlight boxes.
    • Rename the "blue" scale to "brand".

    Related