Skip to main content

Design Resource Library

A programmer's design toolbox — bookmark this chapter and you'll find the right tool for 90% of your design needs.

Color Tools​

You don't need talent to pick colors — you just need the right tools.

Coolors — The Fastest Color Palette Generator​

URL: coolors.co

Press the spacebar to randomly generate 5-color palettes. When you see one you like, lock it (click the lock on the color chip) and keep pressing spacebar for the others. After 3-5 rounds, you'll have a great color scheme.

Tips:

  • Lock your primary color and let others generate around it
  • Export as Tailwind CSS format to copy directly into your code
  • You can even upload a reference image to extract a color palette from it

Realtime Colors — Live Preview of Color Effects​

URL: realtimecolors.com

What makes this tool powerful: as you adjust colors, the right side immediately shows a real webpage with those colors applied. No guessing "will this blue look good as a button?" — you see the result instantly.

Workflow:

  1. First pick a primary color you like
  2. Adjust the text color (recommended: gray-800 to gray-900)
  3. Adjust the background color (recommended: white or gray-50)
  4. Check the live preview on the right — keep adjusting until satisfied
  5. When happy, click Export to get CSS variables or Tailwind config

Adobe Color — Professional-Grade Color Tool​

URL: color.adobe.com

Great for advanced use. Enter a primary color and it auto-generates complementary, analogous, triadic, and other professional schemes. It also has an accessibility contrast check — making sure your text is readable against its background.

tints.dev — Tailwind-Specific Shade Generator​

URL: tints.dev

Enter a color and it auto-generates a complete Tailwind shade scale from 50 to 950. If you're customizing Tailwind theme colors, this tool gives you ready-to-use config code.

Font Pairing​

Google Fonts — A Treasure Trove of Free Fonts​

URL: fonts.google.com

Over 1,500 free commercial-use fonts. The trick is knowing how to choose. Here are some proven pairing schemes:

Option 1: Classic & Stable

  • Headings: Inter (English) + system Chinese font
  • Body: Same as above
  • Best for: SaaS products, admin dashboards, tools

Option 2: Modern & Clean

  • Headings: Plus Jakarta Sans
  • Body: Inter or DM Sans
  • Best for: Startup websites, product landing pages

Option 3: Elegant & Artistic

  • Headings: Playfair Display (serif)
  • Body: Source Sans 3
  • Best for: Blogs, magazines, content-heavy sites

Option 4: Developer Favorite

  • Headings: Space Grotesk
  • Body: IBM Plex Sans
  • Code: JetBrains Mono or Fira Code
  • Best for: Developer tools, technical docs, API platforms

Option 5: Chinese-First

  • Headings: Noto Serif SC
  • Body: Noto Sans SC
  • Best for: Chinese-content websites, e-books

Font Selection Principles​

  • English projects: Use a distinctive font for headings, a highly readable sans-serif for body text
  • Chinese projects: Stick with system fonts (PingFang/Microsoft YaHei/Noto Sans SC) — Chinese web fonts are huge (several MB each) and slow to load
  • Body text size: No smaller than 16px, line height 1.5-1.7
  • Maximum two fonts: One for headings, one for body — no more

Fontpair — Font Pairing Inspiration​

URL: fontpair.co

A font pairing recommendation site for Google Fonts. Not sure what fonts to use for headings and body? Browse here — each pairing comes with a preview.

Illustrations & Images​

unDraw — Free Commercial SVG Illustrations​

URL: undraw.co

The most recommended illustration library, bar none. All free for commercial use, with one-click color switching (change to your brand color). Consistent style, perfect for landing pages, empty state screens, and feature introductions.

How to use:

  1. Find an illustration you like
  2. Click to select a color (enter your primary color hex)
  3. Download the SVG and drop it into your project
  4. Or install the npm package: npm install react-undraw-illustrations

Humaaans — Composable Character Illustrations​

URL: humaaans.com

Freely mix and match heads, bodies, and legs to create characters in different poses and scenes. Great for team pages and user scenario graphics.

Storyset — High-Quality Animated Illustrations​

URL: storyset.com

By Freepik — diverse styles (minimal, thick-line, flat, 3D), some with animation support. Free to use with attribution.

Free Stock Photos​

Unsplash ⭐ Top Pick​

URL: unsplash.com

The highest-quality free photo library — image quality crushes the competition. All photos are free for commercial use, no attribution required (though attribution is a nice gesture).

Search tips:

  • English keywords give the best results
  • Search "abstract" for background images, "workspace" for desktop scenes
  • API free tier: 50 requests/hour — plenty for development

Pexels​

URL: pexels.com

Another excellent free photo library. Unlike Unsplash, it also has free video footage — great for background videos.

Pixelmob — Multi-Library Photo Search​

URL: pixelmob.co

Search Unsplash, Pexels, and more from a single search box.

Design Inspiration​

Mobbin ⭐ Most Practical​

URL: mobbin.com

Real app screenshots, organized by page type (login, list, detail, settings…) and industry. Not sure how to design a particular page? Come here for references — 10x more practical than scrolling Dribbble.

