Set a project or page art direction before building, understand the eight supplied systems, save variations, and check conformance instead of settling for generic styling.
Where: Designer → art-direction chooser, or the Designer assistant through list_directions, set_direction, and get_direction.
Key ideas
- A direction is a production system: A direction controls typefaces and scale, palette proportions, grid behavior, image treatment, shape language, and motion tempo. It is not a decorative theme applied after a generic page has already been composed.
- Eight built-ins, four families: Swiss Editorial and Paper & Ink are editorial; Brutalist Mono and Neo Grotesk Product are systematic; Maison Serif and Cinematic Dark are atmospheric; Warm Craft and Playful Geometric are expressive. The family narrows structure while the direction supplies exact visual constraints.
- Project default with page overrides: The project direction is inherited by pages. A page override is for a deliberate exception, such as one campaign page outside the house style. Saved custom directions use the selected built-in as a base and remain discoverable to the assistant.
Steps
- Before generating markup, open the direction chooser or ask the assistant to list directions. Filter by family when the brief clearly calls for editorial, systematic, atmospheric, or expressive work.
- Review the pitch, light/dark character, type pair, palette, layout grammar, motion behavior, and the “never” rules for the candidate.
- If the assistant proposed the direction, confirm it before the build. If you named the direction yourself, it can be set immediately.
- Adjust the direction controls only when the brand requires a variation, then save it so the custom direction has a reusable id.
- Build using the selected grammar: use its alignment, proportions, crops, and motion rather than only swapping colors.
- Run the direction check and visual review. A page that looks competent but belongs to a different direction still needs fixing.
Built-in directions
- Swiss Editorial — rational grid, strong typographic hierarchy, editorial restraint.
- Paper & Ink — tactile print character, warmer paper ground, human irregularity.
- Brutalist Mono — blunt monospace structure, hard edges, explicit hierarchy.
- Neo Grotesk Product — product-system clarity, neutral typography, disciplined tokens.
- Maison Serif — refined serif-led luxury and quiet photographic pacing.
- Cinematic Dark — dark atmospheric depth, image-led framing, controlled dramatic motion.
- Warm Craft — material warmth, softer shapes, handmade but intentional rhythm.
- Playful Geometric — expressive color, geometric forms, bolder scale and movement.
Assistant contract
- list_directions is read-only and returns the eight built-ins plus saved custom directions.
- set_direction proposes without writing when confirmation is required; confirm=true commits the selection.
- get_direction reports the direction currently in force for the active or named page, including whether it is inherited or overridden.
- Custom ids follow custom:<builtin-id>:<slug>; do not invent one that list_directions did not return.
Tips
- Choose from the layout behavior first. A dark palette does not make a centered product grid Cinematic Dark.
- Use a page override sparingly; a pile of overrides usually means the project direction is wrong or too weak.
Limitations and important notes
- Directions guide generated and edited work; they cannot guarantee that imported arbitrary HTML already conforms.
- Setting a new direction does not safely restyle every existing page without review.
- A custom variation still inherits assumptions from its built-in base.
Troubleshooting
The page uses the right colors but still feels generic.
Compare type, layout, image treatment, and motion against the direction specimen. Color is only one part of the system.
The assistant stops after proposing a direction.
That is the confirmation boundary. Approve or choose another direction; the build should begin only after the direction is committed.