Library

Reference

Quick-lookup cheat sheet — all 103 topics in one scrollable view.

Brain

UX Psychology

6 chapters · 44 topics

Perception

Gestalt ProximityHow spacing creates visual relationships
Full
Gestalt SimilarityHow visual consistency signals functional consistency
Full
Gestalt ContinuityHow alignment creates visual flow
Full
Gestalt ClosureHow the brain completes incomplete shapes
Full
Figure/GroundHow we separate foreground from background
Full
Color PerceptionWhy color alone is never enough
Full
Jakob's LawWhy users prefer familiar interfaces
Full
Aesthetic-Usability EffectWhy beautiful designs feel more usable
Full
Reading Is UnnaturalWhy reading requires deliberate effort and how UI design can support or hinder it
Full

Decisions & Actions

Fitts's LawWhy bigger and closer targets are easier to hit
Full
Hick's LawWhy fewer choices lead to faster decisions
Full
Doherty ThresholdWhy 400ms is the magic number
Full
Tesler's LawComplexity must live somewhere
Full
Postel's LawBe liberal in what you accept
Full
Cognitive BiasesHow irrational thinking shapes decisions
Full
Applying Psychological PrinciplesTranslating psychology into team design principles that guide daily decisions
Full
Design Ethics and ResponsibilityThe obligation that comes with using psychology to shape human behavior
Full

Attention & Memory

Miller's LawThe limits of working memory
Full
Attention BlindnessWhy users miss obvious things
Full
Recognition vs. RecallWhy showing beats asking
Full
Von Restorff EffectWhy distinctive items are remembered
Full
Peak-End RuleHow peaks and endings shape memory
Full
Progressive DisclosureRevealing complexity at the right time
Full
Factors Affecting LearningWhy some UI patterns are learned quickly and others require repeated exposure
Full

Visual Design

Visual HierarchyMaking importance visible
Full
Spacing SystemsConstrained scales for consistent design
Full
TypographyType choices that communicate clearly
Full
Color SystemsBuilding a functional palette
Full
Depth & ElevationCreating visual layers
Full

Patterns & Components

Form DesignReducing friction in data entry
Full
Navigation PatternsHelping users find their way
Full
Feedback & StatesEvery state is a design opportunity
Full
Mobile PatternsDesigning for touch and context
Full
Accessibility PatternsInclusive design that helps everyone
Full

Communication

Stakeholder PerspectivesUnderstanding who you're talking to
Full
Framing Design DecisionsConnecting design to goals
Full
Handling FeedbackTurning critique into collaboration
Full
Building CredibilityEarning trust over time
Full
The Designer as CommunicatorWhy communicating design decisions is as important as making them
Full
Reducing Cognitive Load in Design ReviewsHow to present designs so stakeholders can evaluate rather than react
Full
After the MeetingThe work that happens after the room empties is often more important than the meeting itself
Full
Recovering from DisasterHow to handle rejected designs, failed meetings, and stakeholder conflicts
Full
Working With DesignersHow non-designers can get the best from design collaborations
Full
Designing for VisionUsing design to cast a vision for the future — and why this makes designers uniquely powerful
Full
🧩

Design Systems

8 chapters · 19 topics

Foundations

What Is a Design SystemInterconnected patterns and shared practices that serve a product's purpose
Full
Benefits of Design SystemsSpeed, consistency, and collaboration gains from systematized design
Full
What Makes Design Systems EffectiveKey traits that distinguish successful systems from abandoned ones
Full

Design Principles

What Are Design PrinciplesShared guidelines that capture what good design means for your team
Full
Qualities of Effective PrinciplesWhat distinguishes principles that guide decisions from ones that gather dust
Full
Creating Design PrinciplesA collaborative process for discovering principles grounded in real work
Full

Functional Patterns

What Are Functional PatternsPatterns defined by what users can do, not how they look
Full
Defining Pattern StructureDocumenting content hierarchy before visual design to align design and code
Full
Pattern Variations and Visual HierarchyUsing a loudness scale to organize variations and prevent visual competition
Full

Perceptual Patterns

What Are Perceptual PatternsPatterns that define how a product feels, not just what it does
Full
Building a Visual LanguageA concrete vocabulary of type, color, spacing, and motion that scales
Full

Shared Language

Naming ConventionsHow consistent names reduce friction across design, code, and conversation
Full
Building a Pattern LanguageA shared vocabulary for the whole team — components, behaviors, and concepts
Full

Parameters of Your System

Defining System ParametersUnderstanding the factors that determine your system's scope and shape
Full
Getting Buy-InBuilding organizational support by speaking each stakeholder's language
Full

