Method
Six steps, every build. The taste lives in measured rules; the brief supplies the rest.
- 01
Direction and register
Pick one of ten directions measured from real studio work, then how loud to play it: quiet, confident or loud. Choose five range axes (ground, type genre, image medium, composition, motion) so the site can’t default to the last one.
- 02
The spine
Commit in writing to direction, motif, type, scale, palette, grid, hero, imagery, conversion, motion and voice. If a line could describe any site, it isn’t a spine.
- 03
Tokens first
Every size, colour, radius, ease and duration comes from a token. Each text style is a bundle of family, size, line-height, tracking and weight, the way AREA 17 builds.
- 04
Compose
One statement and one subject per hero. Features become chapters with real media, not icon cards. Break the symmetry after the fold. End on a confident line and a real footer.
- 05
Craft pass
Tracking scaled by size, two-tone heads, optical button padding, reduced motion, honest proof, and one bespoke detail in a boring place.
- 06
Audit, look, fix
Run the script, open the screenshot of every screen, fix, run again. The eye catches what the script can’t; in testing it caught more real bugs than the report.
Three registers. One discipline.
Discipline is about count (one idea, one type system, one colour logic), not volume. The same headline, at three volumes:
Design like the studios that win.
Design like the studios that win.
Design like the studios that win.
Ten measured directions
| No. | Direction | Use for | Measured from |
|---|---|---|---|
| 01 | Engineered Dark | Developer tools, AI products, power users | Linear, Raycast, Resend |
| 02 | Ledger Light | B2B SaaS, fintech, APIs, docs | Stripe, Vercel, Mintlify, Ramp |
| 03 | Warm Paper | AI labs, founder-led, mission brands | Anthropic, Cursor, Daylight |
| 04 | Editorial Motion | Studios, architecture, portfolios, culture | Exo Ape, Locomotive, Bennett & Clive |
| 05 | Quiet Luxury | Fashion, beauty, fragrance, objects | Aesop, Totême, Aman |
| 06 | Cinematic Place | Hospitality, travel, real estate, wine | White Desert, ERA, Ace Hotel |
| 07 | Institutional | Museums, nonprofits, publishers, civic | Art Institute of Chicago, Obama Foundation |
| 08 | Deep-Tech Spec | Robotics, aerospace, climate, biotech | Terminal Industries, Vast, Radian |
| 09 | Playful System | Consumer apps, community, games | Family, MindMarket, Lando Norris |
| 10 | Immersive | Launches, campaigns, one hero object | Lusion, Immersive Garden, Unseen |
What’s inside
A SKILL.md your agent reads first, twelve references it loads only when needed, a token system, dependency-free motion helpers, and the audit.
studio-grade/ ├─ SKILL.md workflow, directions, bans ├─ references/ │ ├─ directions.md 10 measured recipes │ ├─ range.md quiet · confident · loud │ ├─ typography.md tracking tables, free faces │ ├─ color.md 40 measured palettes │ ├─ layout.md 18 heroes, 22 sections │ ├─ motion.md eases, springs, policy │ ├─ techniques.md 67 moves with code │ ├─ imagery.md no-photo strategies │ └─ copy · anti-slop · components · evidence ├─ assets/ tokens.css · motion.js └─ scripts/audit.mjs the self-audit