AGH Design
Use the canonical visual authorities before making AGH design decisions.
Authority
packages/ui/src/tokens.css: canonical token source consumed by Tailwind v4.DESIGN.md: rationale, generated token tables, anti-patterns, and semantic component contracts.packages/ui/src/index.ts: the @agh/ui surface contract — the canonical primitive inventory.packages/ui/src/components/**/*.tsx: canonical production recipes.COPY.md: product voice, terms, and public claim rules.PRODUCT.md: audience, register, design principles, and anti-references.
Top-of-mind invariants
- Design for people running agent work, not an expert console — calm by
default, deep on demand: the default read of a screen is plain-language and
sparse; density, mono ids, and raw enums live on inspection surfaces.
- Dark mode only; warm-dark surface ramp; one
--color-accent target per viewport.
- Signal color marks live state only, never taxonomy — rows and cards stay
neutral at rest.
- Flat depth model; use
--shadow-overlay for overlays and --shadow-highlight for active rims.
- Pull values from
--color-*, --text-*, --radius-*, --duration-*, and --shadow-* tokens; do not hardcode production hex or one-off sizes.
<Eyebrow> is the only uppercase label contract; do not inline typography tuples for labels.- See
DESIGN.md section 10 for the anti-pattern list and lint/test guardrails.
Named visual contracts
When a task or spec names an OpenDesign artifact, mock, screenshot, or other
trusted visual reference, activate agh-ui-screenshot before implementation
and follow its Visual Contract Mode. Implement from the rendered reference,
not source inspection alone; an implementation-only screenshot never proves
parity. The reference is normative for visual language — layout, anatomy,
typography, tokens, motion — and lossy for everything else: content, data,
copy, brand marks, and which controls exist stay with runtime truth,
COPY.md, and the brand inventory, recorded as authorized differences.
Static HTML artifacts
Inline or import actual values from packages/ui/src/tokens.css. Mirror the class
structure and component anatomy in packages/ui/src/components where possible.
Keep artifacts dark, flat, calm, and functional. Use literal CSS only to represent
exported token values; do not invent a parallel palette.
Production code
Reuse gate — before authoring any component, map every generic UI need against
packages/ui/src/index.ts and import the primitive from @agh/ui instead of
re-implementing it. Redefining an exported name in web/ or packages/site/
fails lint (compozy-ui-reuse/no-shadow-ui-primitive); genuinely
domain-specific variants take a domain-prefixed name. New generic primitives
land in packages/ui with story + test; domain composites in
web/src/systems/<domain>/.
Edit the owning surface: web/, packages/ui/, or packages/site/. Consume
CSS variables and bare Tailwind v4 token utilities. If tokens.css or
packages/site/app/global.css changes, run make codegen and then
make codegen-check so DESIGN.md stays synchronized.
Completion Criterion
The change is complete when it uses the canonical tokens and primitive owner,
introduces no parallel palette or shadow primitive, respects the owning
surface's instructions, regenerated design artifacts have no drift when a
token source changed, and every named visual contract has a passing evidence
bundle with zero unresolved blocking divergence.
Error Handling
DESIGN.md and runtime tokens disagree: treat packages/ui/src/tokens.css as source, run codegen, and inspect the regenerated spec rather than editing generated regions.- No exported primitive fits: decide whether the need is generic or domain-specific; add generic primitives to
packages/ui and domain composites to the owning Web system.
- A plausible mock implies unsupported runtime behavior: remove the unsupported control or metric; daemon truth wins.
- Runtime truth conflicts with a normative visual reference: follow runtime truth, record the contract conflict, and reconcile or explicitly authorize the reference delta before claiming parity.
- The reference shows placeholder art, demo data, or omits product content: a prototype is lossy — keep the canonical owner (brand inventory, runtime truth, existing views), record the authorized difference, and never grow an
@agh/ui brand primitive or delete product content to match a mock.
1---2name: agh-design3description: AGH visual-design authority for production UI, static artifacts, prototypes, and reviews. Use when creating or reviewing an AGH surface or changing tokens, typography, spacing, depth, icons, or motion. Do not use for capture-only verification; use agh-ui-screenshot.4---56# AGH Design78Use the canonical visual authorities before making AGH design decisions.910## Authority11121. `packages/ui/src/tokens.css`: canonical token source consumed by Tailwind v4.132. `DESIGN.md`: rationale, generated token tables, anti-patterns, and semantic component contracts.143. `packages/ui/src/index.ts`: the `@agh/ui` surface contract — the canonical primitive inventory.154. `packages/ui/src/components/**/*.tsx`: canonical production recipes.165. `COPY.md`: product voice, terms, and public claim rules.176. `PRODUCT.md`: audience, register, design principles, and anti-references.1819## Top-of-mind invariants2021- Design for people running agent work, not an expert console — calm by22 default, deep on demand: the default read of a screen is plain-language and23 sparse; density, mono ids, and raw enums live on inspection surfaces.24- Dark mode only; warm-dark surface ramp; one `--color-accent` target per viewport.25- Signal color marks live state only, never taxonomy — rows and cards stay26 neutral at rest.27- Flat depth model; use `--shadow-overlay` for overlays and `--shadow-highlight` for active rims.28- Pull values from `--color-*`, `--text-*`, `--radius-*`, `--duration-*`, and `--shadow-*` tokens; do not hardcode production hex or one-off sizes.29- `<Eyebrow>` is the only uppercase label contract; do not inline typography tuples for labels.30- See `DESIGN.md` section 10 for the anti-pattern list and lint/test guardrails.3132## Named visual contracts3334When a task or spec names an OpenDesign artifact, mock, screenshot, or other35trusted visual reference, activate `agh-ui-screenshot` before implementation36and follow its Visual Contract Mode. Implement from the rendered reference,37not source inspection alone; an implementation-only screenshot never proves38parity. The reference is normative for visual language — layout, anatomy,39typography, tokens, motion — and lossy for everything else: content, data,40copy, brand marks, and which controls exist stay with runtime truth,41`COPY.md`, and the brand inventory, recorded as authorized differences.4243## Static HTML artifacts4445Inline or import actual values from `packages/ui/src/tokens.css`. Mirror the class46structure and component anatomy in `packages/ui/src/components` where possible.47Keep artifacts dark, flat, calm, and functional. Use literal CSS only to represent48exported token values; do not invent a parallel palette.4950## Production code5152Reuse gate — before authoring any component, map every generic UI need against53`packages/ui/src/index.ts` and import the primitive from `@agh/ui` instead of54re-implementing it. Redefining an exported name in `web/` or `packages/site/`55fails lint (`compozy-ui-reuse/no-shadow-ui-primitive`); genuinely56domain-specific variants take a domain-prefixed name. New generic primitives57land in `packages/ui` with story + test; domain composites in58`web/src/systems/<domain>/`.5960Edit the owning surface: `web/`, `packages/ui/`, or `packages/site/`. Consume61CSS variables and bare Tailwind v4 token utilities. If `tokens.css` or62`packages/site/app/global.css` changes, run `make codegen` and then63`make codegen-check` so `DESIGN.md` stays synchronized.6465## Completion Criterion6667The change is complete when it uses the canonical tokens and primitive owner,68introduces no parallel palette or shadow primitive, respects the owning69surface's instructions, regenerated design artifacts have no drift when a70token source changed, and every named visual contract has a passing evidence71bundle with zero unresolved blocking divergence.7273## Error Handling7475- **`DESIGN.md` and runtime tokens disagree:** treat `packages/ui/src/tokens.css` as source, run codegen, and inspect the regenerated spec rather than editing generated regions.76- **No exported primitive fits:** decide whether the need is generic or domain-specific; add generic primitives to `packages/ui` and domain composites to the owning Web system.77- **A plausible mock implies unsupported runtime behavior:** remove the unsupported control or metric; daemon truth wins.78- **Runtime truth conflicts with a normative visual reference:** follow runtime truth, record the contract conflict, and reconcile or explicitly authorize the reference delta before claiming parity.79- **The reference shows placeholder art, demo data, or omits product content:** a prototype is lossy — keep the canonical owner (brand inventory, runtime truth, existing views), record the authorized difference, and never grow an `@agh/ui` brand primitive or delete product content to match a mock.
compozy