Playful mood board

A playful mood board for web design: 12 references from live websites, one per site, picked from 280 playful sections in the save.design library.

Start a mood board All mood boards

What makes a design playful

Bright colour, bouncy motion, stickers, characters and interactions that reward poking around. The good ones stay usable: the play sits on top of a clear structure.

Every tile opens the section it came from. Use the board as a starting point: keep the four or five references that fit your brief, and write next to each what you're taking from it.

Sites on this board

Each one is a live website, credited to its maker.

Type and stack

What the sites on this board are set in and built with, read from their live pages.

Fonts

Built with

More mood boards

Brutalist Minimalist Dark Editorial Luxury Retro 3D Monochrome Organic and natural Bold typography Gradient Swiss and grid Neon Pixel and 8-bit Glass and frosted Illustrated and hand-drawn Collage Warm tones Futuristic

New to mood boards? Read how to make a mood board, with a template.

.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:

:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*

*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:

:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..

.:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--.

..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--

-..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.-

--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.

.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+

+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.

Make a board like this
from your own references.

Drop saved websites, sections and screen recordings onto an infinite canvas, group them into frames, and share one link.

Create a canvas