BLVD Design System
Tokens come from tokens/blvd.tokens.json; edit there and run npm run tokens. Rules live in DESIGN_SYSTEM.md.
Colour
studio
Light surfaces: contributor portal, admin, editor
ink
#1A1A1C
ink-soft
#2A2A2C
gold
#C4973A
gold-deep
#B08530
gold-muted
#B8A46A
gold-ink
#7A5A14
taupe
#6E6354
taupe-light
#B0A898
taupe-pale
#C0B8AC
line
#E5E0D8
line-strong
#D9D4CC
paper
#F0EBE3
paper-soft
#FAF8F5
paper-warm
#F7F4F0
paper-cool
#F9F9FB
ash
#8A8A8A
ash-dark
#555555
street
Dark surfaces: public site
night
#0B1011
forest
#0B100D
midnight
#0A0D12
onyx
#0B1312
abyss
#070D0C
soot
#080D0D
smoke
#162122
rule-dark
#12211E
pine
#35463E
graphite
#232328
graphite-light
#4B4B52
brass
#C9B98A
champagne
#CDB484
cream
#F2F0E6
ivory
#EFEDE6
silver
#D9D9D9
mint
#D2E4DD
sage
#9AA79F
mist
#AEB7B1
fog
#A6B0AE
moss
#7E9186
lichen
#717F7C
seafoam
#7FADA4
bronze
#4F4022
section hue
Hues behind the section colours
harbor
#3D6B9E
ochre
#C9A227
lagoon
#0F9D9D
ember
#E1701A
amethyst
#6B5B95
pewter
#9BA3AB
gunmetal
#3A3F44
section tint
Pillar tints (BLVD cards, section pages)
tint-strip
#26356E
tint-view
#7A6528
tint-boulevardiers
#0E4A3C
tint-blueprint
#7C441A
tint-way
#3A2E63
tint-subway
#36404A
Sections
Type scale
text-micro · 8px
Stories from the Boulevard of Modern Work
text-tiny · 9px
Stories from the Boulevard of Modern Work
text-label · 10px
Stories from the Boulevard of Modern Work
text-caption · 11px
Stories from the Boulevard of Modern Work
text-meta · 12px
Stories from the Boulevard of Modern Work
text-small · 13px
Stories from the Boulevard of Modern Work
text-body-sm · 14px
Stories from the Boulevard of Modern Work
text-body · 15px
Stories from the Boulevard of Modern Work
text-body-lg · 16px
Stories from the Boulevard of Modern Work
text-lead · 18px
Stories from the Boulevard of Modern Work
text-subhead · 20px
Stories from the Boulevard of Modern Work
text-title-sm · 22px
Stories from the Boulevard of Modern Work
Fonts
font-heading
Cormorant Garamond — Aa Bb 123
font-body
Inter — Aa Bb 123
font-display
Cormorant Garamond — Aa Bb 123
font-mono
JetBrains Mono — Aa Bb 123
Label tracking
tracking-label-sm · 0.15em
The Boulevard
tracking-label · 0.2em
The Boulevard
tracking-label-md · 0.25em
The Boulevard
tracking-label-lg · 0.3em
The Boulevard
tracking-label-xl · 0.4em
The Boulevard
Components
Eyebrow
Default · label / md
caption / sm
caption / 2xl, gold
tiny / lg
Buttons
LoadingState
ErrorState
This page couldn't load.