Design Principles for Software Engineers: The Complete Guide

Updated January 14, 2026

January 2026 Update: This guide consolidates timeless design principles with modern implementation patterns for web and iOS development. It covers Gestalt psychology, typography systems, color theory, visual hierarchy, and spacing—plus lessons from design legends like Dieter Rams and products like Linear.

I’ve spent years studying design while building software, absorbing principles from legends like Dieter Rams and dissecting interfaces from products like Linear, Stripe, and Raycast. This guide distills that understanding into the comprehensive reference I wish existed when I started caring about how my software looked and felt.

Design isn’t decoration. It’s communication. Every pixel communicates function, hierarchy, and meaning. The difference between software that feels amateur and software that feels professional is understanding these principles and applying them consistently.

This guide assumes you can already write code. It teaches you to see—to understand why some interfaces feel effortless while others feel chaotic, and more importantly, how to build the former.

Gestalt Psychology

“The whole is other than the sum of its parts.” — Kurt Koffka

Gestalt psychology, developed in 1920s Germany, explains how humans perceive visual information. The brain doesn’t see individual pixels—it organizes elements into meaningful patterns. Master these principles to control how users perceive your interfaces.

Proximity

Elements close together are perceived as a group.

This is the most powerful Gestalt principle in UI design. Space communicates relationship more than any other visual property.

WRONG (equal spacing = no grouping):
┌─────────────────┐
│ Label           │
│                 │
│ Input Field     │
│                 │
│ Label           │
│                 │
│ Input Field     │
└─────────────────┘

RIGHT (unequal spacing = clear groups):
┌─────────────────┐
│ Label           │
│ Input Field     │ ← Tight (4px) - related
│                 │
│                 │ ← Wide (24px) - separating groups
│ Label           │
│ Input Field     │ ← Tight (4px) - related
└─────────────────┘

CSS Implementation:

.form-group {
  margin-bottom: 24px;  /* Between groups: wide */
}

.form-group label {
  margin-bottom: 4px;   /* Label to input: tight */
  display: block;
}

SwiftUI Implementation:

VStack(alignment: .leading, spacing: 4) {  // Tight within group
    Text("Email")
        .font(.caption)
        .foregroundStyle(.secondary)
    TextField("[email protected]", text: $email)
        .textFieldStyle(.roundedBorder)
}
.padding(.bottom, 24)  // Wide between groups

Similarity

Elements sharing visual characteristics appear related.

When elements look the same, users assume they function the same. This is why design systems use consistent button styles, card treatments, and typography.

Example Navigation:
┌───────────────────────────────────┐
│ [Dashboard] [Projects] [Settings] │  ← Same style = same function
│                                   │
│ ┌─────┐  ┌─────┐  ┌─────┐        │
│ │Card │  │Card │  │Card │         │  ← Same style = same content type
│ └─────┘  └─────┘  └─────┘        │
│                                   │
│ [+ New Project]                   │  ← Different style = different function
└───────────────────────────────────┘

Figure-Ground

Content should clearly separate from background.

The brain needs to distinguish the “figure” (what to focus on) from the “ground” (the background). Poor figure-ground relationships create visual confusion.

Techniques: - Contrast (light figure on dark ground, or vice versa) - Shadows (elevate figure above ground) - Borders (delineate figure edges) - Blur (blur background, sharpen figure)

/* Strong figure-ground relationship */
.card {
  background: var(--color-surface);     /* Figure */
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);  /* Elevation */
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);  /* Dim ground */
  backdrop-filter: blur(4px);      /* Blur ground */
}

Common Region

Elements within a boundary are perceived as grouped.

Enclosing elements within a visual container (card, box, bordered area) signals they belong together.

Continuity

The eye follows paths, lines, and curves.

Use alignment and visual flow to guide attention through your interface.

CONTINUITY IN ALIGNMENT:
┌────────────────────────────────┐
│ Logo    [Nav]  [Nav]  [Nav]   │  ← Aligned on horizontal axis
├────────────────────────────────┤
│                                │
│ Headline                       │
│ ─────────────────────────────  │  ← Eye follows left edge
│ Paragraph text continues       │
│ along the same left edge       │
│                                │
│ [Primary Action]               │  ← Still on the left edge
└────────────────────────────────┘

