Dior

Component Visualization & Design Token Reference

Color Palette

Core Colors

Primary
#000000
Secondary
#52525b
Accent
#C9A94C
Neutral
#fafafa

Semantic Colors

Success
#22c55e
Warning
#f59e0b
Error
#ef4444
Info
#3b82f6

Neutral Scale (Zinc)

Zinc 50
#fafafa
Zinc 100
#f4f4f5
Zinc 200
#e4e4e7
Zinc 300
#d4d4d8
Zinc 400
#a1a1aa
Zinc 500
#71717a
Zinc 600
#52525b
Zinc 700
#3f3f46
Zinc 800
#27272a
Zinc 900
#18181b

Typography

text-4xl The quick brown fox
text-3xl The quick brown fox
text-2xl The quick brown fox
text-xl The quick brown fox
text-lg The quick brown fox jumps over the lazy dog
text-base The quick brown fox jumps over the lazy dog
text-sm The quick brown fox jumps over the lazy dog
text-xs The quick brown fox jumps over the lazy dog
mono const theme = 'dior';

Spacing Scale

4px
8px
12px
16px
24px
32px
48px
64px

Border Radius

2px (sm)
4px (md)
6px (lg)
8px (xl)
full

Shadows

shadow-sm
shadow-md
shadow-lg

Components

Buttons

Card

Haute Couture

A sample card component showcasing the elegant Dior theme styling with refined typography and subtle details.

Form Input