UI Perfection

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)

• Alt Text: Images must have alt attributes.
• Contrast: Text color must pass WCAG AA contrast ratio against background.
• Forms: Inputs must have associated labels (visible or aria-label).
• Keyboard: All interactive elements must be reachable via Tab.

4. Perfection Checklist

• Is it responsive on mobile (320px+)?
• Are hover states present?
• Are transitions smooth?
• Do images have alt text?
• Does it look "Premium"? (Subjective check - ask yourself: "Would Apple/Linear ship this?")