# Porcelain Atelier - DESIGN.md
> Quiet luxury with cream space and serif restraint.

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: elegant, minimal, feminine, premium, calm
- Built for: salon, spa, beauty, hair, skin, therapy, counselling, therapist, jewelry, wedding

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#FBFAF7` | porcelain background |
| ink | `#2B2826` | espresso for text |
| accent | `#9A7B4F` | antique brass, hairline details and CTA text |
| support | `#C9BFB2` | stone for rules and placeholders |
| wash | `#F1EDE6` | alternate sections and image mats |

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 Garamond** (500, generous line-height for elegance, occasional italic for emphasis words)
- Body: **Jost**
- Scale: Display clamp(2.5rem, 5.5vw, 4.25rem) leading-[1.15]; body 1.0625rem/1.8
- Notes: Light geometric body keeps it modern against the romantic display. Letter-space small caps for labels (0.12em).
- Import: `https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600&display=swap`

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

## Layout DNA
- Art-gallery density: sections breathe with py-28+, never crowd
- Images matted: each photo sits inside a wash-colored frame with 1.5rem padding
- Centered is allowed here, but alternate every other section to off-center 60/40
- Hairline brass rules (1px, 32px wide) as section eyebrows above small-caps labels

## The hero
Porcelain field, centered eyebrow (brass hairline + small caps label), Cormorant headline with one italic word, single brass-text CTA with underline that thickens on hover. Below the fold: a matted full-width image, no text on it.

## Imagery
Soft natural light, editorial styling, negative space within the photos themselves. Color-graded toward cream and stone. Detail close-ups (hands, texture, material) outperform wide shots.

## Components
- **Buttons:** Text-only with brass color and 1px underline offset 6px; hover thickens underline to 2px; the rare filled button is espresso with porcelain text, fully square
- **Cards:** Matted image + caption pattern; no borders, no shadows; title in display serif 1.5rem, caption in small caps stone
- **Nav:** Centered logo, links split left/right, all small caps with wide tracking; mobile menu is a full porcelain takeover with display-serif links

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

## Never do (this direction's anti-patterns)
- No drop shadows, the look is flat and printed
- No more than one brass element per viewport
- No bold body text, emphasis comes from italic display words
- Never stack more than two font weights

## 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 "Porcelain Atelier" 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.