06 / PETAL FAMILY DESIGN KIT
IN USE & EVOLVING
We accidentally started a design system.
It started with a van makeover. Then Petal got a personality. Then came websites, apps and rather a lot of design experiments. We tried other colours. We really did. Somehow, we kept coming back to hers.
Charlotte’s Locks
Pea Flower Tea
Brassica
Tomatillo
Warm paper
“I told you the orange was the right choice.”
LONDON · YEARS EARLIER
Orange.
A basement studio. Some clients.
Several hours.
Petal, before the makeover. Apparently this was only the beginning.
01 / THE ORIGIN STORY
I once spent several hours talking about orange.
I remember sitting in a design studio in a basement in London, with clients, discussing the colour orange.
For hours.
At the time, this was a perfectly legitimate use of everyone’s working day.
Years later, I’m travelling around Europe in a van I converted myself. I’ve repainted her interior, given her a personality, built her a website and somehow started making apps.
We tried different colours. Different layouts. Different ways of making everything feel like it belonged together. And somehow, we kept coming back to Petal’s palette.
Including orange. Of course.
After all these years, I’m still having lengthy conversations about orange. Only now, they’re with an AI and a cartoon van.
02 / HOW IT UNFOLDED
From paint to pixels. Via a few detours.
01 / THE MAKEOVER
It started with paint.
Charlotte’s Locks, Pea Flower Tea, Brassica and Pointing. A few decisions. A few revisions. A van that felt more like home. Project complete. Obviously not.
02 / THE PERSONALITY
Then the van spoke.
Eyes, eyebrows, expressions and opinions. The website needed a visual identity. Her colours seemed like a reasonable place to start. So far, still explainable.
03 / MORE PROJECTS
We tried other things.
Petalander. ThomasOS. CAPABLE. Different tools, different requirements. We tried other directions, but kept reaching for the same colours again.
04 / THE PATTERN
This looked familiar.
The colours kept returning. So did the type, cards, labels and buttons. Not identical projects. Related ones. A design system was beginning to emerge.
03 / THE INGREDIENTS
The shared foundation.
The colours we kept coming back to.
Charlotte’s Locks#D05E3E
Pea Flower Tea#436BA1
Brassica#8D7E91
Tomatillo#6F9D62
Warm paper#F6F1E8
Our screen palette, inspired by the van—not exact digital matches for the paint.
Two typefaces. Enough, Thomas.
Poppins
Headlines and display text.
Manrope
Body text, buttons and interfaces.
A few familiar pieces.
Thomas v Petal
IN USE & EVOLVING
PRIVATE TESTING
Labels, cards, buttons and status treatments. The family resemblance is useful. The cartoon van is not compulsory.
In use, not set in stone. The visual language already connects the projects. I’m documenting the reusable pieces and making their behaviour more consistent—not claiming one finished component library powers everything.
04 / IN USE
One family. Four very different personalities.
Shared foundations. Different jobs. Nobody needs the same layout just to prove they are related.
Thomas v Petal
Editorial & playful.
The stories, real photographs and the occasional interruption.
Petalander
Practical & navigational.
The same colours, with a more practical job to do.
ThomasOS
Organised & focused.
A calmer home for ideas, priorities and experiments.
Project CAPABLE
Athletic & functional.
A training interface that needs to make sense between sets.
The same foundations also appear here on thomaswouters.me. Thomas. Inexplicably. remains its own creative project: related to the person, not governed by the kit.
“So, after all those years, we’re still talking about orange?”
WHAT I’M LEARNING
Consistency is useful. Being right about it is apparently unbearable.
The projects don’t all look alike, and they shouldn’t. But they share enough to feel like a family. What started as a few paint choices is becoming something I can keep using, adapting and improving.
Nobody formally appointed Petal creative director. She’s behaving as though we did.