Design teardown
Tailwind
A white ruled page: one huge sentence, short captions, and live interface demos.
tailwindcss.com
Design character
Precise and demo-led
A fixed white bar sits over a wide column ruled by hairlines, with hatched side gutters. The hero is one large sentence, then a single supporting line, a black pill, and a search control, then a dark code window beside a small preview. Lower sections repeat a short label, a short title, one sentence, and a live demo. Copy stays at about one sentence: the headline is roughly nine words, titles about four or five, and body lines about twenty-five. The tone is plain, technical, and slightly wry. Hierarchy is label, title, one paragraph, then the demo.
Typography
Inter carries the interface. A monospace named plexMono is used for code, uppercase labels, and inline tokens. Display type is regular weight with tight tracking; section titles are medium and also tight. Body is a mid gray. Labels are small, semibold, and widely tracked.
Color system
Light theme. White page, near-black ink, gray body text, and hairline rules. Sky and pink are small accents. Code sits on a near-black panel with pink, slate, and sky tokens.
Spacing and geometry
A 4px step, used loosely. Sections stack with large gaps. Controls are compact; demos have roomy padding.
Layout
Centered column up to 1536px, with 40px hatched gutters. A 56px white bar stays fixed. Content is a vertical stack of label, title, sentence, and demo. Feature demos sit in a wide bento. The footer is a short three-part link row.
Motion
The page is mostly still. Hover shifts color in about 150ms on a standard ease. Demos animate radius and type size over 350ms, and easing samples run about 750ms. A drag handle pings for 1s. A code highlight fades a sky wash over 2s.
UI fingerprint
- One tight sentence The hero is a single regular-weight line at display size, tracked tight, with one medium sentence under it.
- Mono in the prose Sky monospace tokens sit inside the lede, and uppercase mono labels introduce each section.
- Rules, not chrome Hairlines, a hatch in the gutters, and inset rings do the separating. Surfaces stay flat.
- Demos as proof Each section ends in a working interface sample rather than an illustration.