Closure

The brain completes incomplete shapes.

Users don’t need every pixel drawn—they’ll mentally complete familiar shapes. This allows for more minimal, elegant designs.

/* Horizontal scroll with partial card (closure) */
.card-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-right: 48px;  /* Show partial card = scroll hint */
}

.card-carousel .card {
  flex: 0 0 280px;  /* Fixed width, partial visible */
}

Gestalt Quick Reference

Principle	Rule	Primary Use
Proximity	Related = close, unrelated = far	Form fields, content sections
Similarity	Same look = same function	Buttons, cards, navigation
Figure-Ground	Clear separation of layers	Cards, modals, overlays
Common Region	Boundaries group content	Settings sections, user cards
Continuity	Follow lines and alignment	Timelines, reading flow
Closure	Brain completes shapes	Icons, scroll hints, skeletons

Typography

“Typography is the craft of endowing human language with a durable visual form.” — Robert Bringhurst

Typography is the foundation of interface design. Text communicates functionality, hierarchy, and brand. Poor typography makes interfaces harder to use; great typography is invisible—it just works.

Type Scale

A consistent scale creates visual harmony. Use a mathematical ratio.

The 1.25 Scale (Recommended for UI):

:root {
  /* Base: 16px (1rem) */
  --text-xs: 0.64rem;    /* 10.24px - use sparingly */
  --text-sm: 0.8rem;     /* 12.8px - captions, labels */
  --text-base: 1rem;     /* 16px - body text */
  --text-lg: 1.25rem;    /* 20px - lead text */
  --text-xl: 1.563rem;   /* 25px - h4 */
  --text-2xl: 1.953rem;  /* 31.25px - h3 */
  --text-3xl: 2.441rem;  /* 39px - h2 */
  --text-4xl: 3.052rem;  /* 48.8px - h1 */
}

Line Height (Leading)

Line height dramatically affects readability. Different content needs different leading.

Content Type	Line Height	Why
Headlines	1.1 - 1.2	Tight, bold, short
UI Text	1.3 - 1.4	Labels, buttons
Body Text	1.5 - 1.7	Readable paragraphs
Long-form	1.7 - 2.0	Articles, documentation

Line Length (Measure)

Optimal line length prevents eye fatigue and improves reading comprehension.

Optimal: 45-75 characters per line
Target: 50-65 characters
Absolute max: 85 characters

p {
  max-width: 65ch;  /* ch unit = width of '0' character */
}

.article-body {
  max-width: 70ch;
  margin: 0 auto;
}

Font Selection

System fonts first. They load instantly, match the platform, and are optimized for screens.

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code',
               'JetBrains Mono', Consolas, monospace;
}

Use custom fonts for: - Brand differentiation (marketing sites) - Editorial/publication feel - Specific design intent not achievable with system fonts

Font Weight for Hierarchy

Use weight to establish hierarchy, not just size.

h1 { font-weight: 700; }  /* Bold */
h2 { font-weight: 600; }  /* Semibold */
h3 { font-weight: 600; }  /* Semibold */
.lead { font-weight: 500; }  /* Medium */
p { font-weight: 400; }   /* Regular */
.meta { font-weight: 400; color: var(--text-muted); }

Typography Quick Reference

Property	Body Text	Headlines	UI Labels
Size	16-18px	24-48px	12-14px
Weight	400	600-700	500
Line Height	1.5-1.7	1.1-1.2	1.3-1.4
Line Length	45-75ch	N/A	N/A
Alignment	Left	Center OK	Left

Color Theory

“Color is a power which directly influences the soul.” — Wassily Kandinsky

Color communicates faster than words. It establishes mood, guides attention, signals meaning, and builds brand recognition.

The 60-30-10 Rule

The most reliable color distribution for balanced interfaces.

┌──────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ 60% - Dominant (Background)
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 30% - Secondary (Cards, sections)
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 10% - Accent (Buttons, links)
└──────────────────────────────────────────┘

