Not the light docs site the CSS-framework category implies: the homepage is a dark gray-950 #030712 artboard ruled with faint 1px rgba(255,255,255,.10) grid lines and diagonal-hatch margin gutters, so the whole page reads like its own design tool. Inter runs at a deliberately low weight ceiling — a colossal 96px/400 hero at -0.05em tracking left-aligned, section headings only 40px/500 — while IBM Plex Mono does double duty as 12px 25%-white utility-class annotations captioning every block in the gutter (text-8xl text-white tracking-tighter) and as all the 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, teal #96f7e4 strings) confined to rounded code-editor panels with mac traffic-light dots and line numbers. Controls are pills — a gray-700 #364153 primary at weight 600 — and the design is flat, with depth coming from the grid hairlines rather than any drop shadow.
Browse Tailwind CSS in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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.
Inter, "Inter Fallback", system-ui. One family for everything non-code."IBM Plex Mono", monospace — utility annotations AND all code.| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.