Design Tokens

The foundation of our design system. All tokens are WCAG-compliant and documented below.

Grayscale (Zinc)

Our primary color palette. Dark backgrounds, all contrast ratios optimized for zinc-600 backgrounds.

ZINC 950

#09090b

--zinc-950

Contrast: dark

ZINC 900

#18181b

--zinc-900

Contrast: 1.1:1

ZINC 800

#27272a

--zinc-800

Contrast: 1.4:1

ZINC 700

#3f3f46

--zinc-700

Contrast: 2.0:1

ZINC 600

#52525b

--zinc-600

Contrast: 2.7:1

ZINC 500

#71717a

--zinc-500

Contrast: 4.0:1

ZINC 400

#a1a1aa

--zinc-400

Contrast: 6.5:1

ZINC 300

#d4d4d8

--zinc-300

Contrast: 10.3:1

ZINC 200

#e4e4e7

--zinc-200

Contrast: 12.5:1

ZINC 100

#f4f4f5

--zinc-100

Contrast: 15.1:1

ZINC 50

#fafafa

--zinc-50

Contrast: 17.4:1

Status Colors

Semantic colors for feedback, warnings, errors, and interactive elements. All colors meet minimum contrast requirements.

Success

#22C55E5.0:1

Warning

#F59E0B3.0:1

Error

#EF44444.6:1

Info

#3B82F64.5:1

Purple

#8B5CF64.5:1

Orange

#F973163.4:1

Typography Scale

A clear typography scale with consistent line heights. Subset from a system of sizes.

Text (size-3xl)32px line-height: 40px

The quick brown fox jumps over the lazy dog

Text (size-2xl)24px line-height: 32px

The quick brown fox jumps over the lazy dog

Text (size-xl)20px line-height: 28px

The quick brown fox jumps over the lazy dog

Text (size-lg)16px line-height: 24px

The quick brown fox jumps over the lazy dog

Text (size-md)14px line-height: 20px

The quick brown fox jumps over the lazy dog

Text (size-base)13px line-height: 20px

The quick brown fox jumps over the lazy dog

Text (size-sm)12px line-height: 16px

The quick brown fox jumps over the lazy dog

Text (size-xs)10px line-height: 14px

The quick brown fox jumps over the lazy dog

Font FamilyInter, -apple-system, sans-serif

Line Heights1.25 (headings), 1.5 (body)

Letter Spacing-0.025em (display), normal (body)

Spacing Scale

Consistent spacing values based on a 4px grid system.

space-00px

space-14px

space-28px

space-312px

space-416px

space-520px

space-624px

space-832px

space-1040px

space-1248px

space-1664px

Border Radius

Consistent corner radius values for different UI elements.

radius-none0px

radius-sm2px

radius-md4px

radius-lg8px

radius-xl12px

radius-full9999px

WCAG Compliance

WCAG 2.1 AAColor Contrast Standards

• Text contrast: Minimum 4.5:1 for normal text, 3:1 for large text (18pt+)
• Focus indicators: 3px outline with 3:1 contrast against background
• Interactive elements: All interactive elements meet WCAG AA (4.5:1 minimum)
• Color independence: Information conveyed by color is also available through text or icons