Design System

Brand tokens, type, spacing — live aus @carrot/shared

Brand Colors

Orange
#FA7000

Primary brand color

Orange Soft
#FF8A2B

Hover / highlight

Orange Deep
#C85A00

Active / accessible accent

Paper
#FFFAF3

Warm off-white surface

Bone
#F7F1E8

Alternating section background

Ink
#0A0A0A

Primary text + dark surface

Green
#22C55E

Success · check-ins

Blue
#3B82F6

Info · DAU

Purple
#8B5CF6

Squad / pact accents

Amber
#F59E0B

Warning · pending

Typografie

Mega Aa
clamp(3.25rem, 13vw, 11.5rem)
Hero headlines
Display Aa
clamp(2.5rem, 8vw, 6rem)
Section headlines
H1 Aa
clamp(2.25rem, 6.5vw, 4.75rem)
Page titles
H2 Aa
clamp(1.875rem, 4.5vw, 3.5rem)
Section subheads
H3 Aa
clamp(1.375rem, 3vw, 2rem)
Card titles
Body L Aa
1.0625rem
Lead paragraphs
Body Aa
1rem
Default copy

Spacing

xs
4px
sm
8px
md
12px
lg
16px
xl
24px
2xl
32px
3xl
48px
4xl
64px

Buttons