design-guide

name	design-guide
description	Modern UI design system and guidelines for building clean, professional interfaces. Use when creating or modifying any UI components, web pages, React components, HTML/CSS, or visual interfaces. Ensures consistent, modern design with proper spacing, typography, colors, and interaction patterns.

Design Guide

Comprehensive guidelines for creating modern, professional UIs with clean aesthetics and excellent user experience.

Core Design Principles

Clean & Minimal

• Embrace white space—give elements room to breathe
• Remove unnecessary elements and decorations
• Keep layouts uncluttered with clear visual hierarchy

Neutral Color Palette

• Base: Grays (#F8F9FA, #E9ECEF, #DEE2E6) and off-whites (#FAFAFA, #FFFFFF)
• ONE accent color used sparingly for CTAs and highlights
• Avoid generic purple/blue gradients
• Use natural, muted tones when color is needed

Consistent Spacing

• Use 8px grid system: 8, 16, 24, 32, 48, 64px
• Apply consistently to padding, margins, gaps
• Larger spacing (48px+) between major sections
• Tighter spacing (8-16px) for related elements

Typography

• Clear hierarchy with distinct sizes
• Minimum 16px for body text (14px acceptable for secondary text)
• Maximum 2 font families per interface
• Line height: 1.5 for body text, 1.2 for headings
• Use font weight variations (400, 500, 600, 700) for hierarchy

Subtle Shadows

• Light, natural shadows: box-shadow: 0 1px 3px rgba(0,0,0,0.1)
• Slightly deeper for elevated elements: 0 4px 6px rgba(0,0,0,0.07)
• Avoid heavy, dark shadows