UI Design Fundamentals

The definitive guide for building production-grade web interfaces. Covers the full stack of design decisions from layout to motion.

WHEN To Use

• - Designing new UI components or pages
• Building landing pages, dashboards, or applications
• Reviewing code for design quality
• Creating distinctive interfaces that avoid generic aesthetics
• Implementing accessibility requirements

KEYWORDS

ui design, web design, layout, typography, color palette, spacing, visual hierarchy, responsive design, accessibility, motion design, component design, design tokens, frontend, css, tailwind

---

Design Philosophy

The 80/20 of Design Quality

Factor	Impact	Time Investment
Typography	40%	Choose 1-2 fonts well
Spacing

25% | Use consistent scale | | Color | 20% | Limit palette, ensure contrast | | Everything else | 15% | Shadows, borders, motion |

Focus on typography and spacing first. They're 65% of perceived quality.

Commit to a Direction

Mediocrity is forgettable. Pick an extreme:

Direction	Characteristics	Use When
Brutally Minimal	Stark, essential, nothing extra	Developer tools, productivity
Luxury/Refined

Premium, subtle elegance | High-end products, fashion |
| Playful | Fun, bright, approachable | Consumer apps, games |
| Editorial | Type-forward, grid-based | Content sites, magazines |
| Industrial | Function-forward, robust | B2B, enterprise |

---

Layout

Grid vs Flexbox Decision

Layout Need	Tool	Why
Page-level structure	CSS Grid (grid-template-areas)	Named regions, explicit control
Navigation bars

Flexbox | Single-axis, gap spacing | | Card grids | Grid (auto-fill/auto-fit) | Responsive without media queries | | Centering | Grid (place-items: center) | Shortest, most reliable | | Sidebar + content | Grid (250px 1fr) | Fixed + fluid | | Stacking/overlaps | Grid + grid-area: 1/1 | No position: absolute needed |

Container Strategy

CODEBLOCK0

Common Layout Mistakes

Mistake	Problem	Fix
Mixing container widths	Inconsistent alignment	Use single max-w-* value
Content behind fixed navbar

Hidden content | Add pt-[navbar-height] | | No mobile padding | Edge-to-edge text | Add px-4 minimum | | Centered everything | Weak hierarchy | Left-align body text |

---

Typography

Typography carries 90% of a design's personality.

Font Pairing by Context

Context	Display Font	Body Font	Example
Editorial	High-contrast serif	Neutral humanist	Playfair + Source Sans
SaaS

Geometric sans | Matching sans | DM Sans + DM Mono | | Luxury | Thin modern serif | Elegant sans | Cormorant + Jost | | Developer | Monospace display | Monospace body | JetBrains Mono + IBM Plex | | Playful | Rounded/quirky | Clean readable | Nunito + Outfit |

Type Scale (1.25 ratio)

CODEBLOCK1

Typography Rules

Rule	Value	Why
Minimum body size	16px	Below is hard to read
Body line-height

1.5-1.75 | Improves readability | | Heading line-height | 1.1-1.2 | Tighter for large text | | Line length | 60-75 characters | Optimal reading | | Paragraph spacing | 1.5em | Clear separation |

Typography Mistakes

Mistake	Problem	Fix
System fonts only	Generic look	Use Google Fonts or variable fonts
Too many fonts

Visual chaos | Max 2 families | | Weak weight contrast | Poor hierarchy | Bold headings (600+), regular body | | Long lines | Hard to read | Add max-w-prose (65ch) |

---

Color

Building a Palette

Every palette needs five functional roles:

Role	Purpose	Usage
Primary	Brand identity	Buttons, links, active states
Neutral

Text, backgrounds | Body text, cards, dividers |
| Accent | Secondary actions | Tags, badges, highlights |
| Semantic | Feedback | Success/warning/error states |
| Surface | Layered backgrounds | Cards, modals, overlays |

Surface Layering (Dark Mode)

Create depth through lightness, not shadows:

CODEBLOCK2

Contrast Requirements (WCAG)

Text Size	Minimum Ratio	Enhanced (AAA)
Normal text (<18px)	4.5:1	7:1
Large text (≥18px bold, ≥24px)

3:1 | 4.5:1 | | UI components | 3:1 | — |

Color Mistakes

Mistake	Problem	Fix
Purple gradient on white	"AI aesthetic" cliché	Use intentional brand colors
Low contrast text

Accessibility fail | Test with contrast checker | | Color-only indicators | Colorblind users excluded | Add icons/text | | Too many colors | Visual noise | 3-5 colors maximum | | Light gray text on white | Unreadable | slate-600 minimum |

---

Spacing

8px Base Unit Scale

CODEBLOCK3

Spacing Rules

Rule	Implementation
Use gap not margins	INLINECODE14
Consistent padding

Same values on all cards/sections | | More space between groups | Less space within groups (Gestalt) | | No arbitrary values | Only use scale tokens |

Spacing Mistakes

Mistake	Problem	Fix
Arbitrary pixel values	Inconsistent rhythm	Use spacing scale only
Margin on children

Margin collapse bugs | Use gap on parent | | Equal spacing everywhere | No visual grouping | More between, less within | | Tight mobile padding | Cramped feeling | Minimum p-4 on mobile |

---

