Open Foundry: curated open-source fonts
A free font collection with visual specimens, designer credits, licence information and links to the original projects.
Resources
Discover useful things. Build your library. Share your finds.
All resources 101
SVGOMG: visual SVG optimization
A free browser interface for SVGO, with SVG-code cleanup, smaller files, detailed optimization controls and result comparison.
Squoosh: browser-based image compression
A free tool for compressing, resizing and converting images, with visual quality comparison and local file processing.
Perfect Paragraph — a typography balance game
Adjust font size, line height and line width across ten exercises using Matej Latin’s typography triangle teaching model.
Pixactly — a pixel-dimension estimation game
Draw a rectangle to match a target width and height by eye, then review your accuracy across five rounds.
The Boolean Game — vector shape puzzles
A free browser game for practicing boolean operations: combine basic shapes to recreate target silhouettes in puzzles of increasing difficulty.
Color — a color-matching practice game
A timed browser game for matching target colors and practicing hue, saturation, complementary, analogous, triadic and tetradic color relationships.
Kern Type — a kerning practice game
A free browser game for developing an eye for letter spacing: reposition letters, receive a score and compare your result with a reference solution.
Can't Unsee — an eye-training game for interface details
Compare similar interfaces, choose the stronger option, and practice noticing spacing, typography, alignment and icon details.
Flexbox Froggy: learn CSS Flexbox through play
A free browser game with 24 CSS puzzles. Guide frogs onto their lily pads while learning flex alignment, item order, direction and wrapping.
The Bézier Game — pen-tool and curve practice
A free browser game for tracing outlines with anchor points and control handles while using as few nodes as possible.
Khroma — personalized color combinations
A color-discovery tool that learns your preferences and presents combinations as typography, gradients, palettes, and images.
Site of Sites: curated web design inspiration
A free website gallery with industry, type, style and platform filters, themed collections and links to live projects.
Logoinspo: logo, symbol and wordmark inspiration
A curated gallery of real and conceptual logos, with style, industry and color filters and links to their creators.
Awwwards Free Fonts — curated typefaces for designers
A visual font collection curated by Awwwards, with specimens, tags and links to creators. Free-use terms vary by typeface.
Awwwards Portfolio: portfolio website examples
A large Awwwards collection of portfolio websites for exploring layout, interaction and creative project presentation.
Logggos: logo gallery for brand research
A curated logo gallery organized by industry, typography, color and shape for visual reference research.
Neumorphism.io: CSS shadow generator for Soft UI
A free generator for neumorphic surfaces, with color, shape and shadow controls and copyable CSS.
zoxilsi studio — mesh gradients and animated backgrounds
A mesh-gradient editor with Bézier controls, presets, effects and exports for images, video and code.
Glass3D — glass-effect CSS generator
Tune blur, color and texture for glass-style interface elements, then copy the generated CSS.
INKDRUM: risograph print simulator
A browser tool for risograph effects with ink layers, halftones, paper textures and colour-separation exports.
Symbl — test a logo across real-world contexts
Explore logo scaling, blur, contrasting variants and applications across icons, business cards and mockups.
Gradient Lab by Backgrounds Supply — gradient background generator
A free browser-based gradient background editor with shader modes, palette controls, and image and video export.
generative.graphics — geometric pattern generator
Create moving geometric compositions with grid, noise, shape and color controls, plus PNG and WebM export.