🎨 Design · for makers, learners and players

Everything design, in one place

Make a shape in the studio, browse a library of 100,000 expressive icons, read the design articles, look up a term, take the 987-question design quiz, or play one of 11 colour and type games. One studio for the whole craft.

JumpMakeLearnPlay
30+Tools
100k+Shapes
28Games
987Questions
30+Articles

The finest shapes

6★ multicolor, straight from the Icon Foundry

Every shape here earned a perfect six-star rating — hand-picked as the best of the Foundry’s multicolor set. A living gallery of what the tools can make.

Loading the six-star wall…
Explore the full Foundry →

Shapes that mean a word

a living wall — tap any to explore
Shape of the day

A shape a day

Every one of 100,000 expressive shapes means a word — courage, balance, growth — drawn dual-tone and animated. A new one greets you each day. Read it before you read the name.

Open the full library of 100,000 →

Rate the shapes

your taste decides which shape wins

Give a shape one to five stars. When several shapes mean the same word, the one you rate highest wins its place on the wall above — your eye, shaping the library.

Loading a shape…
Tap a star to rate it
0 shapes rated

Designer SVGs

A library of 800 designer SVGs — generated, then refined by hand into one clean, gradient-rich style. Instruments, vessels, plants, tools — searchable by feeling, ready to drop into any layout.

See all 800 designer SVGs →

What are you here for?

pick a path — it's all one page

Make · Instant

free makers — no sign-in, no AI

Learn — a path through design

five world-class series, in order

Each series is a full course — long, careful pieces with worked examples, interactive labs, a glossary and a quiz. Read a whole series, or drop into any part.

How Things Work — Usability

6 modules

When a design confuses you, trips you, or lets you fail — it’s the design’s fault, not yours. Six felt modules that prove it.

Train Your Eye — interactive labs

4 labs

You can’t read about design taste — you feel it in your hands. Four small labs: squint, kern, build, and see why a masterpiece works. No lectures, no multiple choice.

All four labs →
All articles & the next 10 series →

The magic inside

live · try it

Every article carries hands-on labs. Here are three you can play with right now — an illusion, a calculator, a playground — pulled straight from the lessons.

Where design takes you

design careers

Design isn't one job — it's a fan of paths, from products and brands to spaces, cities and data. A few places the craft can lead:

Explore all design careers →

Play & practice

a quiz, a poll, and 28 games
⚡ Know your design?
Five questions, drawn live from 987 across 50 themes

Colour, type, layout, components, responsive and icons — real questions researched from the top sources, each with a clear answer and kind feedback. Take five, then take five more.

📊 Your take today
Which is hardest to get right?

Cast a vote and see where everyone lands.

A shape game, right here

Which do you like?

tap a shape — vote across the libraries

Two shapes, from different corners of the studio — a dual-tone expressive shape, a designer SVG, a cinematic scene. Pick the one you like more. It tallies, then brings the next pair.

vs
Tap the one you like more

Colour & type games

11 to train your eye
Colour
Color Engine

Build palettes and feel how colours relate — warm and cool, light and dark. The sandbox for understanding harmony by moving the sliders yourself.

Ready▶ Play
Colour
Color Harmony

Spot the colour that breaks the harmony, round after round. Trains the eye to feel when a palette sits right and when one note is off.

Ready▶ Play
Colour
Contrast Matrix

See at a glance which colour pairs are readable and which fail. A fast way to build an instinct for accessible text on any background.

Ready▶ Play
Colour
Know the Colors

Name the colour, learn its hue and value. A simple drill that quietly builds the vocabulary every designer needs to talk about colour precisely.

Ready▶ Play
Colour
Color Picker

Match a target colour by eye, then check how close you got. Sharpens your sense of hue, saturation and lightness one guess at a time.

Ready▶ Play
Colour
Color Grid

Arrange a grid of colours into a smooth gradient. A calm puzzle that teaches how hue and brightness flow into one another.

Ready▶ Play
Colour
Lipstick Harmony

Match a lip colour to a look and learn what flatters what. Colour theory made playful, with real skin-tone and shade pairings.

Ready▶ Play
Tool-game
CSS Filter Playground

Stack blur, brightness, contrast and hue filters and watch the image change live. Learn what each CSS filter really does by feel, then copy the code.

Ready▶ Play
Layout
Align Shapes

Nudge shapes onto a clean grid and feel why alignment makes a layout look calm. The fastest lesson in why edges should line up.

