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.

---

Lessons

📖 Typography Fundamentals

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.

📖 Spacing System

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.

📖 Color System

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.

📖 Grid Systems

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.

📖 Layout Principles

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.

📖 Responsive Breakpoints

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.

📖 Visual Hierarchy

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.

📖 Shadows & Elevation

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.

📖 Corner Radius & Shape Language

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.

📖 Iconography Basics

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.

📖 Icon Sizing & Consistency

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.

📖 Imagery & Illustration Guidelines

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.

📖 Design Tokens

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.

📖 Component Anatomy: Buttons

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.

📖 Component Anatomy: Inputs & Forms

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.

📖 Component States

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.

📖 Component Variants & Sizes

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.

📖 Form Design Principles

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.

📖 Form Validation & Error Messaging

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.

📖 Micro-interactions

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.

📖 Accessibility Fundamentals

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.

📖 Accessible Color & Contrast

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.

📖 Accessible Navigation

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.

📖 Data Visualization Basics

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.

📖 Tables & Data Density

Learn the foundations of tables, including:

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

Tables are the workhorse of data-heavy interfaces.

---

Lesson Structure

Each lesson includes:

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

---

Repository Structure

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
│
└── ...

---

Purpose

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.

---

License

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