# Tailwind CSS · Design system migration spec

> Source: https://tailwindcss.com  ·  Curated by OpenDesign  ·  en

> A masterclass in developer-focused design that balances power with approachability through clean typography and generous spacing.

## 1. Identity DNA

The Tailwind CSS site is designed as a precision toolset for web developers, balancing power with approachability through clean geometry and generous whitespace. Its identity is built on the principles of being **utility-first**, modern, and efficient, resulting in a visual system that feels both sharp and immediately useful.

**One-liner:** A utility-first CSS framework for rapidly building modern websites.
**Keywords:** utility-first · modern · developer-focused · clean · efficient
**Analogy:** A precision toolset for web developers that feels both powerful and approachable.

## 2. Color

The color system is built on a high-contrast, monochromatic base of near-black text against a crisp white background, creating a clean canvas. A single vibrant sky-blue accent is reserved for interactive and code elements, providing a clear focal point without visual clutter.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f9fafb` | card background |
| `--bg-quiet` | `#f3f4f6` | quiet area |
| `--ink` | `#111827` | body text |
| `--ink-soft` | `#374151` | secondary text |
| `--muted` | `#6b7280` | placeholder |
| `--muted-soft` | `#9ca3af` | weak hint |
| `--accent` | `#0ea5e9` | single accent |
| `--line` | `rgba(0, 0, 0, 0.05)` | divider |

**Color principle:** High-contrast, monochromatic base with a single vibrant sky-blue accent for code and interactive elements.

The guiding principle is restraint, using color functionally to denote action rather than for decorative flourish.

## 3. Typography

Typography employs a humanist-sans family for clarity and approachability across all text. Headlines use a tight, modern letter-spacing to create dense, impactful statements, while body text maintains a comfortable 1.5 line-height for sustained reading.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 700 | -2px | Hero headlines |
| h1 | 48px | 1.1 | 600 | -1.5px | Section titles |
| h2 | 32px | 1.2 | 600 | -1px | Card titles |
| body-lg | 20px | 1.5 | 400 | normal | Lead paragraphs |
| body | 16px | 1.5 | 400 | normal | General text |
| code | 14px | 1.6 | 400 | 0 | Code blocks |
| caption | 13px | 1.5 | 500 | 0.2px | UI labels and captions |

**Type rules:**
- Headlines use tight letter-spacing (-2px to -1px) for a modern, dense feel.
- Body text maintains a comfortable 1.5 line-height for readability.
- Code blocks use a distinct monospace font for clear differentiation.

## 4. Spacing

The layout is governed by a consistent 4px grid rhythm, creating predictable vertical and horizontal spacing throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 px
- **Rhythm:** Consistent 4px grid with generous padding in feature cards and clear separation between sections.

## 5. Surfaces

Surface depth is achieved through subtlety, using very light inset borders and minimal drop shadows to differentiate containers. This approach creates a layered hierarchy without heavy visual weight, keeping the focus on the content within.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)
  - inset 0 0 0 1px rgba(0, 0, 0, 0.1)
  - inset 0 0 0 1px rgba(255, 255, 255, 0.1)
  - inset 0 0 0 1px rgba(0, 0, 0, 0.05)
- **Borders:** 1px solid rgba(0, 0, 0, 0.05) for containers, with subtle inset borders for interactive elements.

## 6. Layout

The layout skeleton is anchored by a centered, single-column hero with strong left-aligned typography. This flows into a responsive 12-column grid that organizes feature cards with generous gutters, creating a clear content hierarchy from broad statements to specific details.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 640 / 768 / 1024 / 1280 px

**Skeleton:** Centered, single-column hero flowing into a responsive grid for feature cards.

## 7. Motion & Interaction

Motion is applied with purpose and consistency, using smooth transitions for interactive states like hover and focus. Subtle transform animations and consistent easing curves provide feedback without distraction, reinforcing the system's clean and efficient character.

- **Durations:** micro 150ms · small 300ms · medium 350ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for color, background-color, and opacity on hover states.
  - Subtle transform animations for interactive elements like buttons and links.
  - Consistent easing curves across all transitions for a cohesive feel.

- **Hover:** Subtle color shifts for links (text to accent blue) and background changes for buttons.
- **Click:** Immediate visual feedback through opacity or subtle transform changes.
- **Transition:** Smooth 150ms to 300ms transitions for all interactive properties.
- **Keyboard:** Full keyboard navigation with visible focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and developer-focused, avoiding marketing fluff and passive constructions. It communicates with large, bold headlines and clear, action-oriented calls-to-action that guide the user forward.

- **Tone:** Confident, direct, and developer-focused without being overly technical or jargon-heavy.
- **Headline style:** Large, bold, and tightly tracked statements that emphasize speed and simplicity.
- **CTA style:** Clear, action-oriented buttons like 'Get started' that guide the user to the next step.
- **Avoid:** Marketing fluff / Unnecessary adjectives / Complex sentences / Passive voice

### Don'ts
- ❌ don't use gradient backgrounds — screenshot shows a clean, solid white background with no gradients.
- ❌ don't use serif typography — screenshot shows humanist-sans fonts for all display and body text.
- ❌ don't use heavy drop shadows — screenshot shows very subtle, light shadows for depth.
- ❌ don't use multiple accent colors — screenshot shows a single sky-blue accent (#0ea5e9) for interactive code elements.
- ❌ don't use complex decorative borders — screenshot shows simple, light 1px borders or no borders at all.
- ❌ don't use centered hero text — screenshot shows a strong left-aligned headline and body copy.

The system deliberately avoids gradients, serif typography, heavy shadows, multiple accent colors, complex borders, and centered hero text to maintain its focused, utilitarian clarity.

## System Prompt (paste into AI tool)

```
This is the website for Tailwind CSS, a utility-first CSS framework. It positions itself as a modern, efficient tool for developers to build websites rapidly. The visual design is clean, professional, and content-focused. Key colors include a crisp white background (#ffffff), near-black text (#111827), and a vibrant sky-blue accent (#0ea5e9) for code highlights. Typography uses humanist-sans fonts for clarity, with a bold display style featuring tight letter-spacing. Critical design constraints include: never use centered headlines (the layout is strongly left-aligned), avoid multiple accent colors (stick to the single blue), and maintain generous whitespace. The site uses a 12-column grid with a 24px gutter and features cards with subtle rounded corners (12-16px) and minimal shadows.
```
