Customizing Colors

Your pages use a 16-token color system -- define each token once and every element picks it up automatically.

Understanding the 16 Color Tokens

The tokens are organized into three groups: Brand Colors, Surface Colors, and Utility Colors. Each token controls specific elements on your page.

Brand Colors (6 tokens)

Brand colors define the personality of your pages -- the colors visitors will most strongly associate with your brand.

• Primary -- The main action color for buttons, links, and key interactive elements. Typically your brand's signature color. Choose something that stands out against your background.
• Primary Foreground -- Text on top of Primary surfaces (e.g., button labels). Should have strong contrast against Primary.
• Secondary -- A complementary color for secondary buttons, tags, and less prominent elements. Provides variety without competing with Primary.
• Secondary Foreground -- Text on Secondary surfaces.
• Accent -- A highlight color for hover states, selected items, and subtle emphasis.
• Accent Foreground -- Text on Accent surfaces.

Surface Colors (8 tokens)

Surface colors control the foundational layers -- backgrounds, text, cards, and overlays. Getting these right is essential for readability.

• Background -- The main page background. Everything else sits on top of this.
• Foreground -- The default text color for headings, body text, and content on the Background. Ensure strong contrast with Background.
• Card -- Background color for product cards, appointment cards, and content containers. Usually a slightly different shade than the page background for visual separation.
• Card Foreground -- Text color inside cards.
• Popover -- Background for dropdown menus, tooltips, and floating panels.
• Popover Foreground -- Text inside popovers and dropdowns.

Utility Colors (4 tokens)

Utility colors handle functional and structural elements that support the design without drawing attention.

• Muted -- Subtle backgrounds for inactive tabs, disabled states, and secondary surfaces.
• Destructive -- Warning/danger color for delete buttons and error messages. Typically a shade of red.
• Border -- Color for borders around cards, inputs, dividers, and structural outlines.
• Input -- Border color specifically for form fields (text inputs, dropdowns, textareas).
• Ring -- Focus ring color for interactive elements during keyboard navigation. Important for accessibility.

How to Change Colors

1. Open the Theme tab in your page editor.
2. Scroll to the Colors section -- you'll see all 16 tokens in their three groups.
3. Click any color swatch to open the color picker.
4. Choose your color:
   • Color picker -- Select a hue, then adjust saturation and brightness visually.
   • Hex code -- Type a specific hex code (e.g., #00707a) for exact brand colors.
5. The live preview updates immediately as you adjust.
6. Click Save when you're happy.

Pro Tip: If you have brand colors as hex codes in a style guide, type them directly into the hex field -- it's faster and more accurate than matching visually.

Tips for Good Color Combinations

You don't need a design degree to create an appealing, accessible palette:

• Maintain high contrast between text and background. Dark text on light backgrounds (or vice versa) works well. Avoid low-contrast combos like light gray on white.
• Keep Primary bold and recognizable. It carries the most visual weight -- choose something distinct that draws attention to buttons and CTAs.
• Use Secondary and Accent sparingly. They should complement Primary, not compete with it.
• Test with real content. Colors look different with actual text, images, and product cards than they do in isolation.
• Consider accessibility. Aim for at least 4.5:1 contrast ratio between text and its background.

Pro Tip: Start with a preset theme close to your desired look, then adjust only the tokens you need. It's much easier than building a 16-color palette from scratch.

Annotated Page Reference

The diagram below shows a complete page with annotations for every area controlled by each color token. Use it as a reference when deciding which token to change.