---
title: "Tailwind CSS design system"
variant: extended
source: https://tailwindcss.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/tailwindcss-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Tailwind CSS · Design System

> A bright canvas for code, craft, and utility.

**Theme:** light · **Industry:** devtools · **Source:** https://tailwindcss.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Tailwind CSS pairs an oversized, restrained hero with code-led product demonstrations and a broad gallery of real-world examples. A near-white canvas and crisp dark typography keep the page calm while small vivid accents add energy to technical details.

## North star

Keep the page bright and spacious, and let dark code panels and restrained syntax accents carry the visual emphasis.

## Overview

The page uses white as an expansive canvas, with pale gray bands and hairlines gently distinguishing content rather than enclosing every section. Near-black headings provide strong contrast; cool muted grays carry supporting copy, while cyan, mint, and pink appear as compact accents in code, labels, and selected controls. Inter supplies the large, tightly tracked hero and clear sans-serif hierarchy. Plex Mono gives technical labels, snippets, and small metadata a distinctly developer-oriented voice. The layout alternates a spacious single-column opening with split product demonstrations, a dense four-column sponsor field, and a varied feature-card grid. Dark code panels create focused contrast against the light page; screenshots, UI examples, and the site gallery provide visual variety without changing the underlying design language. Rounded pill CTAs and softly rounded cards keep the otherwise precise, grid-based system approachable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the open background behind hero, feature sections, sponsor marks, and footer. |
| Mist Divider | `#f2f2f3` | `--color-mist-divider` | neutral | Pale section surface and frequent hairline border separating cards and page regions. |
| Slate Copy | `#4a5565` | `--color-slate-copy` | neutral | Muted supporting text and explanatory copy on the light canvas. |
| Night Ink | `#030712` | `--color-night-ink` | brand | Primary text and dark inverse surfaces, including code-led demo panels and footer details. |
| Soft Rule | `#ececed` | `--color-soft-rule` | neutral | Subtle card edges and secondary separators; keep less prominent than the main pale border. |
| Sky Syntax | `#74d4ff` | `--color-sky-syntax` | accent | Bright cyan syntax and highlighted technical text, not a broad page background. |
| Editor Charcoal | `#1d202a` | `--color-editor-charcoal` | surface | Deep code-card surface visible in editor demonstrations against the white page. |
| Signal Pink | `#f6339a` | `--color-signal-pink` | accent | Occasional pink CTA and small interface or syntax highlight. |
| Deep Link Blue | `#00598a` | `--color-deep-link-blue` | semantic | Rare darker blue link or illustration detail; not a dominant brand color. |
| Frost Text | `#f8fafc` | `--color-frost-text` | neutral | Light secondary text within dark code or inverse interface examples. |
| Blue Gray | `#90a1b9` | `--color-blue-gray` | neutral | Muted code and interface text, chiefly inside dark product illustrations. |
| Pale Steel | `#cad5e2` | `--color-pale-steel` | neutral | Low-emphasis text and code details within dark mock interfaces. |
| Mint Syntax | `#96f7e4` | `--color-mint-syntax` | accent | Mint syntax highlight and small technical accents, most visible in code examples. |
| Quiet Silver | `#cccccc` | `--color-quiet-silver` | neutral | Low-contrast text or small interface details; avoid using as primary copy. |
| Rose Syntax | `#fb64b6` | `--color-rose-syntax` | accent | Secondary pink syntax or illustration highlight, rather than a large surface. |
| Graphite Detail | `#42454d` | `--color-graphite-detail` | neutral | Dark secondary text and fine interface details, especially within demonstrations. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f2f3` (Mist Divider) · `--color-surface-2` → `#030712` (Night Ink) · `--color-surface-3` → `#1d202a` (Editor Charcoal) · `--color-text` → `#030712` (Night Ink) · `--color-text-muted` → `#4a5565` (Slate Copy) · `--color-text-subtle` → `#f8fafc` (Frost Text) · `--color-border` → `#f2f2f3` (Mist Divider) · `--color-accent` → `#74d4ff` (Sky Syntax) · `--color-accent-2` → `#f6339a` (Signal Pink) · `--color-accent-3` → `#96f7e4` (Mint Syntax) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#030712` | `#ffffff` | 20.13:1 | AAA |
| `#030712` | `#f2f2f3` | 18:1 | AAA |
| `#030712` | `#1d202a` | 1.24:1 | fail |
| `#4a5565` | `#ffffff` | 7.56:1 | AAA |
| `#4a5565` | `#f2f2f3` | 6.76:1 | AA |
| `#4a5565` | `#030712` | 2.66:1 | fail |
| `#4a5565` | `#1d202a` | 2.15:1 | fail |
| `#f8fafc` | `#ffffff` | 1.05:1 | fail |
| `#f8fafc` | `#f2f2f3` | 1.07:1 | fail |
| `#f8fafc` | `#030712` | 19.24:1 | AAA |

