UI Perfection Protocol

1. "Premium" Aesthetic Rules

• Typography: Use defined font stacks (Inter/Roboto). No default Times New Roman.
• Spacing: Use standard Tailwind spacing (e.g. p-4, m-6). Avoid magic numbers.
• Colors: Use the project's color palette (e.g. bg-primary-500). Avoid raw hex codes unless absolutely necessary for specific branding.
• Interaction:
  • All interactive elements must have :hover and :active states.
  • Transitions should be smooth (transition-all duration-200).

2. Mobile Responsiveness

• Mobile-First: Design for mobile base styles first, then add md:, lg: modifiers.
• Touch Targets: Buttons must be at least 44x44px usable area.
• No Overflow: Check for horizontal scrollbars on mobile.

3. Accessibility (A11y)