Building a Color Palette

Every interface needs these semantic colors:

:root {
  /* Brand */
  --color-primary: hsl(220, 80%, 50%);
  --color-primary-hover: hsl(220, 80%, 45%);

  /* Semantic */
  --color-success: hsl(142, 76%, 36%);  /* Green - positive */
  --color-warning: hsl(38, 92%, 50%);   /* Amber - caution */
  --color-error: hsl(0, 84%, 60%);      /* Red - danger */

  /* Neutrals */
  --color-background: hsl(0, 0%, 100%);
  --color-surface: hsl(220, 14%, 96%);
  --color-border: hsl(220, 13%, 91%);

  /* Text */
  --color-text: hsl(220, 13%, 13%);
  --color-text-secondary: hsl(220, 9%, 46%);
  --color-text-muted: hsl(220, 9%, 64%);
}

Color Psychology

Color	Psychology	UI Usage
Blue	Trust, stability, calm	Finance, tech, corporate
Green	Growth, nature, success	Health, eco, positive states
Red	Energy, urgency, danger	Alerts, sales, errors
Orange	Warmth, enthusiasm	CTAs, playful brands
Yellow	Optimism, caution	Warnings, highlights
Purple	Luxury, creativity	Premium products

Accessibility Contrast

Level	Normal Text	Large Text	UI Components
AA	4.5:1	3:1	3:1
AAA	7:1	4.5:1	N/A

Tools: WebAIM Contrast Checker, Chrome DevTools color picker

Visual Hierarchy

“Design is the silent ambassador of your brand.” — Paul Rand

Visual hierarchy controls what users see first, second, and third. Without clear hierarchy, users must work to find information. With it, interfaces feel effortless.

The Six Tools of Hierarchy

1. Size — Larger elements attract attention first

.hero-title { font-size: 3rem; }      /* Dominant */
.section-title { font-size: 1.5rem; } /* Secondary */
.body-text { font-size: 1rem; }       /* Baseline */

2. Weight — Bold pops forward, light recedes

h1 { font-weight: 700; }
.lead { font-weight: 500; }
p { font-weight: 400; }

3. Color & Contrast — High contrast = attention

.title { color: var(--color-text); }  /* Near black */
.meta { color: var(--color-text-muted); }  /* Gray */

4. Position — Key positions matter

F-PATTERN (content pages):     Z-PATTERN (landing pages):
████████████████████████      1 ──────────────────► 2
████████                            ↘
████                                     ↘
██                                            ↘
                                   3 ──────────────────► 4

5. Whitespace — Isolation creates importance

.hero { padding: 120px 48px; }  /* Generous space */
.data-table { padding: 12px; }  /* Dense content */

6. Depth & Elevation — Elements that pop forward demand attention

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-lg); }

The Squint Test

Squint at your design. Can you still see the hierarchy? If yes, it’s strong.

Spacing & Rhythm

“Whitespace is like air: it is necessary for design to breathe.” — Wojciech Zieliński

Spacing is the invisible structure of design. Consistent spacing creates visual rhythm—the feeling that elements belong together in a coherent system.

The 8px Grid

The 8px grid is the industry standard because: - Divides evenly (8, 16, 24, 32, 40, 48…) - Works with common screen densities (1x, 1.5x, 2x, 3x) - Creates consistent rhythm without math

:root {
  --space-1: 4px;    /* Tight: icon gaps */
  --space-2: 8px;    /* Compact: inline elements */
  --space-3: 12px;   /* Snug: form fields */
  --space-4: 16px;   /* Default: most gaps */
  --space-6: 24px;   /* Spacious: card padding */
  --space-8: 32px;   /* Section gaps */
  --space-12: 48px;  /* Major sections */
  --space-16: 64px;  /* Page sections */
  --space-20: 80px;  /* Hero spacing */
}

Internal vs External Spacing

Internal (padding): Space inside an element External (margin): Space between elements

Rule: Internal spacing should typically be larger than external spacing within related groups.

.card {
  padding: 24px;        /* Internal: spacious */
  margin-bottom: 16px;  /* External: less than padding */
}

