Typography

Create UI ships a single, unified type system. Every text style is a token, and each token is applied with one text-{token} utility class that carries its font size, line height, letter spacing, and weight together. You name the role the text plays (text-heading-h1, text-paragraph-md, text-numeric-xl) instead of tuning four separate properties by hand.

There are 37 of them across seven families. Every token knows its metrics at every breakpoint, so a class like text-heading-h1 resolves to a different size on a phone, a tablet, and a desktop, while the families that are deliberately fixed resolve to the same value everywhere:

Why one class

The same heading, written two ways:

// Raw values: four coupled properties, hand-managed at every breakpoint.
<h1 className="text-[36px] leading-[1.2] font-medium tracking-[-1.4px] md:text-[48px] md:tracking-[-1.6px] xl:text-[56px] xl:tracking-[-1.8px]">
  Ship faster with Create UI
</h1>
 
// Semantic token: name the role, every metric and breakpoint is baked in.
<h1 className="text-heading-h1">Ship faster with Create UI</h1>

The payoff:

• One decision, not four. Size, line height, letter spacing, and weight travel together, so they can never drift out of sync on a stray element.
• Responsive for free. The three breakpoints live inside the token, not in your markup.
• One place to change. Retuning the scale happens in a single data file, not a search-and-replace across every text-[…] in the app.

You never pair a token with leading-* or tracking-*. The class resolves size, line height, and letter spacing from the token itself, and weight from its category, so those four can never drift apart.

Three token groups ask for one companion class alongside the size token: numeric and code take font-numeric for the mono face, and ui-overline-* takes uppercase. The token reference prints the companion on every row that needs one.

Anatomy of a token

Token names follow a category-size shape:

• heading-h1 is category heading, size h1
• numeric-xl is category numeric, size xl
• ui-overline-sm is category ui / overline, size sm

The category decides the default weight and which companion class the token expects. The size decides the metrics. Pick a token and you have picked the right weight and the right scale step in one move.

Usage

Apply a token class to any element. The class sets the four metrics; the companion class, where a family needs one, sets the face or the casing.

<h1 className="text-heading-h1">Ship faster with Create UI</h1>
<p className="text-paragraph-md">
  A unified type system keeps every screen in rhythm.
</p>
<span className="text-numeric-xl font-numeric">$4,299</span>

Tokens compose. A real section is just a few of them stacked, each one naming its role and pairing with a color token:

<article>
  <span className="text-ui-overline-sm text-placeholder uppercase">
    Pricing
  </span>
  <h2 className="text-heading-h2 text-strongest">Team plan</h2>
  <p className="text-paragraph-md text-body">
    Everything your whole team needs to ship a consistent product, billed once
    per seat.
  </p>
  <span className="text-numeric-xl font-numeric text-strongest">$4,299</span>
</article>

That snippet rendered, with each token doing its job in both themes:

Three font variables back the families. In a Next.js project createui init declares them with next/font in your root layout; elsewhere it imports the equivalent Fontsource packages. --font-display and --font-body are both Geist, and the page default, so most tokens need no face class at all. --font-numeric is Geist Mono, which gives prices, stats, and code a consistent tabular width, and is what font-numeric selects.

Responsive scale

Token values are defined per breakpoint as [mobile, tablet, desktop]. The generated CSS sets the desktop value on :root and overrides it with two max-width media queries.

Large type scales down on smaller screens, while interface, numeric, and code styles stay fixed so controls and data never shift size:

• Display and heading scale their font size and letter spacing. Line height is a percentage, so it tracks the font size automatically at every breakpoint.
• Paragraph and the larger body steps keep their font size fixed and open up line height slightly on smaller screens for readability. The two smallest body steps are fixed outright.
• ui, numeric, and code are fixed at every breakpoint, so controls and data never shift size.

Token reference

Every token in the system, rendered at its real metrics. The sample sets on the left; the spec rail on the right prints size, then line height, then letter spacing, each value behind a phone, tablet, or desktop mark so the whole curve reads without decoding an arrow. A single number in place of the three marks means that metric is fixed at every breakpoint, which is why most rows carry a mix. The family's weight and face sit in the card header, and clicking a token name copies its full utility class.

• Use heading and display for titles, body for UI copy, paragraph for long-form reading, ui for controls, numeric for figures, code for code.
• Pair a type token with a color token (text-strongest, text-body, text-placeholder) rather than baking color into the type choice.

How it works

You do not need this to use the tokens, but it helps to know the numbers are generated, not hand-written.

"heading-h1": {
  fontSize: r(36, 48, 56),
  lineHeight: pct(120),
  letterSpacing: r(-1.4, -1.6, -1.8),
},

:root {
  --text-heading-h1: 56px; /* desktop, ≥ 1280px */
  --text-heading-h1--line-height: 120%;
  --text-heading-h1--letter-spacing: -1.8px;
  --text-heading-h1--font-weight: 500;
}
 
@media (max-width: 1279px) {
  :root {
    --text-heading-h1: 48px; /* tablet */
    --text-heading-h1--letter-spacing: -1.6px;
  }
}
@media (max-width: 767px) {
  :root {
    --text-heading-h1: 36px; /* mobile */
    --text-heading-h1--letter-spacing: -1.4px;
  }
}