### Gradients

- `radial-gradient(oklab(0.129999 -0.00404751 -0.027702 / 0.05) 1px, rgba(0, 0, 0, 0) 0px)`
- `repeating-linear-gradient(315deg, oklab(0 0 0 / 0.05) 0px, oklab(0 0 0 / 0.05) 1px, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, lab(1.90334 0.278696 -5.48866) 100%)`
- `linear-gradient(to right, lab(66.9756 -58.27 19.5419) 0%, lab(70.687 -23.6078 -45.9483) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-display` | webfont | 400, 500, 600, 700 | Hero and section headings, navigation, body copy, links, and primary controls. | Inter |
| plexMono | `--font-mono` | webfont | 400, 500, 600 | Code, technical captions, uppercase eyebrows, and compact metadata. | IBM Plex Mono |

- **inter:** Use a clean sans-serif range from regular to bold; hero lettering is notably tight, while labels remain understated.
- **plexMono:** Monospaced text gives technical content its own voice; eyebrow labels use uppercase and expanded tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.492, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 1 | -0.05em | — | inter | Oversized hero statement at the top of the homepage. |
| h1 | 40px | 500 | 1 | -0.05em | — | inter | Primary page title and prominent heading treatment. |
| h2 | 36px | 600 | 1.33 | 0 | — | inter | Major section titles, such as feature and showcase introductions. |
| h3 | 30px | 600 | 1.2 | 0 | — | inter | Feature-card and subsection headings. |
| h4 | 24px | 500 | 1.67 | 0 | — | inter | Smaller content headings and demonstration labels. |
| body | 13px | 400 | 1.85 | 0 | — | plexMono | Compact monospaced technical and supporting copy. |
| caption | 12px | 400 | 2 | 0 | — | plexMono | Small metadata, code labels, and secondary annotations. |
| button | 12px | 400 | 1.67 | 0 | — | inter | CTA labels and compact interface controls. |
| link | 14px | 400 | 1.71 | 0 | — | inter | Navigation, footer links, and inline destinations. |
| eyebrow | 12px | 600 | 1.33 | 0.1em | uppercase | plexMono | Uppercase section markers above major headings. |
| code | 13px | 400 | 1.85 | 0 | — | plexMono | Syntax-highlighted examples inside editor-style panels. |

