Design tokens - Developer documentation

All tokens are defined on :root, :host so they work in both regular DOM and Shadow DOM. CSS custom properties inherit through Shadow DOM boundaries, so --theme-* overrides set on :root re-theme every <juo-*> component automatically.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@juo/customer-ui@next/dist/design-tokens.css" />

Or import in CSS:

@import "@juo/customer-ui/design-tokens.css";

Base units

Theme input	Default	Drives
`--theme-spacing`	`8px`	`--space-base` → `--space-*`
`--theme-font-size`	`16px`	`--font-size-base` → `--font-size-*`
`--theme-radius`	`4px`	`--radius-base` → `--radius-*`

Space scale

Token	Default
`--space-2`	2px
`--space-4`	4px
`--space-6`	6px
`--space-8`	8px
`--space-12`	12px
`--space-16`	16px
`--space-24`	24px
`--space-32`	32px
`--space-36`	36px
`--space-48`	48px

Font size scale

Token	Default
`--font-size-12`	12px
`--font-size-14`	14px
`--font-size-16`	16px
`--font-size-20`	20px
`--font-size-24`	24px
`--font-size-32`	32px

Radius scale

Token	Default
`--radius-1`	4px
`--radius-2`	8px
`--radius-3`	12px
`--radius-4`	14px
`--radius-5`	18px
`--radius-full`	400px

Color palettes

tint — --tint-{shade} — shades: 25, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900
success — --success-{shade} — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
warning — --warning-{shade} — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
error — --error-{shade} — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
info — --info-{shade} — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
callout — --callout-{shade} — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
accent — --accent-{shade} — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, white, black, contrast
secondary — --secondary-{shade} — shades: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, white, black
neutral — --color-neutral-{shade} — shades: 0, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1000

--color-neutral-* is an alias of the tint palette and automatically inherits warm/cold/custom tint behavior driven by data-tint.

Customization

Override --theme-* tokens on :root to restyle all <juo-*> components globally. No custom attributes or build steps required.

:root {
  /* Spacing density */
  --theme-spacing: 6px;

  /* Border radius */
  --theme-radius: 0px;

  /* Brand/accent color */
  --theme-accent-700: oklch(42% 0.18 265);
  --theme-accent-600: oklch(52% 0.20 265);
  --theme-accent-500: oklch(60% 0.22 265);

  /* Background tint */
  --theme-tint-100: oklch(94% 0.005 265);
  --theme-tint-200: oklch(89% 0.008 265);
}

Tailwind preset

Tailwind v4
Tailwind v3

@import "tailwindcss";
@import "@juo/customer-ui/design-tokens.css";
@import "@juo/customer-ui/tailwind-v4.css";

// tailwind.config.cjs
module.exports = {
  presets: [require("@juo/customer-ui/tailwind-v3")],
};

Spacing — p-8, gap-16, m-24, etc. — steps: 2, 4, 6, 8, 12, 16, 24, 32, 48
Radii — rounded-0, rounded-1, rounded-2, rounded-3, rounded-4, rounded-5, rounded-full, rounded-card-1, rounded-card-2, rounded-card-3, rounded-thumbnail, rounded-buttons
Font sizes — text-12, text-14, text-16, text-20, text-24, text-32
Colors — all palettes above as bg/text/border/ring-{palette}-{shade}

​Base units

​Space scale

​Font size scale

​Radius scale

​Color palettes

​Customization

​Tailwind preset