Skip to main content

Design Tools & Resources

Curated tools and resources that help developers make better design decisions without needing a design degree. Each tool listed here is free or has a meaningful free tier.

Color​

Contrast Checkers​

  • WebAIM Contrast Checker — Paste two hex colors, get instant WCAG AA/AAA pass/fail results. The fastest way to check contrast.
  • Coolors Contrast Checker — Visual contrast checker with text preview, integrated with Coolors' palette tools.
  • Adobe Color Contrast Checker — Check contrast ratios and simulate color blindness in context of a full palette.
  • Chrome DevTools — Built into the color picker in the Elements panel. Hover any color value to see its contrast ratio against its background. No install needed.

Palette Generators​

  • Coolors — Generate, explore, and save color palettes. Press space to randomize. Lock colors you like.
  • Realtime Colors — Preview your color palette on a realistic page layout in real time. Great for validating choices in context.
  • UIColors — Generate complete Tailwind CSS color shade scales from a single hex color. Essential for Tailwind projects.
  • Open Color — Optimized, accessible color scheme for UI design. Consistent lightness across hues. Good as a default palette.
  • Radix Colors — Accessible 12-step color scales designed for UI. Built for dark mode. Pairs naturally with Radix UI and shadcn/ui.

Typography​

  • Type Scale — Visual calculator for modular type scales. Pick a base size and ratio, see the resulting scale. See Visual Design Fundamentals for how to apply type scales.
  • Google Fonts — The largest free web font library. The Knowledge section has excellent typography education.
  • Fontsource — Self-host Google Fonts and other open-source fonts as npm packages. Better performance and privacy than Google's CDN.
  • Fontjoy — AI-powered font pairing suggestions. Generate harmonious combinations with one click.
  • Modern Font Stacks — System font stacks organized by category (transitional, humanist, geometric, etc.). Zero download cost, instant loading.
  • Practical Typography — Matthew Butterick's free online book on professional typography. Concise, opinionated, and highly practical.
note

Self-hosting fonts with Fontsource is preferred over the Google Fonts CDN for both performance and privacy. The CDN adds an extra DNS lookup and a cross-origin request; self-hosting eliminates both.

Design Inspiration​

  • Dribbble — Design showcase and portfolio site. Filter by "Web Design" for relevant results. Best for visual inspiration, not for copying layouts.
  • Mobbin — Real-world mobile and web app screenshots organized by flow (onboarding, checkout, settings). The best resource for "how do other apps handle this?"
  • Screenlane — Curated web and mobile UI design examples organized by page type and pattern.
  • Page Flows — User flow recordings from real products. See how onboarding, upgrade, and checkout flows actually work in practice.
  • Checklist Design — Best-practice checklists organized by UI component (forms, cards, navigation, modals, etc.). A practical "did I miss anything?" tool.
tip

Refactoring UI is the single best resource for developers who want to improve at visual design. The YouTube channel and social media posts are free; the book is paid but excellent. By the creators of Tailwind CSS.

Icons​

  • Lucide — Clean, consistent icon set. Fork of Feather Icons with active maintenance and a larger set. React, Vue, and Svelte packages available. Used by shadcn/ui.
  • Heroicons — By the Tailwind CSS team. Outline and solid variants. Pairs well with Tailwind projects.
  • Phosphor Icons — Flexible icon family with 6 weights and 7,000+ icons. React, Vue, and Svelte support.
  • Tabler Icons — 5,000+ free, open-source SVG icons. MIT licensed.
  • Remix Icon — Neutral-style icon set with 2,800+ icons. Good when you want icons without a strong visual personality.
  • Material Symbols — Google's icon set. Largest collection (3,000+). Variable font with weight, fill, grade, and optical size axes.
  • Morphicons — SVG path interpolation engine (~6.6 KB gzip) that lets stroke icons morph smoothly into each other (hamburger↔close, play↔pause, sun↔moon). Sits on top of Lucide, Heroicons outline, Tabler, and any 24×24 stroke set — ships zero icons of its own. Bindings for React, Vue, Svelte, and React Native. MIT licensed. See the Morphicons blog post for a full evaluation.

Illustrations​

  • unDraw — Open-source SVG illustrations with customizable accent color. Popular for empty states and landing pages.
  • Open Doodles — Free hand-drawn illustration set. Good for a casual, approachable tone.
  • Humaaans — Mix-and-match people illustrations. Design library for creating custom scenes.
  • Blush — Illustration collections from multiple artists. Free and premium options.
  • Storyset — Customizable animated and static illustrations by Freepik. Free with attribution.

Learning Resources​

  • Laws of UX — The original collection by Jon Yablonski. Beautifully presented UX principles backed by psychology. We cover these in detail in Laws of UX.
  • Nielsen Norman Group — The gold standard for evidence-based UX research. Dense but authoritative. Free articles on every UX topic.
  • Refactoring UI (YouTube) — Short, practical design improvement videos specifically aimed at developers.
  • web.dev Learn Design — Free course from Google on responsive design fundamentals.
  • Every Layout — CSS layout primitives (Stack, Sidebar, Cluster, Switcher) that handle responsive design algorithmically. Some free, some paid.
  • Inclusive Components — Patterns for building accessible UI components by Heydon Pickering. Detailed walkthroughs of common patterns.

Further Reading​