Design & Tools

A living catalog of inspiration, UI kits, fonts, colour tools, and tiny utilities I reach for when designing and building.

Inspiration & Design

Real-world UI patterns and high-end web design references.

Mobbin

Real-world UI patterns from popular apps.

Awwwards

High-end web design inspiration.

Godly

Excellent modern website inspiration.

Land-book

Curated landing pages.

Dribbble

UI, branding and visual design.

Behance

Broader creative and design portfolios.

Refero

Product and UX inspiration.

Httpster

Interesting web design.

Fonts & Typography

Typefaces, pairing ideas, and identification tools.

Google Fonts

Free, excellent font library.

Fontshare

Free professional fonts.

Font Squirrel

Free commercial-use fonts.

Typewolf

Typography inspiration and resources.

Fonts In Use

See how fonts are actually used.

WhatFontIs

Identify fonts from images.

Colour

Palette generators, scales, and accessibility checks.

Coolors

Generate palettes quickly.

Realtime Colors

Preview colour systems on a website.

Color Hunt

Curated palettes.

Adobe Color

Powerful colour tools.

UI Colors

Generate Tailwind-style colour scales.

Accessible Colors

Check colour accessibility.

UI / Components

Component libraries and primitives for shipping UI faster.

shadcn/ui

Beautiful, customisable React components.

Radix UI

Accessible primitives.

Magic UI

Animated UI components.

Aceternity UI

Creative React/Tailwind components.

21st.dev

Community-built React components.

Tailwind UI

Production-ready Tailwind components.

Animate UI

A fully animated, open-source React component distribution.

Remocn

Production-ready animations, transitions, backgrounds, and scenes for Remotion.

Images & Illustration

Photography, illustration, and visual asset libraries.

Unsplash

High-quality photography.

Pexels

Free stock photography and video.

unDraw

Customisable SVG illustrations.

Storyset

Animated and customisable illustrations.

Blush

Customisable illustration collections.

Icons8

Icons, illustrations and design assets.

Icons

Open-source icon sets for product UI.

Huge Icons

Beautiful icons that make products feel premium

Phosphor Icons

Huge flexible icon set.

Heroicons

Excellent UI icons.

Tabler Icons

Massive open-source icon set.

Iconify

Search thousands of icon sets.

Motion & Interaction

Animation libraries, easing tools, and motion playgrounds.

LottieFiles

Lottie animations.

Framer

Design and motion experimentation.

Motion

React animation library.

GSAP

Powerful web animation.

Cubic Bezier

Experiment with easing curves.

Backgrounds, Patterns & Effects

SVG generators, gradients, and decorative backgrounds.

Haikei

Generate SVG backgrounds.

Mesh

Mesh gradients.

CSS Gradient

CSS gradients.

fffuel

SVG generators and visual assets.

BGJar

SVG background generator.

SVG Backgrounds

Ready-made SVG backgrounds.

Mockups & Presentation

Device frames and polished product visuals.

Shots

Beautiful product mockups.

Screely

Turn screenshots into polished visuals.

Mockuuups Studio

Device mockups.

Rotato

3D device mockups.

Cleanmock

Simple product mockups.

UX & Accessibility

Research, principles, and auditing tools.

Laws of UX

UX principles explained simply.

Nielsen Norman Group

Deep UX research.

WebAIM

Accessibility resources.

WAVE

Accessibility checker.

PageSpeed Insights

Performance and UX auditing.

Design Systems & Guidelines

Reference systems from teams that ship at scale.

Apple Human Interface Guidelines

Apple's platform design guidance.

Material Design

Google's design system.

Atlassian Design System

Atlassian's product design language.

Shopify Polaris

Shopify's admin design system.

Spectrum

Adobe's design system.

Tiny Tools That Save Hours

Small utilities for compression, favicons, and browser checks.

TinyPNG

Compress images.

Squoosh

Advanced image compression.

Optimise SVGs.

Remove backgrounds.

Generate favicons.

Test responsive layouts.

Can I Use

Browser compatibility.