# Midnight Gallery - DESIGN.md
> Dark editorial drama for portfolios that need to feel expensive.

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: dramatic, premium, artistic, cinematic, bold
- Built for: photographer, photography, videographer, agency, designer portfolio, architect, fashion, film studio, gallery, artist

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#101013` | rich charcoal, never #000 |
| ink | `#EDEBE6` | warm gallery white text |
| accent | `#B7A36C` | muted gold, hairlines and hover states only |
| support | `#838087` | stone gray secondary text |
| wash | `#17171B` | raised panels |

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: **Cormorant** (400 at very large sizes, the thinness is the luxury)
- Body: **Figtree**
- Scale: Display clamp(3rem, 8vw, 6.5rem) leading-none; body 0.9375rem/1.7
- Notes: Display only above 3rem or it loses presence. Project titles get an index number in mono gold (01, 02).
- Import: `https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Figtree:wght@300;400;500;600&display=swap`

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

## Layout DNA
- Work-first: hero IS the first project, full-bleed, title overlaid bottom-left
- Project grid: asymmetric 2fr/1fr alternating, generous 4rem gaps, captions on hover only (desktop) always-visible (mobile)
- Massive display text moments between project groups, half-opacity, acting as section dividers
- Footer is a full-screen contact statement: huge serif 'Let's make something' with gold underline link

## The hero
Full-viewport flagship image or muted autoplay loop, vignette only at bottom 30%, project title in thin Cormorant bottom-left with mono index '01', scroll cue as a 1px gold line that grows downward, pulsing gently.

## Imagery
The work itself, displayed huge. Hover: slow scale 1.03 over 1.2s. Color untouched, the chrome around it stays neutral so work pops.

## Components
- **Buttons:** Text links only: gallery-white with 1px gold underline at 40% opacity, hover to 100% with sweep animation; no filled buttons anywhere
- **Cards:** Frameless images, caption block below: title in display 1.375rem, meta in mono stone 0.75rem
- **Nav:** Invisible until scroll, then a charcoal-blurred slim bar fades in; logo left, two links + contact right, all small mono caps

## Motion
- Recipes that fit this direction: fade-rise-slow, image-zoom-slow, underline-sweep, crossfade-gallery, scroll-cue-pulse, scroll-pin-hero, clip-image-bloom, horizontal-rail, mask-text-reveal
- Animate transform and opacity only; honor prefers-reduced-motion; one ambient motion per viewport, maximum.

## Never do (this direction's anti-patterns)
- Nothing decorative competes with the work: no patterns, no illustrations
- No light mode, this direction is dark or it is nothing
- Gold appears only as hairlines and text, never fills
- No grid of equal squares, rhythm must vary

## 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 "Midnight Gallery" 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.