Component Spacing Patterns

Cards:

.card { padding: 24px; border-radius: 12px; }
.card-header { margin-bottom: 16px; }
.card-title { margin-bottom: 4px; }  /* Tight to subtitle */

Buttons:

.btn { padding: 12px 24px; border-radius: 8px; }
.btn--sm { padding: 8px 16px; }
.btn--lg { padding: 16px 32px; }
.btn-group { display: flex; gap: 12px; }

Forms:

.form-row { margin-bottom: 24px; }
.form-label { margin-bottom: 4px; }
.form-help { margin-top: 4px; }
.form-actions { margin-top: 32px; display: flex; gap: 12px; }

Spacing Quick Reference

Context	Recommended Spacing
Icon to text	4-8px
Label to input	4px
Between form groups	24px
Card padding	20-24px
Card gap	16-24px
Section padding (mobile)	48-64px
Section padding (desktop)	80-96px
Button padding (h/v)	24px / 12px

Dieter Rams: Ten Principles

“Less, but better.” — Dieter Rams

Dieter Rams is the most influential industrial designer of the 20th century. As head of design at Braun from 1961-1995, he created products that remain timeless decades later. His work directly inspired Apple’s design language.

The Ten Principles of Good Design

1. Good design is innovative Don’t copy. Pair advancing technology with innovative design.

2. Good design makes a product useful Every element must serve a purpose. Form follows function.

3. Good design is aesthetic Beauty isn’t superficial—it’s essential. Products we use daily affect our well-being.

4. Good design makes a product understandable Users shouldn’t need instructions. The interface teaches itself.

5. Good design is unobtrusive Design should support, not overwhelm. The user’s content is the star, not your UI.

/* Obtrusive: UI competes with content */
.editor {
  background: linear-gradient(135deg, purple, blue);
  border: 3px dashed gold;
}

/* Unobtrusive: UI recedes, content shines */
.editor {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

6. Good design is honest Don’t use dark patterns. Don’t over-promise. Be transparent about limitations.

7. Good design is long-lasting Avoid trends that will date quickly. Classic over trendy.

TRENDY (will date):           TIMELESS:
- Extreme glassmorphism       - Clean typography
- Neon colors, glitch effects - Subtle elevation
- Aggressive gradients        - Neutral palette with considered accent

8. Good design is thorough down to the last detail Nothing must be arbitrary. Loading states, empty states, error states—all designed.

9. Good design is environmentally friendly Performance is environmental. Respect user attention. Efficient code.

10. Good design is as little design as possible Remove everything that isn’t necessary. The best design is invisible.

Product Study: Linear

“Software should be opinionated and fast.” — Karri Saarinen, Linear CEO

Linear is a project management tool that redefined what modern software can feel like. It proves that B2B software doesn’t have to be ugly or slow.

Speed as a Feature

Every interaction feels instant.

// Optimistic update pattern
function updateIssue(id: string, changes: Partial<Issue>) {
  // 1. Update local state immediately
  localStore.update(id, changes)

  // 2. Show success state
  ui.showSaved()

  // 3. Sync with server in background
  api.updateIssue(id, changes).catch(() => {
    // 4. Rollback only on failure
    localStore.rollback(id)
    ui.showError()
  })
}

Keyboard-First, Mouse-Friendly

The command palette (⌘K) is a universal entry point:

┌────────────────────────────────────────────────────────────┐
│ 🔍 Search issues or commands...                            │
│                                                            │
│   Recent                                                   │
│   ├─ FE-123 Fix navigation animation              ⌘ + O   │
│   └─ Create new issue                             C       │
│                                                            │
│   Commands                                                 │
│   ├─ Change status                                S       │
│   ├─ Assign issue                                 A       │
│   └─ Set priority                                 P       │
└────────────────────────────────────────────────────────────┘

Principles: - Every action has a keyboard shortcut - Shortcuts are mnemonic (S for Status, P for Priority) - Mouse works perfectly—keyboard is faster

Information Density Done Right

TYPICAL ENTERPRISE (cluttered):
┌────────────────────────────────────────────────────────────┐
│ [ ] ★ FE-123 | Fix bug | John | High | In Progress | 2d   │
│     Tags: frontend, urgent, sprint-12, reviewed           │
│     Created: Jan 1 | Updated: Jan 5 | Due: Jan 10         │
└────────────────────────────────────────────────────────────┘

LINEAR'S APPROACH (dense but clear):
┌────────────────────────────────────────────────────────────┐
│ ● FE-123  Fix navigation animation bug         ↑ John  ○○ │
│ ○ FE-124  Update user profile endpoint           Jane  ○  │
└────────────────────────────────────────────────────────────┘

What to Steal from Linear

Technique	How to Apply
Optimistic UI	Update locally first, sync in background
Command palette	Use Fuse.js for fuzzy search
Mnemonic shortcuts	S for Status, P for Priority, A for Assign
Subtle elevation	1-2px lift on hover, not dramatic shadows
Semantic colors	Consistent status/priority color system
Tight typography	13px body text, dense but readable

Web Patterns 2025

Modern web design leverages native CSS capabilities that eliminate the need for JavaScript in many cases.

Container Queries

Size components based on their container, not the viewport.

.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

.card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

@container card-grid (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
  }
}

