---

name: frontend-design-fundamentals description: | Core design principles for implementing beautiful, professional UIs. Ensures consistent quality through spacing, typography, colors, and visual hierarchy.

ALWAYS load when implementing UI/frontend VISUAL DESIGN:

• Styling components: colors, spacing, typography, shadows
• Building layouts: CSS, flexbox, grid, positioning
• Creating visual elements: cards, buttons, forms, dashboards
• Animation, transition, hover effects, motion
• Modern, stunning, elegant, sleek interfaces

Keywords: styling, CSS, layout, colors, spacing, typography, shadows, animation, transition, hover, visual, aesthetic, design, beautiful, stunning, elegant, sleek, professional

Purpose: Ensure ALL UI implementation follows design best practices for:

• Consistent spacing scale (not arbitrary values)
• Typography hierarchy (readable, professional)
• Color contrast (accessible, WCAG compliant)
• Visual hierarchy (clear, intentional)
• Avoiding generic AI aesthetics

Do NOT load for:

• Backend-only code (APIs, database, server logic)
• Pure logic/algorithm work without UI
• DevOps, infrastructure, CLI tools
• React/Next.js performance optimization (use react-best-practices)
• Data fetching, async patterns, bundle optimization (use react-best-practices)

Works with other skills:

• react-best-practices: For React performance (NOT styling)
• theme-factory: When user needs help CHOOSING colors/theme
• figma-design-extraction: When Figma file provided
• design-responsive: For mobile/tablet/responsive specifics
• ux-accessibility: For keyboard/screen reader specifics

---

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

---

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)

---

Common Mistakes

❌ Avoid:

1. Generic AI aesthetics (purple gradients, system fonts)
2. No aesthetic direction (mixing styles randomly)
3. Arbitrary spacing (values outside your scale)
4. Poor contrast (insufficient difference)
5. Too many colors (overwhelming palette)
6. Inconsistent font sizes (random values, no scale)
7. No visual hierarchy (everything same size)
8. Cramped layouts (insufficient whitespace)

✅ Do:

1. Choose clear aesthetic and commit
2. Use distinctive fonts with personality
3. Follow spacing scale consistently
4. Test contrast ratios (4.5:1 minimum)
5. Limit to 3-4 brand colors
6. Use type scale for predictable hierarchy
7. Create clear levels (primary > secondary > tertiary)
8. Give content generous whitespace

---

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.