Files
imail/.ai/guidelines/design-system.md

1.3 KiB

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.