Tailwind CSS design system
Tailwind CSS's website (tailwindcss.com) uses a light interface with #ec0853 as its primary color and inter as the main typeface, with plexMono alongside it. designlang measured 12 font sizes from 12px to 96px, 8 spacing values, 6 corner radii.
Tailwind CSS colors
The brand roles and neutrals tailwindcss.com renders, with how many elements use each one.
Brand colors
- Primary
#ec08531 uses - Secondary
#0080ff1 uses - Accent
#2ca8ff1 uses
Neutrals
#000000855 uses#ffffff182 uses
Backgrounds
#ffffff#000102#000000#ec0853
Text colors
#00000021:1 on #ffffff#ffffff1:1 on #ffffff#00010220.89:1 on #ffffff
Contrast checks (WCAG 2.1)
Text and background pairs found together on the page; 100% of them pass.
| Text | Background | Ratio | Result |
|---|---|---|---|
#ffffff | #000000 | 21:1 | AAA |
Tailwind CSS fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- inter: sans, most text (1,959 elements)
- plexMono: mono, body (609 elements)
Body text: 13px at weight 400, line height 24px.
Weights in use: 400, 500, 600, 700.
Type scale
| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 96px | 400 | 96px | -4.8px | h1 |
| 40px | 500 | 40px | -2px | h2 |
| 36px | 600 | 48px | normal | h3 |
| 30px | 600 | 36px | normal | span |
| 24px | 500 | 40px | normal | span |
| 20px | 600 | 24px | normal | span |
| 18px | 500 | 28px | normal | p |
| 17px | 500 | 28px | normal | span |
| 16px | 400 | 24px | normal | html, head, meta, link |
| 14px | 400 | 24px | normal | a, span, svg, path |
| 13px | 400 | 24px | normal | div, pre, code, span |
| 12px | 500 | 20px | normal | button, svg, path, kbd |
Spacing and radii
Spacing scale
Corner radii
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
Medium radii lead, with a few larger ones. 17 distinct box shadows.
Motion
The motion reads as mixed.
Durations
xs: 150msmd: 300ms
Easing
- custom (263 uses):
cubic-bezier(0.4, 0, 0.2, 1) - ease-in (1 uses):
cubic-bezier(0.4, 0, 1, 1)
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (15), cards (27), inputs (1), links (95), footer (1), tabs (3).
By category
| Color Discipline | 100/100 |
|---|---|
| Typography Consistency | 90/100 |
| Spacing System | 85/100 |
| Shadow Consistency | 78/100 |
| Border Radius Consistency | 90/100 |
| Accessibility | 100/100 |
| CSS Tokenization | 100/100 |
- 36 !important rules — prefer specificity over overrides
- 6757 duplicate CSS declarations
Download the tokens
The files designlang wrote for tailwindcss.com. Run it yourself for a fresh read: npx designlang tailwindcss.com.
The core values as CSS variables
:root {
--color-primary: #ec0853;
--color-secondary: #0080ff;
--color-accent: #2ca8ff;
--color-background: #ffffff;
--color-text: #000000;
--color-neutral-1: #000000;
--color-neutral-2: #ffffff;
--font-primary: "inter", sans-serif;
--font-secondary: "plexMono", monospace;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}Read tailwindcss.com yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does Tailwind CSS use?
What are Tailwind CSS's brand colors?
How do I use the Tailwind CSS design system in my own app?
Is this the official design system?
Measured from the public pages of tailwindcss.com on 12 June 2026. Tailwind CSS is a trademark of its owner; designlang is not affiliated with it. More: the full Tailwind CSS brand kit, the token extraction guide and the markdown version of this page.