Skip to main content
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 inputDefaultDrives
--theme-spacing8px--space-base → --space-*
--theme-font-size16px--font-size-base → --font-size-*
--theme-radius4px--radius-base → --radius-*

​
Space scale

TokenDefault
--space-22px
--space-44px
--space-66px
--space-88px
--space-1212px
--space-1616px
--space-2424px
--space-3232px
--space-3636px
--space-4848px

​
Font size scale

TokenDefault
--font-size-1212px
--font-size-1414px
--font-size-1616px
--font-size-2020px
--font-size-2424px
--font-size-3232px

​
Radius scale

TokenDefault
--radius-14px
--radius-28px
--radius-312px
--radius-414px
--radius-518px
--radius-full400px

​
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

@import "tailwindcss";
@import "@juo/customer-ui/design-tokens.css";
@import "@juo/customer-ui/tailwind-v4.css";
  • Spacing — p-8, gap-16, m-24, etc. — steps: 0, 2, 4, 6, 8, 12, 16, 24, 32, 36, 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}