Frontend Design Fundamentals

Design Fundamentals

Purpose

Create distinctive, beautiful UIs through intentional aesthetic choices backed by solid technical foundation.

Design Thinking

Choose Aesthetic Direction

Before coding, commit to clear aesthetic tone:

Minimal/Refined:

• Generous whitespace, restrained color palette
• Elegant serif or geometric sans-serif fonts
• Subtle interactions, high contrast

Bold/Vibrant:

• Saturated colors, strong contrasts
• Display fonts with personality
• Energetic interactions, dynamic layouts

Playful/Friendly:

• Rounded shapes, warm color palette
• Approachable fonts, comfortable spacing
• Delightful micro-interactions

Retro/Nostalgic:

• Period-specific typography
• Vintage color schemes, textured backgrounds

Organic/Natural:

• Earthy tones, soft shapes, flowing layouts
• Natural imagery, gentle transitions

Principle: Intentionality > intensity. Commit fully to chosen direction.

Avoid Generic AI Aesthetics

Never use these clichés:

❌ Purple gradients on white backgrounds ❌ System fonts everywhere (Inter, Roboto, Arial) ❌ Predictable 12-column grid layouts ❌ Safe, evenly-distributed color palettes ❌ Cookie-cutter card layouts ❌ Rounded corners on everything

Instead, be distinctive:

✅ Choose beautiful, characterful fonts ✅ Commit to bold colors OR refined neutrals ✅ Create unexpected layouts (asymmetry, overlap, diagonal flow) ✅ Use dominant colors with sharp accents ✅ Add visual details (textures, gradients, patterns, depth) ✅ Break the grid intentionally

Technical Foundation

Spacing System

Principle: Consistent scale creates visual rhythm and professionalism.

Choose ONE base unit and multiply:

• Smaller base (4): Finer control, granular spacing
• Larger base (8): Simpler system, bolder spacing

Build your scale:

• Start with base unit (4, 6, 8, or whatever fits)
• Create scale: base × 1, 2, 3, 4, 6, 8, 12, 16, 24
• Stick to scale values (avoid arbitrary in-between values)

Guidelines:

• Tighter spacing for related items
• Generous spacing separates major sections
• Whitespace = breathing room and importance
• Choose scale matching your aesthetic

Typography

Creative Direction:

• Choose distinctive, characterful fonts (not system fonts)
• Pair display font (headings) with refined body font
• Font conveys personality: geometric = modern, serif = elegant, rounded = friendly
• Avoid overused fonts: Inter, Roboto, Arial, Helvetica

Technical Specs:

• Body text: Readable size (typically 16px+, adjust based on font)
• Line height: 1.5-1.6 for body, 1.2-1.3 for headings
• Line length: 50-75 characters optimal
• Type scale: Choose ratio for consistent hierarchy
  • Subtle/refined: Smaller ratio (1.2)
  • Balanced: Medium ratio (1.25)
  • Bold/dramatic: Larger ratio (1.333+)

Font Weights:

• Regular (400): Body text
• Semibold (600): Emphasis, subheadings
• Bold (700): Headings, strong emphasis
• Limit to 3-4 weights maximum

Hierarchy Levels:

• Primary: Page titles, main CTAs
• Secondary: Section headings, important actions
• Tertiary: Body text, labels
• Quaternary: Metadata, captions, helper text

Color System

Creative Direction:

• Commit to aesthetic: bold OR refined (not timid middle)
• Use dominant colors with sharp accents
• Color conveys mood: warm (energy), cool (calm), muted (sophistication)
• Consider color psychology for brand personality

Technical Specs:

• Primary: Main brand color for CTAs, key actions (1 color)
• Neutrals: Text, borders, backgrounds (5-7 shades from light to dark)
• Semantic: Success (green), error (red), warning (yellow), info (blue)
• Limit: 3-4 brand colors maximum

Contrast Requirements (WCAG AA - required for accessibility):

• Normal text: 4.5:1 minimum
• Large text: 3:1 minimum
• UI components: 3:1 minimum
• Use contrast checker tools to verify

Guidelines:

• Test all text/background combinations
• Don't rely on color alone (add icons, labels, patterns)
• Each color needs light/dark variants

Visual Hierarchy

Principle: Guide attention through size, weight, contrast, and spacing.

Create clear levels:

• Use size differences (headings larger than body)
• Use weight differences (bold for emphasis)
• Use spacing (more space = more importance)
• Use color sparingly for hierarchy

Hierarchy Techniques:

• Size: Primary elements significantly larger (2-3x+ size difference)
• Proximity: Group related items close, separate groups with generous space
• Contrast: Important elements use stronger contrast
• Alignment: Consistent alignment creates order

Spatial Composition

Layout Patterns

Create interest through:

• Asymmetry: Break symmetry for dynamic feel
• Overlap: Layer elements for depth
• Diagonal flow: Guide eye with angled layouts
• Whitespace: Generous negative space OR controlled density (intentional)
• Grid breaking: Intentionally break grid for emphasis

Alignment:

• Left-align text for readability (LTR languages)
• Center-align sparingly (titles, empty states)
• Right-align numbers in tables
• Be consistent within sections

Accessibility Essentials

Apply to every UI component — not optional.

Semantic HTML First

• <button> for actions, <a> for navigation — never <div> with click handler
• Headings <h1>→<h6> in order, don't skip levels
• Landmarks: <nav>, <main>, <header>, <footer>

Focus

• Never remove focus outline — use :focus-visible to hide for mouse, show for keyboard
• Minimum 2px outline, 3:1 contrast ratio
• Modals: move focus in on open, trap inside, return to trigger on close, Escape closes

ARIA (use only when semantic HTML insufficient)

• Icon-only buttons: aria-label="Close"
• Toggles/dropdowns: aria-expanded="true/false"
• Dynamic content (toasts, errors): aria-live="polite" or "assertive" for urgent
• Error fields: aria-invalid="true" + aria-describedby pointing to error message

Touch Targets

• Minimum 44×44px for all interactive elements
• 8px spacing between targets

Visual Details

Add Depth and Atmosphere

Backgrounds:

• Gradient meshes (soft, blended colors)
• Noise textures (subtle grain, paper texture)
• Geometric patterns (shapes, grids, dots)
• Layered transparencies (depth through layers)

Details:

• Shadows for elevation (subtle for cards, stronger for modals)
• Borders for definition (thin, subtle color difference)
• Subtle animations (hover states, quick transitions)

Validation Checklist

Creative:

• Clear aesthetic direction chosen
• Distinctive, characterful fonts (not generic)
• Cohesive color palette (bold OR refined)
• Unexpected layouts or intentional grid breaks
• Visual details add atmosphere

Technical:

• Spacing follows consistent scale
• Font sizes use type scale
• Color contrast meets WCAG AA (verify with checker)
• Line length readable
• Visual hierarchy clear
• Alignment consistent and intentional
• Limited brand color palette

Key Takeaway

Distinctive + Correct = Beautiful UI

Technical correctness (spacing, contrast, hierarchy) ensures usability and professionalism. Creative direction (aesthetic, fonts, colors, layouts) ensures memorability and distinctiveness.

Great design requires both: intentional aesthetic choices executed with technical precision.

Focus on intentionality - commit fully to chosen direction, then execute with consistency. Avoid generic AI aesthetics through bold or refined choices, never timid middle ground.