Frontend Aesthetic

Visual design guidance for beautiful, consistent, and accessible UIs.

Core Principles

1. Visual Hierarchy

• Size, color, contrast guide the eye
• Primary actions should be obvious
• Group related elements visually

2. Spacing & Layout

• Use consistent spacing scale (4px, 8px, 16px, 24px, 32px, 48px, 64px)
• Whitespace is a design element, not empty space
• Align elements to a grid

3. Typography

• Limit to 2-3 font families max
• Use font weight for hierarchy (not just size)
• Line height: 1.4-1.6 for body, 1.2 for headings
• Max line length: 60-80 characters

4. Color

• Primary, secondary, accent colors
• Semantic colors: success (green), warning (yellow), error (red), info (blue)
• Ensure 4.5:1 contrast ratio for accessibility
• Dark mode: don't just invert, redesign

5. Motion & Animation

• Subtle, purposeful animations (200-300ms)
• Ease-out for entrances, ease-in for exits
• Reduce motion for accessibility preference

Component Patterns

Buttons

/* Primary */
background: var(--primary);
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;

/* Hover: slight brightness change */
/* Active: scale(0.98) */
/* Disabled: opacity 0.5, cursor not-allowed */

Cards

background: var(--surface);
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
/* Hover: elevate shadow */

Forms

• Labels above inputs (not placeholder-only)
• Clear focus states (outline, not just color)
• Error states: red border + icon + message
• Success feedback on submission

Navigation

• Current page indicator
• Consistent iconography
• Mobile: bottom nav or hamburger (not both)

Aesthetic Validation with Playwright MCP

Use the actual Playwright MCP tools to validate visual design:

Step 1: Navigate and Screenshot

mcp__playwright__browser_navigate(url: "http://localhost:3000")
mcp__playwright__browser_take_screenshot(fullPage: true, filename: "full-page.png")

Step 2: Check Spacing & Alignment

mcp__playwright__browser_evaluate(function: `
  // Check computed margins/paddings
  const elements = document.querySelectorAll('*');
  const spacings = new Set();
  elements.forEach(el => {
    const style = getComputedStyle(el);
    ['margin', 'padding'].forEach(prop => {
      ['Top', 'Right', 'Bottom', 'Left'].forEach(dir => {
        const val = parseInt(style[prop + dir]);
        if (val > 0) spacings.add(val);
      });
    });
  });
  return [...spacings].sort((a,b) => a-b);
`)

Check: Does it follow 4px/8px grid?

Step 3: Check Color Palette

mcp__playwright__browser_evaluate(function: `
  const colors = new Set();
  document.querySelectorAll('*').forEach(el => {
    const style = getComputedStyle(el);
    colors.add(style.color);
    colors.add(style.backgroundColor);
  });
  return [...colors].filter(c => c !== 'rgba(0, 0, 0, 0)');
`)

Check: Limited palette? Consistent use?

Step 4: Check Typography

mcp__playwright__browser_evaluate(function: `
  const fonts = new Set();
  document.querySelectorAll('*').forEach(el => {
    fonts.add(getComputedStyle(el).fontFamily);
  });
  return [...fonts];
`)

Check: Max 2-3 font families?

Step 5: Responsive Test

mcp__playwright__browser_resize(width: 375, height: 667)
mcp__playwright__browser_take_screenshot(filename: "mobile.png")
mcp__playwright__browser_resize(width: 1280, height: 800)
mcp__playwright__browser_take_screenshot(filename: "desktop.png")

Step 6: Check Console for Errors

mcp__playwright__browser_console_messages(level: "error")

Common Anti-Patterns

Don't	Do Instead
Rainbow of colors	Limited, intentional palette
Tiny click targets	Min 44x44px touch targets
Text on busy backgrounds	Overlay or solid backgrounds
Inconsistent border-radius	Pick one: 4px, 8px, or 12px
Auto-playing animations	User-triggered or subtle loops
Placeholder-only labels	Visible labels always

Design System Integration

When working with existing design systems:

• Tailwind: Use config theme values
• Material UI: Follow MD3 guidelines
• Chakra: Use theme tokens
• Custom: Document tokens in CSS variables

Workflow

1. Audit: Screenshot current state
2. Identify: List aesthetic issues
3. Prioritize: Fix high-impact items first
4. Implement: Make CSS/component changes
5. Validate: Screenshot after, compare

Integration

• playwright-automation: Take screenshots, inspect DOM
• web-design-guidelines: Technical accessibility rules
• react-best-practices: Component architecture