How to customize your branding

How to customize your branding

Catalog styling loads in three layers, in this order: the base Kenii framework, then your Branding settings, then your Custom CSS. Each layer can override the one before it.

Set brand colors

1. Open Settings > Branding.
2. Under Brand Colors, set Primary Color, Secondary Color, and Accent Color as hex values (for example, #7C3AED).
3. Under Extended Colors, set Text Color, Background Color, and Link Color if you need to override them from their defaults.
4. Click Save.

If a color swatch shows a contrast warning, that color may not meet the 4.5:1 minimum contrast ratio for body text on white. It’s still fine to use for backgrounds and fills.

Set fonts

1. Open Settings > Branding.
2. Under Typography, pick a Heading Font and Body Font from the Google Fonts picker.
3. Click Save.

Add custom CSS

Use this for styling changes the color and font settings don’t cover.

1. Open Settings > Custom CSS.
2. Paste your CSS into the editor. To override a specific token, target :root (for example, :root { --kenii-primary: #a6192e; }).
3. Click View Base Framework CSS to see the full default stylesheet as a reference, and Copy Base CSS to copy a rule from it to override.
4. Click Save.

Custom CSS loads after the base framework and your Branding settings, so anything you add here wins.

If you’re moving custom CSS between sites, use Export (Copy) to copy the current CSS, or Import (.css) to load a .css file into the editor. Clear empties the box.

Related reference

• CSS tokens, the full list of --kenii-* tokens you can override.
• Settings, kenii_brand_primary, kenii_brand_secondary, kenii_brand_accent, kenii_brand_text_color, kenii_brand_bg_color, kenii_brand_link_color, kenii_brand_heading_font, kenii_brand_body_font, kenii_custom_css.