Preview image. Unlock full-res
Brand type-ramp specimen showing four descending headline sizes (Play:5, Full Volume.) with monospaced TS labels and pixel values above hairline rules.
Summary
A type-scale specimen from a brand system: four rows of black grotesque headlines at descending sizes on light gray, each row annotated with a token name (TS9-TS6) and its exact pixel size in tiny monospace.
Visual description
Light gray ground divided into four horizontal bands, each opened by a full-width hairline rule. Under each rule sit two small monospaced annotations, a scale token ("TS9", "TS8", "TS7", "TS6") on the left and its size ("369.36px" down to "109.44px") indented right. Below each annotation a single sample line is set in a tight black grotesque: "Play:5", "Full Volume.", "Depth & Breadth", "Flat out or Upright", shrinking step by step down the page. Everything is left-aligned; the only contrast is scale.
Key takeaway
Documenting a type ramp as real product-flavored phrases rather than alphabets makes the scale feel like the brand in use. The monospace token-plus-pixel annotation over a hairline rule is a clean, engineer-friendly labeling convention.
Reuse notes
Template-worthy for design-system and brand-guideline typography pages, or any type-scale slide. Pairs well with token naming schemes (TS1-TS9) that map straight to code. Needs a typeface with presence at huge sizes; the decimal pixel values signal a mathematically derived scale, so keep them honest.
