UI Recipes

A growing collection of practical UI design lessons focused on helping designers and developers build better user interfaces.

The goal of this repository is to explain UI design concepts in a simple, structured, and beginner-friendly way while following modern design principles and industry best practices.

Learn the foundations of typography, including:

• Font selection
• Font sizes
• Font weights
• Line height

Typography is one of the most important building blocks of UI design and serves as the foundation for many of the lessons that will follow.

Learn the foundations of spacing, including:

• Spacing as a system
• The 8-point grid system
• Spacing scales and tokens
• Padding vs margin

Spacing is one of the most important building blocks of UI design and serves as the foundation for many of the lessons that will follow.

Learn the foundations of color, including:

• Color fundamentals (hue, saturation, lightness)
• Building a color palette
• The 60-30-10 rule
• Color contrast and WCAG accessibility

Color is one of the most powerful and visually impactful building blocks of UI design.

Learn the foundations of grids, including:

• Grid anatomy (columns, gutters, margins)
• Column counts and common grid types
• Container widths
• Breakpoints and responsiveness

Grids bring order and structure to every interface you design.

Learn the foundations of layout, including:

• The principle of alignment
• Visual balance and weight
• Reading patterns (F-pattern, Z-pattern)
• Whitespace and proximity

A strong layout guides the eye and makes content effortless to scan.

Learn the foundations of responsive design, including:

• What breakpoints are
• Common breakpoint values
• Mobile-first vs desktop-first
• Fluid layouts

Responsive design ensures your interface feels right on every screen size.

Learn the foundations of visual hierarchy, including:

• How contrast creates priority
• How scale communicates importance
• How position guides attention
• Gestalt principles in hierarchy

Visual hierarchy tells users what matters most before they read a single word.

Learn the foundations of elevation, including:

• Shadow anatomy (offset, blur, spread, color, opacity)
• Elevation levels
• When to use flat, subtle, and strong shadows
• Dark-mode shadows

Shadows add depth that clearly signals which elements sit above others.

Learn the foundations of shape, including:

• How readability and comfort are affected
• Radius scales and tokens
• Shape personality
• Pill vs circle shapes

Corner radius shapes the personality of your entire interface.

Learn the foundations of iconography, including:

• Anatomical properties (stroke, style, grid)
• Icon styles (outline, filled, duotone)
• Recognizable metaphors
• Icon vs text labels

Icons communicate ideas instantly — when chosen with intention.

Learn the foundations of icon sizing, including:

• Standard icon sizes
• The icon grid
• Optical sizing vs mathematical sizing
• Alignment within buttons and lists

Consistent icon sizing keeps interfaces precise and harmonious.

Learn the foundations of imagery, including:

• Types of imagery (photos, illustrations, icons)
• When to use photos vs illustrations
• Cropping and framing
• Text over images

Images add emotion and context that words alone can't convey.

Learn the foundations of design tokens, including:

• Token naming and structure
• Primitive vs semantic tokens
• Common token categories
• Theming with tokens

Tokens turn design decisions into reusable, shareable building blocks.

Learn the anatomy of buttons, including:

• Button anatomy (padding, label, container, icon)
• Types of buttons
• Height and touch targets
• Button hierarchy (primary, secondary, tertiary)

Buttons are the most important interactive component in any interface.

Learn the anatomy of inputs, including:

• Input anatomy (container, label, placeholder, icons, metadata)
• Input types (text, textarea, select, toggle, search)
• Labels and placeholder text
• Help text and validation states

Inputs are where users translate their intentions into data.

Learn the foundations of component states, including:

• The core states (default, hover, focus, active, disabled)
• Designing each state
• State transitions
• Loading states

Every component responds to the user — good states make that response feel intentional.

Learn the foundations of variants, including:

• Variant types (primary, secondary, destructive, ghost)
• Size scales (sm, md, lg)
• How variants and sizes combine
• Designing reusable component matrices

Variants and sizes let one component adapt to every context in your product.

Learn the principles of form design, including:

• Form structure and grouping
• Label, input, helper relationships
• Ordering fields logically
• Reducing cognitive load

A well-designed form makes collecting data feel effortless.

Learn the foundations of validation, including:

• Inline vs on-submit validation
• Types of errors (input, system, permission)
• Writing clear error messages
• Preventing errors with format hints

Errors are inevitable — great interfaces make them painless.

Learn the foundations of micro-interactions, including:

• The anatomy of a micro-interaction
• Feedback that builds trust
• Timing and ease
• Delight without distraction

Micro-interactions are the tiny moments that make an interface feel alive.

Learn the foundations of accessibility, including:

• The four WCAG principles (POUR)
• WCAG levels (A, AA, AAA)
• Semantic HTML and ARIA
• Keyboard accessibility

Accessibility means designing for everyone, regardless of ability.

Learn the foundations of color accessibility, including:

• Contrast ratio basics
• WCAG contrast requirements
• Testing text, UI, and graphics
• Never relying on color alone

Readable color keeps your interface usable for everyone.

Learn the foundations of accessible navigation, including:

• Semantic structure (landmarks, headings, links)
• Keyboard navigation
• Focus management
• Skip links

Navigation should help every user find their way — regardless of how they navigate.

Learn the foundations of data visualization, including:

• Choosing the right chart
• Chart anatomy
• Common chart types
• Encoding data visually

Data visualization turns numbers into understanding.

Learn the foundations of tables, including:

• Table anatomy
• Column alignment
• Density levels
• Sorting, filtering, and pagination

Tables are the workhorse of data-heavy interfaces.

Each lesson includes:

• Introduction to the topic
• Core concepts and theory
• Best practices
• Common mistakes
• Practical examples
• Additional learning resources

ui-recipes/
│
├── README.md
│
├── 01-typography/
│   └── README.md
│
├── 02-spacing/
│   └── README.md
│
├── 03-color/
│   └── README.md
│
├── 04-grid-systems/
│   └── README.md
│
├── 05-layout-principles/
│   └── README.md
│
├── 06-responsive-breakpoints/
│   └── README.md
│
├── 07-visual-hierarchy/
│   └── README.md
│
├── 08-shadows-elevation/
│   └── README.md
│
├── 09-corner-radius-shape-language/
│   └── README.md
│
├── 10-iconography-basics/
│   └── README.md
│
├── 11-icon-sizing-consistency/
│   └── README.md
│
├── 12-imagery-illustration-guidelines/
│   └── README.md
│
├── 13-design-tokens/
│   └── README.md
│
├── 14-component-anatomy-buttons/
│   └── README.md
│
├── 15-component-anatomy-inputs-forms/
│   └── README.md
│
├── 16-component-states/
│   └── README.md
│
├── 17-component-variants-sizes/
│   └── README.md
│
├── 18-form-design-principles/
│   └── README.md
│
├── 19-form-validation-error-messaging/
│   └── README.md
│
├── 20-micro-interactions/
│   └── README.md
│
├── 21-accessibility-fundamentals/
│   └── README.md
│
├── 22-accessible-color-contrast/
│   └── README.md
│
├── 23-accessible-navigation/
│   └── README.md
│
├── 24-data-visualization-basics/
│   └── README.md
│
├── 25-tables-data-density/
│   └── README.md
│
├── Images/
│   └── previews, examples, and comparisons for every lesson
│
└── ...

This repository is intended for:

• Beginner UI Designers
• Frontend Developers
• Product Designers
• Students
• Self-taught Designers

The content is written to be easy to understand while remaining practical and applicable to real-world projects.

This repository is provided for educational purposes. Feel free to use the content as a learning resource and reference for your own projects.