Typography
The TanStack type system, sourced from Figma — 25 styles across five roles. Display & headings use Bricolage Grotesque, body & labels use Inter, and code uses IBM Plex Mono. Each style is a Tailwind text-ds-* utility (size, line-height, tracking, and weight baked in).
Font families
The three families that carry the type system.
Bricolage Grotesque
--font-ds-display
Display & headings
Inter
--font-sans
Body & labels
IBM Plex Mono
--font-ds-mono
Code & mono
Display
TanStackdisplay/2xl96 / 96 · Bold · -1
TanStackdisplay/xl72 / 76 · Bold · -0.8
TanStackdisplay/lg56 / 60 · Bold · -0.5
TanStackdisplay/md48 / 53 · Medium · -0.3
TanStackdisplay/sm40 / 46 · Medium
Heading
Type-safe by defaultheading/136 / 41 · Medium
Type-safe by defaultheading/228 / 34 · Medium
Type-safe by defaultheading/324 / 29 · Bold
Type-safe by defaultheading/420 / 25 · Bold
Type-safe by defaultheading/516 / 21 · Bold
Type-safe by defaultheading/614 / 18 · Medium
Body
Headless, type-safe tools for building modern web apps.body/xl20 / 32 · Regular
Headless, type-safe tools for building modern web apps.body/lg18 / 28 · Regular
Headless, type-safe tools for building modern web apps.body/md16 / 24 · Regular
Headless, type-safe tools for building modern web apps.body/sm14 / 20 · Regular
Headless, type-safe tools for building modern web apps.body/xs12 / 17 · Regular
Label
Get startedlabel/lg16 / 19 · Medium
Get startedlabel/md14 / 17 · Medium
Get startedlabel/sm12 / 14 · Medium · +0.5
Mono
const router = createRouter()mono/display24 / 31 · Regular
const router = createRouter()mono/lg18 / 27 · Regular
const router = createRouter()mono/md16 / 24 · Light
const router = createRouter()mono/sm14 / 21 · Light
const router = createRouter()mono/xs12 / 16 · Light
const router = createRouter()mono/caps12 / 14 · Regular · +1.5 · UPPER
Semantic headings
Convenience classes that bundle the display font with each heading size — apply h1–h6 directly to an element instead of pairing font-ds-display with text-ds-heading-*. Aliases of the heading scale above, defined in app.css.
Type-safe by default.h1= text-ds-heading-1
Type-safe by default.h2= text-ds-heading-2
Type-safe by default.h3= text-ds-heading-3
Type-safe by default.h4= text-ds-heading-4
Type-safe by default.h5= text-ds-heading-5
Type-safe by default.h6= text-ds-heading-6