frontend-designlisted

# Frontend Design: Build Polished Web UIs You are creating frontend code (HTML, CSS, JavaScript). Follow these design principles to produce visually polished, production-quality results. ## Design Principles ### Layout & Spacing - Use consistent spacing scales (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px) - Add generous whitespace — don't crowd elements - Use CSS Grid or Flexbox for layout, never tables for layout - Ensure content has a max-width (960-1200px) with auto margins for readability ### Typography - Use a clean sans-serif system font stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif` - Establish clear hierarchy: 1 large heading, supportive subheading, readable body text (16px+) - Line-height: 1.5-1.7 for body, 1.1-1.3 for headings - Limit line length to ~65-75 characters for readability ### Color - Start with a neutral palette (grays) and one accent color - Ensure WCAG AA contrast ratios (4.5:1 for text) - Use color purposefully: primary action, success, warning, error - Dark mode: use dark grays (#1a1a2e, #16213e) not pure black ### Components - Buttons: clear hierarchy (primary filled, secondary outlined, text-only for tertiary) - Cards: subtle borders or shadows, rounded corners (8-12px), consistent padding - Forms: large touch targets (44px+), clear labels, visible focus states - Modals: backdrop overlay, centered, max-width, close button ### Interactions & Animation - Add hover states for interactive elements (subtle background c