The system that serves the doctrine.
Five principles, locked tokens, reusable components, microinteractions catalog, anti-patterns. Public docs of how the studio looks — auditable from outside, regression-resistant from inside.
Five constraints, one practice.
If a visual choice violates one of these, it's wrong even if it looks good in isolation. Lifted from the v2 design experiments, codified for v3.
Architectural, not decorative.
Visual choices feel like systems made visible — grids, structure, modularity, interaction-as-information — not stylistic flourish for its own sake.
Kinetic, not static.
A studio that ships autonomous characters and protocol-grade infra should feel alive. Stillness is a choice, not the default.
Coherent across artifacts.
Homepage, ACMI's GitHub README, Folana's feed, TONY's poster, sonic-branding deliverables, RevOps dashboards — all read as one practice.
Sophisticated, not flashy.
No glassmorphism-gradient-blob AI-startup uniform. Ambition shows in restraint with intentional kinetic moments.
Defensible at scale.
The system works at 5px (favicon) and 5000px (Vercel hero). At video frame rate. In dark and (eventually) light mode. Across every product surface.
One palette. No purple.
Single accent color (#2d4a3e deep forest). Everything else is the paper + ink scale. No gradient backgrounds, no purple, no second signal color. The discipline is the differentiation.
Three families. Restraint.
Source Serif 4 for headlines + body. Inter for sans labels + UI. JetBrains Mono for data, code, timestamps. Italic + double-underline is the emphasis pattern.
The system in motion.
Each pattern below is reused across the site. Hover to see it.
Live indicator · breathing pulse
2s loop, opacity + scale + glow
CTA hover · ring expand
accent-soft ring (180ms), gap +1px on arrow icon
Card hover · 2px lift
transform translateY(-2px), accent border
Anti-patterns, explicitly out.
Locked in tokens.json. If a visual proposal touches one of these, it's rejected by construction. The constraints are how we keep the system tight.
- no_purple_gradient_heroPurple/blue gradient hero is the standard SaaS-marketing uniform. We refuse the visual default.
- no_glassmorphismFrosted-glass blur is decorative and dates fast. Editorial layouts age better.
- no_three_js_decorationDecorative 3D scenes signal "we want to look futuristic." Concept made visible typographically reads as confident.
- no_custom_cursor_without_semantic_reasonCustom cursors fight the user's OS. Only allowed when the cursor itself communicates state.
- single_accent_colorDeep forest #2d4a3e is the studio voice. Multiple signal colors dilute brand recognition.
- live_acmi_feed_visibilityPublic feed must NOT be wired to raw coordination timeline (contains internal sales, ops, agent-routing). Curated rotation only.
The tokens are the truth.
app/tokens.css + app/components.css are the single source of truth for color, typography, spacing, motion, and reusable component classes. Every surface (homepage, /acmi, /blog, this page) imports them. Changes cascade.
Lock CID: mikey-lock-v3-editorial-tech-1777742367520. Strategy memo at ~/clawd/projects/madezmedia-rebrand/MADEZMEDIA-COM-MIGRATION-STRATEGY.md. Migration map at V2-V3-MIGRATION-MAP.md.