GuideCommand Manifesto 2

Site style guide.
Decisions, not decoration.

Every value on the AFD site comes from css/tokens-m2.css. This page reads those tokens live, so it can't drift. The reasoning behind them lives in the agent skill at .claude/skills/afd-site-design/.

Section fields

Each colour field has one job. Bright red appears once, for the loudest statement. Cream rests sit between colour fields so the page never runs two loud fields, or two light ones, back to back.

Signal

The hero only. The single loudest statement on the page.

--field-signal

Rule

The honesty check. A step lighter than signal; never on screen with the hero.

--field-rule

Agent

Agent UX: the differentiator. Mint always means agent.

--field-agent

Deep

The agent at work: the handoff and building with an agent.

--field-deep

Ink

Live demos, proof and the finale.

--field-ink

Rest

Cream breathing room. No numeral: rests stay quiet.

--field-rest

Type ramp

Eight shared steps, plus sizes for the honesty statement and closing command. Archivo Black carries statements, Space Grotesk carries reading and the thin half of each statement, IBM Plex Mono carries labels and code.

Commands
Via CLI
afd call
Access isn't enough.
A pause before the point of no return.
An agent deserves the same care in its command contract.
Named capabilities, typed inputs and explicit prerequisites.
This caller asks before execution.
npm install @lushly-dev/afd-server @lushly-dev/afd-cli zod
Design for the agent

The statement

Section headlines pair a heavy line with a thin one at the same size: the claim, then its turn. The thin line sits in a direct child <span> of the h2.

Access isn't enough.
Agents need good UX.

Section anatomy

A figure label opens every numbered section. Colour fields carry a giant tone-on-tone numeral, bottom right (bottom left when a panel fills the right). Crop marks frame posters and live stages. Stamps confirm a result.

Fig. 03Design for the agent
Via CLI

Controls

Buttons are the only rounded elements (--radius). Fields, panels and code blocks are square.

See it in action Open the quickstart Request deletion Apply suggestion Read the thinking

Palette primitives

The raw palette (--afd-*). Section and component CSS reaches for semantic tokens first; primitives are for component-internal detail with no role of its own.

Space

A nine-step scale, plus --section-pad for supporting sections, --statement-pad for major story beats and --heading-gap below each headline.

Motion

Motion marks a moment; it never runs continuously behind reading.

Do

  • Light a statement word by word as it scrolls in (data-lit), on at most three statements per page.
  • Stamp a <mark> once its statement is fully lit.
  • Animate one-time entrances (the hero slash) with --motion-enter and --ease-out.
  • Give every animation a static state under prefers-reduced-motion.

Don't

  • Loop motion behind text people are reading.
  • Hide content with opacity alone; use hidden or inert.
  • Animate layout properties; stick to transform and opacity.
  • Add a second bright-red field, a second light-up per section, or drafting grids.