Resources

Screens from real apps, searchable by flow — sign-up, checkout, onboarding.

Web app screens filtered by component, page type and industry.

Ambitious web design. Not for everyday work — for seeing where the edge is.

A tight, curated list of modern sites — no noise.

A landing page gallery — handy for studying structure and block order.

A large Figma UI kit and design system — so you don't start from zero.

Free UI kits, templates and files — usually where the thing you need already exists.

React component code you copy into the project — not a dependency.

Ready-made blocks from the Tailwind authors — landing, app screens, commerce.

Build a sitemap and wireframes fast, then push them to Figma or Webflow.

Google's system — sizing, states and motion rules, especially for Android.

Apple's official guidance for iOS and macOS — where I check platform conventions.

A strong reference for admin UI — tables, forms, empty states, messaging.

An open enterprise system — a model for documenting tokens and grids.

Component rules written out in plain words — including when not to use them.

A clean open line set, 1500+ icons, with packages for React and friends.

Six weights in one family — light and bold from the same set. This site uses it.

A small, careful set from the Tailwind team — two sizes, two styles.

5000+ icons — when you need an unusual symbol, it's usually here.

Hundreds of sets behind one search, telling you which set each icon is from.

Brand logos as SVG with their official colour — for tech stack rows.

Matched line and fill pairs — handy for active states.

Free typefaces — where I check Cyrillic and Uzbek character support.

Free-for-commercial typefaces from Indian Type Foundry — with real character.

Self-host fonts via npm — no third-party requests, no tracking.

Shows which type pairings real sites are actually using.

System font stacks that load nothing — the fastest option there is.

Try a palette on a real page mock-up instead of swatches.

A palette generator — lock one colour and cycle the rest.

Each palette tells you which colour goes where — background, text, button.

An open UI colour set — ten steps per hue with even lightness.

Whether text and background clear WCAG contrast — answered in a second.

Turns one colour into a full Tailwind scale (50–950).

High-quality free photography, usable in commercial work.

Photos and short video — what Unsplash lacks is often here.

Illustrations whose accent colour you set before downloading.

Editable illustrations that also export animated.

Build a 3D scene in the browser and embed it straight into a page.

SVG backgrounds — waves, blobs, grids; tiny files.

Turns a screenshot into a presentable shot in seconds.

A catalogue of device and scene mock-ups, with a Figma plugin.

3D device mock-ups and video from them — for product pages.

A browser scene editor — compose the mock-up, light and shadow yourself.

Wraps a screenshot in a browser window and background — the fastest option.

Lightweight JSON animations for web and mobile — instead of video.

Interactive animation with states — it reacts to hover and clicks.

The library for complex timelines and scroll-driven animation.

Animation for React (formerly Framer Motion) — used on this site too.

Easing curves you can watch, then copy the one you want.

Draw your own curve and compare it side by side with the old one.

The psychology behind design decisions — short, with examples.

A practical design book for developers — techniques, not theory.

User research and UX articles — measurements, not opinions.

Google's guidance on speed, Core Web Vitals and accessibility.

The reference for CSS and HTML — where I check how a property actually behaves.

UX teardowns of well-known products, told as comics — easy to read.

Brings hundreds of icon sets into Figma — search and drop in.

Drops real photography into the mock-up instead of a grey box.

Names, addresses, avatars — fills the mock-up with believable data.

Draws flow arrows between screens — for user flows.

Removes an image background without leaving Figma.

Turns a live site into Figma layers — a starting point for a redesign.

Gives Tailwind or HTML from a layer — a draft, not finished code.

A reference and image library — searchable by tag and by colour.

Compresses images in the browser with a side-by-side diff — nothing is uploaded.

Quick PNG and JPG compression, several files at a time.

Hand-drawn-looking diagrams — for explaining structure fast.

One-click background removal that even handles hair well.

Erases unwanted objects — brush over them and the gap is filled in.