Theme Design Tokens

The native checkout components do not carry their own colors. They read design tokens, a small set of CSS variables, and every version of your store can set its own values. Change color-primary and every button, link and focus ring that uses it follows. Tokens follow the daisyUI naming, so each color comes with a -content partner: the color used for text and icons drawn on top of it.

Where to edit

Admin → Versions → your version → Theme Configuration, a table of every token with an inline editor. Changes save automatically.
Ollie Studio → Theme tab, the same tokens grouped by purpose, with a live contrast check and an explicit Save changes button. Use this one when you want to see the result in the preview.

Theme Configuration tab — Versions → Theme Configuration

Studio Theme tab — The same tokens in Studio, with contrast ratings

The tokens

Colors

Values must be hex colors (#0061cc). Other notations are ignored by the color field.

Token	Used for
`color-primary` / `color-primary-content`	The main color of your store, and the content drawn on it
`color-secondary` / `color-secondary-content`	The secondary color and its content
`color-accent` / `color-accent-content`	The accent color and its content
`color-neutral` / `color-neutral-content`	Neutral dark color for not-saturated parts of the UI, and its content
`color-base-100`	Base surface color for blank backgrounds
`color-base-200`	Base color for darker shades, to create elevations
`color-base-300`	Base color for even darker shades, to create elevations
`color-base-content`	Content color on the base surfaces
`color-info` / `color-info-content`	Informative messages
`color-success` / `color-success-content`	Success messages
`color-warning` / `color-warning-content`	Warnings
`color-error` / `color-error-content`	Errors and destructive actions

Shape and size

Token	Used for	Accepted values
`radius-selector`	Corner radius of selectors: checkboxes, toggles, badges	`0px` to `16px` in 2px steps
`radius-field`	Corner radius of fields: buttons, inputs, selects, tabs	`0px` to `16px` in 2px steps
`radius-box`	Corner radius of boxes: cards, modals, alerts	`0px` to `16px` in 2px steps
`size-selector`	Base size for selectors	`3px` to `5px` in 0.5px steps
`size-field`	Base size for fields	`3px` to `5px` in 0.5px steps
`border`	Border width of all components	`1px` to `4px`

How saving works

In the Admin tab there is no Save button. Each edit is written to the version about a second after you stop typing, and the checkout picks it up on its next load. A failed save shows “Failed to save theme”; a successful one shows nothing. To go back to the template’s default for a token, delete the row with the trash icon. An empty token is not written to the checkout, so the template’s own CSS applies again.

Edit the predefined tokens inline in the table. Use Add Property only for custom tokens you type by hand.

How tokens reach the checkout

Every token becomes a CSS custom property on :root, prefixed with --. color-primary is available as var(--color-primary), radius-box as var(--radius-box), and so on. Custom components can use them directly, which keeps your components on-brand across versions without any code change:

styles.module.css

.banner {
  background: var(--color-primary);
  color: var(--color-primary-content);
  border-radius: var(--radius-box);
  border: var(--border) solid var(--color-base-300);
}

From JavaScript, useStoreInfo().theme returns the same tokens as a flat record keyed by the CSS variable name:

const { theme } = useStoreInfo();
const primary = theme?.["--color-primary"]; // "#0061cc" or undefined

Ollie Studio: edit the theme with a live preview and contrast checks
Fonts: the font is a version prop, not a token
Custom Icons: icons read --icon-fill and --icon-stroke from the same system

Overview

Start Here

AI Coding Agents

Core Concepts

Customization

Ollie Studio

Functions

CLI Reference

Ollie SDK

Analytics & Scripts

Tools & Tips

Product updates

Where to edit

The tokens

Colors

Shape and size

How saving works

How tokens reach the checkout

​Where to edit

​The tokens

​Colors

​Shape and size

​How saving works

​How tokens reach the checkout

​Related

Where to edit

The tokens

Colors

Shape and size

How saving works

How tokens reach the checkout

Related