Style
Geometric primary
Circles, squares and triangles in red, yellow and blue on warm off-white, held together by heavy black rules, with type set like a poster.
See it live
Example: front page of a small maker's shop for modular wooden building toys for Plinthwork Toys, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.
Modular wooden building toys
Round. Square. Point. Build.
Plinthwork Toys makes three kinds of wooden piece, cut on one grid and painted in three colours. Every piece fits every other, so a set bought this year still fits the set bought in five.
Three pieces, endless buildings
Rounds
Wheels, domes and half-moons. Every round piece has the same peg hole, so a wheel can be a window tomorrow.
Blocks
Cubes and long bars cut to one five-centimetre grid. Stack them, bridge them, line them up as a wall.
Points
Roofs, ramps and arrows. Lay two together and they make a square again, which children find out on their own.
One grid. Five centimetres. Every piece, every set.
The sets
First Plinth
32 pieces · ages 2 and up
Big rounds and blocks for small hands, in a lidded crate that becomes the first building.
£38
Town Plinth
84 pieces · ages 4 and up
Enough blocks and points for a street of houses, a tower and the bridge between them.
£72
Workshop Plinth
160 pieces · ages 6 and up
Every shape we make, plus pegs and axles, for machines that roll, tip and turn.
£124
From the workshop
- 01
Cut from one board
Each set starts as beech boards from managed woods, cut on a single grid so every piece agrees with every other.
- 02
Sanded by hand
Edges are eased until they feel like pebbles. We check each piece with a thumb, not a machine.
- 03
Painted in three
Red, yellow and blue, in water-based paint safe for teeth. The rest stays bare wood.
Copy the idea
Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.
The recipe
When to use it and the principles behind it. The palette, type, spacing and the do's and don'ts are drawn below; the brief you copy carries all ten sections.
Use it when
- Toy, craft and making brands that want to feel bold and well built
- Event posters, shop fronts and launch pages with a few strong messages
- Brands that want order and play at the same time
Avoid it when
- Pages are mostly long reading text
- The brand needs softness, luxury or quiet restraint
- Content changes too often to compose each screen by hand
Principles
- The shapes are the composition: circles, squares and triangles build each screen
- Only three colours plus black: red, yellow and blue, flat and never blended
- Heavy black rules, three to six pixels, frame blocks and divide the page
- Headings are large, light and often uppercase, set like a poster
- Square corners everywhere; roundness comes only from whole circles
- Yellow is for shapes only, never behind text or as text
Imagery and motion
- Imagery: No photos: flat circles, squares and triangles in the three primaries, built in code.
- Motion: None, or a single shape sliding into place; nothing bounces or fades for long.
Palette
- Workshop paperbackground
#f4f1e8 - Clean boardsurface
#ffffff - Rule blacktext
#111111 - Pencil greymuted
#4a4a4a - Primary redaccent
#c62a1f - Primary blueaccent-2
#1d4fa3 - Heavy ruleborder
#111111
Text on background: 16.72:1 — passes AA
Type
The quick brown fox jumps over the lazy dog
Set large, often uppercase, with open letter-spacing on short labels
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Plain and sturdy; medium for prices and labels
- 104pxThe quick brown fox jumps over the lazy dog
- 72pxThe quick brown fox jumps over the lazy dog
- 44pxThe quick brown fox jumps over the lazy dog
- 28pxThe quick brown fox jumps over the lazy dog
- 20pxThe quick brown fox jumps over the lazy dog
- 16pxThe quick brown fox jumps over the lazy dog
- 13pxThe quick brown fox jumps over the lazy dog
Spacing and shape
- 8px
- 16px
- 24px
- 40px
- 64px
- 96px
Blocks butt up against each other along shared black rules; space opens up between sections.
- 0px
- Borders
- Heavy black rules, 3 to 6 px, around blocks and between sections
- Shadows
- None
Do and don't
Do
- Build each section from a few large, flat shapes
- Frame blocks with heavy black rules
- Keep text on off-white, white, black, red or blue grounds
- Let one heading per screen fill the width
Don't
- No gradients, shadows or rounded corners
- No yellow behind or as text
- No more than three colours besides black and white
- No small decorative icons scattered around
Similar styles
The styles closest to this one in mood, density, era, warmth and accent colour.
- Swiss gridA strict grid, big sans-serif type and asymmetric layout do all the work; nothing is there for decoration.See the style
- Classic corporateTrust through order: a calm blue, a clear hierarchy, a conventional layout and nothing that surprises.See the style
- Editorial magazineReads like a well-set magazine: confident serif headlines, generous columns, pull quotes and fine rules.See the style