Skip to main content
Vlad

Design System

Internal UI playground documenting design tokens and reusable components

This page showcases the design system powering this website. Explore design tokens, component APIs, accessibility features, and code examples.

Color Tokens

Semantic Colors

Theme-aware color tokens that adapt to light/dark mode

Background
--background

Main background color

Foreground
--foreground

Primary text color

Card
--card

Card background color

Card Foreground
--card-foreground

Card text color

Primary
--primary

Primary brand color

Primary Foreground
--primary-foreground

Text on primary

Secondary
--secondary

Secondary color

Secondary Foreground
--secondary-foreground

Text on secondary

Muted
--muted

Muted background

Muted Foreground
--muted-foreground

Muted text

Accent
--accent

Accent color

Accent Foreground
--accent-foreground

Text on accent

Destructive
--destructive

Error/destructive actions

Destructive Foreground
--destructive-foreground

Text on destructive

Border
--border

Border color

Input
--input

Input border color

Ring
--ring

Focus ring color

Color Palette

Extended color palette for additional use cases

Gray

50
gray-50
#fafafa
100
gray-100
#f5f5f5
200
gray-200
#e5e5e5
300
gray-300
#d4d4d4
400
gray-400
#a3a3a3
500
gray-500
#737373
600
gray-600
#525252
700
gray-700
#404040
800
gray-800
#262626
900
gray-900
#171717
950
gray-950
#0a0a0a

Amber

50
amber-50
#fffbeb
100
amber-100
#fef3c7
200
amber-200
#fde68a
300
amber-300
#fcd34d
400
amber-400
#fbbf24
500
amber-500
#f59e0b
600
amber-600
#d97706
700
amber-700
#b45309
800
amber-800
#92400e
900
amber-900
#78350f
950
amber-950
#451a03

Spacing Tokens

Spacing Scale

4px base unit spacing system. Use Tailwind classes like p-4, gap-6, space-y-8

Spacing 0.5
0.125rem (2px)

Tight spacing

p-0.5 | gap-0.5 | space-y-0.5
Spacing 1
0.25rem (4px)

Base unit

p-1 | gap-1 | space-y-1
Spacing 2
0.5rem (8px)

Small spacing

p-2 | gap-2 | space-y-2
Spacing 3
0.75rem (12px)

Compact spacing

p-3 | gap-3 | space-y-3
Spacing 4
1rem (16px)

Standard spacing

p-4 | gap-4 | space-y-4
Spacing 5
1.25rem (20px)

Medium spacing

p-5 | gap-5 | space-y-5
Spacing 6
1.5rem (24px)

Comfortable spacing

p-6 | gap-6 | space-y-6
Spacing 8
2rem (32px)

Large spacing

p-8 | gap-8 | space-y-8
Spacing 10
2.5rem (40px)

Extra large spacing

p-10 | gap-10 | space-y-10
Spacing 12
3rem (48px)

Section spacing

p-12 | gap-12 | space-y-12
Spacing 16
4rem (64px)

Major section spacing

p-16 | gap-16 | space-y-16
Spacing 20
5rem (80px)

Hero spacing

p-20 | gap-20 | space-y-20
Spacing 24
6rem (96px)

Large section spacing

p-24 | gap-24 | space-y-24

Visual Comparison

4px
8px
12px
16px
24px