Give every item in this list the same fields
Decide the fields first. A blank that means unknown must not look like zero.
READ THE GUIDE ↗A WORKSHOP YOU CAN OPEN IN YOUR BROWSER
A small studio.
A bright idea.
Simple tools for making repeatable patterns. Explore color, spacing, and rhythm, then take a useful result into your own work.
Open Pattern Studio ↗THE READING LIST
Ideas you can put to work.
Give every item in this list the same fields
Decide the fields first. A blank that means unknown must not look like zero.
READ THE GUIDE ↗Give every listed title the same fields
A public list of seven games is a pattern. Decide the fields before you design the cards.
READ THE GUIDE ↗Show status without relying on color
Build a status legend that pairs each color with a word and a distinct shape, then check visible text and programmatic labels as separate jobs.
READ THE GUIDE ↗Check contrast before the color ships
Measure the text color against the color behind it, record the ratio, and keep a failing pair out of the handoff.
READ THE GUIDE ↗Measure repeat spacing at responsive widths
A controlled Chrome study records how four CSS repeat intervals fit inside the same responsive dot-pattern field.
READ THE GUIDE ↗Hand off a pattern with its plain alternative
Package a decorative CSS pattern with an integration record, contrast checks, forced-colors behavior, and a reusable plain alternative.
READ THE GUIDE ↗Give a pattern room to repeat
Use spacing, scale, and a few deliberate comparisons to turn a repeated shape into a useful background.
READ THE GUIDE ↗Choose a background that leaves room to read
Keep decoration useful by testing it with real text, checking contrast, and giving long passages a calm surface.
READ THE GUIDE ↗FROM READING TO DOING
Pattern Studio
Explore repeatable two-color patterns with scale controls and downloadable CSS and PNG output.
Go to the workbench ↗