Design System

Chanel

Component Visualization & Design Token Reference

Color Palette

Core Colors

Primary
#000000
Secondary
#4a4a4a
Accent
#D4AF37
Neutral
#f8f8f8

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 Eternal Elegance
text-3xl Timeless Luxury
text-2xl Haute Couture
text-xl Fine Jewelry Collection
text-lg The art of detail in every creation
text-base Craftsmanship passed down through generations
text-sm Where tradition meets innovation in perfect harmony
text-xs DISCOVER THE COLLECTION
mono const theme = 'chanel';

Spacing Scale

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

Border Radius

0 (none)
2px (sm)
4px (md)
6px (lg)
full

Shadows

shadow-sm
shadow-md
shadow-lg
shadow-gold

Components

Buttons

Card

Eternal N°5 Bracelet

18K white gold bracelet set with diamonds and one emerald-cut diamond. An iconic piece from the High Jewelry collection.

Form Input