# Autumn — Marketing Site Design Spec

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

## 1. 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.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| text-primary | `#ededed` | Primary text (211 uses) |
| white | `#ffffff` | Headline emphasis, CTA label |
| text-secondary | `rgba(255,255,255,.6)` | Body / nav / muted (98 uses — alpha, not a grey hex) |
| grey-bf | `#bfbfbf` | Tertiary |
| grey-95 | `#959494` | Faint |
| grey-6b | `#6b6b6b` | Dimmest |
| gray-400 | `#99a1af` | Tailwind token in use |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#000000` | Page background |
| surface-1 | `#0f0f0f` | Section step |
| surface-2 | `#2a2a2a` | Raised chip / inset |
| surface-3 | `#2c2c2d` | Alt inset |
| border | `#292929` | THE hairline (66×) |
| border-alt | `#27272a` · `#1e1e1e` · `#1a1a1a` | Softer rules |
| violet-deep | `#20143c` | Dark violet wash behind the accent |

### Accent & semantic
| Token | Hex | Role / usage |
|---|---|---|
| violet | `#9564ff` | THE accent — the one filled CTA, links, a 1px accent border |
| green | `#2b8c3f` | Success / status only |

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

## 3. Typography Rules

- Stack: **Geist** (prose, 230×) and **Geist Mono** (chrome, 240×) — mono slightly OUTNUMBERS sans. Both are open fonts, so the preview uses the real faces.
- Body: 16px / 20px / weight **300** (light) / `rgba(255,255,255,.6)`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 56 / 56 | 400 | **-5%** |
| Body | 16 / 20 | 300 | -2% |
| Nav (mono) | 12 / 16 | 400 | normal, UPPERCASE |
| Button (mono) | 12 / 16 | 400 | normal, UPPERCASE |
| Link (mono) | 14 | 400 | -1%, UPPERCASE |
| Secondary CTA (sans) | 16 | 400 | normal |

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.

## 4. Component Stylings

### Buttons
- **Primary (filled)**: bg `#9564ff`, text `#ffffff`, **radius 0px**, h 44px, Geist Mono 12px/400 UPPERCASE, no border, no shadow.
- **Secondary (outline)**: transparent, text `#ffffff`, **1px solid `#292929`**, radius 0px, h 48px, Geist 16px/400.
- **Nav link**: transparent, text `rgba(255,255,255,.6)`, radius 0px, h 48px, Geist Mono 12px UPPERCASE, each prefixed by a small dot-matrix glyph.

### Inputs
- **None on the marketing page** (0 stylesheets blocked — a real absence, not an unread value). Expect the same square 0px, 1px `#292929` treatment if added.

### States
| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | `#9564ff` / `#ffffff` | colour transition (house `color/background/border` transition, 68×) | no explicit ring captured | — | — |
| Secondary | 1px `#292929` | border/colour shift | no explicit ring | — | — |
| Nav link | `rgba(255,255,255,.6)` | brightens toward `#ededed` | — | — | — |

**Anti-pattern: no focus ring is defined anywhere on brand chrome.** Recommended replacement: `0 0 0 2px #9564ff` at 2px offset.

### Cards / panels
- Fill `#0f0f0f`/`#2a2a2a`, **1px `#292929` border, radius 0px, no shadow.** Separation is the rule itself.

## 5. Layout Principles

- Tailwind v4 container/text/font-weight token set; content framed by full-height 1px `#292929` rails that leave visible left/right gutters.
- Nav: leaf logomark + "Autumn" wordmark left, centered mono UPPERCASE links each with a dot-matrix icon, violet DASHBOARD button flush right (full-height, square).
- Hero: mono eyebrow chip (`// 100% OPEN SOURCE`) → 56px display → light body → dual CTA.
- Sections stack full-width between hairlines; a low-alpha dot grid sits beneath.

## 6. Depth & Elevation

- **Radius scale: EMPTY — `border-radius: 0` on every element on the page.** No pills, no rounded cards, no rounded chips.
- Borders: **1px `#292929`** (dominant, 66×) · `#2a2a2a` · `#27272a` · `#1a1a1a` · `#1e1e1e` · a single 1px `#9564ff` accent border.
- Elevation: **zero real box-shadows** (the one recorded entry is a transparent Tailwind placeholder). Depth is surface steps + hairlines only. One `backdrop-filter: blur(12px)` on the sticky nav.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background, border, fill, stroke | ~.15s | cubic-bezier(0.4,0,0.2,1) | links, buttons (dominant, 68×) |
| opacity | 0.3s / 0.5s | cubic-bezier(0.4,0,0.2,1) | scroll reveals |
| all | 0.3s / 0.4s | cubic-bezier(0.4,0,0.2,1) | general chrome |
| all | 0.5s | **cubic-bezier(0.16,1,0.3,1)** | expressive reveals (ease-out-expo) |
| transform | 0.25s | ease | hovers |

