# Terminal Grade - DESIGN.md
> Engineering credibility: mono labels, grid lines, zero fluff.

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: technical, precise, modern, trustworthy, dense
- Built for: saas, developer tool, api product, analytics, security, ai product, infrastructure, devtool, hosting, automation platform

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#0B0D10` | deep slate-black background |
| ink | `#E7EAEE` | primary text |
| accent | `#3ECF8E` | signal green for CTAs, live indicators, success |
| support | `#5B6470` | muted slate for secondary text and grid lines |
| wash | `#12151A` | panel surfaces |

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: **Space Grotesk** (500, tracking-tight)
- Body: **Atkinson Hyperlegible**
- Scale: Display clamp(2.25rem, 5vw, 3.5rem); body 0.9375rem/1.7
- Notes: All labels, metrics, nav links in 'JetBrains Mono' 0.8125rem. Numbers ALWAYS mono with tabular-nums.
- Import: `https://fonts.googleapis.com/css2?family=Space+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Atkinson+Hyperlegible:wght@300;400;500;600&display=swap`

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

## Layout DNA
- Visible grid: faint 1px support-color lines partition sections like a blueprint
- Corner ticks (+ marks) at grid intersections, pointer-events-none decoration
- Bento layout for features: varied tile sizes 2fr/1fr, every tile shows a live-feeling detail (mono numbers, status dot, mini chart)
- Status dot (signal green, pulse animation) next to anything implying uptime or live data

## The hero
Left-aligned: mono eyebrow with green status dot ('// SYSTEMS NOMINAL' energy), Space Grotesk headline, sub in muted slate, green CTA + ghost secondary. Right: a terminal/code block panel with typed-out animation showing the product doing its thing. Faint grid lines behind everything.

## Imagery
No photos. Product UI screenshots in browser chrome, terminal blocks, or abstract isometric line diagrams in support color with green nodes.

## Components
- **Buttons:** Compact, 6px radius, green fill with #0B0D10 text; ghost variant 1px support border; hover brightens 8%, active scale .98; mono uppercase labels
- **Cards:** Wash panels, 1px #1D232B border, 10px radius; header row with mono label + status dot; hover border shifts to green at 40% opacity
- **Nav:** Slim 56px bar, wash background with bottom border, mono links, green underline indicator; right side shows a mono terminal tag like TTY-01 (never a version number)

## Motion
- Recipes that fit this direction: type-on, counter-up, pulse-dot, grid-fade-in, spotlight-border, scramble-in, 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 purple-blue AI gradients, the lila ban is absolute here
- No glassmorphism, panels are matte
- No marketing-speak headlines ('Unleash', 'Supercharge'), write like an engineer
- No fake 5-star testimonial walls

## 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 "Terminal Grade" 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.