Spring — Design Library home

Design Tokens

Typography

One typeface, four families of roles, every value generated from Figma. Spring's type system pairs Inter across two semantic stacks with a steeled scale of sizes, weights, and line-heights — composed into named roles your components consume. Click any value to copy it.

PrimitiveSemanticComponent
Open in Figmapackages/spring-ds-react/src/components/tokens/design-tokens.mjs

01

Font Family

Spring uses Inter system-wide with two semantic stacks. Heading carries prominent type — display, headings, and labels. Body handles paragraphs and legal copy.

Heading

Inter

Used for Display, Heading, Label.

Copied!Copied!
Regular · 400Copied!
Semibold · 600Copied!
Bold · 700Copied!

Body

Inter

Used for Body, Legal.

Copied!Copied!
Regular · 400Copied!
Semibold · 600Copied!
Bold · 700Copied!

02

Token Structure

Every type role flows through three tiers: Primitive values compose into a Semantic role, which a Component consumes. Below — one example, traced end-to-end with Copied!.

01 · PRIMITIVE×4

Literal values from Figma's Typography/* collection.

familyCopied!
sizeCopied!
weightCopied!
lineHeightCopied!
02 · SEMANTIC×1

An alias object that composes primitives into one named role.

Copied!
{
  family,
  size,
  weight,
  lineHeight
}

References each primitive on the left.

03 · COMPONENTn×

Components consume the semantic role — never the primitives.

<h1> · HeroSection · LandingPage

Page hero

03

Semantic Tokens

Named roles your components reference. Pick by role, not pixels.

15 roles
  • DISPLAY
    Copied!

    Marketing hero. One per page.

    Display 70

    Copied!
  • HEADING
    Copied!

    Page hero. One per route.

    H1 Page title

    Copied!
  • HEADING
    Copied!

    Section dividers, major content blocks.

    H2 Section heading

    Copied!
  • HEADING
    Copied!

    Card titles, list group headers.

    H3 Sub-section

    Copied!
  • HEADING
    Copied!

    Tertiary headers, list items.

    H4 Small title

    Copied!
  • BODY
    Copied!

    Default paragraph copy (16/24).

    Body — workhorse paragraph style.

    Copied!
  • BODY
    Copied!

    Inline emphasis at body size.

    Body bold — heavy inline emphasis.

    Copied!
  • BODY
    Copied!

    Buttons, prominent labels. Aliased to label.base.

    Body strong — same as label.base.

    Copied!
  • BODY
    Copied!

    Compact rows, secondary content (14/22).

    Body small — secondary copy.

    Copied!
  • BODY
    Copied!

    Microcopy, table cells, captions (12/18).

    Body xs — captions, microcopy.

    Copied!
  • LABEL
    Copied!

    Form labels and prominent labels.

    Label base

    Copied!
  • LABEL
    Copied!

    Button text — tight 1:1 line-height.

    Button label

    Copied!
  • LABEL
    Copied!

    Compact form labels (14/20).

    Field label

    Copied!
  • LABEL
    Copied!

    Eyebrows, status chips. Tracked uppercase.

    LABEL XS

    Copied!
  • LEGAL
    Copied!

    Disclaimers, terms, footnotes.

    Legal — disclaimers, terms, fine print.

    Copied!

04

Primitive Tokens

Raw values from the Figma Copied! collection. Components don't reference these directly — semantic roles do.

Primitive tier
  • Copied!Copied!Display, Heading, Label
  • Copied!Copied!Body, Legal

05

Use Examples

Typography roles in real-world layouts, adapted from Figma · 1232:16677. Each text block is annotated with its HTML tag and semantic role.

HeroCopied!Copied!Copied!Copied!Copied!
<h1> · h1

H1 Hero heading

or

<h1> · display.hero

Display 70px

<p> · body.md

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

Lorem ipsum dolor s
<button> · label.button
<small> · legal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus, nisl sit amet fermentum tincidunt, libero.

Section · Three-upCopied!Copied!Copied!Copied!
<h2> · h2

H2 section heading

<p> · body.sm

A short description that lives under the section heading.

<h3> · h3

H3 small title

<p> · body.md

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

<h3> · h3

H3 small title

<p> · body.md

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

<h3> · h3

H3 small title

<p> · body.md

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

List · FeatureCopied!Copied!Copied!
<h2> · h2

H2 section heading

<p> · body.md

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<li> · h4

  • H4 section item

  • H4 section item

  • H4 section item

  • H4 section item

FormCopied!Copied!Copied!Copied!Copied!
<span> · label.xs

EYEBROW · LABEL XS

<h2> · h2

H2 section heading

<p> · body.sm

A short description that explains the form below.

<label> · label.field

Label field

Placeholder
<p> · body.xs

Body xs · helper text

<label> · label.field

Label field

Placeholder
<p> · body.xs

Body xs · helper text

<label> · label.field

Label field

Placeholder
<p> · body.xs

Body xs · helper text

<label> · label.field

Label field

Placeholder
<p> · body.xs

Body xs · helper text

<button> · label.button