Open Becoming00
Case 02 / a life in twelve waysFounder-built · in development · design system v3, October 2026

Open Becoming

Become more of who you are.

Open Becoming homepage, version seventeen. The headline Become more of who you are sits beside a Life Clock with photographs of real moments pinned into its slices.
The homepage, v17 / paper, ink, marigold

Bright and paper-warm on purpose. The Life Clock is live, drawn by the engine, with photographs pinned into its slices as moments. One hollow dot rides the edge: still open.

The homepage, v17 / paper, ink, marigold

Bright and paper-warm on purpose. The Life Clock is live, drawn by the engine, with photographs pinned into its slices as moments. One hollow dot rides the edge: still open.

You talk to it, jot a note, or add a photo. Open Becoming places it in one of twelve ways of living, helps you practise what you care about, and shows you how far you've come. I'm building the product, the brand, and the design system. Nothing here is a validated outcome yet, and every person shown is a labelled, fictional example.

Jobmap a life, not a score
Ownershipfounder · product · design system
Boundaryasking for help counts
Deliveryweb prototypes · design system · film
Statusin developmentno waitlist, no outcome claims · October 2026
01

The consequential problem

A calendar says where the time went

Nothing in a person's records says what they chose, or what they're becoming.

Trackers score you. Habit apps count streaks. Self-help sells independence. None of them hold the shape of an actual life: a swim before work, a song finished for the first time, a hard conversation you had instead of avoided, a plant you kept alive.

I wanted a place that keeps those moments in a person's own words, connects them to the ways of living they touch, and helps with the next small step. Without a score, and without pretending growth means needing people less.

  • Twelve fixed ways: Body, Emotion, Attention, Taste, Judgment, Agency, Relationships, Care, Play, Learning, Meaning, Place.
  • Inside each way, the person names their own pursuits in their own words.
  • Health goes to a clinician. Body goals get no appearance scores. Money gets no advice.
02

What I saw

One idea at three scales

A ring still being drawn. The dot is where the pen is now.

The Life Clock: the centre is when you started, the edge is now, and the angle is the way. Dots are moments you kept. A hollow dot is still open. Photos appear as grain, meaning time passed, not meaning. A life ring never closes; only tasks do.

The logo is the same ring: the o of “open” with its gap at one-thirty and a marigold dot where the pen rests. Nib, the companion, is the pen tip. One drawing, at the scale of a mark, a map, and a character.

03

The decision that changed the system

The help ladder had the values backwards

Progress can mean asking sooner, or asking the right person.

An early draft framed becoming more as needing less help. That is my own failure mode, not a value worth shipping. The practice loop now runs show me, help me try, hint, my call, ask someone, and asking someone is a step up the ladder, not a fall off it.

Nib labels every reply as reflecting, pushing forward, pushing back, connecting you to a person, or staying quiet. The stance is always the person's choice. A suggestion can be argued with: it gets struck through in red, and nothing is saved as yours until you accept the wording.

01Notice

Say what happened. Voice, a note, or a photo. No forms.

02Name

It lands in one of twelve ways, in your words. You can correct it.

03Practise

One small rep with the right help, including asking someone.

04Keep

What's true goes on your map. The ring stays open.

04

System anatomy / rationale / surfaces

A design system before a product

The system is the mark, the clock, and the companion, built from one construction.

Version three of the system is the single source for the site, the product screens, and the film. Everything is a ring or built from one; if it isn't, it gets cut. The linter enforces the rest.

Decision anatomy / select a knot

Pressure did not decorate the architecture. It determined it.

Before / tension

Pencil-and-ink read as something anyone would do

The knot / decision

One construction, the ring with a gap, at three scales

After / consequence

A brand you can draw in one stroke is ownable. A mood board is not.

ink.js · perfect-freehand · SVG
01 / inkOne stroke engine for everything drawn

The open ring, the twelve way shapes (built from circles by union and overlap, at most one straight edge), the glyph family with one ink, one weight, and one gap, and the Life Clock. DOM-free.

ink.js · perfect-freehand · SVG
02 / pigmentA paint box, not a rainbow

Twelve real pigments computed in OKLCH, each with a deep, wash, and tint role, contrast-checked and distinctness-scored. Marigold belongs to the brand alone.

