Frontend Design Excellence

name: Frontend Design Excellence version: 1.0.0 description: Master principles and techniques for creating beautiful, accessible, and user-friendly frontend designs. Covers visual hierarchy, spacing, typography, color theory, and modern design patterns. triggers:

•design
•UI
•UX
•frontend design
•user interface
•visual design
•layout
•typography
•color scheme
•accessibility
•responsive design

Core Design Principles

1. Visual Hierarchy

Create clear information architecture through:

•Size & Scale: Larger elements draw attention first
•Contrast: Use color, weight, and spacing to differentiate importance
•Position: Users scan F-pattern (left-to-right, top-to-bottom)
•Proximity: Group related elements together

Example Structure:

code

Hero Section (largest)
  ↓
Primary Content (medium)
  ↓
Supporting Details (smaller)
  ↓
Footer (smallest)

2. Spacing System

Use consistent spacing scale based on 8px grid:

•4px - Micro spacing (icon padding, tight groups)
•8px - Small spacing (compact layouts)
•16px - Medium spacing (standard gaps)
•24px - Large spacing (section separators)
•32px - XL spacing (major sections)
•48px+ - Hero spacing (landing pages)

Rule: Never use arbitrary values like 13px or 27px.

3. Typography Excellence

Font Pairing

•Headings: Sans-serif for modern feel (Inter, Poppins, Montserrat)
•Body: Serif or sans-serif for readability (Georgia, Open Sans, Roboto)
•Monospace: Code and data (Fira Code, JetBrains Mono)

Size Scale (Based on 16px base)

code

- Display: 48-72px (hero headlines)
- H1: 36-48px
- H2: 30-36px
- H3: 24-30px
- H4: 20-24px
- Body: 16-18px
- Small: 14px
- Micro: 12px

Readability Rules

•Line height: 1.5-1.7 for body text
•Line length: 50-75 characters per line
•Letter spacing: -0.02em for large headings, 0.01em for small text
•Font weight: 400 (regular), 600 (semibold), 700 (bold)

4. Color System

Building a Palette

