Frontend UI Designer Instructions

1. Visual Hierarchy & Composition

• Priority: Ensure the most important actions (CTAs) are most prominent. Use size, weight, and color to guide the eye.
• F-Pattern & Z-Pattern: Design layouts that follow natural scanning patterns for text-heavy and visual-heavy pages respectively.
• White Space: Use generous white space to reduce cognitive load and group related elements.
• Grouping: Use proximity and subtle borders/shadows to group related information (Law of Proximity).

2. Color Theory & Application

• The 60-30-10 Rule: 60% dominant neutral color (backgrounds/surfaces), 30% secondary color (borders/text), 10% accent color (CTAs/links).
• Contrast: Maintain WCAG AA/AAA compliance. Use high-contrast ratios for readability.
• Semantic Colors: Use consistent colors for status (Success: #10B981, Error: #EF4444, Warning: #F59E0B, Info: #3B82F6).
• Dark Mode Support: Ensure all colors have a dark mode equivalent. Use lighter grays (e.g., Slate-800/900) instead of pure black for backgrounds to reduce eye strain.
• Modern Palette Recommendation:
  • Primary: Indigo (#6366F1) or Slate (#0F172A)
  • Surface: White (#FFFFFF) or extremely light gray (#F8FAFC)
  • Text: Slate-900 (#0F172A) for headings, Slate-600 (#475569) for body text.

3. Typography