Design Tokens Reference

What Are Design Tokens?

Design tokens are the atomic building blocks of a design system. They store visual design decisions — colors, fonts, spacing, etc. — as named, platform-agnostic values. Instead of scattering #2563eb across 47 files, you define it once as--color-primary and reference it everywhere.

YuBild takes this further: you configure tokens visually, and YuBild generates them asCSS variables, Tailwind config values, orlibrary-specific theme objects — all from a single source of truth.

Colors

The most impactful token category. Defines your entire brand palette and how every component looks.

Semantic Color Roles

Auto-Generated Color Scales

When you set a base color (e.g., primary = #2563eb), YuBild generates11 shade variants from 50 (lightest) to 950 (darkest):

/* Primary = #2563eb */
--primary-50:  #eff6ff;   /* Very light blue, backgrounds */
--primary-100: #dbeafe;   /* Light tint, hover states */
--primary-200: #bfdbfe;   /* Lighter shade */
--primary-300: #93c5fd;   /* Medium light */
--primary-400: #60a5fa;   /* Medium */
--primary-500: #3b82f6;   /* Base shade (close to input) */
--primary-600: #2563eb;   /* ← Your base color */
--primary-700: #1d4ed8;   /* Darker, active states */
--primary-800: #1e40af;   /* Dark, text on light */
--primary-900: #1e3a8a;   /* Very dark */
--primary-950: #172554;   /* Darkest, high contrast */

Each shade also gets an accessible contrast color calculated based on luminance. Light shades (50-400) get dark contrast text, dark shades (500-950) get white text. This ensures WCAG AA compliance when using any shade as a background.

Typography

Typography tokens control every aspect of text rendering across your design system.

Font Families

Font Size Scale

The default type scale follows a modular ratio:

Spacing

Spacing tokens define the rhythm of your layout. YuBild uses a base-unit system where all spacing values are multiples of a base unit:

Shadows

Shadow tokens define elevation levels. Each intensity preset generates 6 shadow values:

Border Radius

Controls the corner rounding of all components. The base value propagates to derived sizes:

/* Example: border-radius = "lg" (8px) */
--radius-base: 8px;
--radius-sm:   4px;    /* base / 2, min 2px */
--radius-lg:   16px;   /* base * 2 */
--radius-full: 9999px; /* always full circle */

Borders

Configures default border width. The border color comes from your colorBorder token. Width options: thin (1px), normal (1.5px), thick (2px), heavy (3px).

Effects

Motion

Animation tokens control the feel of all transitions and animations:

• Speed: instant (0ms), fast (100ms), normal (200ms), relaxed (300ms), slow (500ms)
• Easing: ease, ease-in, ease-out, ease-in-out, linear, spring

These apply globally to hover effects, menu animations, accordion transitions, dialog entrances, tooltip appearances, and any other interactive state change.

Focus & Accessibility

Focus tokens ensure keyboard users can see where they are in the interface:

• Ring Width — Outline thickness: 1px (subtle), 2px (standard), 3px (prominent), 4px (high visibility)
• Ring Offset — Gap between element edge and ring: 0px (flush), 1px, 2px, 3px, 4px

The ring color comes from your colorRing token. Together, these three values produce the focus outline: outline: [width] solid [color]; outline-offset: [offset];

Z-Index

Z-index tokens prevent the common problem of arbitrary z-index: 9999 values scattered across your codebase. YuBild defines named layers:

Flat uses minimal values for simple apps. Normal is the standard for most applications. Elevated provides wide gaps between layers for complex UIs with nested overlays (e.g., a tooltip inside a modal on top of a sidebar).