Visual Hierarchy

Guide the eye through deliberate contrast.

Hierarchy Techniques

Technique	How	Impact
Size	Hero 3-4x body	Immediate focal point
Weight

Bold headings, regular body | Scannability | | Color | Primary vs muted | Information layers | | Space | Isolation creates emphasis | Draws attention | | Position | Top-left anchors reading | Natural flow |

Card Hierarchy Pattern

CODEBLOCK4

---

Responsive Design

Breakpoint Strategy

Breakpoint	Target	Key Changes
< 640px	Mobile	Single column, stacked nav, 44px touch targets
640-1024px

Tablet | Two columns, collapsible sidebars | | 1024-1440px | Desktop | Full layout, hover enabled | | > 1440px | Wide | Max-width container, prevent ultra-wide lines |

Fluid Techniques

CODEBLOCK5

Responsive Mistakes

Mistake	Problem	Fix
No viewport meta	Broken mobile	Add INLINECODE17
Fixed widths

Overflow on mobile | Use max-w-* and % | | Tiny touch targets | Frustrating taps | Minimum 44x44px | | Hidden horizontal scroll | Broken layout | Test at 375px width |

---

Accessibility

Accessibility is not optional.

Critical Requirements

Requirement	Implementation	Standard
Color contrast	4.5:1 normal, 3:1 large	WCAG 2.1 AA
Keyboard navigation

Tab order matches visual | WCAG 2.1.1 | | Focus indicators | Visible :focus-visible ring | WCAG 2.4.7 | | Semantic HTML | <button>, <nav>, <main> | WCAG 1.3.1 | | Alt text | Descriptive for images | WCAG 1.1.1 | | Motion safety | prefers-reduced-motion | WCAG 2.3.3 | | Touch targets | 44×44px minimum | WCAG 2.5.8 |

Focus Styles

CODEBLOCK6

Motion Safety

CODEBLOCK7

---

Motion & Animation

Use motion to communicate, not decorate.

Timing Guidelines

Interaction	Duration	Easing
Button hover	150ms	ease-out
Modal open

250ms | ease-out | | Modal close | 200ms | ease-in | | Page transition | 300ms | ease-in-out | | Stagger delay | 50-80ms per item | — | | Micro-feedback | 100ms | ease-out |

Staggered Entrance

CODEBLOCK8

Motion Mistakes

Mistake	Problem	Fix
Animating width/height	Performance hit	Use transform only
> 500ms duration

Feels sluggish | 150-300ms for most | | Motion everywhere | Overwhelming | Focus on entrances/exits | | No reduced-motion | Accessibility fail | Always check preference |

---

Component States

Every interactive element needs clear states.

State	Visual Treatment
Default	Base styling
Hover

Subtle background/shadow shift |
| Active/Pressed | Slight inset, reduced shadow |
| Focus | High-visibility ring |
| Disabled | 50% opacity, not-allowed cursor |
| Loading | Spinner or skeleton |

Button Example

CODEBLOCK9

---

Design Tokens Architecture

Structure tokens in three layers:

CODEBLOCK10

This allows theme switching by remapping Layer 2 only.

---

Pre-Delivery Checklist

Typography

• - [ ] Intentional font pairing (not system defaults)
• [ ] Consistent type scale
• [ ] Line length ≤ 75 characters
• [ ] 16px minimum body text

Color

• - [ ] Cohesive palette (3-5 colors)
• [ ] WCAG contrast met (4.5:1 normal, 3:1 large)
• [ ] Semantic colors defined
• [ ] Dark mode tested (if applicable)

Spacing

• - [ ] Consistent rhythm using scale
• [ ] No arbitrary pixel values
• [ ] Proper mobile padding

Hierarchy

• - [ ] Clear visual flow
• [ ] Primary action obvious
• [ ] Information layered by importance

Responsive

• - [ ] Mobile tested (375px)
• [ ] No horizontal overflow
• [ ] Touch targets ≥ 44px

Accessibility

• - [ ] Keyboard navigable
• [ ] Focus visible
• [ ] Screen reader tested
• [ ] Motion-safe

States

• - [ ] Hover on all interactive elements
• [ ] Focus-visible on all focusable
• [ ] Loading states for async
• [ ] Error states for forms

Performance

• - [ ] Images optimized (WebP, srcset)
• [ ] Fonts subset
• [ ] Animations use transform/INLINECODE28

---

NEVER Do

1. 1. NEVER skip contrast checking — Test every text/background combination
2. NEVER use color alone — Always pair with icons/text for meaning
3. NEVER remove focus outlines — Unless replacing with visible alternative
4. NEVER use arbitrary spacing — Stick to the scale
5. NEVER animate layout properties — Only transform and INLINECODE30
6. NEVER ignore reduced-motion — Always check the preference
7. NEVER center everything — Left-align body text
8. NEVER use tiny touch targets — 44px minimum
9. NEVER use low-contrast text — slate-600 minimum on white
10. NEVER use generic system fonts — Choose intentional typography

---

Related Skills

• - ui-ux-pro-max — Searchable design databases with CLI
• INLINECODE33 — Creative aesthetics, avoiding "AI slop"
• INLINECODE34 — Applying themes to artifacts
• INLINECODE35 — Token architecture and theming