L
🎨 Expressive motion design · learn it, play it, build with it

Design that means something — and moves

Small, living design pieces — each one carries a word and animates in a few kilobytes. Learn design deeply, play the games, look up any term, and rebuild how a web page feels. One studio for the whole craft.

JumpMakeLearnPlay
30+Tools
100k+Living designs
28Games
987Questions
30+Articles
live

Every piece animates like this — a few kilobytes each.

The finest designs

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 →

Designs 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.

Rate the designs

your taste decides which one 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.

Browse all 53 design articles — every series →

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.

Find the shape that says a word
Expressive Explorer

Search a library of 100,000 two-colour shapes by meaning. Preview, rate, and find the one that truly says your word. Home base for every icon.

Ready nowOpen →
Make a shape that doesn’t exist yet
Icon Forge

Type eight to twelve words and get a brand-new two-colour shape. Where a missing shape gets made, rated, and added to the library.

Ready nowOpen →
Turn an idea into a shape
SVG from Concept

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

Ready nowOpen
Turn a photo into a vector
SVG from Image

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

Ready nowOpen
Turn a word into a painted icon
Watercolor Generator

Type one word — ostrich, coffee cup, freedom — and get a soft watercolour icon back. It tells you which model the subject needs before you spend, and caps its own daily bill.

Ready nowOpen
Make a playful sticker
Sticker Generator

Make bright sticker-style icons with clean outlines and a friendly border. Perfect for chat, kids’ pages, or anywhere a shape should pop.

Ready nowOpen
Make a chat sticker
Sticker Studio

Answer three easy questions — a character, a feeling, a look — and get a fun animated sticker to drop into any chat.

Ready nowOpen →
Chat your way to an icon
Icon Chat Builder

Build an icon just by chatting. Describe it, react, refine — a simple conversation to a finished shape, with no menus to learn.

Ready nowOpen
Start here to make a shape
SVG Generator Home

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

Ready nowOpen

What are you designing today?

A brief that's vague, a layout that won't sit right, feedback you need to argue back on. Find the job you're on and take a prompt written for it.

Find what you're designing →

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.

Explore other hubs

one LLOS, many doorways