Centrim Design System — a token-first, accessible React component system.
Typography
Nunito carries display, headings, subtitles, body, labels, forms and tables. Weights 400, 500, 600 and 700 are loaded from Google Fonts.
What is this?
One family and one scale. Nunito backs both --font-display (display and heading styles) and --font-sans (subtitles, body, labels, forms and tables). Every size, line height, weight and tracking pair is a single Tailwind text-* token.
When to use it
- Choosing a heading level or body size for new UI
- Establishing hierarchy on a page — type and space come before surfaces
- Checking the exact size, line height and weight of a style
How to use it
- Use one text-* token per element; never combine it with an ad-hoc size or leading class
- Step down heading levels in order — display for marketing surfaces, heading-2 for page titles, heading-5 for sections
- Body copy stays at text-body-md; drop to text-body-sm only in dense panels and table cells
What to avoid
- Raw font-size, line-height, letter-spacing or font-weight values
- Skipping heading levels to get a size you like — pick the token that matches the level
- Using text-label-* for reading copy or text-body-* for form labels
Families
Nunito
font-display
Display, headings, titles — Nunito
Nunito 400 / 500 / 600 / 700
font-sans
Subtitles, body, labels, forms, tables — Nunito
var(--color-primary)
font-mono
Code, tokens and tabular data
Display and headings
Nunito.
text-display-xl
56 / 64 / 700 / -0.02em
Systems outlive screens
text-display-l
48 / 56 / 700 / -0.02em
Built on tokens
text-display-m
40 / 48 / 700 / -0.015em
One brand layer
text-heading-1
36 / 44 / 700 / -0.015em
Foundations first
text-heading-2
30 / 38 / 700 / -0.01em
Tokens, not literals
text-heading-3
24 / 32 / 700 / -0.01em
Composable primitives
text-heading-4
20 / 28 / 600 / -0.005em
Accessible by default
text-heading-5
18 / 26 / 600 / 0
Variant-driven APIs
text-heading-6
16 / 24 / 600 / 0
One barrel, one import
Body, labels and captions
Nunito; code uses the mono stack.
text-body-lg
18 / 28 / 400 / 0
Lead copy that opens a section and sets its tone.
text-body-md
16 / 24 / 400 / 0
Default body text at 16px. It carries most of the reading load, so it sets the rhythm every other style is measured against.
text-body-sm
14 / 20 / 400 / 0
Secondary copy for helper text, table cells and dense panels.
text-label-lg
16 / 24 / 500 / 0
Label large
text-label-md
14 / 20 / 500 / 0
Label medium
text-label-sm
12 / 16 / 500 / 0.01em
LABEL SMALL
text-caption
12 / 16 / 400 / 0
Captions and metadata
text-code
14 / 20 / 400 / 0
const radius = 'md'
Inline styles
A paragraph with an inline link, some inline code, and strong emphasis.
A design system is a product serving other products.
- Unordered list item
- Second item with more text to wrap