← All work

DayTwo

DayTwo

Role

Product Designer (AI)

Client

ONOW Ascent

Year

2026

Tools

VS Code, Lovable, Claude Code

The app now ships on the new design system, and the development team builds against it without a designer in the loop.

What's DayTwo?

DayTwo is a finance tracking app for small cash-business owners. Shop owners and vendors record daily income and expenses, track debts they owe and debts owed to them, and get help from Bizzy, an AI agent that keeps an eye on their money and suggests what to do next.

The people using it are not the people design systems usually get built for. Many are on low-end Android phones and are offline for stretches of the day. Most users are using an app of this kind for the first time, with nobody sitting beside them to explain it.

What's DayTwo?

One Source of Truth

Two artifacts means two sources of truth, and they start drifting the week engineering begins building. On a small team shipping fast, that drift isn't a risk — it's a schedule.

So the source of truth became tokens, written once, in code. The docs site, the React Native components and the AI harness all read from them. The previews on the documentation site are the shipping components.

One Source of Truth

How It's Built

The design system is written in React Native. Every component runs on iOS and Android from the same code. There is no separate iOS version and no separate Android version to keep in sync.

Developers import a component and pass props. Spacing, colors, type sizes and states come from tokens inside the component, so they do not have to look up values or copy styles from another screen. Variants are props, not separate components.

Each documentation page shows the exact code for the component, so it can be copied straight into a screen.

How It's Built

One Color Per Screen

A first-time user scans for the brightest, most saturated thing on screen and assumes that's what to tap. No amount of clearer labeling changes that, so the color has to do the work.

Teal is spent on one thing per screen — the primary action, or the single element that should be noticed. Everything else stays neutral. Demoted, not hidden: still perfectly legible, just not competing for the eye.

It's a restriction on the system's own brand, and it's the rule most often broken by accident. Two primary colors mean no primary.

One Color Per Screen

A ฿3,000 Phone

The system writes its performance floor as a price, not a spec: a ฿3,000 phone. That's the device the people using DayTwo actually hold.

It turns into a budget. Only transform and opacity animate, because animating layout forces a re-layout every frame and stutters. Blur and shadow are capped at a couple per screen. Any list of user data needs an answer for 500 items, not an unbounded map in a scroll view.

Touch targets take Android's 48dp floor, not Apple's 44. Owners tap quickly between customers, one-handed, sometimes on a cracked screen. When a layout gets tight, the target wins and the content moves.

A ฿3,000 Phone

Old Screens, New Rules

The system had to earn its place against screens that already existed. Seven of them were rebuilt in public, each with what changed and why.

The cash-sale keypad had a red C that wiped the whole entry. Red is the system's colour for destructive and error states, so an ordinary correction was being punished. It became a neutral AC beside a delete that removes one digit.

The balance card showed two numbers at equal weight, with a tilde in front of the total. A tilde says the number might be wrong without saying why. Now one hero figure carries the card, today's change supports it, and the uncertainty is written out: estimated, counted yesterday.
Old Screens, New Rules

Seventeen Ways to Break

Empty, loading, offline, error, half-finished — the states a screen falls into when things aren't perfect. There are seventeen on the checklist, and a screen isn't done until its own are designed.

Some of them are not interface states at all. Duplicate entry: never record the same sale twice. Ambiguous cash or change: make the figure being recorded unmistakable. The user changes their mind. The user enters the wrong information. Those are money-correctness states, and they are the ones a tidy-up quietly removes.

A cleaner screen that drops an edge state isn't cleaner. It's broken exactly when it matters most — and it's the first thing a generative tool takes out, which is why the checklist exists before the AI does.
Seventeen Ways to Break

Built to Be Read by AI

The docs site and the components read the tokens. So does a third reader: a Claude Code plugin that ships with the system.

It installs three skills — create, review, simplify. Each one reads the generated tokens.json and USAGE.md at the moment it runs, not a copy written down earlier. Agents that can't take a plugin get the same rules as a pasted brief.

It's the same bet as the rest of the system. A prompt that describes the rules drifts the way a Figma file does. A skill that reads the source can't.

Built to Be Read by AI

Twenty Nine Components

Twenty-nine components, every one a real React Native export. The previews on the documentation site are the shipping components, so the code on each page is the code that runs.

Every page follows the same ten sections: live preview, purpose, anatomy, variants, code, when to use and when not to, the correct scenario, anti-patterns, edge cases, and the exact tokens it pulls from. The template is the governance. A component isn't documented until it has shown its wrong version and named the states it handles.

They divide by what the owner is doing — entering money, reading it back, or hearing from the coach.

Twenty Nine Components
Twenty Nine Components
Twenty Nine Components

What Outlasts Me

The system's stated reason for existing is succession: tokens written once, so the app, the documentation and the rules stay in agreement after the people who built it move on.

That part isn't finished. There is no changelog, no versioning, no deprecation policy and no named owner. A system designed to outlive one designer currently depends on one.

Drift came back somewhere new, too. The documentation still says the app ships in Burmese and English. It ships in more languages than that now, in more markets. The system closed the gap between design and code, then opened a smaller one between the docs and the product.

What Outlasts Me

Keep exploring.