Design tokens

Semantic variables from Figma. Adjust the seed module to derive tokens dynamically. These tokens are the single source of truth shared by both kits — the Interaction Kit and the Brand Kit.

Colors

Format

Primary

Brand color and its on-surface content color.

theme-primaryoklch(54.6% 0.2152 262.9)

theme-primary-contentoklch(100.0% 0.0000 89.9)

Surfaces

Background layers for cards, sheets, and the page.

theme-base-100oklch(100.0% 0.0000 89.9)

theme-base-200oklch(96.7% 0.0029 264.5)

theme-base-300oklch(92.8% 0.0058 264.5)

theme-backgroundoklch(96.7% 0.0029 264.5)

Content

Text hierarchy from highest to lowest emphasis.

theme-base-contentoklch(21.0% 0.0059 285.9)

theme-base-content-700oklch(37.0% 0.0119 285.8)

theme-base-content-600oklch(44.2% 0.0146 285.8)

theme-base-content-400oklch(71.2% 0.0129 286.1)

theme-base-content-100oklch(100.0% 0.0000 89.9)

Neutrals & stroke

Absolute black/white and default border color.

theme-neutral-blackoklch(0.0% 0.0000 0.0)

theme-neutral-whiteoklch(100.0% 0.0000 89.9)

theme-stroke-100oklch(92.0% 0.0040 286.3)

Gradient

Mode-aware gradient endpoints (solid → transparent).

gradient-100oklch(100.0% 0.0000 89.9)

gradient-0oklch(100.0% 0.0000 89.9 / 0)

Primary opacity

Primary color at fixed alpha stops for highlights & focus rings.

primary-opacity-12oklch(54.6% 0.2152 262.9 / 0.12)

primary-opacity-24oklch(54.6% 0.2152 262.9 / 0.24)

primary-opacity-56oklch(54.6% 0.2152 262.9 / 0.56)

primary-opacity-72oklch(54.6% 0.2152 262.9 / 0.72)

Success

Positive feedback: background → fill → main → deep → stroke.

status-success-100oklch(98.2% 0.0181 155.8)

status-success-200oklch(92.5% 0.0806 156.0)

status-success-300oklch(72.3% 0.1920 149.6)

status-success-400oklch(39.3% 0.0896 152.5)

status-success-strokeoklch(87.1% 0.1363 154.4)

Error

Destructive / error: background → fill → main → deep → stroke.

status-error-100oklch(97.1% 0.0129 17.4)

status-error-200oklch(88.5% 0.0593 18.3)

status-error-300oklch(63.7% 0.2078 25.3)

status-error-400oklch(39.6% 0.1331 25.7)

status-error-strokeoklch(80.8% 0.1035 19.6)

Warning

Caution: background → fill → main → deep → stroke.

status-warning-100oklch(98.7% 0.0262 102.2)

status-warning-200oklch(97.3% 0.0693 103.2)

status-warning-300oklch(86.1% 0.1731 91.9)

status-warning-400oklch(42.1% 0.0897 57.7)

status-warning-strokeoklch(86.1% 0.1731 91.9)

Information

Informational: background → fill → main → deep → stroke.

status-info-100oklch(97.0% 0.0142 254.6)

status-info-200oklch(93.2% 0.0316 255.6)

status-info-300oklch(62.3% 0.1880 259.8)

status-info-400oklch(37.9% 0.1378 265.5)

status-info-strokeoklch(62.3% 0.1880 259.8)

Utility accents

Fixed colors for charts, badges, and category labels.

utility-1oklch(60.6% 0.2189 292.7)

utility-2oklch(69.6% 0.1491 162.5)

utility-3oklch(65.6% 0.2118 354.3)

utility-4oklch(70.5% 0.1867 47.6)

utility-5oklch(76.8% 0.2044 130.8)

Dimmer & overlays

Scrims, modals, and hover surfaces.

dimmer-minoroklch(0.0% 0.0000 0.0 / 0.2)

dimmer-defaultoklch(0.0% 0.0000 0.0 / 0.4)

dimmer-importantoklch(0.0% 0.0000 0.0 / 0.6)

dimmer-hover-50oklch(0.0% 0.0000 0.0 / 0.04)

dimmer-hover-100oklch(0.0% 0.0000 0.0 / 0.1)

dimmer-hover-200oklch(0.0% 0.0000 0.0 / 0.2)

Glass surface

The single sanctioned glass recipe (translucent fill + hairline border) used by the Surface primitive.

surface-glass-bgoklch(0.0% 0.0000 0.0 / 0.2)

surface-glass-borderoklch(100.0% 0.0000 89.9 / 0.12)

var(--bzv-color-{token})

Spacing

0px

1px

0.5

2px

4px

1.5

6px

8px

2.5

10px

12px

3.5

14px

16px

20px

24px

28px

32px

36px

40px

44px

48px

56px

64px

80px

96px

144px

4px

8px

12px

16px

20px

2xl

24px

3xl

32px

var(--bzv-spacing-{step})

Border radius

none0px

sm2px

DEFAULT4px

md6px

lg8px

xl12px

2xl16px

3xl24px

full9999px

var(--bzv-radius-{step})

Typography

Font family

sans'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif

mono'Anonymous Pro', 'Nanum Gothic Coding', monospace

display'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif

Line height

leading-312px

leading-416px

leading-520px

leading-624px

leading-728px

leading-832px

leading-936px

leading-1040px

Font weight

regular400Quick brown fox

medium500Quick brown fox

semibold600Quick brown fox

bold700Quick brown fox

extrabold800Quick brown fox

Shadows

2xl

inner

none

var(--bzv-shadow-{step})

Motion

Motion tokens are JS-only values for Framer Motion and CSS transitions.

import { motion, cssDurations, cssEasings } from '@buzzvil/design-library/tokens'