Planning and Practicalities

Prioritizing System WorkUsing frequency and pain to decide which patterns to build first
Full
System GovernanceModels for owning, maintaining, and evolving the system over time
Full

Pattern Libraries

Pattern Library StructureOrganizing a pattern library so teams find what they need quickly
Full
Writing Effective DocumentationDocumenting the "why" so teams apply patterns correctly in new situations
Full
🎨

Designing Brand Identity

6 chapters · 18 topics

Brand Basics

What Is BrandHow brand creates connection, trust, and differentiation in crowded markets
Full
What Is Brand IdentityThe tangible system of visual and verbal elements that express brand character
Full
Brand StrategyConnecting business objectives to brand positioning and customer experience
Full

Brand Ideals

DifferentiationCreating a brand position that is distinct, ownable, and relevant
Full
Authenticity and CoherenceBuilding brands that deliver on their promise consistently across every touchpoint
Full
Brand Value and InvestmentUnderstanding brand as a measurable business asset that compounds over time
Full
Brand LongevityDurability through commitment to a central idea — not through chasing trends
Full

Brand Elements

Brandmarks and Logo TypesThe taxonomy of mark types and how to choose the right one
Full
Color and Typography in Brand IdentityHow color and type carry brand personality and build recognition
Full
Iconography and PatternBuilding a consistent icon system that extends brand identity into UI and communications
Full
Sound, Motion, and Other SensesHow brands extend identity beyond the visual into sound, motion, touch, and scent
Full

Brand Process

Research and AuditGathering the insights that make brand strategy and design decisions defensible
Full
Clarifying Strategy and Designing IdentityTranslating brand strategy into visual and verbal identity systems
Full

Brand Management

Standards and GuidelinesCreating documentation that enables consistent brand application at scale
Full
Building Brand ChampionsCreating internal advocates who protect and extend the brand from within
Full

Brand in Context

Organizational Culture and BrandBuilding brand from the inside out — culture as the operating system of brand
Full
Messaging, Voice, and Brand GovernanceHow verbal identity and governance systems keep brands coherent at scale
Full
Brand in the Digital AgeAI, sustainability, longevity — how modern forces reshape brand identity practice
Full
✏️

Practical UI

5 chapters · 10 topics

Fundamentals

Usability FirstMinimise risk, cognitive load, and interaction cost before adding anything else
Full
Consistency and Common PatternsLeveraging conventions to reduce learning cost and build user confidence
Full

Less Is More

Remove the UnnecessaryEliminating visual noise and information clutter to let the essential shine
Full
Progressive DisclosureShowing information and options at the moment they become relevant
Full

Color

Color and AccessibilityContrast, meaning, and status — ensuring color works for every user
Full
Building a UI Color SystemCreating a consistent palette with a brand color, shades, and semantic roles
Full

Layout and Spacing

Spacing and GroupingUsing proximity, whitespace, and a spacing scale to communicate relationships
Full
Visual Hierarchy in LayoutUsing size, weight, contrast, and depth to guide attention through a layout
Full

Typography

Type Scale and Typeface ChoiceA consistent size scale and disciplined typeface selection that creates hierarchy
Full
Readability and Text LayoutLine length, line height, alignment, and spacing for comfortable reading
Full
🎨

Interaction of Color

6 chapters · 12 topics

Color Relativity

Color Is RelativeWhy we never see color as it physically is — context changes everything
Full
Color Memory and RecollectionWhy remembered colors differ from seen colors, and what this means for design
Full

Simultaneous Contrast

1 Color Appears as 2How the same color looks completely different on different grounds
Full
2 Different Colors Look AlikeHow context can make distinct colors appear identical — and why this matters
Full

Color Deception

After-Image and Simultaneous ContrastHow sustained color exposure produces complementary color effects
Full
Vibrating Boundaries and Vanishing EdgesHow equal light intensity makes edges disappear, and high contrast makes them vibrate
Full

Color Mixture

Illusion of TransparenceCreating the appearance of overlapping transparent layers using only opaque colors
Full
The Middle MixtureColors that sit precisely between two neighbors — the key to harmonic color intervals
Full

Optical Effects

The Bezold EffectHow a single added color shifts the entire perceived palette
Full
Color Intervals and TransformationThe musical analogy — color relationships as intervals that transpose consistently
Full

Color Systems

Color Harmony and QuantityJuxtaposition, proportion, and why harmony is relational — not a fixed formula
Full
Color Temperature and HumidityWarm, cool, dry, and moist — the sensory dimensions of color beyond hue
Full