Key Design Systems Components

Why This Matters

Design systems aren't just collections of pretty UI elements—they're the strategic foundation that determines whether your product scales gracefully or collapses into inconsistency. In Advanced Design Strategy, you're being tested on your ability to understand why certain components exist, how they interact systematically, and when to deploy specific patterns to solve user experience problems. The exam expects you to connect individual components to broader principles like cognitive load theory, visual hierarchy, and accessibility standards.

Don't just memorize what a button looks like or how many pixels of padding you should use. Know what principle each component serves—whether it's reducing decision fatigue, establishing brand coherence, or ensuring WCAG compliance. When you can articulate the strategic reasoning behind component choices, you'll nail both the multiple choice questions and the design critique FRQs.

---

Foundation Layer: Visual Language

These components establish the core visual vocabulary that every other element inherits. They define the "grammar" of your design system—get these wrong, and nothing else will feel cohesive.

Typography

• Hierarchy through scale and weight—type systems use size ratios (often based on $1.25$ or $1.333$ scales) to create clear content structure without explicit labels
• Brand identity carrier—font selection communicates personality; serif fonts suggest tradition while sans-serif reads as modern and accessible
• Accessibility baseline—minimum $16px$ body text and $4.5:1$ contrast ratios aren't suggestions, they're WCAG AA requirements

Color Palette

• Emotional and functional signaling—colors carry meaning (red for errors, green for success) that must remain consistent across all components
• Systematic token structure—modern systems use semantic naming ($primary$, $danger$, $surface$) rather than literal values to enable theming
• Accessibility-first contrast—every color pairing must meet contrast requirements; this constrains palette choices more than aesthetics do

Icons and Iconography

• Cognitive shorthand—icons reduce text dependency and cross language barriers when using universally recognized symbols
• Systematic consistency—stroke weight, corner radius, and optical sizing must match across the entire icon set
• Paired with labels—icons alone fail accessibility; always provide text alternatives for screen readers and unfamiliar users

---

Structure Layer: Layout Systems

These components control spatial relationships and ensure designs adapt across contexts. They're the invisible scaffolding that makes responsive design possible.

Grid System

• Mathematical consistency—grids use column counts (commonly 12) and gutter widths to create predictable alignment points
• Responsive breakpoints—columns collapse or expand at defined viewport widths, maintaining proportional relationships
• Design-to-development handoff—grids translate visual intent into CSS frameworks like Flexbox or Grid with minimal interpretation

Spacing and Layout

• Cognitive load reduction—consistent spacing (using scales like $4px$, $8px$, $16px$, $24px$) helps users parse content groups without conscious effort
• Whitespace as design element—negative space isn't empty; it creates breathing room and emphasizes important content
• Density variants—systems often define compact, default, and comfortable spacing modes for different use cases

---

Interaction Layer: User Input Components

These components handle direct user manipulation and must communicate state clearly. They're where accessibility requirements become most critical.

Buttons and Form Elements

• State communication—every interactive element needs default, hover, focus, active, and disabled states clearly differentiated
• Affordance clarity—buttons must look clickable; primary actions get visual prominence over secondary options
• Keyboard accessibility—focus indicators and tab order aren't optional; they're legal requirements under ADA compliance

Navigation Components

• Information architecture expression—navigation reflects site structure; poor IA creates confusing navigation regardless of visual design
• Progressive disclosure—mega menus, dropdowns, and hamburger patterns each solve different complexity levels
• Responsive adaptation—horizontal navigation must transform gracefully to mobile patterns without losing discoverability

---

Content Layer: Information Containers

These components organize and present content in digestible formats. They solve the fundamental problem of making complex information scannable.

Cards and Containers

• Content chunking—cards group related information into discrete units, reducing cognitive load through visual boundaries
• Consistent anatomy—card structures (image, header, body, actions) should remain predictable across the system
• Responsive flexibility—cards reflow from multi-column grids to single-column stacks without losing internal hierarchy

Modals and Overlays

• Focus management—modals trap keyboard focus and prevent background interaction, creating forced decision points
• Interruption cost—every modal disrupts user flow; use only when the interruption value exceeds the attention cost
• Escape clarity—users must always have obvious exit paths; trapped users become frustrated users

---

Adaptation Layer: Responsive Patterns

These patterns ensure components behave appropriately across device contexts. They're the meta-layer that governs how everything else transforms.

Responsive Design Patterns

• Mobile-first methodology—designing for constraints first (small screens, touch input) produces cleaner solutions that enhance gracefully
• Breakpoint strategy—common breakpoints ($320px$, $768px$, $1024px$, $1440px$) should reflect actual user device data, not arbitrary values
• Content priority shifting—responsive design isn't just shrinking; it's re-prioritizing what matters most at each viewport

---

Quick Reference Table

---

Self-Check Questions

1. Which two components both use mathematical scales but serve different purposes—one for macro-level page structure and one for micro-level element relationships?

2. A user complains that your interface feels "cluttered" even though all required information is present. Which two component categories would you audit first, and what specific properties would you examine?

3. Compare and contrast how Cards and Modals solve the problem of presenting secondary information. Under what circumstances would you choose each?

4. An FRQ asks you to improve form completion rates. Which component's state design would most directly impact this metric, and what specific states must be clearly differentiated?

5. Your design system needs to support both a data-dense enterprise dashboard and a consumer-facing marketing site. Which foundation layer components would require variants, and how would those variants differ?