# Tailwind CSS design system: colors, fonts and tokens

> 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.

Source: https://tailwindcss.com, captured 12 June 2026. Page: https://designlang.app/design-system/tailwind

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#ec0853` | 1 |
| Secondary | `#0080ff` | 1 |
| Accent | `#2ca8ff` | 1 |

Neutrals: `#000000`, `#ffffff`

Backgrounds: `#ffffff`, `#000102`, `#000000`, `#ec0853`

## Fonts

- inter (sans), 1959 elements
- plexMono (mono), 609 elements

## 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

1px, 57px, 64px, 72px, 96px, 160px, 336px, 400px

## Radii

4px, 8px, 12px, 16px, 24px, 32px

## Motion

Feel: mixed. Durations: 150ms, 300ms.

## Audit

Overall 90/100 (grade A).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/tailwindcss-com/tailwindcss-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/tailwindcss-com/tailwindcss-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/tailwindcss-com/tailwindcss-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/tailwindcss-com/tailwindcss-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/tailwindcss-com/tailwindcss-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/tailwindcss-com/tailwindcss-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/tailwindcss-com/tailwindcss-com-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/tailwindcss-com/tailwindcss-com.brand.pdf)

Regenerate: `npx designlang tailwindcss.com`