# Frontend Design Fundamentals > Base design skill for ALL frontend/UI work: spacing, typography, colors, visual hierarchy. Use when: any frontend/UI task — styling, CSS, components, layouts, animations. Keywords: frontend, UI, CSS, styling, layout, spacing, typography, card, button, form, dashboard, animation, hover, shadow Do NOT use for: backend, DevOps, React performance (→ react-best-practices). - Skill: `phananhtuan09/frontend-design-fundamentals` (Agent Skill) - Install (CLI): `npx skillmds@latest add phananhtuan09/frontend-design-fundamentals` - Raw SKILL.md: https://api.skillmd.com/api/skills/phananhtuan09/frontend-design-fundamentals/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: phananhtuan09 (https://skillmd.com/u/phananhtuan09) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/phananhtuan09/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 - `