# Hyran Design System

> The canonical design and UX contract for Hyran products, marketing surfaces, and agentic engineering.

Hyran turns complex fashion supply-chain signals into calm, accountable decisions. Its interface should do the same.

## Read first

- Full design system: https://design.hyran.co/exports/hyran-design-system.md
- Agent skill: https://design.hyran.co/exports/agent-skill/SKILL.md
- CSS tokens: https://design.hyran.co/exports/hyran-tokens.css
- shadcn registry theme: https://design.hyran.co/r/hyran-theme.json
- shadcn component laboratory: https://design.hyran.co/components
- shadcn Create baseline preset: `b37bSrO5o`
- Visual reference: https://design.hyran.co
- Public brand context: https://hyran.co

## Non-negotiable directives

1. Determine the mode before designing:
   - Brand/editorial surfaces are spacious, premium, restrained, and narrative-led.
   - Product/control-room surfaces are dense, precise, task-led, and instrumented.
2. Use Geist across Hyran. Product figures use tabular numerals, never monospace.
3. Ultramarine is the primary action and structural accent. Lavender is atmospheric. Gold is provenance or manual intervention. Green is healthy or confirmed. Red is destructive or critical only.
4. Product elevation has three levels: canvas, surface, overlay. Noticeable shadow is reserved for overlays.
5. Every product page answers: Where am I? What needs attention? What can I do?
6. Preserve provenance at the point of action. AI recommendations, manual edits, and sources must remain inspectable.
7. Prefer semantic shadcn primitives and tokens. Compose house patterns above vendored primitives. Keep the primitive sync target clean.
8. Operational tables are declarative, compact, keyboard-accessible, and use sticky structure where it supports comparison.
9. Motion communicates arrival, state change, and continuity. Respect reduced motion. Avoid theatrical animation.
10. If the result feels like a generic SaaS dashboard, it is not Hyran yet.

## shadcn installation

1. New project baseline:
   `npx shadcn@latest init --preset b37bSrO5o`
2. Exact Hyran semantic theme:
   `npx shadcn@latest add https://design.hyran.co/r/hyran-theme.json`
3. Read this file and the full design-system skill before composing product UI.

The Create preset encodes Nova, Radix, Mist, Indigo, Geist, Lucide, small radius, solid menus, and subtle menu accents. The registry theme replaces generic Indigo with the exact Hyran light/dark V2 tokens and adds success and provenance semantics. The agent skill carries behavioural rules that a theme cannot encode.

## Agent instruction

Before changing a Hyran interface, read the full system and the agent skill above. Identify the target mode, restate the relevant constraints, inspect the existing local components and tokens, then implement with semantic values. Do not invent new brand colours, fonts, radius scales, status semantics, or component frameworks.