# Tailwindcss Design System

> A stark, utilitarian monochrome system built on pure black and white, relying on precise typography and subtle inset shadows to organize dense technical information.

**Source:** https://tailwindcss.com | **Captured:** 2026-06-06T05:00:26.627Z | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Tailwindcss operates as a high-contrast monochrome system built on pure black (#000000) and white (#ffffff). The visual language relies heavily on typography, pairing Inter for structural and narrative text with Plex Mono for technical and code-related content. Depth is achieved through subtle inset shadows and precise border radii rather than heavy elevation drops. The interface feels utilitarian and developer-focused, using structural lines and generous whitespace to organize dense technical information without relying on saturated color.

## Signature DNA
1. **High-contrast monochrome foundation:** The system uses pure black (#000000) and white (#ffffff) as its primary structural colors, avoiding saturated brand colors in the core UI to let content and code examples stand out.
2. **Dual-typography system:** Inter handles all UI and prose with tight letter spacing (-2px on display), while Plex Mono is used extensively for code blocks and technical annotations, reinforcing the developer-centric nature of the product.
3. **Subtle inset depth:** Instead of large drop shadows, the system uses delicate inset shadows (`oklab(0.129999 -0.00404751 -0.027702 / 0.1) 0px 0px 0px 1px inset`) to define component boundaries and interactive states.

## Family Map
Not applicable (no sub-brands exist).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-black` | #000000 | text, button_text, surface_bg | 428 | 1 | css_variable:--color-black |
| `--color-white` | #ffffff | surface_bg, text, button_text | 48 | 1 | css_variable:--color-white |

### Accent
Not captured in source.

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 600, 700, 800 | heading, body | Inter | OFL |
| Plex Mono | 400, 500, 600 | mono, caption | IBM Plex Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display` | 40px | 40px | -2px | 500 | Display headings | `h2.max-w-lg.px-2` |
| `heading` | 30px | 48px | normal | 600 | Section headings | `span.text-3xl/12.font-semibold` |
| `heading-extrabold` | 30px | 36px | -0.75px | 800 | Hero headings | `h1.text-2xl.font-extrabold` |
| `heading-sm` | 24px | 40px | normal | 500 | Sub-headings | `span.text-xl/10.font-medium` |
| `body-lg` | 18px | 28px | normal | 500 | Lead paragraphs | `p.max-w-(--breakpoint-md).px-2` |
| `body-mono` | 17px | 28px | normal | 500 | Inline code | `span.font-mono.text-[1.0625rem]` |
| `body` | 16px | 24px | normal | 400 | Default body | `div.bg-white.dark:bg-gray-950` |
| `body-sm` | 14px | 24px | normal | 400 | Secondary text | `a.text-sm/6.text-gray-950` |
| `code-sm` | 13px | 24px | normal | 400 | Code blocks | `pre` |
| `caption` | 12px | 24px | 1.2px | 500 | Small labels | `h3.font-mono.text-sm/6` |

### Principles
1. **Tight tracking on display:** Inter display headings pull tight at -2px letter spacing to create solid typographic blocks.
2. **Monospace for technical context:** Plex Mono is used strictly for code blocks, inline code, and technical captions, never for standard prose.
3. **Generous line heights:** Body copy at 16px uses a 24px line height (1.5) to ensure readability in dense technical documentation.

## Spacing
**Base unit:** Custom (not strictly forced)
| Token | Value | Occurrences |
|---|---|---|
| `spacing-4` | 4px | 16 |
| `spacing-8` | 8px | 103 |
| `spacing-16` | 16px | 413 |
| `spacing-24` | 24px | 9 |
| `spacing-32` | 32px | 9 |
| `spacing-36` | 36px | 85 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Structural surfaces | 1928 occurrences |
| `radius-sm` | 4px | Inputs | 5 occurrences |
| `radius-md` | 8px | Controls | 36 occurrences |
| `radius-lg` | 12px | Controls | 12 occurrences |
| `radius-xl` | 16px | Cards, rounded buttons | 22 occurrences |
| `radius-2xl` | 32px | Large panels | 4 occurrences |
| `radius-full` | 9999px | Pill buttons, badges | 51 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | `none` | Standard surfaces | Surface component |
| Inset Border | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.1) 0px 0px 0px 1px inset...` | Component boundaries | Pill Button component |
| Soft Drop | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Elevated surfaces | Surface component |

## Components
### Tier 1: Foundational

#### Surface
**Role:** Base container for page sections and structural blocks.
**Pages observed:** https://tailwindcss.com, https://tailwindcss.com/pricing, https://tailwindcss.com/about
**Spec:** Background `#ffffff` / Text `#000000` / Border `0px` / Radius `0px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Pill Button
**Role:** Primary and secondary actions requiring high emphasis.
**Pages observed:** https://tailwindcss.com, https://tailwindcss.com/pricing, https://tailwindcss.com/about
**Spec:** Background `oklab(0.129999 -0.00404751 -0.027702 / 0.02)` / Text `#000000` / Border `0px` / Radius `9999px` / Padding `4px 8px` / Typography `16px` / Shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.08) 0px 0px 0px 1px inset...`
**States observed:** Default | Disabled: not captured

#### Rounded Button
**Role:** Tertiary actions and interactive controls.
**Pages observed:** https://tailwindcss.com, https://tailwindcss.com/pricing, https://tailwindcss.com/about
**Spec:** Background `oklab(0.129999 -0.00404751 -0.027702 / 0.05)` / Text `lab(1.90334 0.278696 -5.48866)` / Border `0px` / Radius `16px` / Padding `2px 6px 2px 10px` / Typography `12px` / Shadow `none`
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Card
**Role:** Container for grouped content or features.
**Pages observed:** https://tailwindcss.com, https://tailwindcss.com/pricing, https://tailwindcss.com/about
**Spec:** Background `oklab(0.129999 -0.00404751 -0.027702 / 0.05)` / Text `lab(1.90334 0.278696 -5.48866)` / Border `0px` / Radius `9999px` / Padding `3px` / Typography `16px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Footer
**Role:** Global site footer.
**Pages observed:** https://tailwindcss.com, https://tailwindcss.com/pricing, https://tailwindcss.com/about
**Spec:** Background `#ffffff` / Text `lab(1.90334 0.278696 -5.48866)` / Border `0px` / Radius `0px` / Padding `0px` / Typography `14px` / Shadow `none`
**States observed:** Default | Disabled: not captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
Not captured in source.

