Catalog · Nº 03

Craft — 11 brand-agnostic rendering principles.

Skills declare which craft rules they require. The agent loads the matching rules into its system prompt so quality concerns (a11y, motion, color, type) stay invariant across visual systems.

  1. 01 Accessibility baseline Universal rules for the legal floor of accessibility plus the craft commitments that go beyond it. The active DESIGN.md decides brand appearance; this file decides which rules an artifact has to clear before it ships.
  2. 02 Animation discipline Universal rules for when motion earns its place in a UI and what numbers constrain it. The active DESIGN.md decides brand-specific motion personality; this file decides whether motion should run at all and at what duration, easing, and accessibility floor.
  3. 03 Anti-AI-slop rules Concrete, checkable rules that distinguish "designed by a human who has shipped product" from "default LLM output." Several rules below are auto-enforced by the daemon's lint-artifact linter — failing an enforced rule is not a style preference, it is a regression. The rest are guidance for agents and reviewers and are flagged inline as "(guidance, not auto-checked)" so the contract with the linter stays honest.
  4. 04 Color Universal color rules applied on top of the active DESIGN.md. The design system supplies the palette tokens; this file enforces how to use them.
  5. 05 Editorial typography hierarchy Extends typography.md + typography-hierarchy.md. Defines hierarchy behavior for editorial surfaces: long-form articles, magazine layouts, digital guides, editorial landing pages, and blog posts.
  6. 06 Form validation Universal rules for form validation lifecycle, error wiring beyond the accessibility baseline, and the schema-as-contract layer that makes the same validation work on the server and the client. The active DESIGN.md decides how the field looks; this file decides when the field tells the user it's wrong, how the error reaches assistive tech, and where the rule lives.
  7. 07 Laws of UX Universal cognitive, perceptual, and behavioral heuristics that decide what a UI composes — how many pricing tiers fit on a screen, where a primary action anchors in scanning order, when a progress indicator earns its place, why a settings list needs grouping. The active DESIGN.md decides brand visual language; the existing craft files decide rendering rules (color, typography, motion, states, ARIA, RTL, forms); this file decides composition rules grounded in named research.
  8. 08 RTL and bidirectional Universal rules for right-to-left layout and bidirectional text. The active DESIGN.md decides brand visual language; this file decides how that language behaves when the script reads from the right or mixes direction within a line.
  9. 09 State coverage Universal rules for what every interactive surface must render. The active DESIGN.md decides how each state looks; this file decides which states must exist and what they must contain. The single most reliable AI-design failure is shipping only the populated state.
  10. 10 Typography Universal typography rules that apply on top of any DESIGN.md. The active design system decides which fonts; this file decides how they behave at every size.
  11. 11 Typography hierarchy Shared hierarchy contracts that layer on top of typography.md. This file does not repeat scale ranges or tracking values — those live in typography.md. This file defines how hierarchy behaves: entry points, rhythm, tension, and the conditions under which controlled violations are allowed. This contract applies per-surface (a page with multiple pacing resets may establish new primaries at intentional intervals), not globally.