# Tailwind CSS — Marketing Site Design Spec

> Source: tailwindcss.com homepage (live DOM, computed styles), 2026-07-22 at desktop 1512px.
> Coverage: full homepage (hero → sponsor wall → feature chapters → code demos → footer). App: n/a (docs + marketing only). Responsive: breakpoints from stylesheets only; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

The homepage is literally a Tailwind document showing its own work: a near-black `#030712` (gray-950) canvas ruled with faint 1px grid lines and diagonal-hatch margin gutters, so the whole page reads like a design-tool artboard. Every block is annotated in the outer margin with the exact IBM Plex Mono utility string that produced it (e.g. "text-8xl text-white tracking-tighter text-balance") set in 25%-white — the annotations ARE the decoration. The hero is a colossal white Inter headline at weight 400 (not bold) with tight -0.05em tracking. Colour is rationed: one sky→cyan gradient in the logo wave, cyan `#00bcff` on inline class-name tokens, and a full syntax rainbow that appears only inside code-editor panels. Feels: technical, precise, self-demonstrating, confident.

## 2. Color Palette & Roles

### Canvas & surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas (gray-950) | `#030712` | Page background, also `--site-background` |
| panel button (gray-700) | `#364153` | "Get started" pill, solid controls |
| ghost fill | `rgba(255,255,255,.05)` | Search pill, subtle insets |
| border | `rgba(255,255,255,.10)` | Grid lines, hairlines, card edges |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| text-white | `#ffffff` | Hero, headings, nav links |
| muted (gray-400) | `#99a1af` | Sub-headline, body prose |
| slate-400 | `#90a1b9` | Code comments / punctuation |
| label 25% | `rgba(255,255,255,.25)` | Mono utility-class annotations |

### Accent & syntax
| Token | Hex | Role / usage |
|---|---|---|
| cyan-400 | `#00bcff` | Inline class-name tokens in prose (signature) |
| sky-300 | `#74d4ff` | "Plus" nav link, code attribute values |
| pink-400 | `#fb64b6` | Code keywords / tags |
| teal-300 | `#96f7e4` | Code strings |
| slate-200 | `#cad5e2` | Code default text |
| blue-200 | `#bedbff` | Secondary code tokens |
| logo wave | sky→cyan gradient (lab ≈ `#38bdf8`) | Logo mark only |

Rule: cyan/sky is allowed on class-name tokens and the logo; the full rainbow is confined to code panels. Chrome outside code stays white / grey.

## 3. Typography Rules

- Sans / display: `Inter, "Inter Fallback", system-ui`. One family for everything non-code.
- Mono: `"IBM Plex Mono", monospace` — utility annotations AND all code.
- Weight ceiling is low: hero is **400**, section headings **500**. Bold is never used for display.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 96 / 96 | 400 | -4.8px (-0.05em) |
| Section (h2) | 40 / 40 | 500 | -2px (-0.05em) |
| Sub-headline | 18 / 28 | 500 | 0, `#99a1af` |
| Body | 16 / 24 | 400 | 0 |
| Nav link | 14 | 400 | 0, `#ffffff` |
| Utility annotation | 12 | 400 mono | 0, 25% white |
| Code | 13 / 24 | 400 mono | 0 |

Pattern: display type is enormous but weight stays 400–500; tracking tightens uniformly to -0.05em at every heading size.

## 4. Component Stylings

### Buttons
- **Primary ("Get started")**: bg gray-700 `#364153`, text white, weight 600, 14px, padding `8px 16px`, radius `32px` (pill). No border, no shadow.
- **Nav links**: plain white 14px/400, no chrome; "Plus" is sky-300 `#74d4ff`.
- **Version chip ("v4.3")**: 12px/500 pill, `rgba(255,255,255,.10)` fill, radius 16px, padding `2px 6px 2px 10px`.

### Search field
- Full-pill: bg `rgba(255,255,255,.05)`, border `rgba(255,255,255,.5)` hairline, height 40px, `⌘K` hint on the right, placeholder at 50% white.

### Code editor panel
- Rounded panel with three mac traffic-light dots, gutter of grey line numbers, IBM Plex Mono 13px/24, syntax palette from §2 (pink tags, sky attrs, teal strings). The hero's supporting proof surface.

### Grid guides & annotations
- Content is framed by 1px `rgba(255,255,255,.10)` grid lines; margins carry diagonal-hatch fills. Each block is captioned in the gutter with its mono utility string in 25% white.

