Design System

OBDS Starter — Design Tokens

Live reference for the neutral design system seeded into this starter. Type sizes render at their real clamp() values. Rebrand per client via divi5-site-startup, which also adds the global presets that bind these tokens to module defaults.

Colors
Primary#0073aa
Secondary#1a1a2e
Heading Text#000000
Body Textrgba(0,0,0,0.7)
Black#000000
White#ffffff
Bg Light#f5f5f5
Border Dark (Black @12%)rgba(0,0,0,0.12)
Body Text Light (White @90%)rgba(255,255,255,0.9)
Overlay Dark (Black @86%)rgba(0,0,0,0.86)
Type scale (fluid)
H1The quick brown foxclamp(1.75rem, 4.4975vw + 0.6254rem, 3.75rem)
H2The quick brown foxclamp(1.5rem, 2.2596vw + 0.9534rem, 2.5rem)
H3The quick brown foxclamp(1.25rem, 1.4122vw + 0.9085rem, 1.875rem)
H4The quick brown foxclamp(1.0625rem, 0.9831vw + 0.8155rem, 1.5rem)
H5The quick brown foxclamp(0.9375rem, 0.7007vw + 0.7588rem, 1.25rem)
H6The quick brown foxclamp(0.875rem, 0.2824vw + 0.8067rem, 1rem)
BodyThe quick brown foxclamp(0.875rem, 0.2824vw + 0.8067rem, 1rem)
Body SmallThe quick brown foxclamp(0.8125rem, 0.2824vw + 0.7442rem, 0.9375rem)
Spacing
space-xs10px
space-sm20px
space-md30px
space-lg60px
space-xl100px
space-fluidclamp(1.5rem, 6vw, 5.625rem)
Radius
radius-sm
4px
radius-md
8px
radius-lg
16px
radius-pill
500px