@container card-grid (min-width: 600px) {
  .card {
    padding: 32px;
    gap: 24px;
  }
}

The :has() Selector

Parent selection based on children—previously impossible without JavaScript.

/* Card with image gets different padding */
.card:has(img) {
  padding: 0;
}

.card:has(img) .card-content {
  padding: 20px;
}

/* Form group with error */
.form-group:has(.input:invalid) .form-label {
  color: var(--color-error);
}

/* Highlight navigation when on that page */
.nav-item:has(a[aria-current="page"]) {
  background: var(--color-surface);
}

CSS Nesting

Native nesting without preprocessors.

.card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 24px;

  & .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
  }

  & .card-body {
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  &:hover {
    box-shadow: var(--shadow-md);
  }

  @media (min-width: 768px) {
    padding: 32px;
  }
}

HTMX Integration

Server-driven interactivity without heavy JavaScript frameworks.

<!-- Load content on click -->
<button hx-get="/api/more-items"
        hx-target="#item-list"
        hx-swap="beforeend"
        hx-indicator="#loading">
  Load More
</button>

<!-- Form with inline validation -->
<form hx-post="/api/contact"
      hx-target="#form-response"
      hx-swap="outerHTML">
  <input type="email" name="email"
         hx-post="/api/validate-email"
         hx-trigger="blur"
         hx-target="next .error" />
  <span class="error"></span>
</form>

Design Tokens System

A complete token system for consistency across your application.

:root {
  /* Colors */
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;

  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-elevated: #ffffff;

  --color-border: #e5e7eb;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Spacing (8px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 100ms;
  --duration-normal: 200ms;
}

Dark Mode Done Right

Don’t just invert—redesign for dark contexts.

