Design
Principles

Primary (Bold)

Secondary (Medium)

Tertiary (Light)

Same size, different weights. Bold text commands more attention than light text. Weight works even when size must stay consistent (like in data-dense interfaces).

Primary (Accent color)

Secondary (Dark gray)

Tertiary (Light gray)

High contrast colors pop forward; muted colors recede. An accent color instantly signals "look here first." Gray text indicates secondary importance.

Primary (Top-left)

Secondary (Center)

Tertiary (Bottom-right)

Western readers scan top-to-bottom, left-to-right (F-pattern). Top-left content is seen first. Footer content is often missed entirely.

Primary

Secondary

Tertiary

Professional designs combine all four methods. Primary: large + bold + color. Secondary: medium size + medium weight. Tertiary: small + light + muted.

Summer Sale

Save up to 50%

Limited time only - ends Sunday

Free shipping on orders over $50

Shop Now

Size and weight variations create clear levels. The eye naturally follows: headline first, then discount, then details, then action. Information architecture becomes visible.

Our brains are pattern-seeking machines. Clear hierarchy provides a roadmap, reducing cognitive load. Studies show proper hierarchy improves comprehension by up to 50%.

Featured Product

Regular product description text that explains the item in detail.

Price: $49.99

Better separation between elements. Headline is more visible. Button reads as clickable. But still could be more decisive.

Featured Product

Regular product description text that explains the item in detail.

$49.99

Clear visual hierarchy. Each element has a distinct purpose. Price pops in red. Button demands attention. Professional and accessible.

Size

Weight

Color

Typeface

Company Name

We make great products

Contact us today

Some elements align (headline and tagline), but the CTA switches to center. Mixing alignments without purpose still feels inconsistent.

Company Name

We make great products

Contact us today

Every element shares a left edge. The red border reinforces the alignment axis. Clean, professional, intentional. One alignment decision = cohesion.

Left

Most common, professional

Center

Formal, symmetric

Right

Unconventional, bold

Related items are tight (4px). Unrelated items have space (20px). The structure is instantly clear. No labels needed, proximity does the work.

Form Example

Labels stay close to their inputs (4px). Different field groups have more space between them (20px). Users instantly know which label belongs to which field.

Same structure, same colors, same button style. Users learn once, apply everywhere. Predictability builds confidence. The design feels unified and professional.

Design System Components

Modern teams create component libraries. Every button, heading, and card is defined once, reused everywhere. This ensures consistency at scale.

Mirror image on both sides. Feels formal, stable, traditional. Common in wedding invitations, government documents, luxury brands. Safe but can feel static.

Different elements balance through visual weight. One large dark element = several small bright elements. Feels dynamic, modern, interesting. Harder to achieve but more engaging.

Elements radiate from a center point. Creates strong focus and energy. Common in logos, medallions, and mandala-style designs. The center becomes the undeniable focal point.

Premium Headphones

Experience studio-quality sound with our flagship wireless headphones featuring active noise cancellation.

$299.99

Free shipping | 30-day returns | 2-year warranty

Proper margins and line heights. Clear sections. Readable and professional. This is the minimum for good design.

Premium Headphones

Experience studio-quality sound.

$299.99

Luxury-level breathing room. Fewer words, more impact. Each element has presence. Signals quality and confidence. Apple, luxury brands use this approach.

Types of White Space

Macro white space creates page structure and hierarchy. Micro white space improves readability within text blocks. Good design needs both.

Working memory can only hold 4-7 items at once. Every design decision either adds or reduces cognitive load.

The 4-7 Rule

Users can track 4-7 things at once. Navigation with 15 items fails. Grouping reduces perceived complexity.

Heat maps from eye tracking studies reveal how people actually scan pages. Design with these patterns, not against them.

Key Findings

• Top-left seen first (in Western cultures)
• Headlines read, body text scanned
• Images attract before text
• Users skip "banner-like" areas
• Footer content often missed

George Miller (1956) discovered that humans can hold about 7 items in short-term memory. This directly impacts navigation, forms, and information architecture.

Practical Limits

Failure: Rainbow Syndrome

Fix: Color Discipline

Failure: Everything Bold

Fix: Strategic Emphasis

Failure: Wall of Text

Fix: Breathing Room

/* Color System */
:root {
  /* Neutral scale */
  --gray-50: #fafafa;
  --gray-100: #f2f2f2;
  --gray-500: #666666;
  --gray-900: #1a1a1a;

  /* Semantic colors */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  --accent: #ff0000;
}

.btn-primary {
  background: var(--gray-900);
  color: white;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--gray-900);
}

• color + background - Text contrast
• border - Element definition
• box-shadow - Elevation contrast
• opacity - Visual de-emphasis

/* Spacing Scale (8px base) */
:root {
  --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 */
}

.card {
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.card-title {
  margin-bottom: var(--space-2);
}

.card-text {
  margin-bottom: var(--space-4);
}

• margin - Space between elements
• padding - Space within elements
• gap - Flexbox/Grid spacing
• line-height - Text breathing room

/* Alignment with CSS Grid */
.grid-container {
  display: grid;
  grid-template-columns:
    repeat(12, 1fr);
  gap: 2rem;
}

.content {
  grid-column: span 8;
}

.sidebar {
  grid-column: span 4;
}

/* Flexbox alignment */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

• text-align - Text alignment
• justify-content - Flex horizontal
• align-items - Flex vertical
• grid-template-columns - Grid layout
• place-items - Grid centering