UI/UX Atlas

Master UI & UX Design from first principles to production

A hands-on, modern guide to every corner of interface and experience design. Learn it, then test yourself.

Start learning Try the color tool

In-depth, modern lessons

218 lessons across 18 pillars, grounded in current standards — WCAG 2.2, OKLCH color, container queries, design tokens.

Interactive tools

A color-system generator with OKLCH scales and WCAG checks that exports a Claude-ready Markdown file — plus live previews.

A quiz for every topic

Check your understanding with instant feedback, explanations, and progress saved locally to your device.

Practices what it teaches

Accessible, fast, responsive, and thoughtfully animated — the site itself is a worked example of good UI/UX.

Explore the curriculum

218 lessons across 18 pillars, organized into the two halves of the craft — the interface (UI) and the experience (UX)

Interface

UI Design

Visual design, interaction, motion, and front-end systems.

9 pillars
12 lessons

Visual Design

Compose interfaces that communicate hierarchy and meaning — Gestalt, grids, spacing, and composition.

Explore
10 lessons

Color

Color from perceptual fundamentals to OKLCH, accessible contrast, semantic tokens, and dark mode.

Explore
12 lessons

Typography

The craft and engineering of text — type scales, pairing, variable fonts, and fluid responsive type.

Explore
11 lessons

Interaction Design

The moment-to-moment behavior of interfaces — feedback, system states, gestures, and microinteractions.

Explore
11 lessons

Motion & Animation

Purposeful motion as communication — easing, choreography, performance, and motion accessibility.

Explore
10 lessons

UI Patterns

The high-leverage component patterns done well — forms, tables, dashboards, search, and modals.

Explore
16 lessons

Accessibility

Design for the full spectrum of ability — WCAG 2.2, ARIA, keyboard, and assistive technology.

Explore
13 lessons

Design Systems

The shared language between design and engineering — tokens, components, theming, and governance.

Explore
14 lessons

Responsive & Platform

Design across the device landscape — fluid layouts, container queries, and platform conventions.

Explore

Experience

UX Design

Research, structure, content, and strategy.

9 pillars
13 lessons

UX Foundations

The psychology and usability principles behind every interface — how people perceive, attend, remember, and decide.

Explore
17 lessons

UX Research

Methods for understanding users — choosing the right one, running it rigorously, and turning evidence into decisions.

Explore
6 lessons

Synthesis & Modeling

Turn raw research into shared artifacts: personas, Jobs-to-be-Done, journey maps, and service blueprints.

Explore
14 lessons

Information Architecture

Organize, label, and structure content and navigation so people can find what they need.

Explore
10 lessons

Design Process

The frameworks and rituals through which design actually happens — from Design Thinking to DesignOps.

Explore
13 lessons

Content & UX Writing

The language layer — microcopy, voice and tone, error messages, and plain, inclusive writing.

Explore
11 lessons

Prototyping & Tools

Turn ideas into testable artifacts — fidelity, wireflows, the modern tool landscape, and dev handoff.

Explore
12 lessons

Strategy & Metrics

Connect design to business value and human consequence — metrics, ROI, ethics, and dark patterns.

Explore
13 lessons

Emerging & AI UX

The frontier — designing for AI products, generative UI, conversation, voice, and spatial computing.

Explore

Build your color system in minutes

Generate an accessible, OKLCH-based palette with full scales, contrast checks, and a live preview — then export it as a Markdown file your AI coding tools can use directly.

Open the color tool Browse all topics