@media (prefers-color-scheme: dark) {
  :root {
    /* Neutrals */
    --color-background: hsl(220, 13%, 10%);
    --color-surface: hsl(220, 13%, 15%);
    --color-surface-elevated: hsl(220, 13%, 18%);
    --color-border: hsl(220, 13%, 23%);

    /* Text (inverted) */
    --color-text: hsl(220, 9%, 93%);
    --color-text-secondary: hsl(220, 9%, 70%);
    --color-text-muted: hsl(220, 9%, 55%);

    /* Adjust saturation for dark mode */
    --color-primary: hsl(220, 80%, 60%);
    --color-success: hsl(142, 70%, 45%);
    --color-error: hsl(0, 80%, 65%);

    /* Shadows in dark mode need adjustment */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Dark mode principles: - Reduce saturation on large surfaces - Increase lightness of accent colors - Strengthen shadows (they need more contrast) - Design dark mode intentionally, not as an afterthought

Quick Reference Tables

Gestalt Principles

Principle	Rule	Use
Proximity	Related = close	Forms, sections
Similarity	Same look = same function	Buttons, cards
Figure-Ground	Clear layer separation	Modals, cards
Continuity	Follow lines	Timelines, alignment
Closure	Brain completes shapes	Icons, scroll hints

Typography

Element	Size	Weight	Line Height
Body	16px	400	1.5-1.7
Headlines	24-48px	600-700	1.1-1.2
UI Labels	12-14px	500	1.3-1.4
Captions	12px	400	1.4

Color Roles

Role	Light Mode	Dark Mode
Background	#ffffff	#0f172a
Surface	#f4f5f7	#1e293b
Border	#e4e6ea	#334155
Text	#1a1a2e	#f1f5f9
Text Muted	#6b7280	#94a3b8
Primary	#3b82f6	#60a5fa
Success	#22c55e	#4ade80
Error	#ef4444	#f87171

Spacing Scale

Token	Value	Use
–space-1	4px	Icon gaps
–space-2	8px	Inline elements
–space-4	16px	Default gaps
–space-6	24px	Card padding
–space-8	32px	Section gaps
–space-16	64px	Page sections

Design Checklist

Before shipping any interface, verify:

Gestalt

[ ] Related elements are closer than unrelated ones (Proximity)
[ ] Similar functions have similar styles (Similarity)
[ ] Clear separation between foreground and background (Figure-Ground)
[ ] Eye flows naturally through layout (Continuity)

Typography

[ ] Base font size is at least 16px
[ ] Line height is 1.5+ for body text
[ ] Line length is under 75 characters
[ ] Hierarchy is clear (3 levels distinguishable)
[ ] Consistent scale used throughout

Color

[ ] All text passes 4.5:1 contrast (WCAG AA)
[ ] Color is not the only indicator (icons/labels too)
[ ] Dark mode designed intentionally
[ ] 60-30-10 distribution followed

Visual Hierarchy

[ ] Can identify the #1 most important element
[ ] Eye flows in intended order
[ ] One clear CTA per section
[ ] Type scale consistent

Spacing

[ ] All spacing uses defined scale (no magic numbers)
[ ] Cards/components have consistent padding
[ ] Mobile spacing is comfortable
[ ] Grid alignment is consistent (8px base)

Dieter Rams Check

[ ] Can anything be removed?
[ ] Does every element serve function?
[ ] Would this feel dated in 5 years?
[ ] Have I designed every state?

Resources

Books: - As Little Design as Possible by Sophie Lovell (Dieter Rams) - The Elements of Typographic Style by Robert Bringhurst

Tools: - WebAIM Contrast Checker - Type Scale Generator

Products to Study: - Linear — Speed, keyboard-first, density - Stripe — Trust through clarity - Raycast — Native platform excellence

This guide grows through practice. Design principles are timeless, but their application evolves with technology and understanding.

Design Principles for Software Engineers: The Complete Guide

Table of Contents

Part 1: Foundations

Part 2: Design Philosophy

Part 3: Implementation

Part 4: Reference

Gestalt Psychology

Proximity

Similarity

Figure-Ground

Common Region

Continuity

Closure

Gestalt Quick Reference

Typography

Type Scale

Line Height (Leading)

Line Length (Measure)

Font Selection

Font Weight for Hierarchy

Typography Quick Reference

Color Theory

The 60-30-10 Rule

Building a Color Palette

Color Psychology

Accessibility Contrast

Visual Hierarchy

The Six Tools of Hierarchy

The Squint Test

Spacing & Rhythm

The 8px Grid

Internal vs External Spacing

Component Spacing Patterns

Spacing Quick Reference

Dieter Rams: Ten Principles

The Ten Principles of Good Design

Product Study: Linear

Speed as a Feature

Keyboard-First, Mouse-Friendly

Information Density Done Right

What to Steal from Linear

Web Patterns 2025

Container Queries

The :has() Selector

CSS Nesting

HTMX Integration

Design Tokens System

Dark Mode Done Right

Quick Reference Tables

Gestalt Principles

Typography

Color Roles

Spacing Scale

Design Checklist

Gestalt

Typography

Color

Visual Hierarchy

Spacing

Dieter Rams Check

Resources