useautumn.com

A near-black developer landing page built like a drafting sheet: the whole document sits inside a hairline frame of #2e2c31 rules, and every band is separated by stacked 1px lines rather than by space alone. Nothing is rounded — buttons, cards, code frames and pills all resolve at 0px — so the page reads as machined rather than soft. Type is Geist throughout, set tight and light: a 56px/56px headline at weight 400 with -4% tracking that dims its own connective words to gray and leaves only the load-bearing phrase in near-white, over 16px/20px body at weight 300. Color is almost entirely absent until it arrives at full saturation: a violet #9564ff CTA, and a hero panel of 1-bit dithered halftone running #790cc1 into #3a0c57 that carries the code window like a printed screen. Monospace uppercase markers (// THE SOLUTION, 12px/500) label each section in their own full-width hairline band, and small scattered-pixel glyphs prefix the nav items and the feature cells. It works because the restraint is total and the two exceptions — the halftone and the violet — are the only things asking for attention.

Build on near-black: page #000000, surfaces #0c0c0d, hairlines and dividers #2e2c31, secondary text #6c6c6c, primary text near-white. Use exactly one saturated accent — violet #9564ff for the primary CTA and any live state — and one texture accent, a 1-bit dithered halftone gradient (#790cc1 → #500caa → #3a0c57) used as a large flat panel behind a product artifact, never as a soft glow.

Set everything in Geist (or Inter with tightened tracking). Scale: h1 56px/56px weight 400 at -4% tracking; h2 40px/44px weight 400 at -2%; h3 24px/24px weight 400 at -5%; body 16px/20px weight 300 at -2%; labels 12px weight 500 uppercase at -0.3px. Headlines stay at weight 400 — emphasis comes from color, setting the key phrase near-white and the rest gray inside the same sentence.

Radius is 0 on every element, with no exceptions and no radius scale. Borders are 1px hairlines; there are no shadows and no glows. Inset two full-height vertical rails ~40px from the viewport edges and run stacked double-hairlines between sections so the frame is visible everywhere. Cards are cells in a grid separated by dividers, never filled panels.

Chapter the page with monospace comment labels (// SECTION NAME) at 12px/500 uppercase, each alone in its own full-width hairline band. Prefix nav items and cell icons with small scattered-pixel glyphs drawn on a 3×3 dot matrix. Buttons are solid accent or plain ghost, 52px tall, 14px 16px padding, 16px weight 400, each ending in a separate 1px-outlined square cell that holds its icon.

Rhythm: tall sections (600–900px) with wide dead space above titles, content held to a ~1320px column inside the rails, three-column grids as the default. Break the black exactly once with a full-bleed saturated slab — a flat green or orange field with contrasting vertical rails — to mark the midpoint. Motion stays minimal: 150–200ms color and border transitions, a blinking terminal caret, no parallax and no easing theatrics.