Spring — Design Library home
ComponentStable

Components / Typography

Typography

Shared heading and text primitives so every screen uses the same token styles — SpringHeading for display/headings and SpringText for body, labels, and legal. Prefer these over one-off text-[length:var(--spring-…)] classes.

Quick rules

  • One heading hierarchy per page — start with h1 (or hero for marketing display).
  • Use as when visual style and document outline must diverge (e.g. visually h2, semantically h3).
  • Color only through SpringText color — no raw hex.
Source

Installation

Install the package from npm, then import the component in your application code.

Terminal
Copied!
Import
Copied!

02

SpringHeading

Display and heading styles from the token set. Each card is a live variant.

Display/Hero — 70 / 80 · bold · heading family

Display Hero

Heading/h1 — 48 / 56 · bold

Heading one

Heading/h2 — 36 / 44 · semibold

Heading two

Heading/h3 — 25 / 32 · semibold

Heading three

Heading/h4 — 22 / 32 · semibold

Heading four

Source: SpringHeading.tsx

03

SpringText

Body, label, and legal styles. Use for paragraphs, helpers, and UI chrome labels.

Body/body — 16 / 24 · regular

Body — the default paragraph style for long-form copy.

Body/body-strong — 16 / 24 · bold

Body strong — emphasis inside body copy.

Body/body-sm — 14 / 22 · regular

Body sm — secondary supporting lines and dense UI text.

Body/body-xs — 12 / 18 · regular

Body xs — compact helper text and captions.

Body/legal — 10 / 18 · regular

Legal — disclosures, footnotes, and fine print.

Label/label-base — 16 / 24 · semibold

Label base — section and control labels.

Label/button — 16 / 16 · semibold

Label button — button and CTA labels.

Label/field — 14 / 20 · semibold

Label field — input and field labels.

Label/xs — 10 / 16 · semibold · uppercase tracking

Label xs

Source: SpringText.tsx

04

Text colors

SpringText color prop maps to semantic text tokens. Inverse / on-brand shown on a dark surface.

primary

color="primary"

The quick brown fox jumps over the lazy dog.

secondary

color="secondary"

The quick brown fox jumps over the lazy dog.

muted

color="muted"

The quick brown fox jumps over the lazy dog.

placeholder

color="placeholder"

The quick brown fox jumps over the lazy dog.

disabled

color="disabled"

The quick brown fox jumps over the lazy dog.

brand

color="brand"

The quick brown fox jumps over the lazy dog.

status-error

color="status-error"

The quick brown fox jumps over the lazy dog.

status-success

color="status-success"

The quick brown fox jumps over the lazy dog.

status-warning

color="status-warning"

The quick brown fox jumps over the lazy dog.

status-info

color="status-info"

The quick brown fox jumps over the lazy dog.

On inverse surface

Inverse text on inverse background.

On-brand label

05

Tokens

Typography metrics and text colors come from the generated CSS variables — same source as tokens:sync.
RoleTokenCSS variable
Heading familyCopied!Copied!
Body familyCopied!Copied!
Size stepsCopied!Copied!
Line heightsCopied!Copied!
Text colorsCopied!Copied!

06

Develop

Props for both primitives. Prefer the shared API over ad-hoc font-size utilities.

SpringHeading

PropTypeNotes
variant'hero' | 'h1' | 'h2' | 'h3' | 'h4'Token style. Defaults to h1.
as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div'Rendered element. Defaults to the semantic tag for the variant (hero → h1).
childrenrequiredReactNodeHeading copy.
classNamestringMerged onto the root for layout overrides.

SpringText

PropTypeNotes
variant'body' | 'body-strong' | 'body-sm' | 'body-xs' | 'legal' | 'label' | 'label-button' | 'label-field' | 'label-xs'Token style. Defaults to body.
color'primary' | 'secondary' | 'muted' | 'placeholder' | 'disabled' | 'brand' | 'on-brand' | 'inverse' | 'status-*'Semantic text color token. Defaults to primary.
as'p' | 'span' | 'div' | 'label' | 'li' | 'strong' | 'em' | 'small'Rendered element. Defaults to p.
childrenrequiredReactNodeText content.
classNamestringMerged onto the root for layout overrides.
Copied!