Understand and master design fundamentals.

A course on the fundamentals of UI design — typography, spacing, layout, color and much more. Every lesson is concise, plainly written, and demonstrated with live demos you can learn from. Perfect for beginners and experts.

SALE - LIMITED TIME ONLY

Buy the course — $149 $249

One payment, lifetime access, all future modules included.

Get a free preview

What to expect

Concise, easy-to-understand lessons

Each one explains a single fundamental in a few minutes of reading — why it matters, the guideline to follow, and when to break it. No jargon, no filler, no hour-long videos.

A live demo for every idea

Instead of taking our word for it, you drag the slider, flip the toggle and break the rule on purpose. You'll feel why a guideline exists — which is what actually makes it stick.

A reference you keep coming back to

Every module ends with a reusable system — and the course keeps growing. New modules are added regularly and are always included.

Every module and lesson

We've carefully curated and put together years of experience, rules and guidelines into all of these modules and lessons.

01

Typography
  1. 01Why Typography Carries the Design
  2. 02Choosing Typefaces
  3. 03Font Sizing and Type Scales
  4. 04Font Weight and Hierarchy
  5. 05Line Height
  6. 06Letter Spacing
  7. 07Line Length
  8. 08Alignment
  9. 09Tabular Numbers
  10. 10Color and Contrast for Text
  11. 11Font Smoothing and Rendering
  12. 12Building a Reusable Type System
02

Spacing and Layout
  1. 01Why Spacing Makes or Breaks a Design
  2. 02Start With Too Much White Space
  3. 03Building a Spacing Scale
  4. 04Spacing and Grouping
  5. 05Max-Widths and Constraining Layout
  6. 06Grids and Columns
  7. 07Responsive Spacing
  8. 08Border Radius
  9. 09Building a Reusable Spacing System
03

Color
  1. 01Why Color Is a System, Not a Picker
  2. 02Choosing the Hue
  3. 03Meet OKLCH
  4. 04You Need More Colors Than You Think
  5. 05From One Accent to a Full Palette
  6. 06Grays Don't Have to Be Gray
  7. 07Perceived Brightness
  8. 08Using Accent Color Sparingly
  9. 09Accessible Doesn't Mean Ugly
  10. 10Gradients
  11. 11Dark Mode
  12. 12Building a Reusable Color System
04

More modules being added regularly — always included.

AI prompts included

Every module ends with its system packaged as a copyable prompt. Paste it into Claude, ChatGPT, Cursor or v0 and the designs and code they produce follow the fundamentals — your spacing scale, your type system, your color rules.

// from the Spacing & Layout module prompt SPACING SCALE - Only use these spacing values: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px. GROUPING - Space within a group must be smaller than space between groups. LAYOUT - Cap running text at max-width: 65ch. Forms at roughly 400–480px. …

Who it's for

If you want to better understand design — this is for you.

Developers and designers

Developers get the designer's perspective; designers get the why behind every guideline — so decisions stop feeling like guesses.

Business owners

Make your product and marketing look professional without hiring a designer — and when you do hire, judge the work with confidence.

Vibe coders

You build with AI. Learn the fundamentals so you can tell good output from bad — and use the included prompts to make your tools design properly from the start.

Get it before the price goes up

The price rises as new modules are added — but buy once and everything is yours for life, including every future module. 33 lessons and counting, each one with live demos you can learn from.

SALE - LIMITED TIME ONLY

Buy the course — $149 $249

Get a free preview

© UI Design Course · Log in