## 5. Layout Principles

- Content column framed inside a ruled grid; hero text left-aligned, huge.
- Hero anatomy: mono annotation → 96px H1 → mono annotation → 18px grey sub → Get started + Quick search row, all inside grid cells.
- Sections are feature chapters ("Built for the modern web.", "Ship faster and smaller.") each 40px/500 heading + prose + a live code panel or demo.
- Diagonal-hatch gutters flank the content column throughout; separation is by grid line, not shadow.

## 6. Depth & Elevation

- Radii: pills 32px / full; version chip 16px; code panels ~12–16px.
- Shadows: essentially none — the design is flat, depth comes from the grid lines and hatch gutters, not elevation.
- Border-over-shadow philosophy: every edge is a `rgba(255,255,255,.10)` hairline.

## 7. Motion

- Restrained: hover colour/opacity transitions on links and buttons (~150ms ease). No large entrance choreography on the hero.
- Some code panels type/step through examples; smooth-scroll not detected. Motion library: not detected (CSS-native). Never bouncy.

## 8. Backgrounds, Effects & WebGL

- No canvas/WebGL/video. Atmosphere is the ruled grid: 1px `rgba(255,255,255,.10)` lines + repeating diagonal-hatch fills in the margin gutters over the `#030712` canvas.
- Logo mark is an SVG sky→cyan gradient wave using `currentColor` stops.
- Flat solid canvas otherwise — no blurs, no glows.

## 9. Do's and Don'ts

### Do
- Use the near-black `#030712` canvas with 1px `rgba(255,255,255,.10)` grid lines and diagonal-hatch margin gutters.
- Set display type enormous (40–96px) at weight **400–500** with -0.05em tracking; left-align the hero.
- Annotate blocks in the gutter with IBM Plex Mono utility strings at 25% white.
- Highlight inline class-name tokens in cyan `#00bcff`; keep the rest of prose white/grey.
- Confine the syntax rainbow (pink/sky/teal) to code-editor panels.
- Use pill buttons: gray-700 `#364153` primary, `rgba(255,255,255,.05)` search.

### Don't
- Don't use bold (700+) display weights — the hero is 400.
- Don't scatter accent colour into chrome; cyan belongs to class tokens and the logo.
- Don't add drop shadows for depth — use grid hairlines.
- Don't fill the page with saturated brand colour; the canvas is monochrome dark.

## 10. Responsive Behavior

- Breakpoints follow Tailwind's own scale (sm 640, md 768, lg 1024, xl 1280). Grid gutters collapse and the hero type scales down on narrow viewports.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

- Canvas `#030712` · Text `#ffffff` · Muted `#99a1af` · Label `rgba(255,255,255,.25)` · Border `rgba(255,255,255,.10)` · Accent `#00bcff`
- Font: `Inter` display/body, `IBM Plex Mono` labels+code · Body 16px · Radius: 32px pills / ~12px panels · Button: gray-700 `#364153`, 8px 16px
- Hero 96/400 -0.05em · Section 40/500 · Syntax: pink `#fb64b6`, sky `#74d4ff`, teal `#96f7e4`

<tailwindcss-marketing_design_language>
Use the Tailwind CSS marketing design language: a near-black #030712 (gray-950) artboard ruled with 1px rgba(255,255,255,.10) grid lines and diagonal-hatch margin gutters, so the page looks like its own design tool. Inter for everything non-code with a LOW weight ceiling — hero 96px/400 with -0.05em tracking, LEFT-aligned; section headings 40px/500 at -0.05em; body 16/24 400; sub-headline 18/28 500 in gray-400 #99a1af. IBM Plex Mono does double duty: 12px 25%-white utility-class annotations captioning every block in the gutter, and all code. Colour is rationed — cyan #00bcff on inline class-name tokens, sky-300 #74d4ff on the Plus link, and a full syntax rainbow (pink #fb64b6 tags, sky #74d4ff attrs, teal #96f7e4 strings) confined to rounded code-editor panels with mac traffic-light dots and line numbers. Controls are pills: gray-700 #364153 primary (weight 600, 8px 16px, radius 32px), rgba(255,255,255,.05) search. The whole design is FLAT — no drop shadows, depth comes from grid hairlines. Logo is a sky→cyan gradient wave. Feels: technical, precise, self-demonstrating. Avoid: bold display weights, accent colour leaking into chrome, drop shadows, saturated brand fills on the canvas.
</tailwindcss-marketing_design_language>