Typography

Poppins, self-hosted. Weights 300–600. The ladder is the contract — use the token, not the number.

Display specimen

built by

stephen

Type scale

displayclamp 2.8–4.2remHero titles
3xl~50px · 3.157remSection display
2xl~38px · 2.369remPage heading
xl~28px · 1.777remSection heading
lg~21px · 1.333remSubheading / large body
md18px · 1.125remLead paragraph. Comfortable reading size for intro copy and lists.
base16px · 1remDefault body text. Poppins 300 is the workhorse weight for longer reading.
sm14px · 0.875remSmall body, captions, tertiary info.
xs~12.5px · 0.78remmeta · labels · eyebrows

Weight ladder · the contract

displayweight 300stephen — hero lockup, oversized
titleweight 400Page titles sit here
headingweight 500Section headings
subheadingweight 500Subheadings / kickers
emphasisweight 500labels & meta
mediumweight 500UI labels, buttons, controls
regularweight 400Standard UI text.
bodyweight 300Long-form paragraphs live here — the light workhorse.

Weights 100, 200, 700, 800, 900 and italics ship with the system but are off-limits for brand use. Don't reach for them without a reason.

Tokens

--bbs-font-bodyPoppins (self-hosted), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif
--bbs-lh-body1.55 — comfortable reading line-height for paragraphs.
--bbs-lh-snug1.35 — headings and short blocks.
--bbs-lh-tight1.08 — display and hero lockups.
--bbs-tracking-capseyebrows · kickers · meta