# Neon Court - DESIGN.md
> Athletic energy with hard shadows and shouty type.

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: energetic, loud, youthful, competitive, bold
- Built for: gym, fitness, sports club, martial arts, crossfit, personal trainer, esports, dance studio, physio, sports event

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#101012` | charcoal, never pure black |
| ink | `#F5F5F2` | off-white text |
| accent | `#D8FF3E` | acid lime: CTAs, highlights, stat numbers |
| support | `#FF5D3A` | hot ember for secondary tags and hover states, use sparingly |
| wash | `#1A1A1E` | raised surfaces and alternating bands |

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: **Archivo Black** (uppercase, tracking-tight, often clipped or overlapping)
- Body: **Archivo**
- Scale: Display clamp(3rem, 9vw, 7rem) leading-[0.9]; body 1rem/1.6
- Notes: One family, two extremes. Display gets cropped/overflows containers on purpose. Stats in Archivo Black with lime.
- Import: `https://fonts.googleapis.com/css2?family=Archivo+Black:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Archivo:wght@300;400;500;600&display=swap`

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

## Layout DNA
- Diagonal energy: section seams cut at 2-3deg using clip-path, content stays level
- Oversized display type intentionally clipped by container edges
- Kinetic marquee strips between sections with class schedule or member count
- Stat blocks: huge lime numbers, tiny uppercase labels, divided by 1px charcoal rules

## The hero
Full-bleed action photo, dark gradient from left only; headline slams in from the left edge, partially overlapping the photo subject (use a soft text shadow). Lime CTA, ember secondary. A marquee strip runs under the hero with training times.

## Imagery
High-contrast action shots, motion blur welcomed, desaturated except skin tones, lifted grain. Crop tight and aggressive, heads can leave the frame.

## Components
- **Buttons:** Chunky, slight skew(-2deg), lime fill, charcoal text, hard offset shadow (4px 4px 0 #000); active removes the shadow and translates 4px,4px, feels like a slam
- **Cards:** Charcoal wash with 1px #2A2A30 border, sharp corners, lime number plate top-right; hover raises with a lime-tinted shadow
- **Nav:** Sticky charcoal bar, logo left, uppercase mono links, lime active pill that morphs between items

## Motion
- Recipes that fit this direction: marquee-hard, slam-in, counter-up, skew-hover, char-cascade, stack-cards, magnetic-cta
- Animate transform and opacity only; honor prefers-reduced-motion; one ambient motion per viewport, maximum.

## Never do (this direction's anti-patterns)
- No soft pastel anything, no rounded-2xl friendliness
- No script fonts on 'motivation' quotes
- Never use both lime and ember at equal weight, lime leads
- No stock photos of people pointing at whiteboards

## 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 "Neon Court" 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.