# Blueprint Works - DESIGN.md
> Built-things credibility for trades and industrial outfits.

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: sturdy, industrial, honest, capable, no-nonsense
- Built for: construction, trades, tradesman, contractor, builder, manufacturing, marine, engineering, logistics, moving

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#F5F6F4` | concrete white |
| ink | `#1B1F22` | gunmetal text |
| accent | `#E8A33D` | safety amber for CTAs and key stats |
| support | `#74899C` | steel blue for secondary elements and links |
| wash | `#E7E9E5` | section alternation |

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: **Barlow Condensed** (600 uppercase for H1/H2, sentence case 500 for H3)
- Body: **Barlow**
- Scale: Display clamp(2.5rem, 6vw, 4.5rem) tracking-normal; body 1rem/1.65
- Notes: One superfamily, condensed display gives the industrial signage feel. Measurements and specs in 'Barlow Semi Condensed' with tabular feel.
- Import: `https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Barlow:wght@300;400;500;600&display=swap`

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

## Layout DNA
- Hazard-stripe motif used ONCE: a 4px amber/gunmetal diagonal strip under the hero, never repeated
- Project gallery as full-width alternating rows: photo 50% / spec sheet 50% with mono-ish spec tables
- Stat band: years operating, projects completed, tonnage, in huge condensed numerals
- Certifications and partner logos in a ruled grayscale strip, they matter in this sector

## The hero
Full-bleed jobsite photo, gunmetal gradient from bottom-left, condensed uppercase headline bottom-left aligned, amber CTA 'Get a quote' + steel ghost 'See projects'. A thin amber rule runs along the very top of the page.

## Imagery
Real jobsite and workshop photography, golden-hour or overcast, machines and hands at work. Grade slightly cool with amber pops. Drone establishing shots for credibility.

## Components
- **Buttons:** Rectangular 4px radius, amber fill gunmetal text; hover darkens amber; secondary steel-blue outline; large hit areas, these users are on phones in the field
- **Cards:** Concrete wash, 6px radius, 1px #D2D5D0 border, photo top, spec rows with dotted leaders inside
- **Nav:** Gunmetal bar, white condensed links, amber 'Get a quote' always pinned right; phone number with icon visible on all sizes

## Motion
- Recipes that fit this direction: counter-up, fade-rise-stagger, rule-draw, parallax-drift, scroll-pin-hero, counter-up, 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)
- No more than one hazard-stripe element, it tips into costume fast
- No thin elegant serifs, wrong register entirely
- No abstract 3D blobs or tech gradients
- Don't hide the phone number, trades live on calls

## 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 "Blueprint Works" 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.