# Gilded Hour - DESIGN.md
> Warm luxury: champagne light, espresso ink, one thread of gold.

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: light
- Feels like: luxurious, warm, unhurried, polished, intimate
- Built for: boutique resort, resort, luxury resort, luxury hotel, boutique hotel, five star, resort spa, luxury spa, spa retreat, wellness retreat

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#F8F2E7` | champagne cream page background, warm paper, never pure white |
| ink | `#31261A` | deep espresso for headings and body |
| accent | `#84601F` | burnished gold: hairline rules, roman numerals, small-caps details, one CTA underline; never area fills |
| support | `#6E5C46` | smoked taupe for captions and secondary text |
| wash | `#F1E7D6` | champagne mat for alternate bands and image plates |

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: **Marcellus** (400 only, tight leading (1.05); the face and the size carry the luxury, never boldness)
- Body: **Mulish**
- Scale: Display clamp(2.75rem, 6.5vw, 5.25rem) leading-[1.05]; body 1.0625rem/1.85
- Notes: Light body (300/400) with generous line-height. Prices and practical details in small caps with 0.18em tracking. No italics, no scripts; the flourish is a gold small-caps word.
- Import: `https://fonts.googleapis.com/css2?family=Marcellus:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Mulish:wght@300;400;500;600&display=swap`

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

## Layout DNA
- Whitespace IS the luxury: sections breathe with py-32+, one idea per band; if a band needs three ideas it becomes two bands
- One image per viewport, treated as a plate: the photo sits inside a 1px gold keyline with a champagne mat gap, caption in small caps beside or below it, never on it
- Asymmetric editorial splits (5/7, 7/5): an oversized serif headline against a narrow measure of light body copy
- Thin gold rules (1px, max 48px) as eyebrows; the tariff is ruled rows with gold roman numerals, never cards

## The hero
Champagne field. A 48px gold hairline over a small-caps eyebrow, an oversized Marcellus headline with tight leading confined to the left two-thirds, one quiet lede, an espresso text-link CTA on a gold underline. Below: the single hero photo as a full-width keyline plate with a slow ambient zoom. No text on the photo.

## Imagery
Warm low-contrast grade: soften contrast slightly, lift warmth, never punchy HDR. Interiors at dusk, stone and timber and linen textures, water at golden hour, hands setting a table. One subject per frame, generous negative space inside the photo itself.

## Components
- **Buttons:** Quiet: espresso small-caps text link over a 1px gold underline that thickens on hover (transform only); ONE filled button per page, espresso fill, champagne text, square corners. Gold never fills a button
- **Cards:** Banned. Use keyline plates and ruled tariff rows instead: hairline dividers, gold roman numerals, Marcellus names, small-caps prices
- **Nav:** Champagne bar, Marcellus wordmark with wide tracking, small-caps links, gold Reserve link; a single gold hairline under the bar is the page's first gold thread

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

## Never do (this direction's anti-patterns)
- No glitz: no sparkle particles, no shimmer gradients, no metallic textures; gold appears only as hairlines, numerals, and lettering
- No script fonts anywhere, not even a signature; wide-tracked small caps are the flourish
- Never gold-on-gold: gold sits on champagne or espresso only, and small gold text must clear 4.5:1 against its surface
- No crowded sections and never two photos side by side; one plate per viewport

## 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 "Gilded Hour" 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.