OpenType features in use: `"cv02", "cv03", "cv04", "cv11"`, `"ss02", "zero"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 64 px.
- Section rhythm 32px · element gap 8px · card padding 8px · max content width 1360px.

The page sits on a centered, wide canvas with a measured maximum width of 1360px. It opens with a single-column, left-aligned hero, then moves through split demonstrations, a four-column sponsor field, and a varied multi-column feature grid. Large white intervals separate major stories; inside cards, content is compact and carefully aligned. The measured spacing system uses an 8px base, with density described as compact. The footer returns to a simple three-column link arrangement followed by a separate copyright row.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · xs `4px` · sm `8px` · md `12px` · lg `16px` · pill `9999px`
- Shadow `inset` (other, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.1) 0px 0px 0px 1px inset, 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 0p`
- Shadow `inset-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.1) 0px 0px 0px 1px, `
- Shadow `inset-3` (card, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.05) 0px 0px 0px 1px inset, 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 0`
- Shadow `inset-4` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 0px 0px 1px inset, 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 0p`
- Shadow `sm` (media): `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 2`
- Shadow `hairline` (card): `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, oklab(0.129999 -0.00404751 -0.027702 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The overall treatment is mostly flat: white canvas, subtle gray borders, and carefully separated card surfaces. Measured cards use 16px rounding; buttons are pill-shaped in the primary CTA treatment. Use restrained inset edge definition and a light media shadow only where the screenshot or product mockup needs separation, not as a page-wide effect.

## Imagery

Images are primarily product evidence: dark editor panels, UI mockups, interface screenshots, and a gallery of varied real websites. Feature examples include property photography and interface previews, while sponsor logos add a typographic rather than photographic image field. Keep assets in clean, softly rounded cards; preserve screenshot content and color where present, and avoid adding decorative imagery that competes with code.

## Components

### Pill CTA

A dark, white-label primary action with a pill silhouette; the measured Get started buttons use a 32px radius and compact horizontal padding.

### Code editor panel

A dark charcoal rounded surface containing monospaced, syntax-colored snippets, line numbers, and restrained editor chrome.

### Sponsor grid

A clean multi-column field of partner logos on white, with generous separation and no heavy card framing.

### Feature card

A softly rounded white card pairing a concise title and copy with a product UI example, screenshot, or small illustrative icon.

### Section eyebrow

A compact uppercase monospaced label in a small accent color, placed immediately above a larger Inter section heading.

### Product gallery

A dense collage of real website screenshots, framed as a broad visual field rather than a uniform set of identical tiles.

### Measured component styles

- **Primary button** (“Check availability”): background #f6339a · text #ffffff · radius 8px · padding 8px 12px · 700 14px inter
- **Secondary button** (“Get started”): background #000000 · text #ffffff · radius 32px · padding 8px 16px · 600 14px inter
- **Link** (“Docs”): transparent background · text #030712 · radius 0px · padding 0px · 400 14px inter
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 16px inter
- **Card** (“Filters What’s a website these days with”): background #ffffff · text #030712 · radius 16px · padding 8px · 400 16px inter

## Do

- Use white as the dominant page canvas.
- Reserve near-black for strong headings and dark code surfaces.
- Use cyan, mint, and pink as small technical accents.
- Pair Inter interface text with Plex Mono technical labels.
- Let whitespace separate major sections.
- Use pale hairlines to define cards without heavy framing.

## Don't

- Do not turn accent colors into large page backgrounds.
- Do not add decorative gradients unsupported by the page.
- Do not use heavy shadows on every card.
- Do not crowd the hero with extra content.
- Do not make supporting copy compete with the headline.
- Do not standardize the varied gallery into repetitive placeholders.

## Agent prompt

Build a new developer-tools page in Tailwind CSS's bright, code-centric visual language. Use Gallery White (#ffffff) as the dominant canvas, Night Ink (#030712) for headings and key contrast, and Mist Divider (#f2f2f3) for quiet card edges. Use Slate Copy (#4a5565) for supporting text. Pair Inter with Plex Mono for code, metadata, and uppercase section eyebrows. Keep the opening headline large, left aligned, and spacious; follow it with product evidence in dark Editor Charcoal (#1d202a) panels. Add only small Sky Syntax (#74d4ff), Mint Syntax (#96f7e4), and Signal Pink (#f6339a) accents. Organize later content into crisp grids, screenshot-led feature cards, and a broad real-product gallery. Use restrained borders, rounded cards, and a dark pill CTA; keep the page flat, readable, and distinctly technical.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column, left-aligned headline and supporting copy, followed by CTA and search, with product demo below. | Primary start action, Quick search | Oversized heading, Dark pill CTA, Code preview |
| 2 | logo-cloud | Introductory copy and CTA above a four-column logo field. | Sponsor discovery, Become a sponsor | Logo grid, Monochrome marks, Small eyebrow |
| 3 | feature-grid | Large multi-column card grid with a wide opening feature and varied card spans. | Feature exploration, Interactive UI examples | Soft card borders, Screenshot previews, Compact icons |
| 4 | feature-grid | Three-column feature area with a wide top card and smaller examples beneath. | Responsive demo, Feature comparison | Light-gray section band, Rounded cards, Interface mockups |
| 5 | how-it-works | Left-aligned section introduction paired with a wide code-and-output demonstration. | Explain build process, Show production result | Eyebrow label, Dark editor panel, Split interface |
| 6 | gallery | Left-aligned headline and copy above a wide, dense collage of website imagery. | Browse examples, Discover use cases | Masonry-like collage, Real website screenshots, Varied tile sizes |
| 7 | footer | Three columns of link groups aligned across a quiet white footer. | Browse documentation, Explore resources | Text-link columns, Small group headings, Minimal framing |
| 8 | footer | Single-row closing strip with small controls at left and legal links at right. | Open legal policy, Access appearance controls | Compact metadata, Low-contrast footer details |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/tailwindcss-com