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