N° 00The design language

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.

N° 01Principles

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.

N° 02Color

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.

--mzm-paper#faf9f5 · page bg, warm ivory

--mzm-paper-warm#f4f2eb · elevated surfaces, code

--mzm-ink#1a1a1a · primary text, headlines

--mzm-ink-soft#2c2c2a · body copy under headlines

--mzm-ink-mute#4a4a48 · secondary text

--mzm-ink-fade#7a7a76 · meta, dates, captions

--mzm-accent#2d4a3e · voice color · deep forest

--mzm-accent-soft#5a7d6f · hover, halo

N° 03Type

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.

Source Serif 4 · 64px italic 700

Three keys per entity.

Inter · 14px medium

Talk to Bentley · Approach · Lab · Work

JetBrains Mono · 12px

acmi:repo:madezmedia/acmi:profile

N° 04Microinteractions

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

Folana live

Link · underline grow

scaleX from left, 180ms ease-default

github.com/madezmedia

CTA hover · ring expand

accent-soft ring (180ms), gap +1px on arrow icon

Talk to Bentley →

Card hover · 2px lift

transform translateY(-2px), accent border

hover me

N° 05Constraints

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.

N° 06Source

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.