Ready▶ Play
Type
Typography Playground

Try fonts, sizes, leading and tracking on real text and watch readability change. The hands-on way to feel what setting type well actually means.

Ready▶ Play
Letterform
Make Your Signature

Design your own signature and learn the rhythm of handwriting and flourish. A playful entry into letterforms, weight and personal style.

Ready▶ Play

Shape games — the engine

17 ways to read shapes

Tools

writing & utility

Make · AI

LLM-powered makers — pass or request access

These makers call an AI model to generate for you, so they sit behind a pass while we finish pricing. Have the passphrase? Unlock below. New here? Request access and we’ll send it over.

Unlock the AI makers

Enter the shared passphrase — or request access.

Browse & rate
Expressive Explorer

The whole library of 100,000 dual-tone shapes, searchable by meaning. Preview any shape, rate it, and find the one that truly says a word. This is home base for every expressive icon.

Ready nowOpen →
Generate new
Icon Forge

Forge a brand-new dual-tone shape from a short prompt of eight to twelve words. The foundry where missing shapes are made, rated, and promoted into the live library.

Ready nowOpen →
Generate
SVG from Concept

Describe an idea in plain words and get a clean vector shape back. Best when you know the meaning you want but cannot find it in the library.

Ready nowOpen
Convert
SVG from Image

Turn a photo or a rough sketch into a tidy, scalable vector. Great for tracing a logo idea or cleaning up a hand drawing into crisp lines.

Ready nowOpen
Style
Watercolor Generator

Turn flat shapes into soft, painterly watercolour art. Adds warmth and texture when a clean icon feels too cold for the brand.

Ready nowOpen
Style
Sticker Generator

Make playful sticker-style icons with clean outlines and a friendly border. Perfect for chat, kids' content, or anywhere a shape needs to pop.

Ready nowOpen
Chat · animated
Sticker Studio

Answer three quick prompts — a character, a feeling, a style — and the studio draws a bold, looping chat sticker as a single animated SVG. Quality tiers, forty-plus motions, speed and part-level life, plus fixed captions. Ready to drop into any conversation.

Ready nowOpen →
Conversational
Icon Chat Builder

Build an icon by simply chatting your way to it. Describe, react, refine — a conversational path to a finished shape with no menus to learn.

Ready nowOpen
All generators
SVG Generator Home

The front door to every SVG generator in one place. Start here if you are not sure which maker fits the shape you have in mind.

Ready nowOpen

Design questions, answered

tap to open
What is visual hierarchy in design?FoundationsA1

Visual hierarchy is the order in which the eye moves across a design. Designers create it with size, weight, colour, contrast and position, so the most important thing is seen first, the next thing second, and so on. Without it, everything competes for attention and the viewer feels lost.

What makes a good colour palette?ColourA2
  • One dominant colour that sets the mood.
  • One or two supporting colours that sit quietly beside it.
  • A single accent for buttons and key actions.
  • Enough contrast that text stays easy to read.
  • Consistency, so the product feels like one design.
Responsive vs adaptive design — what is the difference?ResponsiveA4
ResponsiveAdaptive
One fluid layout that bends to any widthA few fixed layouts for set breakpoints
More flexible across unknown devicesTighter control on known devices
Built with flexible grids and media queriesBuilt by detecting the screen and choosing
How do I pair two fonts?TypographyA3
  1. Use one or two families at most.
  2. Make them clearly different — a serif with a sans.
  3. Reach for weights before adding a third typeface.
  4. Check they share a mood, even while they contrast.
What is the 8-point grid?LayoutA1

The 8-point grid spaces everything in multiples of eight pixels — padding, margins and gaps. Because separate elements and screens snap to the same rhythm, uncoordinated work lines up by default and the whole interface reads as tidy and intentional.

Where do the expressive shapes come from?ShapesA1

Every shape lives in the library, browsable in the Expressive Explorer. When one does not exist yet, it is made in the Icon Forge — never drawn by hand. Each is a rated, dual-tone shape that means a word, ready to drop into a design.

What is a design system?SystemsA1

A design system is a shared library of reusable components, colour and spacing tokens, and the rules for using them. It lets many people build a product that still looks and behaves like one thing — and it makes change faster, because you fix it once and it updates everywhere.

Why are some tools locked?StudioA1

A few generators — the Forge, Explorer, Watercolour, Sticker and Chat Builder — are password-gated because they create and write to the live shape library. They are marked with a lock. Everything else is open to use right away.