Design Skills & Knowledge
Free guides, cheatsheets, and references to level up your design skills. From color theory to accessibility, layout to design systems.
referenceMental models and design principles for creating intuitive user interfaces. Covers Hick's Law, Fitts's Law, Jakob's Law, and more.
guideThe ultimate guide to making your UI look better. Covers spacing, color, typography, and visual design tactics.
articleJakob Nielsen's 10 general principles for interaction design. Evidence-based heuristics for UI evaluation.
Introduction to the design thinking process: empathize, define, ideate, prototype, test.
In-depth articles on web design, UX, UI patterns, and frontend development.
Design tactics and visual design principles from the creators of Tailwind CSS.
Evidence-based UX research articles, videos, and reports from world leaders in usability.
Everything you need to know about usability testing methodology and best practices.
Definition and guide to creating service blueprints for mapping complex service experiences.
cheatsheetQuick reference guide to UX research methods: qualitative, quantitative, attitudinal, behavioral.
Accessible component design patterns for toggles, menus, tables, accordions, and more.
Google's comprehensive design system guidelines for interaction, layout, and components.
interactiveFast color palette generator with contrast checking, exploration, and export features.
Interactive contrast checker that validates color pairs against WCAG standards.
Comprehensive guide to color on the web covering color spaces, HSL, OKLCH, and color functions.
Modern CSS color functions including oklch, color-mix, and relative color syntax.
Building color systems that automatically maintain contrast using contrast-color in CSS.
The definitive guide to good typography for anyone who works with text.
Google's comprehensive library of typography knowledge covering typeface selection, pairing, and usage.
Interactive tool for previewing and generating modular type scales for web design.
How to define and document typography in your design system, from type scales to font stacks.
Responsive typography fundamentals including font sizing, line height, and readability on the web.
Accessible typography practices including font sizing, line length, and spacing for readability.
Comprehensive reference for CSS Grid Layout with usage examples and video tutorials.
Complete reference guide for CSS Flexbox with diagrammed examples and browser support.
Complete reference guide for CSS Grid Layout with diagrammed examples and browser support.
Complete guide to CSS container queries for component-based responsive design.
Google's comprehensive guide to responsive web design including media queries, layout, and theming.
Collection of articles covering CSS Grid, Flexbox, responsive layout, and modern CSS layout techniques.
How to use space, grids, and layout systems effectively in your design system.
Complete guide to centering elements in CSS with Flexbox, Grid, transforms, and positioning.
checklistCommunity-driven accessibility checklist covering WCAG compliance for web developers.
Official W3C resource for web accessibility standards, strategies, and guidelines.
Official Web Content Accessibility Guidelines 2.2 specification from the W3C.
Google's comprehensive guide to web accessibility covering ARIA, keyboard support, contrast, and testing.
Accessible, inclusive component design patterns with ARIA best practices.
W3C WAI resources specifically curated for designers covering inclusive design practices.
Foundational knowledge about accessibility, disabilities, and assistive technologies.
Complete guide to implementing dark mode on the web with prefers-color-scheme and theming.
Collection of articles on web accessibility, inclusive design, screen readers, and WCAG compliance.
Generate, explore, and save color palettes with an interactive color wheel and harmony rules.
Interactive preview tool for generating modular type scale values for your designs.
Gallery of UI component examples and layout inspiration from the Refactoring UI book.
Collection of open design systems from top companies available for Figma.
Official Material 3 design kit for Figma including components, tokens, and templates.
Everything you need to know about design systems: guides, stories, templates, and tools.
How semantic tokens and Figma variables are transforming design system architecture.
Building accessibility into the foundation of your design system for inclusive products.
How to design, organize, and implement icon sets within a design system.
Guide to content strategy, microcopy, UX writing, and content governance in design systems.
Google's latest design system featuring dynamic color, adaptive layouts, and personalization.
Apple's official design guidelines for iOS, macOS, watchOS, and tvOS platforms.
How small teams can build and maintain effective design systems with limited resources.
Complete guide to CSS gradients including linear, radial, conic gradients, and patterns.
Guidelines for accessible motion and animation on the web, including prefers-reduced-motion.