Free tier: A set number of screenshots per day — enough for most needs.

Dribbble​

URL: dribbble.com

A designer showcase platform with stunning visuals. Great for visual inspiration, but many designs lean "conceptual" and may not be practical to implement directly.

Search tips: Search dashboard design, landing page, mobile app plus your industry keywords.

Godly​

URL: godly.website

Curated collection of excellent website designs, each with screenshots and links. Style leans modern and bold — great for landing page inspiration.

Screenlane​

URL: screenlane.com

Similar to Mobbin — real app screenshots organized by page type. Alternate between the two for more inspiration.

One Page Love​

URL: onepagelove.com

An inspiration library focused on single-page designs. Come here when building landing pages, personal homepages, or product intro pages.

Design Tool Comparison​

Figma ⭐ Industry Standard​

Price: Free tier is enough for personal use (up to 3 project files)

Pros:

  • Browser-based, no installation needed — works on Windows/Mac/Linux
  • Real-time collaboration — multiple people editing one file simultaneously
  • Richest community resources — search "dashboard template" or "mobile UI kit" and use them for free
  • Dev Mode lets you inspect CSS code, spacing, and color values directly
  • Powerful plugin ecosystem: icon libraries, color tools, AI generation

Cons: Free tier has limits when files multiply; China access occasionally needs VPN

How programmers use Figma:

  1. You don't need to learn to draw — mainly use "inspect" and "measure" features
  2. Install the Figma to Code plugin to export HTML/Tailwind in one click
  3. Use Dev Mode to check design specs: spacing, font sizes, color values

Sketch​

Price: $10/month (macOS only)

Pros: Native Mac experience, great performance, established design tool

Cons: Mac-only; no real-time collaboration (needs third-party plugins); community resources surpassed by Figma

Verdict: For new projects after 2024, Figma is the better choice — it surpasses Sketch in every way.

Penpot — Open-Source Free Alternative​

URL: penpot.app

Price: Completely free and open-source

Pros:

  • Open-source and free, no project limits
  • Browser-based, supports self-hosting
  • Native SVG format support — better integration with code
  • Not controlled by any commercial company

Cons: Fewer community resources, performance below Figma, collaboration features still maturing

Best for: Teams committed to open source; companies that don't want to depend on Figma; personal learning.

Tool Selection Guide​

What's your scenario?
├── Just starting to learn product design → Figma (free tier)
├── Team collaboration → Figma (professional tier)
├── Only need to inspect designs → Figma Dev Mode
├── Don't want to depend on commercial products → Penpot
└── Mac user + solo work → Sketch works, but Figma is better

Other Useful Tools​

Screenshot Beautification​

  • shots.so: Place screenshots in elegant device mockups — great for App Store previews
  • carbon.now.sh: Beautify code screenshots for sharing

Background Removal​

  • remove.bg: One-click background removal — free tier is sufficient

Image Compression​

  • squoosh.app: Google's image compression tool — runs in the browser, no server upload
  • tinypng.com: Classic image compression — handles both PNG and JPG
  • icones.js.org: Aggregates nearly every icon library — one search box for all
  • iconify.design: 200,000+ icons with support for various frameworks

Gradient Generation​

Pre-Launch Design Checklist​

About to launch your product? Run through this checklist to avoid 80% of common design mistakes:

Basic Checks​

  • Consistent font sizes: Is all body text 16px? Are headings limited to 3-4 sizes?
  • Color consistency: Is there only one primary color? Are grays limited to gray-600/gray-900?
  • Regular spacing: Are all spacings multiples of 4? Is spacing consistent between similar elements?
  • Alignment check: Is all text left-aligned? Are buttons on the same horizontal line?

Responsive​

  • Does it work on phones? At 375px width, does all content display correctly?
  • What about tablets? At 768px width, is the layout reasonable?
  • Large screens? At 1920px width, does the content not stretch too wide? (Add max-width constraints)

Interaction States​

  • Do buttons have hover effects? Does the color change on mouseover?
  • Do input fields have focus effects? Is there a border highlight when clicked?
  • Are links visually distinct? Can users tell they're clickable?
  • Are loading states shown? Is there a spinner or skeleton during data loading?

Content Checks​

  • Do images have alt attributes? Required for accessibility
  • Are error messages friendly? Not "Error 500" — say "Loading failed, please try again"
  • Are empty states designed? What shows when a list is empty? Not just a blank space
  • Do fonts load without flash? Use system fonts for Chinese to avoid FOUT (Flash of Unstyled Text)

Final Step​

Send a screenshot of your product to a friend and ask three questions:

  1. What is this page for? (Tests information hierarchy)
  2. Where would you click first? (Tests visual guidance)
  3. Does anything feel "off"? (Tests gut reaction)

If all three answers are positive — congratulations, you're ready to launch. 🎉

Remember: Design isn't talent — it's discipline. Follow the rules, stay consistent, study great design, and your product won't be ugly. Bookmark this chapter's tool links and reference them whenever you're building.