Art Direction

the designer's vision, kept faithful by every AI that touches the site

taste is human. keeping it is now enforceable.

every site gets one saved design direction: the palette, the font pairs, the spacing, and the designer's own rules in plain language, including the don'ts. agents read it before building anything, the build resolves values against it, and a check verifies the rendered page afterwards. the design survives the people and the AIs who come later.

open your art direction see what a direction holds

included on every paid plan. import runs dry first, export is standard DTCG.

The artifact

one direction per site, written down where it can be enforced

a design system that lives in a PDF cannot stop anyone. the direction lives on the site itself, structured enough for machines to obey and plain enough for people to read.

palette
the colors that are allowed on the site, with roles. everything else counts as off-palette.
font pairs
which family carries headings and which carries body text, so type stays coherent across every page an agent touches.
spacing
the rhythm the layout breathes in. sections and gaps resolve against it instead of whatever number an AI felt like today.
guidance
the designer's rules in plain language, including the don'ts. "no gradient blobs" written once beats correcting it forever.
waivers
an explicit, recorded exception when a rule genuinely has to bend. a waiver is a decision with a name on it, not a silent override.
readiness
how complete the direction is, honestly. values the system had to guess are marked as guessed until someone confirms them.

readiness is the honesty layer. when the system infers a value it could not confirm, that value is flagged as guessed, visibly, until a human confirms or corrects it. a direction that pretends to be complete is worse than one that admits its gaps.

Enforcement and the check

enforced while building, verified after

two moments matter: when the page is built and when it is judged. the direction is present at both. build_page resolves colors, fonts and spacing against the active direction, so drift is prevented before it needs correcting. then check_design looks at the result and says, concretely, whether it is done.

the deterministic rules

fast, exact, no model in the loop. the check flags:

  • colors and fonts that are not in the direction
  • filler copy the direction bans, and the usual suspects
  • placeholder names like Acme and Jane Doe left in real pages
  • palettes that look like an AI default rather than a decision
  • probes generated from the direction's own don'ts

the rendered check

the real page is rendered, desktop and mobile, and judged as painted. screenshots come attached to the verdict. it looks for:

  • contrast on the page as painted, not as coded
  • type-scale coherence across headings and body
  • the three-equal-cards reflex and other section repetition
  • a hero that fills the viewport instead of stopping short
  • spacing rhythm, and layout that is plainly broken
  • off-palette color as it actually renders

what it cannot see, it says it cannot see

every check result carries an unchecked list: the things this run could not verify, named instead of glossed over. most tools return a green check and let you discover the gaps yourself. this one tells you where its eyes end. that is a feature, and it is the reason the green check means something when it does appear.

Live Page and Provenance

receipts, not theater

plenty of tools let you watch an AI work. a spectator view is reassuring in the moment and worthless an hour later: when the show ends, you are left with a feeling, not a record.

the dashboard shows two things instead. the Live Page is the real rendered page, refreshing as the agent works, served through a signed preview link that expires in 15 minutes. not a simulation of the page, the page. and beside it, the Provenance rail: what was written, where, and when. every apply, every token pushed into a builder's native store, every check verdict, kept as receipts you can read tomorrow.

trust built on watching evaporates when you look away. trust built on receipts is still there in the morning. this is the part i will not compromise on.

apply
12 tokens written to Bricks global colors
apply
type pair written to the Elementor kit
check
rendered, desktop and mobile, 2 findings, 3 unchecked

the Live Page needs plugin 8.6.22 or newer on the site. everything else works today.

Portability

your tokens come in from anywhere, and leave whenever you want

a design direction you cannot take with you is a hostage. import accepts the formats design systems actually live in, every import runs as a dry run first, and export produces strict DTCG that any standards-aware tool can read.

  • DTCG 2025.10

    the W3C community group token format, first stable spec. lenient on the way in, strict on the way out.

  • Tokens Studio

    export from the Figma plugin and import it directly. this is also the Figma route: Figma, Tokens Studio, Respira.

  • Tailwind config

    paste the theme section of a tailwind.config and the colors, fonts and spacing scale come across.

  • pasted :root CSS

    plain CSS custom properties work too. if your design system is a stylesheet, that is enough to start.

  • Claude Design

    output from Claude Design comes in through the art-direction skill, so a direction drafted in a chat becomes an enforced artifact on the site.

apply is where it becomes real: tokens are pushed into the builder's own native stores, Bricks global colors, the Elementor kit, Oxygen variables, nine builders in all, with a receipt per builder. not a parallel system the builder ignores. the builder's own store, carrying your values.

for the people whose work gets mangled

designers and agencies know this story. you hand over a site with a considered palette, a deliberate type scale, spacing that breathes. six months of AI-assisted edits later it has three new blues, a gradient hero and a font nobody chose.

the direction is how your taste survives contact with every tool that edits the site after you. write the rules once, in your own words, and every agent that connects reads them before building anything. the don'ts you are tired of repeating become checks that run without you.

for agencies it also changes the handoff. a site delivered with its art direction saved is a site that stays looking like your work, which is the thing your next client judges you on.

free on every paid plan

Art Direction is not a SKU. it ships with every paid plan because a page built against a direction is a better page, and better pages are the point of the whole product. no separate price, no meter on the checks.

questions

does this replace my designer?

No. Art Direction has no taste of its own. It takes the decisions a human designer already made and keeps them enforced on the live site, every time an AI touches a page. The direction is only ever as good as the designer who wrote it.

what happens when the AI goes off-direction?

check_design says "not done yet" and lists exactly what is off: the off-palette color, the banned phrase, the hero that does not fill the viewport. The agent gets a concrete list to fix instead of a vague score. And because build_page resolves values against the direction in the first place, most drift never makes it onto the page at all.

can i waive a rule?

Yes. A waiver is an explicit, recorded exception: this rule, bent on purpose, on the record. The check respects waivers, so an intentional exception stops showing up as a failure without weakening the rest of the direction.

what formats can i import?

DTCG 2025.10, Tokens Studio exports, a Tailwind config, or pasted :root CSS custom properties. Figma comes in via the Tokens Studio export, and Claude Design output comes in through the art-direction skill. Every import runs as a dry run first, so you see what would change before anything does.

does exporting lock me in?

The opposite. Export produces strict DTCG, the standard token format, portable to any tool that reads it. Your design system arrived as your file and it leaves as your file. A direction held captive would be a contradiction of the whole idea.

which builders does apply write to?

Apply pushes tokens into the builder's own native stores: Bricks global colors, the Elementor kit, Oxygen variables, nine builders in all, each write with its own receipt. Reading and enforcement work across all 17 supported builders.

what does the rendered check cost?

Nothing extra. Art Direction is included on every paid plan, the rendered check with it. There is no separate SKU, no add-on, no per-check meter.

open your art direction read the docs
Summarize with Google AI Mode