# Aurora Glass - DESIGN.md
> Soft-glow depth for consumer apps that want to feel new.

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: modern, soft, optimistic, polished, consumer
- Built for: consumer app, mac app, desktop app, desktop software, software utility, fintech, health app, education, productivity, startup

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#0E1116` | deep night base |
| ink | `#F2F4F8` | primary text |
| accent | `#5EEAD4` | soft teal, the single glow color |
| support | `#8B93A7` | muted periwinkle-gray text |
| wash | `rgba(255,255,255,0.04)` | glass panel fill |

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: **Outfit** (600 tracking-tight)
- Body: **Outfit**
- Scale: Display clamp(2.5rem, 6vw, 4.25rem); body 1rem/1.7
- Notes: Single family, weights do the work (600/400/300). Feature labels in 500 small with 0.02em tracking.
- Import: `https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Outfit:wght@300;400;500;600&display=swap`

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

## Layout DNA
- One aurora: a single large mesh-gradient blob (teal core fading to transparent) fixed behind the hero, subtle slow drift, NEVER repeated per-section
- Glass panels: wash fill + backdrop-blur-xl + 1px border white/10 + inset highlight shadow for edge refraction
- Phone/product mockup floats right of hero with a soft teal ambient shadow
- Feature sections zig-zag 2-col, each with a small glass chip icon, no 3-card rows

## The hero
Left: Outfit headline with ONE teal-glow word (text-shadow 0 0 24px rgba(94,234,212,.45)), support sub, teal filled CTA + glass ghost. Right: floating product mockup with parallax tilt. The aurora drifts behind at 20% opacity. Grain overlay at 5% keeps it from feeling sterile.

## Imagery
Product UI mockups in device frames, soft ambient shadows. Abstract: aurora gradients and frosted shapes only, no stock photos of people at laptops.

## Components
- **Buttons:** Rounded-xl, teal fill with night text; glass variant: wash + blur + white/10 border; hover lifts -1px and brightens; active presses scale .98
- **Cards:** Glass treatment exactly as layoutDNA describes; titles 600, body support color; icon chips 40px glass squares with teal stroke icons
- **Nav:** Floating glass pill nav, detached from top by 16px, max-w-fit centered; blur backdrop, white/10 border

## Motion
- Recipes that fit this direction: aurora-drift, fade-rise-stagger, tilt-card, glow-pulse, stack-cards, magnetic-cta, char-cascade
- Animate transform and opacity only; honor prefers-reduced-motion; one ambient motion per viewport, maximum.

## Never do (this direction's anti-patterns)
- ONE glow color total, multi-color auroras are the new slop
- No purple. The lila ban holds even here
- Glass on glass on glass is banned: maximum one glass layer deep
- Never glow body text, only the single hero word and dots

## 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 "Aurora Glass" 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.