## Do's
- Use pure `#000000` for primary text and structural elements to maintain the stark monochrome aesthetic.
- Apply Plex Mono strictly for code snippets, technical annotations, and inline code markers.
- Use tight letter spacing (-2px) on large display headings (40px) to create solid typographic blocks.
- Rely on subtle inset shadows (`oklab(0.129999 -0.00404751 -0.027702 / 0.1) 0px 0px 0px 1px inset`) rather than heavy drop shadows for component definition.
- Maintain generous 16px base padding and 24px line heights for readable technical documentation.

## Don'ts
- **Wrong:** Using a saturated blue or purple as the primary brand color.
  **Right:** Using `#000000` as the primary brand color.
  **Reason:** Tailwindcss is a monochrome parent system; saturated colors are reserved for code syntax highlighting or sub-brands, not the core UI.
- **Wrong:** Applying Plex Mono to standard body paragraphs.
  **Right:** Using Inter 400 for all standard body prose.
  **Reason:** Monospace is semantically reserved for technical and machine-generated content.
- **Wrong:** Using large, blurry drop shadows on cards.
  **Right:** Using flat backgrounds or crisp 1px inset shadows.
  **Reason:** The system relies on flat, utilitarian surfaces rather than deep spatial elevation.

## Similar brands
- Vercel
- Linear
- Stripe (developer documentation)

## Quick start
```css
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --tw-ring-offset-color: #ffffff;
  --font-sans: "Inter", sans-serif;
  --font-mono: "Plex Mono", monospace;
}
```

## Agent prompt examples
- "Create a technical documentation card using a white background, a 1px inset shadow, and Inter 500 for the title. Include a code snippet block using Plex Mono at 13px."
- "Build a primary CTA pill button with a pure black background, white text, and a 9999px border radius."
- "Design a hero section heading at 40px using Inter 500 with -2px letter spacing."

## Known gaps
Hover, focus, and active states were not captured by the pipeline. Layout grids, responsive breakpoints, and imagery guidelines are missing from the source evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://tailwindcss.com | Desktop | 2026-06-06T05:00:26.627Z |
| Pricing | https://tailwindcss.com/pricing | Desktop | 2026-06-06T05:00:26.627Z |
| About | https://tailwindcss.com/about | Desktop | 2026-06-06T05:00:26.627Z |