Solutions · Brand Identity
LifeOS brand identity
If the contrast fails, it won’t let us commit.A color that fails the check never makes it into a commit.
The brief was a mark meant to last a lifetime. We started with Japanese seals. A vermilion seal pressed on paper means someone has looked at this, checked it and taken responsibility for it.
This project sits in our Brand Identity line. What would the same method look like on your project?
TypeDesign system · Brand identityYear2026RoleStrategy · Identity · Design system · Engineering guardrailsScope13 domains · 46-chapter brand guidelines · 1,102 icons · 8 validatorsStatusIn use
The mark pressed into cotton paper. In the end, the whole system comes down to a seal.
01
/06
THE SITUATION
Where things stood
LifeOS is a personal operating system. It runs thirteen areas of one person’s life: money, health, parenting, Japanese, housing and more. It won’t get a redesign every year or two. It’s meant to stay with one person into old age. The client’s brief was a single sentence: the mark has to last thirty years.
So we went and looked at seals. In Japan you run into a lot of them in a day: the square seal at the ward office counter, the goshuin stamp at a shrine, the personal seal on a delivery slip. They all look different, but they do the same job. They leave a mark on a document that says “this has been checked.” And the same seal gets pressed thousands of times, and it has to look the same every time.
That’s exactly what LifeOS is. So the outer frame of the mark comes from a seal’s rounded square, with an L inside.
We didn’t pick the vermilion by feel. Vermilion in the paint tin and vermilion stamped on paper are two different colors. The traditional Japanese color called shu-iro leans orange. The hue a seal actually leaves is registered in the JIS standard for seal ink as Munsell 7.5R 5/14, and the two are ΔE 22.4 apart. For print we specified PANTONE 7417 C rather than the deeper 173 C, for an equally practical reason: uncoated paper knocks the value down another step. So the paper has to be part of the color decision.
ConstraintsThe mark had to stay recognizable at 16 px, since it would show up in browser tabsThe system runs every day, so existing screens couldn’t stop and wait for the redesignThe client had no designers. Any rule that took a meeting to carry out didn’t countMore domains were coming. When a fourteenth appeared, the rules had to work on their own
02
/06
THE CALL
The call
Seals take different shapes everywhere, but one thing is the same: someone checks before the seal comes down.
Why we did it this way
The line in the bottom right is what each decision cost.
01Put the guidelines into code that says noSwatches, icon sources, font declarations and contrast are all automated checks. Anything that breaks a rule can’t get into version control. However good a document is, people are the ones following it, and people get tired.Cost: every rule has to be written in a form a program can judge. If it can’t be written as code, it isn’t a rule.02Let a checker judge icon qualityWe used to review icons by eye. Then one day we realized nobody can see a 0.25 difference in line weight. Once we switched to file-by-file comparison, a whole batch in the library failed on the spot. We’d drawn that batch ourselves.Cost: the day the checker went live, the first thing it stopped was us.03New background, new contrast mathThe neutrals were originally tuned for a dark interface. On light paper, all six failed as text color. The worst came in at 2.17 against a threshold of 4.5. Printed out, they looked perfectly fine. You only find out by doing the math.Cost: one palette turned into two sets of computed results, and every document has to say which background it’s for.04One alignment problem, three rounds to fixWhen the mark sits inside a heading, it has to line up with the Chinese characters. Round one aligned it to the baseline. Round two rebuilt the frame from the ratio in the guidelines. Both were sent back. In round three we measured the asset itself and found the ratio in the guidelines had been wrong all along, and that a frame rebuilt in CSS will only ever be an approximation. Being slightly off is worse than being way off. At 1.25px out, the eye doesn’t read it as a mark. It reads it as misaligned.Cost: we spent two rounds tweaking numbers before changing the approach in the third. From then on the mark is always embedded as the asset, never approximated in CSS.
Clear space is measured in stroke widths. Fixed numbers stop being accurate the moment the size changes. Proportions don’t.
The shape was derived, not drawn
Left: the shape is derived from a 12-unit grid. Right: three decisions unique to this mark. A 45° chamfer, a gap of 6 that never changes between the inner shape and the frame, and corner radii of R16 outside and R7 inside.
03
/06
THE ARTEFACTS
What the system looks like
Here’s the work first. Every piece below has a rule behind it.
Six seal states, and the color is the verdict
A seal only goes on a verified fact. So it also needs a way to say “no verdict yet” and “rejected,” and neither of those can share the vermilion used for “passed.”
StateColorMeaningReversible?DeliveredVermilionRan end to end and was delivered—PassedVermilionCleared every gate—PromotedVermilionMoved up one stage in the ledger—UndeliveredCrimsonRan to the end but wasn’t deliveredCan retryRejectedCrimsonRetired on record; the number is never reusedFinalPendingMistNo verdict yet—
Crimson has two tenants, and what separates them is whether it can be undone: undelivered can be retried, rejected is final. Pending is the only state without an outcome yet, so it gets mist instead of vermilion. That way you can tell from a meter away whether something has been decided, without reading a word.
What we handed over was rules, not image files
Four families, 27 swatches: four vermilions (logo, dark background, interactive, fill), six neutrals, four semantic colors and 13 traditional Japanese colors. Each one lists its computed contrast against paper and against ink, and the last column is a quota. Vermilion can’t take up more than 10% of any screen.
SwatchContrast on paper · WCAG · threshold 4.5RatioPAPER1.00WARN2.17OK2.63MIST3.01SHU4.20DANGER4.97INK15.66VOID17.16
Top: the whole character set. Bottom: the same slots on a different background, with type size and line height untouched.
Four slots, one image each, shown the way they really appear in the product. The family’s three regional versions have matching glyph widths, so switching languages doesn’t mean redoing the layout.
1,102 icons, one set of craft parameters
Each of the thirteen domains has its own resident agent, and the crest is its face. The handle comes from the job that domain does. When a fourteenth domain appears, its crest, traditional color and handle get decided together.
One frame, one primary shape, one secondary shape, one hue. When a fourteenth domain comes along, you just follow the four steps.
Facts and estimates never share a fill
The system exists to help someone decide, and most decisions get made looking at a chart. So charts get their own set of rules, the same as the mark.
How it’s drawnWhat countsFactInk · solid fill, solid line, solid dotAnything you can trace back to a row of input dataEstimateMist · 45° hatching · never solidCalculated from existing data, always with its source and calculation datePendingMist · outline only · gray “pending” sealAnything resting on a premise nobody has verified yet
What this rule really does is make it impossible to draw an estimate so it looks like a fact. When the two get mixed together and you can’t tell them apart, readers take the guesses as true.
Start with the question, then pick the chart
Chart types come from the question, not a menu. Nine families, one kind of question each.
A CompositionHow does this split up?100% stacked bar for five categories or fewer; treemap if there’s a hierarchyB ComparisonWhich is bigger?Horizontal bar ranking when names are long; dumbbell or slope chart for two points in timeC DistributionHow is it spread out?Histogram for large samples; beeswarm for fewer than 60D Time seriesHow does it change over time?Line or area for a single series; stacked area when the mix changesE FlowWhere did the money go?Waterfall for ins and outs; Sankey for many-to-manyF RelationshipAre these two related?Scatter for two metrics; bubble for three; correlation matrix for many-to-manyG RiskWhat’s the worst case?Underwater drawdown for history; Monte Carlo fan for simulationsH ProgressHow far from the goal?Bullet chart when there’s a target; domain scale to compare across domainsI AuditCan we trust these numbers?Seal ledger for single events; status matrix across many automations
So picking a chart doesn’t take a meeting. Once the question is set, so is the chart.
04
/06
THE WORK
How we did it
We ran this project the way we run client work: find a starting point that holds up culturally, then turn it, step by step, into rules you can measure.
How we approached it
01Start from a real object, not an adjectiveThe client wanted “trustworthy” and “durable.” Those are still just adjectives. We looked for something in the real world that already does that job, which turned out to be the seal, and worked out the shape from its physical properties.02Derive the form instead of picking itWe tried corner radii of 8, 16 and 24 and strokes of 6, 9 and 12, and shrank every combination to 16 px to see if it still read. The one we kept is the only combination that was still recognizable at 16 px.03Keep writing rules until the client can run them aloneThe client has no designers, so what we handed over couldn’t depend on someone remembering it. It had to be a set of checks that run by themselves. That’s where the next section comes from.
Step by step
PhaseWhat we didOutputDone when01 Field studyLooked at every seal we could physically get hold of: different shapes, exactly the same jobInspiration and a direction for the formThe starting point holds up02 DefineBoiled it down to a set of tokens and decided what each one is used forDesign tokens (CSS variables and JSON)There’s one source of truth03 GuardrailsWrote the rules as checkers that block, and hooked them into version controlEight automated validatorsViolations can’t get in04 MigrateMoved existing screens over in batches, using the red lights as the to-do listMigration log and exceptions ledgerOld debt is out in the open05 Write it upWrote the reasoning into the brand guidelines, with each rule pointing to a variable instead of a valueBrand guidelinesWhoever comes next can see why
Decision panel: the system drafts, a person decides
Each panel is in a different language. The “edit it myself” option is always there. The system can draft first, but a person makes the call.
Three display components, all registered in the brand guidelines. No off-the-shelf UI kit.
05
/06
THE SYSTEM
The real deliverable wasn’t a guidelines book
We wrote the guidelines too, but the main deliverable is the checks that run on their own every day.
People set the rules. Machines run them every day
People made every design decision. Color, type sizes, corner radii, whether a rule should exist at all: none of it went to a model. AI came in later, turning rules that were already settled into a program that stops a commit.
People01Set the rulesVermilion only means “look here” · Contrast never below 4.5 · Icon shapes always come from the engraved libraryJudgment. The model didn’t propose a single ruleAI02Turn them into codeTurn “never below 4.5” into a checker that reads rendered pixels, computes WCAG contrast and reports the file and lineTranslation. People supply the rule; the AI handles how it’s writtenMachine03Run them daily1,102 icons compared file by file · 77 screen routes × 2 widths · on every commitScale. No person can do this partPeople04Rule on the red lightsDoes the red one mean the screen needs fixing, or was the rule wrong to begin with?Judgment. Then back to step one
Nobody can go through 1,102 icons file by file. We didn’t catch the 0.25 difference in stroke width in the batch we drew ourselves. When it comes to discipline, people can set the rules. What they can’t do is apply them a thousand times a day without missing one. The machine gets those thousand times.
Left, the guidelines. Right, what it looks like when they block something
Both were handed over. The one on the right runs itself every day.
II Core AssetsColor System07ContrastAll text must measure at least 3.0:1 against the background it actually renders on. What counts is the rendered result, not the declared swatch.≥ 4.5 : 1PassWCAG AA for body text3.0 – 4.5HintBelow AA, but may be deliberate for large type and secondary info< 3.0 : 1BlockAfter rendering, the node has effectively vanished$ git commit -m “feat(P-008): sort order for today’s home page”› lifeos pre-commit · 4 checks · budget 3000msPASSpalette-var-reachability18 files41msPASSicon-purity1,102 icons260msPASSfont-declarations9 files12msPASSraw-hex-in-docs584 notes96ms› lifeos pre-push · 4 checks · budget 30000msFAILrendered-contrast77 routes21,480mssrc/web/src/app/v3/m/03-parent/page.tsx:214section.d > i “①”fg rgb(77,77,80) · bg rgb(20,20,23) · ratio 2.17:1threshold 4.5:1 · shortfall 2.332 nodes are invisible after render · commit refusedexit 1
The gate order was worked out, not guessed
Here’s how we ordered the three gates: the cheaper the check, the earlier it runs, because the later something gets stopped, the more it costs.
CHEAPEST FIRST · COSTLIEST LASTEDITEditingPRE-COMMITBefore commitAt commit timeAbout 1 secondAll four can be judged by reading files. No browser neededPalette var reachabilityIcon purityFont declarationsRaw hex in docsViolations never reach version controlPRE-PUSHBefore pushBefore it goes outAbout 25 secondsThese need a real render to judge, so they’re expensive. At the commit gate, people would start skipping them with --no-verifyRendered contrast2.17 < 4.5 — BLOCKEDSVG text distortionCSS tokensFull test suitePassing on your machine isn’t enough. The whole branch has to passDAILY SWEEPDaily sweepEvery day at 04:30About 2.5 minutesThe most expensive, and nobody’s waiting on it, so it runs by itself77 routes × 2 widthsLayout healthBaseline ratchetProblems surface even if nobody presses a buttonFIX & RERUN — BACK TO EDIT
The 25-second check in the second gate used to sit in the first. As the client put it, “any check that takes more than three seconds there will get skipped sooner or later.” So we moved it to before the push. The commit gate kept only the four checks that can be judged by reading files, about one second.
These three things run every day: rebuilding the index, comparing files one by one, and putting the status on the wall. They’re all programs, and each one returns an exit code when it’s done.
So nobody has to remember. When someone adds a fourteenth domain six months from now, it’ll hold them to the same standard. Us too.
06
/06
THE OUTCOME
Deliverables and results
One identity at four distances: in your hand, on the desk, at the desk and on the wall. Two of these are screen close-ups, and even blown up that far, not one swatch or type size changed.
What we delivered
Design tokensCSS variables and JSON, both generated from one source. Documents point to variables, never to color codesIcon library and purity checker1,102 icons on one set of craft parameters. Stroke width, endpoints and corners checked file by fileComputed contrast tableThe computed value for every swatch on paper and on ink. A color that fails can’t be used for textFont slots and self-hosted font pipelineFour slots, three languages, self-hosted woff2 subsets. Change a weight and you rerun it onceEight automated validatorsThey run at commit, at push and early every morning, so violations never reach version control. Another 18 checks were folded into the client’s existing integrity validatorBrand guidelinesThe text explains the reasons and the values point to variables, so the book and the build stay in step
ResultsIn use every day. All eight checkers run on every commit, and on average they stop us about once a week.Still working on itThe old screens aren’t fully migrated yet. The guardrails catch new violations, but the old ones still have to be fixed page by page.
Documents drift out of sync with reality over time. A program that throws errors doesn’t.
The identity on real objects
The domain scale on cotton paper, plus stickers, a tenugui, an embroidered patch, stationery and index tabs. Six items, five materials, and none of them needed the colors decided again.
Credits
Design & BuildMuzi StudioClientOur own project (not a commission)Year2026SolutionBrand Identity: strategy, identity, design system, engineering guardrailsDeliverablesDesign tokens · icon library and purity checker · computed contrast table · font slots and self-hosted font pipeline · eight automated validators · brand guidelines