House easing: Tailwind's `cubic-bezier(0.4,0,0.2,1)`, with a slower **ease-out-expo `cubic-bezier(0.16,1,0.3,1)`** reserved for entrance reveals. Exactly **one keyframe on the page — `carouselUp` (20s ease-in-out infinite)**, a slow logo/testimonial ticker. No animation library detected. **No `prefers-reduced-motion` block (0) — recorded as an anti-pattern** given the infinite ticker.

## 8. Backgrounds, Effects & WebGL

- **8 gradients, all low-alpha and structural** — a six-step left-to-right white fade rail family (`rgba(255,255,255,.25/.18/.12/.08/.05/.02)` → transparent), a bottom-up black scrim, and a **`radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px)` dot grid**.
- `backdrop-filter: blur(12px)` on the sticky nav. **16 background videos** (product demo loops). No canvas/WebGL, no grain.

## 9. Do's and Don'ts

### Do
- Keep the canvas pure `#000000`, stepping only to `#0f0f0f`/`#2a2a2a`.
- Use `border-radius: 0` everywhere — nothing on this page is rounded.
- Structure with a single 1px `#292929` hairline and visible framing rails; never a shadow.
- Split the voices: Geist Mono UPPERCASE 12px for all chrome, Geist for prose.
- Set the display at 56/56 (line-height = font size) with -5% tracking; keep body at weight 300.
- Use alpha-white `rgba(255,255,255,.6)` for secondary text rather than a grey hex.
- Reserve violet `#9564ff` for the one filled CTA.

### Don't
- Don't round anything — no pills, no rounded cards.
- Don't add box-shadows or glows; depth is surface steps + hairlines.
- Don't exceed weight 400.
- Don't use violet for more than the single CTA and small accent marks.
- Don't ship the infinite ticker without a reduced-motion block, and don't leave the focus ring undefined.

## 10. Responsive Behavior

- Breakpoints (from stylesheets): Tailwind v4 defaults `40rem / 48rem / 64rem / 80rem / 96rem`, plus a bespoke `768px` min/max pair — 7 seams.
- Nav collapses at 768px; the framing rails and gutters narrow; grids stack.
- `darkSchemeBlocks: 1` — the site is dark by default with one dark-scheme block, no toggle. **0 container queries, 0 reduced-motion blocks.**

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` · Text `#ededed` · Muted `rgba(255,255,255,.6)` · Border `#292929` · Accent `#9564ff`
- Font: `Geist` (body 16px/300) + `Geist Mono` UPPERCASE 12px chrome · **Radius: 0px everywhere** · Control height: 44–48px
- Focus: none defined — use `0 0 0 2px #9564ff` · Hover: house `cubic-bezier(0.4,0,0.2,1)` colour transition

<autumn_design_language>
Use the Autumn design language: severe, engineered developer minimalism. Pure `#000000` canvas stepping only to `#0f0f0f` and `#2a2a2a`, primary text `#ededed`, and secondary text as ALPHA-WHITE `rgba(255,255,255,.6)` rather than a grey hex. The defining rule is that **border-radius is 0 on every single element** — no pills, no rounded cards — and there are **zero box-shadows**; all structure comes from one 1px `#292929` hairline plus full-height framing rails that leave visible gutters. Type is a strict two-voice split: **Geist Mono UPPERCASE at 12px for every nav item, button and eyebrow** (e.g. `// 100% OPEN SOURCE`) against Geist for prose, with the display at 56/56 — line-height EQUAL to font size — weight 400 at a hard -5% tracking, and body running LIGHT at weight 300 (nothing exceeds 400). One violet `#9564ff` owns the single filled CTA, with green `#2b8c3f` for status only; the secondary CTA is a 1px `#292929` outline. Atmosphere is entirely low-alpha and structural: a six-step white fade-rail gradient family, a `rgba(255,255,255,.06)` 1px dot grid, and a `blur(12px)` sticky nav — no glows, no canvas, no grain. Motion is Tailwind's cubic-bezier(0.4,0,0.2,1) with an ease-out-expo cubic-bezier(0.16,1,0.3,1) for reveals, and exactly one keyframe (a 20s `carouselUp` ticker). Feels: severe, engineered, precise, quiet. Avoid: any rounded corner, any shadow or glow, weights above 400, violet beyond the single CTA, and shipping without a focus ring or reduced-motion block.
</autumn_design_language>