UI Perfection Protocol
- "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 ).
- 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.
- 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.
- 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?")