Full type hierarchy spec with sample layout

Summary

A dark documentation page that annotates the brand's full type hierarchy, mapping each role (eyebrow, headline, sub-headline, body, small body, label, CTA) onto a single worked example layout.

Visual description

Near-black charcoal background. A thin running header sets "HIERARCHY - FULL" top-left, "TYPOGRAPHY" center, "BRAND GUIDELINES" top-right in tiny tracked mono caps, on a hairline rule. A short body note explains the map. Down the left edge a column of tiny mono labels names each tier: EYEBROW, HEADLINE, SUB-HEADLINE, BODY, SMALL BODY, LABEL, CALL TO ACTION. The right two-thirds is a real sample: a small "WHY MASH?" eyebrow over an oversized cream headline "Flexible, Instant, And Frictionless Monetization & Donations", a sub-headline "Any amount. No minimums.", two paragraphs of body and small body, a dated label, and a dark pill "Start earning" CTA button. A running footer carries the deck slug at far right.

Key takeaway

Documenting type hierarchy by labeling one believable layout rather than an abstract scale, so every tier is shown in context and at its real relationship to the others. The tiny mono labels in the margin double as a legend without crowding the sample.

Reuse notes

A strong template page for any brand or design-system guideline that needs to communicate a full text hierarchy at once. Reach for it when an abstract type ramp would feel disconnected from real use. Works best on a dark surface where the cream headline can dominate; swap the sample copy for the project's own voice.