Autumn design specDev Tools

Severe, engineered developer minimalism — a pure-black terminal-adjacent surface where nothing is rounded, nothing floats, and a single violet chip is the only colour. The canvas is #000000 stepping only to #0f0f0f and #2a2a2a, with #ededed primary text and a secondary that is ALPHA-WHITE rgba(255,255,255,.6) rather than a grey hex. The defining rule is absolute: the radius census is entirely EMPTY, meaning border-radius 0 on every element on the page, and there are zero real box-shadows — so all structure comes from one 1px #292929 hairline plus full-height framing rails that leave visible gutters, making the page read like a schematic. Type is a strict two-voice split in which mono actually OUTNUMBERS sans: Geist Mono UPPERCASE at 12px carries every nav item, button and eyebrow, while Geist handles prose at a LIGHT weight 300; the display sits at 56/56, line-height exactly equal to font size, with a hard -5% tracking, and nothing anywhere exceeds weight 400. One violet #9564ff owns the single filled CTA and green #2b8c3f is reserved for status. Atmosphere is entirely low-alpha and structural — a six-step white fade-rail gradient family, a rgba(255,255,255,.06) dot grid and a blur(12px) sticky nav, with no glow, canvas or grain. Motion is cubic-bezier(0.4,0,0.2,1) with an ease-out-expo for reveals and exactly one keyframe, a 20s ticker.

Browse Autumn 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.

Marketing site

Source: useautumn.com (live DOM, computed styles), 2026-07-27 (desktop 1512px). Coverage: home page. Dashboard behind login (needs-dashboard). No inputs on the marketing page, so §4 input/focus rows are marked accordingly — 0 stylesheets blocked, so this is a real absence, not a gap. Reality check: hint ("minimal dark") is accurate and sharpens hard. Canvas is pure #000000 stepping only to #0f0f0f/#2a2a2a, text is #ededed with an alpha-white rgba(255,255,255,.6) secondary (not a grey hex). The signature the hint misses: the radius census is completely EMPTY — zero rounded corners on the entire page, making this the squarest system in the library alongside Payload. Structure is a single 1px #292929 hairline (66×) and there are zero real box-shadows. Type is a strict two-voice split: Geist Mono UPPERCASE at 12px for every nav item, button and eyebrow vs Geist for prose, with the display at 56/56 (line-height equal to font size) weight 400 and an unusually strong -5% tracking. One violet #9564ff owns the single filled CTA.

Visual Theme & Atmosphere

Severe, engineered developer minimalism — a pure-black terminal-adjacent surface where nothing is rounded, nothing floats, and a single violet chip is the only colour. Structure comes entirely from thin #292929 rules that draw a visible frame and gutter grid around the content, so the page reads like a schematic. Uppercase Geist Mono chrome sits against a tightly-tracked Geist display, and the only atmosphere is a low-alpha dot grid and a set of left-to-right white fade rails. It deliberately avoids radii, shadows, glows and decorative colour. Feels: severe, engineered, precise, quiet.

Color Palette & Roles

Text

TokenHexRole / usage
text-primary#edededPrimary text (211 uses)
white#ffffffHeadline emphasis, CTA label
text-secondaryrgba(255,255,255,.6)Body / nav / muted (98 uses — alpha, not a grey hex)
grey-bf#bfbfbfTertiary
grey-95#959494Faint
grey-6b#6b6b6bDimmest
gray-400#99a1afTailwind token in use

Surfaces & borders

TokenHexRole / usage
canvas#000000Page background
surface-1#0f0f0fSection step
surface-2#2a2a2aRaised chip / inset
surface-3#2c2c2dAlt inset
border#292929THE hairline (66×)
border-alt#27272a · #1e1e1e · #1a1a1aSofter rules
violet-deep#20143cDark violet wash behind the accent

Accent & semantic

TokenHexRole / usage
violet#9564ffTHE accent — the one filled CTA, links, a 1px accent border
green#2b8c3fSuccess / status only

Rule: chrome is monochrome black-and-white; violet #9564ff appears only on the single filled CTA and small accent marks.

Typography Rules

RoleSize/LineWeightTracking
Display (h1)56 / 56400-5%
Body16 / 20300-2%
Nav (mono)12 / 16400normal, UPPERCASE
Button (mono)12 / 16400normal, UPPERCASE
Link (mono)14400-1%, UPPERCASE
Secondary CTA (sans)16400normal

Patterns: a strict two-voice split — Geist Mono UPPERCASE for all chrome (nav, buttons, eyebrows like // 100% OPEN SOURCE), Geist for all prose. Display line-height EQUALS font size (56/56) at a hard -5% tracking; body runs LIGHT at weight 300. Nothing exceeds weight 400.

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.