The quality is genuinely retail-grade — our community noticed it immediately.
Body copy runs at a relaxed rhythm so long-form reading stays comfortable. It holds sixty characters a line on desktop and re-flows gracefully on phones.
The quality is genuinely retail-grade — our community noticed it immediately.
Body copy, soft text, hairlines and the action button all invert together, exactly like data-surface does on the coded landing.
One or two sentences that support the title and set up the content below.
One or two sentences that support the title and set up the content below.
One class per text element — each bundles family, size, weight, line height and letter spacing from the token layer, like a Figma text style. Never set those properties by hand: pick a class below, and add text-soft on top when the text should be muted. Sizes named “fluid” scale with the viewport; “static” stays fixed.
Headings — Saans display voice
body-lead — display-voiced intro paragraph for cards and section intros
heading-quiet — supporting headline in the body voice
Body — Suisse reading sizes
body-fluid-lg — large body, 18 to 26 across viewports. For statements and prominent supporting copy.
body-fluid-md — the default reading size, 16 to 22, relaxed leading. This is what body-p (the semantic paragraph class used across the site) resolves to.
body-fluid-sm — secondary descriptions and supporting notes, 14 to 16. Used by the pricing table’s feature descriptions.
body-static — pinned at 16px at every viewport. For UI copy and inputs, where zoom-stability matters more than editorial scale.
Labels — chrome and metadata
label-lg — 14px UI label
label-md — 13px UI label
label-sm — 12px UI label
label-xs — 11px UI label
Composed roles — label sizes with a fixed treatment
label-eyebrow — uppercase tracked kicker above headings
label-caption — fine print, captions and metadata (label-md at book weight)
text-soft — a color-only modifier: stack it on any text class for the muted tone, like this line.
text-medium — weight-only modifier (500). Stack it on any text class to emphasize a whole element, like this line.
text-semibold — weight-only modifier (600), the strongest emphasis in body copy.
To bold a few words inside a paragraph, select them and press Cmd/Ctrl+B (inline bold). To change a whole element, keep its base class and stack a modifier (text-medium, text-semibold, text-soft) — never edit the base class or create a one-off copy.
Weight modifiers — Suisse cuts (work on any text)
text-light — 300
text-regular — 400, the body default (useful as a reset)
text-book — 450, Suisse’s book cut (also the display-tertiary rung)
text-bold — 700, the heaviest cut