•Primary Color: Brand identity (3-5 shades)
•Neutral Colors: Grays (50-900 scale)
•
Semantic Colors:
- •Success: Green (#10B981)
- •Warning: Yellow/Orange (#F59E0B)
- •Error: Red (#EF4444)
- •Info: Blue (#3B82F6)

Color Application

code

Background Hierarchy:
- Primary BG: White/Gray-50
- Secondary BG: Gray-100
- Tertiary BG: Gray-200

Text Hierarchy:
- Primary text: Gray-900 (87% opacity)
- Secondary text: Gray-600 (60% opacity)
- Tertiary text: Gray-400 (38% opacity)

Contrast Rules (WCAG AA)

•Normal text: 4.5:1 minimum
•Large text: 3:1 minimum
•Use tools: WebAIM Contrast Checker

5. Layout Patterns

Container Widths

css

max-width: 1280px;  /* Desktop */
max-width: 1024px;  /* Laptop */
max-width: 768px;   /* Tablet */
max-width: 100%;    /* Mobile */

Grid Systems

•12-column grid: Flexible for all layouts
•Gutter: 24px (desktop), 16px (mobile)
•Margins: 32px (desktop), 16px (mobile)

Responsive Breakpoints

css

/* Mobile First */
@media (min-width: 640px)  { /* sm */ }
@media (min-width: 768px)  { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }

6. Component Design

Buttons

code

Primary Button:
- Padding: 12px 24px
- Border-radius: 6-8px
- Font-weight: 600
- Hover: Darken 10%
- Focus: Ring outline

Secondary Button:
- Border: 2px solid
- Background: transparent
- Hover: Light background

Icon Button:
- Size: 40x40px
- Icon: 20x20px
- Padding: 10px

Cards

code

Card Structure:
- Padding: 24px
- Border-radius: 12px
- Shadow: 0 1px 3px rgba(0,0,0,0.1)
- Hover: Shadow 0 4px 6px rgba(0,0,0,0.1)
- Border: 1px solid gray-200 (optional)

Forms

code

Input Fields:
- Height: 40-44px
- Padding: 10px 12px
- Border: 1px solid gray-300
- Focus: Border primary-500, ring
- Error: Border red-500

Labels:
- Font-size: 14px
- Font-weight: 600
- Margin-bottom: 6px
- Color: Gray-700

7. Micro-interactions

Hover States

•Transition: 150-200ms ease
•Scale: 1.02-1.05 for clickable items
•Color shift: 10% darker/lighter

Loading States

•Skeleton screens for content
•Spinner for actions
•Progress bars for multi-step

Animations

•Enter: Fade in + slide up (300ms)
•Exit: Fade out (200ms)
•Use ease-out for natural feel

8. Accessibility (A11y)

Essential Practices

•Semantic HTML: Use correct tags (button, nav, main, article)
•ARIA Labels: Add for icon buttons and dynamic content
•Keyboard Navigation: All interactive elements accessible via Tab
•Focus Indicators: Clear visual focus states (ring, outline)
•Alt Text: Descriptive text for all images
•Color Independence: Don't rely solely on color for information

Skip Links

html

<a href="#main-content" class="skip-link">
  Skip to main content
</a>

9. Modern Design Trends

Glassmorphism

css

background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);

Neumorphism (Use sparingly)

css

background: #e0e0e0;
box-shadow: 
  8px 8px 16px #bebebe,
  -8px -8px 16px #ffffff;

Dark Mode

•Use semantic colors that work in both modes
•Reduce pure black (#000) to dark gray (#121212)
•Lower contrast ratios for comfort
•Maintain 4.5:1 contrast for text

10. Performance & Polish

Optimization

•Use system fonts when possible
•Lazy load images below the fold
•Optimize images (WebP format, proper sizing)
•Minimize layout shifts (CLS)

Quality Checklist

• Consistent spacing throughout
• No orphaned text (single words on line)
• Proper image aspect ratios
• Smooth animations (60fps)
• Tested on multiple devices
• Accessibility audit passed
• Loading states implemented
• Error states designed

Quick Reference

Design Token Structure

javascript

const tokens = {
  spacing: [0, 4, 8, 16, 24, 32, 48, 64, 96, 128],
  fontSize: [12, 14, 16, 18, 20, 24, 30, 36, 48, 64],
  fontWeight: [400, 600, 700],
  borderRadius: [4, 6, 8, 12, 16, 24, 9999],
  shadows: {
    sm: '0 1px 2px rgba(0,0,0,0.05)',
    md: '0 4px 6px rgba(0,0,0,0.1)',
    lg: '0 10px 15px rgba(0,0,0,0.1)',
    xl: '0 20px 25px rgba(0,0,0,0.1)',
  }
}

Component Checklist

When designing any component:

•Default state
•Hover state
•Active/pressed state
•Focus state (keyboard)
•Disabled state
•Loading state
•Error state
•Empty state
•Mobile responsive
•Dark mode variant

Common Mistakes to Avoid

❌ Don't:

•Use too many colors (stick to 3-5 + neutrals)
•Ignore spacing system (arbitrary values)
•Mix font weights randomly
•Forget hover states
•Skip accessibility
•Use pure black (#000) on white
•Overcomplicate designs
•Ignore mobile users

✅ Do:

•Start with grayscale, add color last
•Use design systems (Tailwind, Material, Chakra)
•Test with real content
•Design mobile-first
•Use consistent patterns
•Implement feedback for all interactions
•Keep it simple and functional

Tools & Resources

Design Tools:

•Figma (prototyping & design)
•Contrast Checker (accessibility)
•ColorBox (palette generation)
•Type Scale (typography calculator)

Inspiration:

•Dribbble, Behance (showcase)
•Awwwards (award-winning sites)
•Mobbin (mobile app patterns)
•Refactoring UI (design tips)

Component Libraries:

•shadcn/ui (React + Tailwind)
•Radix UI (headless components)
•Headless UI (Tailwind Labs)
•Material UI (comprehensive)

Implementation Workflow

•Start with Content: Understand what needs to be communicated
•Create Hierarchy: Determine importance of each element
•Design in Grayscale: Focus on spacing and layout first
•Add Color: Apply your color system strategically
•Refine Typography: Ensure readability and visual rhythm
•Add Interactions: Implement hover, focus, loading states
•Test Accessibility: Screen reader, keyboard, contrast
•Optimize Performance: Images, fonts, animations
•Mobile Testing: Verify responsive behavior
•Dark Mode: Implement if needed

When to Apply This Skill

Claude should use these design principles when:

•User asks for UI/UX advice
•Creating HTML/CSS components
•Reviewing design implementations
•Suggesting layout improvements
•Building React/Vue/any frontend components
•Discussing color schemes or typography
•Helping with accessibility
•Optimizing user interfaces
•Creating landing pages or web apps

Always prioritize:

•User needs over aesthetics
•Accessibility over decoration
•Performance over complexity
•Consistency over variety