# Design System (CRITICAL — Auto-Read Required)

This project has a comprehensive Design System documented in `DESIGN.md` at the project root.

## Before Any UI/UX Work

**BEFORE** making ANY frontend, UI, UX, styling, component, animation, Blade template, or Tailwind-related change, you MUST read `DESIGN.md` using your file reading tool to understand the established:
- Design tokens and color system
- Typography scale and font conventions
- Component patterns (toasts, modals, buttons, indicators)
- Spacing constants and layout architecture
- Animation and transition conventions
- Responsive breakpoint rules

This applies to: Blade views, CSS files, Alpine.js interactions, GSAP animations, Livewire component UI, toast notifications, modals, buttons, indicators, and any other visual element.

## After Completing UI/UX Work

**AFTER** completing any UI/UX change, you MUST update `DESIGN.md` per its Section 15 (Maintenance Protocol):
- Add a new entry to Section 14 (Iteration History) using the provided template.
- Update Section 9 (Component Library) if a component was created or modified.
- Update Sections 5/6/7 if design tokens, fonts, or colors were added/changed.
- Bump the version number and "Last updated" date at the top of the file.

Failure to read and follow `DESIGN.md` will result in inconsistent UI, visual regressions, and wasted iteration cycles.