Customizing Colors

Leenkies uses a 16-token color system that gives you precise control over every visual element on your pages. Rather than picking colors for individual buttons or headings, you define a set of design tokens that are applied consistently across your entire page. This approach ensures that your pages always look cohesive, no matter how many blocks or elements you add.

Understanding the 16 Color Tokens

The color tokens are organized into three logical groups: Brand Colors, Surface Colors, and Utility Colors. Each token controls specific elements on your page, and every token has a clear purpose.

Brand Colors (6 tokens)

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

• Primary -- The main action color used for buttons, links, and key interactive elements. This is typically your brand's signature color. Choose a color that stands out against your background.
• Primary Foreground -- The text color used on top of Primary surfaces. For example, the text on a primary-colored button. This should have strong contrast against Primary for readability.
• Secondary -- A complementary color used for secondary buttons, tags, and less prominent interactive elements. It provides visual variety without competing with Primary.
• Secondary Foreground -- The text color displayed on Secondary surfaces.
• Accent -- A highlight color used for hover states, selected items, and subtle emphasis. It adds depth and interactivity cues to your design.
• Accent Foreground -- The text color used on Accent surfaces.

Surface Colors (8 tokens)

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

• Background -- The main page background color. This is the base layer that everything else sits on top of.
• Foreground -- The default text color used for headings, body text, and any content placed directly on the Background. Ensure strong contrast between Background and Foreground for readability.
• Card -- The background color for card elements such as product cards, appointment cards, and content containers. Cards typically have a slightly different shade than the page background to create visual separation.
• Card Foreground -- The text color used inside cards.
• Popover -- The background color for dropdown menus, tooltips, and floating panels.
• Popover Foreground -- The text color inside popovers and dropdowns.

Utility Colors (4 tokens)

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

• Muted -- Used for subtle backgrounds on inactive tabs, disabled states, and secondary surfaces that need to recede visually.
• Destructive -- A warning/danger color used for delete buttons, error messages, and other actions that require caution. This is typically a shade of red.
• Border -- The color for borders around cards, inputs, dividers, and other structural outlines.
• Input -- The border color specifically for form input fields such as text inputs, dropdowns, and textareas.
• Ring -- The focus ring color that appears around interactive elements when they receive keyboard focus. This is important for accessibility.

How to Change Colors

Changing any color token is straightforward:

1. Open the Theme tab in your page editor.
2. Scroll to the Colors section. You will see all 16 tokens organized into their three groups.
3. Click on the color swatch next to any token to open the color picker.
4. Choose your color using one of two methods:
   • Color picker -- Use the visual picker to select a hue, then adjust saturation and brightness. The picker provides a large color area for precise selection.
   • Hex code -- Type a specific hex code (e.g., #00707a) directly into the hex input field. This is ideal when you have exact brand colors defined in a style guide.
5. The live preview updates immediately as you change colors, so you can see the effect on your actual page content in real time.
6. Click Save when you are happy with the results.

Pro Tip: If you have brand colors defined as hex codes in a brand guide, type them directly into the hex field for pixel-perfect accuracy. This is faster than trying to match colors visually with the picker.

Tips for Good Color Combinations

Creating a visually appealing and accessible color scheme does not require a design degree. Follow these guidelines for reliable results:

• Maintain high contrast between text and background. Your Foreground color should be clearly legible against your Background color. Dark text on a light background or light text on a dark background both work well. Avoid low-contrast combinations like light gray text on a white background.
• Keep Primary bold and recognizable. Your Primary color carries the most visual weight on your page. Choose a color that represents your brand and is distinct enough to draw attention to buttons and calls to action.
• Use Secondary and Accent sparingly. These colors support Primary rather than competing with it. They should complement your Primary color without creating visual clutter.
• Test with real content. Colors can look different in isolation than they do with actual text, images, and product cards. Always preview your page with real content before committing to a color scheme.
• Consider accessibility. Visitors with color vision differences need sufficient contrast to read your content comfortably. Aim for a contrast ratio of at least 4.5:1 between text and its background.

Pro Tip: Start with a preset theme that is close to your desired look, then adjust only the tokens you need to change. This is much easier than building a 16-color palette from scratch, and the preset ensures your starting point is already well-balanced.

Annotated Page Reference

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