Heading

Design a heading component that can anchor a page or section title. Treat it as a reusable text style, not just a large line of copy. It should work for a landing page hero, a content section title, or a card heading without changing its basic rules.

Set the type scale, weight, line height, and spacing so the heading reads as the primary label in the area. Show how it behaves with short titles, longer titles, and titles that sit next to supporting text or actions. Keep the visual treatment consistent enough that the same heading style can be reused across the product.

Use real layout context. Place the heading in at least two UI states, such as a page header and a section block. Make the hierarchy obvious through size and spacing first, not decoration. If the heading competes with other content, the layout is wrong.

Infuse personality into your heading with a distinct typeface that reflects the character of the content it represents, setting the tone for the entire design.