Type Scale

The component mirrors the exact hierarchy already documented in the foundation

Display XL

Creative Systems For Digital Products

<Typography variant="display-xl">
  Creative Systems For Digital Products
</Typography>

Display L

Design Language With Strategic Weight

<Typography variant="display-l">
  Design Language With Strategic Weight
</Typography>

Heading H1

Product Storytelling For Interfaces

<Typography variant="h1">
  Product Storytelling For Interfaces
</Typography>

Heading H2

Consistent Typography Drives Clarity

<Typography variant="h2">
  Consistent Typography Drives Clarity
</Typography>

Heading H3

Foundational Hierarchy

<Typography variant="h3">
  Foundational Hierarchy
</Typography>

Heading H4

Section Titles And Internal Modules

<Typography variant="h4">
  Section Titles And Internal Modules
</Typography>

Body XL

Use larger body text for strong introductory statements and framing copy inside sections.

<Typography variant="body-xl">
  Use larger body text for strong introductory statements and framing copy inside sections.
</Typography>

Body M

This is the standard reading size for product descriptions, usage notes, and explanatory content.

<Typography variant="body-m">
  This is the standard reading size for product descriptions, usage notes, and explanatory content.
</Typography>

Body S

Smaller body text works for supporting notes, secondary information, and denser UI descriptions.

<Typography variant="body-s">
  Smaller body text works for supporting notes, secondary information, and denser UI descriptions.
</Typography>

Label M

Portfolio · Service · Tool Stack

<Typography variant="label-m">
  Portfolio · Service · Tool Stack
</Typography>

Caption

Smallest text layer for metadata, helper notes, and contextual hints.

<Typography variant="caption">
  Smallest text layer for metadata, helper notes, and contextual hints.
</Typography>

Studio Contexts

Examples of how the type scale should be used in portfolio, service, and documentation structures

Portfolio Hero

Digital Product With Clear Narrative

Use large display styles when the section needs immediate narrative impact.

Service Section

Design Systems With Product Depth

Use heading and body combinations to keep offer descriptions structured and readable.

Documentation

Implementation Notes

Small supporting text is reserved for metadata, constraints, and secondary guidance.

<Typography variant="display-l">Portfolio headline</Typography>
<Typography variant="h3">Service title</Typography>
<Typography variant="body-m">Section explanation</Typography>

Content Patterns

Recommended pairings to preserve hierarchy inside sections and cards

Hero

Strategy And Interface Working As One System

Pair a display style with larger body text when introducing flagship sections or case-study intros.

Section

Product Architecture

This is the standard pairing for most internal section content in the design system.

Card

Tooling

shadcn/ui Integration

Cards should stay compact, straight-edged, and typographically disciplined.

Interactive Demo

Preview the type scale with different alignments and emphasis

Variant

Alignment

Tone

Typography should stay consistent across every section, card, and component of the design system.

Usage

Import, variants, and consistency rules for the design system

Import

import { Typography } from "@/components/typography"

Basic Usage

<Typography variant="h2">Section title</Typography>
<Typography variant="body-m">Supporting description</Typography>
<Typography variant="caption">Metadata</Typography>

Available Variants

display-xl, display-l, h1, h2, h3, h4, body-xl, body-m, body-s, label-m, caption, lead, muted, code.

Consistency Rule

Any new styleguide page or component showcase should derive its text hierarchy from this component and from the Design Tokens typography scale.

Inside Sections

Use display and heading variants for structure, body variants for explanations, and label/caption variants for metadata. Internal elements remain straight-edged.

Accessibility Notes

Keep semantic HTML aligned with the content meaning. Use headings in order, avoid fake heading jumps, and preserve readable contrast for muted text.