BDP Styleguide
Every design token from theme.json, rendered with core blocks. Reference only — not linked in navigation.
Colors
Semantic
text-default
#07284c
text-hover
#6a7e94
text-active
#78bf26
text-disabled
#9ca9b7
surface-canvas
#ffffff
surface-subtle
#f4f6f8
surface-overlay
#212529cc
surface-invert-primary
#78bf26
surface-invert-secondary
#07284c
surface-accent
#7038af
Blue
blue-900
#07284c
blue-800
#395370
blue-700
#516982
blue-600
#6a7e94
blue-500
#8394a6
blue-400
#9ca9b7
blue-300
#b5bec9
blue-200
#cdd4db
blue-100
#f4f6f8
Green
green-900
#4e781f
green-800
#5a8b22
green-700
#68a324
green-600
#78bf26
green-500
#96cf55
green-400
#a5d86a
green-300
#c8eb9f
green-200
#e4f2d4
green-100
#f2f9e9
Teal
teal-900
#1a6652
teal-800
#337765
teal-700
#4c8879
teal-600
#66998c
teal-500
#80aa9f
teal-400
#99bbb2
teal-300
#b2ccc5
teal-200
#ccddd9
teal-100
#e6eeec
Purple
purple-900
#7038af
purple-800
#804eb8
purple-700
#9064c1
purple-600
#a07aca
purple-500
#b090d2
purple-400
#bfa7db
purple-300
#cfbde4
purple-200
#dfd3ed
purple-100
#f9f4ff
Neutral
neutral-900
#000000
neutral-800
#3b3b3b
neutral-700
#3a3a3a
neutral-600
#575757
neutral-500
#696969
neutral-400
#cbcbcb
neutral-300
#e1e1e1
neutral-200
#eeeeee
neutral-100
#ffffff
Red
red-300
#c22014
Typography
Sans: Lato 400 (+700, 400 italic). Display serif: Playfair Display 400.
Display SM — 64px
The quick brown fox jumps over the lazy dog
Heading LG / H1 — 32px
The quick brown fox jumps over the lazy dog
Heading MD / H2 — 24px
The quick brown fox jumps over the lazy dog
Heading SM / H3 — 20px
The quick brown fox jumps over the lazy dog
Heading XS / H4 — 16px
The quick brown fox jumps over the lazy dog
Body LG — 20px
The quick brown fox jumps over the lazy dog
Body MD — 16px
The quick brown fox jumps over the lazy dog
Body SM — 14px
The quick brown fox jumps over the lazy dog
Body XS — 12px
The quick brown fox jumps over the lazy dog
Display Serif — Playfair Display 64px
The quick brown fox jumps over the lazy dog
Native heading elements (H1–H4 global styles)
Heading one
Heading two
Heading three
Heading four
Spacing scale
space-0 — 0
space-25 — 1px
space-50 — 2px
space-100 — 4px
space-200 — 8px
space-300 — 12px
space-400 — 16px
space-500 — 20px
space-600 — 24px
space-700 — 28px
space-800 — 32px
space-900 — 36px
space-1000 — 40px
space-1100 — 44px
space-1200 — 48px
space-1300 — 52px
space-1400 — 56px
space-1500 — 60px
space-1600 — 64px
space-1700 — 68px
space-1800 — 72px
space-1900 — 76px
space-2000 — 80px
space-2100 — 84px
space-2400 — 96px
space-2500 — 100px
Buttons & links
Body text with a default link — underlined, text-default (#07284c). Hover shows blue-700 (#516982), active shows blue-800 (#395370), focus keeps text-default with a green-700 focus box. Interactive states: verify in browser.
Radii & shadow
radius-none
radius-sm
radius-md
radius-lg
radius-xlg