docs/frontend/README.md

# Frontend alignment (Quantum Oracle UI)

This folder documents how the **Next.js app** (`quantum-oracle-ui/`) should match the **Stitch mockups** in `stitch_quantum_oracle_prd_cybersecurity/`.

| Document | Purpose |
|----------|---------|
| [FRONTEND_DESIGN_SYSTEM.md](./FRONTEND_DESIGN_SYSTEM.md) | Creative direction, surfaces, typography, components, and Tailwind color tokens |
| [MOCKUP_INVENTORY.md](./MOCKUP_INVENTORY.md) | Every mockup file → suggested route and status |
| [COMPONENT_MAP.md](./COMPONENT_MAP.md) | Reusable UI pieces to extract from HTML mockups |
| [SCREEN_SPEC_TEMPLATE.md](./SCREEN_SPEC_TEMPLATE.md) | Checklist for specifying each screen before implementation |
| [MIGRATION_ORDER.md](./MIGRATION_ORDER.md) | Suggested implementation order and technical constraints |

**Source mockups:** `stitch_quantum_oracle_prd_cybersecurity/stitch_quantum_oracle_prd_cybersecurity/`  
**Canonical design write-up:** `.../zinc_protocol/DESIGN.md` (Zinc / “Calibrated Instrument”)