Foundations

Type

IBM Plex Sans, Mono, and Serif, loaded from Google Fonts in wireframe.css. Use the HTML element directly for headings (h1–h6) and paragraphs (p); use the utility classes for the rest.

Headings
h1 · Heading 140px · weight 600
tracking −.03emPage title, hero headline

[Page title or hero headline lorem ipsum]

h2 · Heading 228px · weight 600
tracking −.02emSection heading

[Section heading lorem ipsum sit]

h3 · Heading 320px · weight 600
tracking −.015emSubsection, card title

[Subsection or card title lorem ipsum]

h4 · Heading 416px · weight 600
tracking −.01emMinor heading, label group

[Minor heading or grouped label]

h5 · Heading 513px · weight 500Small heading, sidebar title
[Small heading or sidebar title]
h6 · Eyebrow / Label12px · mono · uppercase
tracking +.14emCategory label, section eyebrow
Category · Section Label
Body & Utility
p · Paragraph15px · weight 400
line-height 1.65Body copy, descriptions

[Body paragraph text. Describe the section or feature here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.]

.lead · Lead Paragraph18px · weight 400
line-height 1.6Intro text, page subheading

[Lead paragraph. Slightly larger intro text that opens a section or page, setting context for what follows.]

.caption · Caption12px · weight 400
color: --muteImage caption, footnote, credit

[Image caption, credit line, or footnote-level supporting text goes here]

Type Utilities for Components
.stat-number36px · weight 600
tracking −.03emLarge metric display
2,847
.stat-number.sm22px · weight 600
tracking −.03emCompact metric. Pair with .stat-tile.sm
2,847
.stat-label11px · mono · uppercase
color: --muteMetric label, stat descriptor
Total Revenue
.price-amount40px · weight 600
tracking −.03emPrice display
$49
.role11px · mono · uppercase
color: --mutePerson's role or title
Co-founder & CEO
.attr-name15px · weight 600
color: --inkAttribution name
Jamie Chen
.attr-role11px · mono · uppercase
color: --muteAttribution role or context
Product Designer, Acme Co.
Heading Modifiers
.title-tightmargin-bottom: --space-xsTightens the heading→body gap. Add to <h1>–<h6>.
Default

Card headline

Body text following the default heading margin.

.title-tight

Card headline

Body text following the tightened heading margin.

Special
blockquote · Pull Quote22px · serif · italic
left border ruleEditorial quote, testimonial, callout
"[A pull quote, key statement, or editorial callout. Lorem ipsum dolor sit amet consectetur.]"
code · Inline Code.875em · mono
paper-2 backgroundTechnical references, field names
Use the class="lead" attribute to apply the lead paragraph style to any element.
Typefaces
IBM Plex Sansvar(--sans)
weights 400 · 500 · 600All headings and body text
[Client Name] · Aa Bb Cc Dd Ee 0123
IBM Plex Monovar(--mono)
weights 400 · 500Labels, metadata, tokens, eyebrows
Section Label · 10px
Created MM · DD · YYYY
IBM Plex Serifvar(--serif)
weight 400Pull quotes, editorial headers
"[Editorial quote or display headline lorem ipsum]"