Typography hierarchy, web and headline scale

Dark type-hierarchy slide annotating an H1 headline, sub-headlines, body copy, lime buttons, and nav label, with the font and case spec labeled in both margins.

Styleeditorial, dark-mode, technical, minimal

Colorlight, dark, high-contrast, vibrant

Typesans-serif, oversized, all-caps, mixed-serif-sans

Moodprofessional, technical, bold

Elementsdiagram, button-primary, button-secondary, logo

Tagstypography, type-hierarchy, type-scale, h1-h2-h3, body-copy, buttons, nav-label, annotated, margin-labels, lime-button, running-footer

Palette

#F2F2EF

#1E1B2E

#D4F500

#FFFFFF

Summary

The type-hierarchy page: a live H1-to-body specimen on dark navy, each level annotated in the left margin with its role and in the right margin with its exact font, weight, and case.

Visual description

Left third is pale off-white with the running header ("VISUAL ELEMENTS", bold "Typography"), a "Web Use" paragraph, and a "Technical Specifications" block with a numbered install checklist, all in serif. The right two-thirds sits on dark navy and shows the hierarchy as real text: a huge white H1 "Midwestern creativity is limitless.", an H2 "About Us", an H3 "Mission", a justified body paragraph, two pill buttons (one filled lime "About Arts Midwest", one lime-outline "Taxonomy"), and an all-caps "NAVIGATION ITEMS" label. Small left-margin tags name each level ("H1 / Headlines", "H2 / Sub-Headlines", "H3 / In-Text Headlines", "Body Copy", "Buttons / Call-to-Action", "All Caps Font"); matching right-margin tags name the exact spec ("Epilogue Regular Sentence Case", "Epilogue Light", "Epilogue Semi Bold", "Newsreader Light", etc.). The Arts Midwest logo runs bottom-left.

Key takeaway

Annotating a real, rendered type specimen in both margins at once: the role on the left, the precise font/weight/case on the right. Showing buttons and nav labels alongside the headline scale makes it a working UI type sheet, not just a print hierarchy.

Reuse notes

An excellent template for the web/UI typography page of a brand or design system. The dual-margin annotation on a live specimen is directly reusable; including buttons and nav labels makes it bridge brand and product. Dark panel keeps the white specimen and lime buttons crisp.