Master universal design principles for UI, web, and applications. Use this skill whenever you need to apply color theory, typography, layout systems, spacing, visual hierarchy, or contrast guidelines. Triggers include design critiques, UI specs, accessibility concerns, design system foundations, responsive layout problems, and questions about why something doesn't look right. Essential for both designers and frontend developers building pixel-perfect, accessible interfaces.
Master universal design principles for UI, web, and applications. Use this skill whenever you need to apply color theory, typography, layout systems, spacing, visual hierarchy, or contrast guidelines. Triggers include design critiques, UI specs, accessibility concerns, design system foundations, responsive layout problems, and questions about why something doesn't look right. Essential for both designers and frontend developers building pixel-perfect, accessible interfaces.
Design Fundamentals
A comprehensive guide to universal design principles applicable across all digital products, frameworks, and platforms.
Core Principles Overview
Design fundamentals are the bedrock of every digital product. They transcend frameworks, tools, and trends. Whether you're designing in Figma, building components in React, or architecting a design system, these principles apply universally.
The five pillars:
Color — How color creates meaning, contrast, hierarchy, and mood
Typography — Font selection, sizing, weight, and spacing for readability
Layout & Grid — Structural systems that organize information
Spacing & Scale — Visual breathing room and proportion
Contrast & Hierarchy — Guiding attention and creating relationships
1. Color Theory & Application
Color Fundamentals
Color Dimensions (HSL model):
Hue (0-360°) — The color itself (red, blue, yellow, etc.)
Saturation (0-100%) — Color intensity (gray is 0%, pure color is 100%)
A typographic scale is a set of predefined font sizes that relate to each other through a mathematical ratio. Common ratios: 1.125 (minor second), 1.25 (major third), 1.5 (perfect fifth).
Example scale (base 16px, ratio 1.25):
Xs: 12px (caption, metadata)
Sm: 14px (helper text, small UI labels)
Base: 16px (body text, default)
Md: 20px (section headings, emphasis)
Lg: 25px (page title)
Xl: 31px (hero/banner heading)
Rules for sizes:
Use no more than 6 distinct sizes in a product
Don't go below 12px for body text (accessibility issue)
Headings should be at least 1.5× larger than body text
Maintain consistency — use the same size for the same content type across the product
300 (Light) — Use sparingly; harder to read, good for subtle UI
400 (Regular) — Default body text weight
500 (Medium) — UI labels, navigation, emphasis
600 (Semibold) — Subheadings, strong emphasis
700 (Bold) — Headings, important text
800+ (Black) — Rare; only for dramatic effect
Never use multiple weights for the same content type. Stick to 400 for body, 500 for UI, 700 for headings.
Letter Spacing (Tracking)
The horizontal space between characters.
Guidelines:
-0.02em — Tighter, for large headings (cool, dramatic)
0em — Default, neutral
0.02em–0.05em — Looser, for all-caps text, small sizes
0.1em+ — Very loose, decorative headers only
Rule: Smaller text needs no tracking adjustment. Larger headings (40px+) may look better tighter.
Paragraph Spacing (Margins)
Space between paragraphs and elements.
Guidelines:
Space below a heading = 0.5–1× the heading size
Space below body paragraph = 1–1.5× the body size
Space between sections = 2–3× the body size
Example (16px body):
Heading bottom margin: 8–16px
Paragraph bottom margin: 16–24px
Section margin: 32–48px
3. Layout & Grid Systems
Grid Foundations
A layout grid divides the screen into columns and rows, creating structure and alignment.
12-column grid (most common):
Desktop (1200px): 12 columns, 20px gutter, ~80px per column
Tablet (768px): 8 columns, 16px gutter
Mobile (360px): 4 columns, 12px gutter
8-point grid (soft grid):
All measurements are multiples of 8px: 8, 16, 24, 32, 40, 48, 56, 64, 72...
Makes spacing consistent
Simplifies CSS (no fractional pixels)
Scales well across devices
Flexbox vs. Grid
CSS Flexbox:
1D layout (rows or columns)
Great for component-level layouts (buttons, cards, navigation)
Responsive by default with flex-wrap
CSS Grid:
2D layout (rows and columns simultaneously)
Great for page-level layouts (hero, content, sidebar)
More explicit, harder to learn, more powerful
Use Flexbox when: wrapping, alignment within a container, responsive columns by content.
Use Grid when: two-dimensional layout, template areas, explicit positioning.
Responsive Breakpoints
Define breakpoints for different screen sizes. Mobile-first approach means starting at 360px and expanding up.
Standard breakpoints (Tailwind convention):
Sm: 640px (small tablets)
Md: 768px (tablets)
Lg: 1024px (small laptops)
Xl: 1280px (desktops)
2xl: 1536px (large desktops)
When designing: test at 360px (mobile), 768px (tablet), 1200px (desktop), and 1920px (ultrawide).
Safe Spacing Around Content
Padding from viewport edges:
Mobile: 16px or 24px
Tablet: 24px or 32px
Desktop: 32px to 60px (content shouldn't span full width above 1200px)
Max content width: 1200px for most products (leaves ~40px margin on 1280px screen).
4. Spacing & Visual Rhythm
Spacing Scale
Build a spacing scale in 8px increments:
Xs: 4px (micro-spacing within components)
Sm: 8px (small gaps)
Md: 16px (standard spacing)
Lg: 24px (large gaps, section separation)
Xl: 32px (very large, between major sections)
2xl: 48px
3xl: 64px
Use consistently throughout the product — all gaps, padding, margins.
Margin vs. Padding
Padding — Space inside a component, between content and its border.
Margin — Space outside a component, between components.
Rule of thumb:
Use padding for internal breathing room
Use margin to separate components
Avoid margin collapse issues by using padding on parent or margin on one axis only
Whitespace Strategy
Generous whitespace (negative space) improves:
Readability (easier to scan)
Focus (directs attention)
Sophistication (feels premium, not cramped)
Mobile performance (perceived speed is faster)
Golden ratio for spacing:
Small elements: small gaps between them
Large containers: generous gaps, centered content with wide margins
Dense sections: medium gaps with clear grouping
5. Visual Hierarchy & Contrast
Creating Hierarchy
Users scan pages in F-pattern or Z-pattern. Guide them through:
Primary elements (highest contrast, largest size):
Main heading
Primary CTA
Hero image
Secondary elements (medium contrast, medium size):
Subheading
Supporting text
Secondary CTAs
Tertiary elements (low contrast, small size):
Helper text
Disabled states
Hints and tips
Visual tools to create hierarchy:
Size — Larger = more important
Weight — Bold = emphasis
Color — Saturated/brighter = attention
Contrast — High contrast = important
Position — Top-left = read first (in LTR languages)
Proximity — Group related items
Whitespace — Isolated = focal point
Contrast Levels
High contrast (ratio 7:1+):
Primary headings
Critical CTAs
Focus states
Status indicators (error, warning)
Medium contrast (ratio 4.5:1):
Body text
Secondary headings
Normal buttons
Low contrast (ratio 3:1):
Disabled states
Placeholder text
Subtle dividers
Metadata
Focus States & Interactive Feedback
Focus indicators:
Color: Distinct color (usually primary/accent), 2px+ width
Outline or underline — Don't rely on background change alone
Problem: Text is hard to read on a colored background.
Solution: Check contrast ratio (WebAIM tool). If <4.5:1, lighten background or darken text. Avoid light text on light backgrounds.
Inconsistent Spacing
Problem: 16px here, 20px there, 24px somewhere else.
Solution: Establish an 8px scale and stick to it. Use CSS custom properties (--space-sm, --space-md, etc.) to enforce consistency.
Poor Typography Hierarchy
Problem: All text looks the same size/weight.
Solution: Use a 1.25–1.5× scale ratio between sizes. Make headings bold (600–700 weight), body regular (400), and labels medium (500).
Cluttered Layouts
Problem: Too much content with no breathing room.
Solution: Add whitespace. Group related items. Remove non-essential elements. Simplify.
Color-Only Differentiation
Problem: Red/green to show status, but colorblind users can't tell.
Solution: Pair color with icons, patterns, or labels. Never use color alone for meaning.
Bad Mobile Experience
Problem: Desktop layout shoehorned onto mobile.
Solution: Start mobile-first. Stack content vertically. Make buttons large (44px+). Reduce text volume. Test on actual devices.
Reference Files & Further Reading
See the bundled resources for:
typography-scale-generator.md — Calculate your perfect scale
color-palette-guide.md — Build accessible color systems
responsive-layout-patterns.md — Common layout structures
spacing-system-checklist.md — Audit your spacing consistency
