26 lines
1.3 KiB
Markdown
26 lines
1.3 KiB
Markdown
# 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.
|