Typography
The TanStack type system, sourced from Figma and extended for dense product diagrams — 27 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
light
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
dark
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
light
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
dark
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
light
Headless, type-safe tools for building modern web apps.body/xl20 / 32 · Light
Headless, type-safe tools for building modern web apps.body/lg18 / 28 · Light
Headless, type-safe tools for building modern web apps.body/md16 / 24 · Light
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
dark
Headless, type-safe tools for building modern web apps.body/xl20 / 32 · Light
Headless, type-safe tools for building modern web apps.body/lg18 / 28 · Light
Headless, type-safe tools for building modern web apps.body/md16 / 24 · Light
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
light
Get startedlabel/lg16 / 19 · Medium
Get startedlabel/md14 / 17 · Medium
Get startedlabel/sm12 / 14 · Medium · +0.5
dark
Get startedlabel/lg16 / 19 · Medium
Get startedlabel/md14 / 17 · Medium
Get startedlabel/sm12 / 14 · Medium · +0.5
Mono
light
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/2xs10 / 14 · Light
const router = createRouter()mono/caps12 / 14 · Regular · +1.5 · UPPER
const router = createRouter()mono/caps-xs10 / 12 · Regular · +1.2 · UPPER
dark
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/2xs10 / 14 · Light
const router = createRouter()mono/caps12 / 14 · Regular · +1.5 · UPPER
const router = createRouter()mono/caps-xs10 / 12 · Regular · +1.2 · UPPER
Eyebrow
light
Introducingeyebrow/lg13 / 16 · SemiBold · +2 · UPPER
Introducingeyebrow/md11 / 13 · Medium · +1.75 · UPPER
dark
Introducingeyebrow/lg13 / 16 · SemiBold · +2 · UPPER
Introducingeyebrow/md11 / 13 · Medium · +1.75 · UPPER
Documentation roles
Named text roles keep explanatory copy on the same typography and semantic color tokens throughout the design-system catalog.
Page description
Introduces the purpose and scope of a design-system page.
body/md · text-secondary
Section description
Explains usage, behavior, and guidance for a component section.
body/sm · text-secondary
Preview description
Adds compact supporting context inside a component preview.
body/sm · text-muted
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.
light
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
dark
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