frontend-ui-designer

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

• Font Pairing: Use modern sans-serif fonts like 'Inter', 'Geist', 'Roboto', or 'SF Pro Display'. Limit to two font families.
• Scale: Use a modular scale (e.g., Major Third).

- H1: 2.25rem (36px), Bold

- H2: 1.875rem (30px), Semi-bold

- H3: 1.5rem (24px), Semi-bold

- Body: 1rem (16px), Regular

- Small: 0.875rem (14px), Medium

• Line Height: 1.5 - 1.6 for body text to ensure readability; tighter (1.2-1.3) for headings.

• 8pt Grid System: Use 4, 8, 16, 24, 32, 48, 64px for all spacing. This creates a rhythmic, professional feel.
• Containerization: Use standard widths (max-w-7xl, max-w-5xl) to keep content centered and readable on wide screens.
• Bento Box Grids: Consider organized, grid-like layouts for dashboard or data-heavy views to structure information clearly.
• Responsive Design: Always consider Mobile-First. Use flexible flex/grid layouts.

• Soft Shadows & Depth: Use box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); instead of harsh borders.
• Glassmorphism: For overlays/navbars, use background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);.
• Subtle Gradients: Use very subtle linear gradients (e.g., Slate-50 to White) or mesh gradients to add depth without distraction.
• Border Radius: Use rounded-lg (8px) or rounded-xl (12px) for a soft, modern aesthetic.
• Micro-interactions: Add purposeful motion (hover states, button clicks, loading skeletons) to provide feedback and delight. Keep animations fast (150-300ms).

• Form Design:

- Single Column: Preferred for readability and mobile-friendliness.

- Labels: Always visible above inputs (avoid placeholders as labels).

- Validation: Real-time inline validation with clear error messages.

- Autofill: Support appropriate autocomplete attributes.

• Empty States:

- Never Blank: Provide a helpful illustration, explanation, and a primary action button (e.g., "No projects yet. [Create Project]").

- Educational: Use this space to teach users about the feature.

• Skeleton Loading:

- Perceived Performance: Use shimmering skeleton screens instead of generic spinners for initial content loads.

- Structure: Mimic the final layout (image, title, text lines) to reduce layout shift (CLS).

• Navigation:

- Thumb Zone: Place primary navigation/actions at the bottom on mobile.

- Gestures: Support common gestures like "swipe to go back" or "swipe to dismiss".

• Keyboard Navigation: Ensure all interactive elements are focusable and have visible focus states (e.g., ring-2 ring-offset-2).
• Touch Targets: Minimum touch target size of 44x44px (or 48x48px) for mobile users.
• Screen Readers: Use semantic HTML (,
• Neurodiversity: Offer clear, distraction-free modes where possible. Avoid autoplaying media.

• Affordance: Buttons should look clickable. Links should be clearly identifiable.
• Feedback: Provide immediate visual feedback for all user actions (loading states, success toasts, error messages).
• Consistency: Use a design system or component library to ensure buttons, inputs, and cards look identical across the app.
• Ethical Design: Avoid dark patterns. Be transparent about data usage and provide easy opt-outs.

# Available Resources

• [Refactoring UI](https://www.refactoringui.com/) - Practical design tips.
• [Google Material 3](https://m3.material.io/) - Design system reference.
• [Lucide Icons](https://lucide.dev/) - Clean, consistent icon set.
• [Adobe Color](https://color.adobe.com/) - Palette generation.
• [Coolors.co](https://coolors.co/) - Fast color schemes.
• [WCAG Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/) - Accessibility standards.