UX Design Principles
Source: "Every UI/UX Concept Explained in Under 10 Minutes" — Kole Jain (March 2026, 138K views)
Figma files: https://www.kolejain.com/resources?scrollTo=every-ui-concept
The One Rule That Governs Everything
"When a user does anything, there should be a response."
Every interaction — click, hover, focus, error, load, success — must have a visible, purposeful response. This is the single most important principle in UI/UX design.
Chapter Map
| Chapter |
Core Concept |
Quick Rule |
| Affordances & Signifiers |
UI communicates how it works through appearance |
Good UI teaches itself |
| Visual Hierarchy |
Size, position, color control what users see first |
Most important = largest + boldest + top |
| Grids, Layouts & Spacing |
Structure and breathing room |
Whitespace > rigid grids |
| Typography |
Font choices, sizing, letter spacing |
One sans-serif font, max 6 sizes |
| Color Theory |
Brand color + semantic colors + ramps |
Color with purpose, not decoration |
| Dark Mode |
Depth via lightness, not shadows |
Lighter cards on dark backgrounds |
| Shadows |
Elevation and depth on light mode |
Low opacity, high blur |
| Icons & Buttons |
Sizing, padding, ghost buttons |
Match icon size to line-height |
| Feedback & States |
Every element needs multiple states |
4 states minimum per button |
| Micro-interactions |
Motion that confirms and delights |
Confirm actions with animation |
| Overlays |
Gradients and blur over images |
Linear gradient then progressive blur |
For Engineers: How to Talk to AI Assistants
Use precise vocabulary when describing UI to an AI coding assistant:
BAD: "Make the button look better"
GOOD: "Add hover, active/pressed, and disabled states. Use ghost button style
(transparent background, border only) as secondary CTA next to primary."
BAD: "Fix the dark mode"
GOOD: "In dark mode: elevate card by lightening surface relative to background,
remove box-shadow, lower border opacity, reduce chip saturation/brightness."
BAD: "Add some animation"
GOOD: "Add micro-interaction on copy button: slide up a 'Copied!' chip on click
that auto-dismisses after 1.5s. This confirms the action."
BAD: "Fix the spacing"
GOOD: "Apply 4-point grid: all spacing values must be multiples of 4.
32px between top-level sections, group related items with 8-16px."
See text/engineering-rules.md for the full quick-reference.
The 10 Design Laws
- Every interaction needs a response — no silent state changes ever
- Contrast creates hierarchy — big vs small, colorful vs gray, bold vs regular
- Whitespace is design — let elements breathe; 32px between sections default
- Color carries meaning — blue=trust, red=danger, yellow=warning, green=success
- One font is enough — pick one sans-serif, vary by weight and size
- Match icon size to line-height — body line-height 24px = icons 24px
- If the shadow is the first thing you notice, it's too strong
- Images always improve hierarchy — add color, aid scanning, draw the eye
- Dark mode = lighter surfaces for elevation, not shadows
- Linear gradient beats solid overlay — preserves image, readable text
Deep Dives
- Affordances & Signifiers
- Visual Hierarchy
- Grids, Layouts & Spacing
- Typography
- Color Theory
- Dark Mode
- Shadows
- Icons & Buttons
- Feedback & States
- Micro-interactions
- Overlays
- Engineering Quick-Reference
- Full Glossary
1---2name: ux-design-principles3description: Comprehensive UI/UX design principles covering affordances, visual hierarchy, grids, typography, color theory, dark mode, shadows, icons, buttons, feedback states, micro-interactions, and overlays. Use when designing UI components, reviewing design quality, building new screens, giving design feedback, writing design specs for AI coding assistants, or teaching product/engineering teams correct design vocabulary.4---56# UX Design Principles78> Source: "Every UI/UX Concept Explained in Under 10 Minutes" — Kole Jain (March 2026, 138K views)9> Figma files: https://www.kolejain.com/resources?scrollTo=every-ui-concept1011## The One Rule That Governs Everything1213> **"When a user does anything, there should be a response."**1415Every interaction — click, hover, focus, error, load, success — must have a visible, purposeful response. This is the single most important principle in UI/UX design.1617---1819## Chapter Map2021| Chapter | Core Concept | Quick Rule |22|---------|-------------|------------|23| [Affordances & Signifiers](text/affordances-signifiers.md) | UI communicates how it works through appearance | Good UI teaches itself |24| [Visual Hierarchy](text/visual-hierarchy.md) | Size, position, color control what users see first | Most important = largest + boldest + top |25| [Grids, Layouts & Spacing](text/grids-layouts-spacing.md) | Structure and breathing room | Whitespace > rigid grids |26| [Typography](text/typography.md) | Font choices, sizing, letter spacing | One sans-serif font, max 6 sizes |27| [Color Theory](text/color-theory.md) | Brand color + semantic colors + ramps | Color with purpose, not decoration |28| [Dark Mode](text/dark-mode.md) | Depth via lightness, not shadows | Lighter cards on dark backgrounds |29| [Shadows](text/shadows.md) | Elevation and depth on light mode | Low opacity, high blur |30| [Icons & Buttons](text/icons-buttons.md) | Sizing, padding, ghost buttons | Match icon size to line-height |31| [Feedback & States](text/feedback-states.md) | Every element needs multiple states | 4 states minimum per button |32| [Micro-interactions](text/micro-interactions.md) | Motion that confirms and delights | Confirm actions with animation |33| [Overlays](text/overlays.md) | Gradients and blur over images | Linear gradient then progressive blur |3435---3637## For Engineers: How to Talk to AI Assistants3839Use precise vocabulary when describing UI to an AI coding assistant:4041```42BAD: "Make the button look better"43GOOD: "Add hover, active/pressed, and disabled states. Use ghost button style44 (transparent background, border only) as secondary CTA next to primary."4546BAD: "Fix the dark mode"47GOOD: "In dark mode: elevate card by lightening surface relative to background,48 remove box-shadow, lower border opacity, reduce chip saturation/brightness."4950BAD: "Add some animation"51GOOD: "Add micro-interaction on copy button: slide up a 'Copied!' chip on click52 that auto-dismisses after 1.5s. This confirms the action."5354BAD: "Fix the spacing"55GOOD: "Apply 4-point grid: all spacing values must be multiples of 4.56 32px between top-level sections, group related items with 8-16px."57```5859See [text/engineering-rules.md](text/engineering-rules.md) for the full quick-reference.6061---6263## The 10 Design Laws64651. **Every interaction needs a response** — no silent state changes ever662. **Contrast creates hierarchy** — big vs small, colorful vs gray, bold vs regular673. **Whitespace is design** — let elements breathe; 32px between sections default684. **Color carries meaning** — blue=trust, red=danger, yellow=warning, green=success695. **One font is enough** — pick one sans-serif, vary by weight and size706. **Match icon size to line-height** — body line-height 24px = icons 24px717. **If the shadow is the first thing you notice, it's too strong**728. **Images always improve hierarchy** — add color, aid scanning, draw the eye739. **Dark mode = lighter surfaces for elevation**, not shadows7410. **Linear gradient beats solid overlay** — preserves image, readable text7576---7778## Deep Dives7980- [Affordances & Signifiers](text/affordances-signifiers.md)81- [Visual Hierarchy](text/visual-hierarchy.md)82- [Grids, Layouts & Spacing](text/grids-layouts-spacing.md)83- [Typography](text/typography.md)84- [Color Theory](text/color-theory.md)85- [Dark Mode](text/dark-mode.md)86- [Shadows](text/shadows.md)87- [Icons & Buttons](text/icons-buttons.md)88- [Feedback & States](text/feedback-states.md)89- [Micro-interactions](text/micro-interactions.md)90- [Overlays](text/overlays.md)91- [Engineering Quick-Reference](text/engineering-rules.md)92- [Full Glossary](text/glossary.md)
blink-new