Docs / Themes / Design tokens

Design tokens

tokens.ts is your design system in one file. The runtime emits it as CSS custom properties and merges the merchant’s accent colour in.

The scale

Tokens cover space, radius, shadow, font size, weight, line height and letter spacing. Author them once and reference them everywhere — a theme that hard-codes 16px in forty places is a theme nobody can adjust later.

export const tokens = {
  space:  { 1: "4px", 2: "8px", 4: "16px", 8: "32px" },
  radius: { sm: "4px", md: "8px", lg: "12px", full: "9999px" },
  font:   { body: "Inter, system-ui, sans-serif", display: "Fraunces, serif" },
  size:   { sm: "14px", base: "16px", xl: "20px", "4xl": "36px" },
};

How merchant branding arrives

The merchant picks one accent colour. The runtime derives a scale from it and exposes it alongside your tokens, so you style against a variable rather than a fixed value:

.cta {
  background: var(--brand-accent);
  color: var(--brand-accent-contrast);
  border-radius: var(--radius-md);
}