Design System Preview
WHILL

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
WHILL Blue
#0075b8
CTA / lorem / lorem ipsum
Text
Dark Text
#353537
lorem ipsum dolor
Muted Blue-Gray
#b7c2cd
lorem / lorem ipsum
Semantic
Success
#16a34a
lorem / lorem
Danger
#dc2626
lorem / lorem
Warning
#d97706
lorem / lorem
Surface & Background
White
#ffffff
lorem ipsum
Light Surface
#fafafa
lorem / lorem ipsum dolor
Near Black
#252525
lorem ipsum dolor
Border
#d0d5da
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Hero H1
48px / 600 / line-height: 1.1 / letter-spacing: 0.02emlorem ipsum dolor
Model C2
48px / 700 / line-height: 1.0 / letter-spacing: 0.02emlorem
lorem ipsum dolor — Label H2
20px / 700 / line-height: 1.0 / letter-spacing: 0.02emlorem ipsum
lorem ipsum dolor — Subtitle H2
20px / 400 / line-height: 1.3 / letter-spacing: 0.02emlorem ipsum
CTA lorem ipsum dolor — P Large
24px / 700 / line-height: 1.17 / letter-spacing: 0.016em
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing. WHILL lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
20px / 400 / line-height: 1.4 / letter-spacing: 0.016emlorem
lorem ipsum — Base Body (16px). lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 1.5 / letter-spacing: 0.02em
lorem ipsum dolor / lorem — Small (13px)
13px / 700 / line-height: 1.4 / letter-spacing: 0.02em
03 / Product

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur

WHILL lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor

Model C2 lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem 18km lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum dolor sit amet consectetur. ABCabc 123

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
lorem ipsum
Secondary CTA
lorem ipsum
Danger
lorem ipsum dolor
Small CTA
05 / Cards

lorem ipsum dolor sit

Model C2

lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet.

lorem ipsum dolor

Model S

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor

Model F2

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor
06 / Forms

lorem ipsum dolor

lorem ipsum —border: #d0d5da, radius: 8px, height: 48px
lorem ipsum —border: #0075b8 (WHILL Blue)
lorem —border: #dc2626 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Card Shadow
3 lorem ipsum dolor
Dropdown
lorem ipsum dolor
Modal
lorem ipsum
Focus Ring
#0075b8 (WHILL Blue)
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale

4px
8px
16px
24px
48px
80px

Border Radius

4px
8px
40px
900px (pill)

Content Width

Container Max 1280px
Content Area 960px
Article Body 640px