UI Design

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

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

Commit to a Direction

Mediocrity is forgettable. Pick an extreme:

---

Layout

Grid vs Flexbox Decision

Container Strategy

/* Standard content width */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

/* Full-bleed with contained content */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

Common Layout Mistakes

---

Typography

Typography carries 90% of a design's personality.

Font Pairing by Context

Type Scale (1.25 ratio)

--text-xs: 0.64rem;   /* 10px - captions */
--text-sm: 0.8rem;    /* 13px - secondary */
--text-base: 1rem;    /* 16px - body */
--text-lg: 1.25rem;   /* 20px - lead */
--text-xl: 1.563rem;  /* 25px - h4 */
--text-2xl: 1.953rem; /* 31px - h3 */
--text-3xl: 2.441rem; /* 39px - h2 */
--text-4xl: 3.052rem; /* 49px - h1 */

Typography Rules

Typography Mistakes

---

Color

Building a Palette

Every palette needs five functional roles:

Surface Layering (Dark Mode)

Create depth through lightness, not shadows:

:root {
  --surface-0: hsl(220 15% 8%);   /* page background */
  --surface-1: hsl(220 15% 12%);  /* card */
  --surface-2: hsl(220 15% 16%);  /* raised element */
  --surface-3: hsl(220 15% 20%);  /* popover/modal */
}

Contrast Requirements (WCAG)

Color Mistakes

---

Spacing

8px Base Unit Scale

--space-1: 0.25rem;  /* 4px - tight gaps */
--space-2: 0.5rem;   /* 8px - input padding */
--space-3: 0.75rem;  /* 12px - button padding */
--space-4: 1rem;     /* 16px - default spacing */
--space-6: 1.5rem;   /* 24px - section padding */
--space-8: 2rem;     /* 32px - section gaps */
--space-12: 3rem;    /* 48px - major breaks */
--space-16: 4rem;    /* 64px - page rhythm */

Spacing Rules

Spacing Mistakes

---

Visual Hierarchy

Guide the eye through deliberate contrast.

Hierarchy Techniques

Card Hierarchy Pattern

Eyebrow  ← xs, uppercase, muted color
Title    ← xl, semibold, primary color
Body     ← base, secondary color, 1.6 line-height
Action   ← spaced apart, mt-4 minimum

---

Responsive Design

Breakpoint Strategy

Fluid Techniques

/* Fluid typography */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

/* Fluid spacing */
section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }

/* Intrinsic grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-6);
}

Responsive Mistakes

---

Accessibility

Accessibility is not optional.

Critical Requirements

Focus Styles

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove default only if custom exists */
:focus:not(:focus-visible) {
  outline: none;
}

Motion Safety

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

---

Motion & Animation

Use motion to communicate, not decorate.

Timing Guidelines

Staggered Entrance

.item {
  opacity: 0;
  translate: 0 1rem;
  animation: reveal 0.5s ease-out forwards;
}
.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 60ms; }
.item:nth-child(3) { animation-delay: 120ms; }

@keyframes reveal {
  to { opacity: 1; translate: 0 0; }
}

Motion Mistakes

---

Component States

Every interactive element needs clear states.

Button Example

.btn {
  transition: all 150ms ease-out;
}
.btn:hover {
  background: var(--color-primary-600);
}
.btn:active {
  transform: scale(0.98);
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

---

Design Tokens Architecture

Structure tokens in three layers:

/* Layer 1: Primitives */
--blue-500: oklch(0.55 0.2 250);
--gray-100: oklch(0.95 0.005 250);
--radius-md: 0.5rem;

/* Layer 2: Semantic */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--radius-button: var(--radius-md);

/* Layer 3: Component */
--btn-bg: var(--color-primary);
--btn-radius: var(--radius-button);
--btn-padding: var(--space-2) var(--space-4);

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/opacity

---

NEVER Do

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 opacity
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
• frontend-design — Creative aesthetics, avoiding "AI slop"
• theme-factory — Applying themes to artifacts
• design-system-patterns — Token architecture and theming