# useautumn.com

Source: https://useautumn.com/
Captured: 2026-09-20
Tags: saas, landing, dark, both, dark-techno, swiss, neo-brutalist, technical, futuristic, confident, edgy
Colors: #0c0c0d, #790cc1, #2e2c31, #500caa, #4e4e4f, #3a0c57, #9a69fe, #6c6c6c
Type (h1): Geist · 56px/56px · 400 · tracking -4% — "The managed billing service for scaling companies"
Type (h2): Geist · 40px/44px · 400 · tracking -2% — "Built on Autumn. Loved by teams."
Type (h3): Geist · 24px/24px · 400 · tracking -5% — "Real-time balances"
Type (body): Geist · 16px/20px · 300 · tracking -2% — "One layer for billing, ledgering, entitlements and controls. Autumn moves pricin"
Type (small): Geist · 12px/16px · 500 · tracking -0.3px — "DASHBOARD"
Type (button): Geist · 16px/24px · 400 — "Start for free"
Button: "Start for free" — fill #9564ff, text #ffffff, radius 0px, border 0px, padding 14px 16px, height 52px, type 16px/400

## Images

- Hero (desktop): https://media.lvly.design/library/useautumn-com/hero.webp?v=40d1877a
- Page crop (mid-1): https://media.lvly.design/library/useautumn-com/mid-1.webp?v=91d52cef
- Page crop (mid-2): https://media.lvly.design/library/useautumn-com/mid-2.webp?v=f5681907
- Hero (mobile): https://media.lvly.design/library/useautumn-com/mobile-hero.webp?v=6edf36a5
- Full page (desktop): https://media.lvly.design/library/useautumn-com/full.jpg?v=86fc7180
- Full page (mobile): https://media.lvly.design/library/useautumn-com/mobile-full.jpg?v=73c23c9d
- Clip preview (mp4): https://media.lvly.design/library/useautumn-com/video-pltfb9.preview.mp4?v=e78fe0da

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.

## Steal-worthy details

- Two-weight headline by color, not weight — 56px/56px Geist at weight 400, tracking -4%, with the argument's key phrase at near-white and the connective words dropped to ~#6c6c6c, so a three-line sentence self-highlights without a single bold run
- Zero radius everywhere — `border-radius: 0` on the primary CTA, the announcement pill, the code frame, the feature cells and the diagram nodes alike; there is no radius scale to tune, which is what makes every hairline meet at a true corner
- CTA fused to a bordered icon cell — the 52px solid #9564ff button (14px 16px padding, white 16px/400) ends flush against a separate outlined square holding the arrow, and the ghost secondary repeats the pattern, so the pair reads as one control strip rather than two buttons
- Construction rails as page chrome — 1px #2e2c31 verticals inset ~40px from each edge plus stacked double-hairlines between bands, framing the content column the way a technical drawing frames a part
- Section markers written as code comments — `// THE PROBLEM`, `// THE SOLUTION` at 12px weight 500, uppercase, -0.3px tracking, in a dim gray, each one alone in its own full-width hairline band so the page is chaptered without a heading
- Dithered halftone panel as hero art — the code window floats on a 1-bit dot-screen gradient from #790cc1 through #500caa to #3a0c57, hard-clipped to the right half of the hero; the dots stay visible at full size, which is the point
- Feature grid with no cards — a 3-up grid whose only chrome is the 1px dividers between cells: scattered-pixel glyph top-left, 24px/24px title at -5% tracking, 16px/300 body, generous dead space above each title
- Saturated slab interrupting the black — a full-width green testimonial field flanked by narrow magenta and orange vertical rails, the single place the palette breaks out of violet, which resets the eye halfway down a very long page

## Style recipe

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.