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).

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.