pigments.json · tokens.css
03 / NibThe companion as the pen tip

Springs and a small timeline give Nib its states: enter, rest, listen, think, suggest, push back, connect, quiet, exit, and a morph into a way. The only living thing on the page; one ambient motion at a time.

nib.js · light-DOM custom elements
04 / photographyThe moment of becoming

Documentary, chest height, real light, an honest detail, no text in frame. Photos live inside the system's shapes as moments on someone's clock. Generated casts are labelled fictional, never presented as participants.

cast briefs · humanity test (8 of 10)
Architecture rationale / pressure → choice → consequence
PressureDecisionWhy it mattered
Pencil-and-ink read as something anyone would doOne construction, the ring with a gap, at three scales

A brand you can draw in one stroke is ownable. A mood board is not.

The first direction board was warped, cheesy, and sparseClean rectangular photos, one strict twelve-column grid, text never over images

Confidence comes from restraint and real light, not blob masks and watercolour filters.

The help ladder implied independence equals progressMake asking someone a rung, and give Nib a connecting stance

The product's values have to match the lesson that produced it.

Surface atlas

The system becomes tangible through the places people encounter and use it.

01 / my map

Life Clock

Years as rings, ways as slices, moments as dots. Open a way and it unfolds into your pursuits.

02 / insights

River

Each way as a watercolour stream over time, with now at the right edge.

03 / practise

Practice session

A situation, a small aim, your attempt before help, feedback you can inspect, a later check in a new setting.

04 / talk

Voice

Every reply carries a stance. Quiet, curious, or challenging is always your choice.

Drawing

SVG · perfect-freehand · canvas

Type

Bricolage Grotesque · Newsreader · Atkinson Hyperlegible Next · IBM Plex Mono

Production

static HTML pages · headless Chrome renders · Codex · Claude · Midjourney

Embedded surfaces / real product evidence

These are working MCP and operator surfaces, not concept renders.

Open Becoming workspace showing the Life Clock with a selected moment: Rewrote a suggestion, with the person's own words and the way chips beside it
My map / Clock

A selected moment shows its source, what it came from, and what it led to. Photos are traces, not scores. Jo is a fictional example.

My map / Clock

A selected moment shows its source, what it came from, and what it led to. Photos are traces, not scores. Jo is a fictional example.

Open Becoming logo board: the wordmark with the o as an open ring and marigold dot, on paper, ink, and marigold, with app icon and favicon sizes
The mark / generated from ink.js

Never edited by hand. The logo files are regenerated from the stroke engine and a shaped wordmark outline, so the mark and the clock can't drift apart.

The mark / generated from ink.js

Never edited by hand. The logo files are regenerated from the stroke engine and a shaped wordmark outline, so the mark and the clock can't drift apart.

05

Authentic proof

How it works: one loop drawn as a line with five numbered loops, Notice, Name, Practise, Reflect, Keep, each time round ending further out
How it works / one loop, drawn

From a first deadlift to a first solo, every practice runs the same five steps. The loop never closes, so there's always a next time round.

How it works / one loop, drawn

From a first deadlift to a first solo, every practice runs the same five steps. The loop never closes, so there's always a next time round.

A person mid-lift in a plain gym, photographed at chest height in ordinary light
Photography direction / the moment of becoming

The cast brief: swim, shot, IV, sing, bike, show, tree, run. Documentary light, an honest detail, no text in frame. This cast is generated and labelled fictional wherever it appears.

Photography direction / the moment of becoming

The cast brief: swim, shot, IV, sing, bike, show, tree, run. Documentary light, an honest detail, no text in frame. This cast is generated and labelled fictional wherever it appears.

06

What changed in my operating model

What the product taught me

The values in the product had to match the lesson that produced it.

Over-self-reliance is a failure mode I know from the inside. When the copy drifted toward glorifying it, the fix wasn't a word change. It was a rung on the ladder, a stance for the companion, and a rule in the system: the human moment wins, and asking for help counts.

The next honest test is small: can one person understand and correct a connection on their map without being told how? Until that passes, Open Becoming stays in development, and this page makes no claim it hasn't earned.

  • Draw the brand from the product's one idea, not from a mood.
  • Repetition only as chrome or as progression; the strike appears once a view.
  • Label fictional people as fictional, every time they appear.