Typography System hero image

Typography System

FRAME Design System

Typography

A comprehensive guide to the FRAME typography system including font families, type scales, and usage guidelines.

Font Families

Display Font

Archivo

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0123456789

Extralight (200)

Light (300)

Regular (400)

Bold (700)

font-display — H1, H2, marketing headlines

Sans Serif

Inter

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0123456789

Regular (400)

Medium (500)

Semibold (600)

Bold (700)

font-sans — H3, H4, body text, UI

Monospace

IBM Plex Mono

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0123456789

Regular (400)

Medium (500)

Semibold (600)

font-ibm — Eyebrows, code, labels

Type Scale

H1 Archivo Light · 58px · 56px line-height

The quick brown fox jumps over the lazy dog

H2 Archivo Bold · 40px · 44px line-height

The quick brown fox jumps over the lazy dog

H3 Inter Bold · 32px · 36px line-height

The quick brown fox jumps over the lazy dog

H4 Inter Bold · 24px · 26px line-height

The quick brown fox jumps over the lazy dog

Body Text Sizes

text-body-xl 20px · 32px line-height

Lead paragraphs and hero introductions. Use for prominent opening text that needs extra emphasis.

text-body-l 18px · 28px line-height

Default body copy for long-form content. This is the standard size used in prose containers and article content.

text-base-regular 16px · 24px line-height

Secondary text, UI labels, and smaller content blocks. Suitable for cards, metadata, and supporting information.

text-eyebrow 15px · 22px · 0.04em tracking

Category labels, metadata, and small caps content

Eyebrow Utility

.eyebrow CSS Class

A utility class that combines font family, size, weight, and text transform for consistent eyebrow labels. 

.eyebrow {
  @apply font-ibm text-eyebrow font-medium uppercase;
}

Live Examples

Primary eyebrow

Headline text follows

On dark background

Inverted headline

Frame Heading Classes

Use frame-h1 through frame-h4 classes to apply heading styles independently from the semantic HTML element. This allows you to style an h2 to look like an h1, for example.

frame-h1 Archivo Light · 58px · 56px line-height

The quick brown fox jumps over the lazy dog

frame-h2 Archivo Bold · 40px · 44px line-height

The quick brown fox jumps over the lazy dog

frame-h3 Archivo Bold · 32px · 36px line-height

The quick brown fox jumps over the lazy dog

frame-h4 Inter Bold · 24px · 26px line-height

The quick brown fox jumps over the lazy dog

Typography Components

BaseHeadline

The BaseHeadline component supports separate semantic tags and visual styles via headline-tag and headline-style props.

Basic Usage (style matches tag)

headline-tag="h1"

H1 Headline

headline-tag="h2"

H2 Headline

headline-tag="h3"

H3 Headline

Style Override (headline-style prop)

headline-tag="h2" headline-style="h1"

h2 tag styled as h1

Looks Like H1

headline-tag="h3" headline-style="h2"

h3 tag styled as h2

Looks Like H2

BaseSubhead

variant="default"

Supporting text that provides additional context below a headline.

variant="legacy"

Legacy variant for backward compatibility with existing pages.

BaseEyebrow

color="primary"

Primary Label

color="secondary"

Secondary Label

color="accent"

Accent Label

SectionIntro

A composite section component that combines eyebrow, headline, and description. Supports both headline-tag (semantic) and headline-style (visual) props for flexible heading control.

Props

PropTypeDefaultDescription
eyebrowString""Category label above headline
headlineStringrequiredMain heading text
descriptionString""Supporting text below headline
headline-tagh1 | h2 | h3"h2"Semantic HTML element
headline-styleh1 | h2 | h3 | h4nullVisual style override
paddingString"px-4 pb-6"Section padding classes

Examples

Default (headline-tag="h2")

Features

Section Headline

Supporting description text that provides context.

headline-tag="h2" headline-style="h1" (h2 styled as h1)

Hero

Big Impact Title

Use this pattern when you need h2 semantics but h1 visual weight.

Prose CSS Variables

Variable Value Usage
--tw-prose-body asphalt-900 Default paragraph and list text
--tw-prose-headings asphalt-900 All heading levels (h1-h4)
--tw-prose-links primary-500 Anchor text color
--tw-prose-bold asphalt-900 Strong and bold text
--tw-prose-bullets asphalt-500 List markers and counters
--tw-prose-hr asphalt-200 Horizontal rules
--tw-prose-quote-borders asphalt-200 Blockquote left border
--tw-prose-captions asphalt-600 Figure captions
--tw-prose-code asphalt-900 Inline code text
--tw-prose-pre-bg asphalt-900 Code block background

Usage Guidelines

Heading Hierarchy

  • H1Page title only, one per page maximum
  • H2Major section headings, primary visual breaks
  • H3Subsections within major sections
  • H4Fine-grained organization, use sparingly

Font Selection

  • ArchivoMarketing headlines, H1, H2
  • InterH3, H4, body copy, UI elements
  • IBM PlexEyebrows, code, technical content

Text Colors

  • Primary text asphalt-900
  • Secondary text asphalt-600
  • Muted text asphalt-500
  • Link text primary-500

When to Use Prose

Use the prose class for:

  • • Long-form article content
  • • Blog posts and news articles
  • • Documentation pages
  • • Rich text from CMS

Add lg:prose-lg for larger text on desktop.

Prose Typography Examples

The prose container automatically styles content with the correct font family, weight, and spacing. It supports standard inline formatting: bold text uses the prose-bold color, italic text provides emphasis, and links are styled with the primary color and underline on hover.

Use inline code for technical terms, file names, or code references within body text.

  • Unordered list items use bullet markers
  • Items can contain longer text that wraps naturally with proper line height
  • Nested lists are supported
    • Nested item one
    • Nested item two
  1. Ordered lists use numeric markers
  2. Sequential steps or ranked items
  3. With nested support
    1. Sub-step A
    2. Sub-step B

QuoteSimple

Use the QuoteSimple component for featured quotes and testimonials. It provides a styled quote icon, italic text, and attribution.

"Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects."

Dieter Rams

Industrial Designer

Props

  • quote(required)— The quote text
  • quotee(required)— Name of the person being quoted
  • position(optional)— Job title or role
  • location(optional)— Company or location