# Nocturne - DESIGN.md
> Quiet dark luxury: vast negative space, one element lit per viewport.

A Standout direction system. Drop this file into your AI tool's context (Cursor rules, CLAUDE.md, a system prompt) and build every page inside it. One direction per project; consistency is the point.

## Base
- Mode: dark
- Feels like: minimal, quiet, restrained, premium, still
- Built for: architecture studio, architecture firm, interior architecture, premium consultancy, watch brand, watches, horology, timepiece, premium audio, audio brand

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#161311` | smoked umber, a warm near-black; never pure #000 |
| ink | `#E9E4DA` | warm bone for headings and body |
| accent | `#C68A4F` | dim bronze: hairlines, index numerals, active states only; never area fills |
| support | `#9A9287` | warm ash for secondary text and captions |
| wash | `#1E1A16` | raised umber for the rare lifted surface and the closing band |

One accent, used sparingly: CTAs, one highlighted word, active states. Never the purple-blue AI gradient. Body text keeps 4.5:1 contrast against its real background.

## Typography
- Display: **Schibsted Grotesk** (400 at display sizes with tight leading (1.04); 500 for section heads. Size and air carry the luxury, never boldness)
- Body: **Schibsted Grotesk**
- Scale: Display clamp(2.75rem, 7vw, 5.5rem) leading-[1.04]; body 1rem/1.8
- Notes: One family total. Labels and captions in small caps with 0.2em tracking at 11-12px. Index numerals (01, 02) use tabular figures of the same family in dim bronze, never a mono face.
- Import: `https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Schibsted+Grotesk:wght@300;400;500;600&display=swap`

Maximum two families. Gradient-filled headline text is banned.

## Layout DNA
- Vast dark negative space: sections breathe with py-32+; ONE lit element per viewport (the headline, the photograph, or the index), everything else recedes to ash
- Numbered index navigation: nav links and list rows carry two-digit numerals in dim bronze with wide tracking; the index is the page's one ornament
- Hairline discipline: 1px rules at 12-16% bone opacity structure everything; no cards, no boxes, no shadows
- Small type floats in space: captions and details sit alone with generous margins, pinned to edges of the composition rather than stacked under things

## The hero
A held breath. A 48px bronze hairline over a small-caps index line, an oversized Schibsted headline in bone confined to the left two thirds, one quiet ash lede, a single small-caps text CTA on a bronze underline. Below the type: the one full-bleed photograph, near-monochrome, dissolving into the page through a heavy bottom gradient with a small-caps caption floating on its lower-left. Nothing else.

## Imagery
Near-monochrome with deep shadows: desaturate hard, hold contrast, let the blacks fall into the page base. Architecture in raking light, product detail on dark ground, single figures in vast space. Every photo dissolves into the page through a bottom gradient; never boxed, never matted, never more than one per viewport.

## Components
- **Buttons:** One voice only: bone small-caps text link over a 1px bronze underline at half opacity that lifts to full on hover (opacity only). No filled buttons anywhere; the quietness is the confidence
- **Cards:** Banned. Lists are hairline-ruled index rows: bronze numeral, display name in bone, one ash note, right-aligned small-caps detail
- **Nav:** Nearly invisible: small-caps wordmark left, numbered index links right in ash that light to bone on hover; one hairline under the bar at 12% bone is the page's first rule

## Motion
- Recipes that fit this direction: fade-rise-slow, image-zoom-slow, underline-sweep, crossfade-gallery, mask-text-reveal, blur-up-settle, rule-draw
- Animate transform and opacity only; honor prefers-reduced-motion; one ambient motion per viewport, maximum.

## Never do (this direction's anti-patterns)
- No glows, no neon, no gradient meshes; the only gradient on the page is the photographic bottom fade into base
- No glassmorphism and no floating cards; every surface is matte and flush
- Never pure #000 and never pure #FFF; smoked umber and warm bone only
- Bronze never fills an area and never colors body copy; hairlines, numerals, and active states only
- No dense grids; if a viewport holds more than one lit element, remove one

## Never do (any direction)
- The centered-hero-centered-everything layout. Left-align or split asymmetric.
- The three-equal-cards feature row.
- h-screen heroes (use min-h-[100dvh]).
- Pure #000 backgrounds; off-blacks only.
- Slop copy: Elevate, Unleash, Seamless, Supercharge, Next-Gen, Revolutionize.
- Fake proof: no 99.9%, no John Doe, no invented stats.

---

## This file is the taste. The working parts are live.
DESIGN.md is roughly a tenth of the "Nocturne" direction. Behind the Standout MCP connect, your agent also gets: finished art-directed section code, interactive set pieces, the WebGL motion layer, the cinematic showpiece tier (scene-led pages with generation prompts), per-business seeding so two sites in one direction never match, and critique_design - a critic that renders your page and scores it before you ship.

Connect in one config entry: https://standoutmcp.io - free trial key, 25 tool calls, no card. Then just tell your agent what you're building.