Van LarClaudeNathanMatt

DayTwo Design System

Build screens anyone can use without help.

Real React Native components, usage rules tied to what they do for the user, and copy-paste code — all from one set of tokens.

Who this is for

DayTwo is a capture-light, advice-forward app for small cash-business owners — many on low-end Android phones, often offline, reading Burmese or English, and frequently using an app like this for the first time, without anyone to help them. Every rule on this site exists to answer one question:

Can a first-time shop owner understand and use a screen without help?

If a choice doesn't improve comprehension, confidence, speed, error prevention, or recovery, it doesn't belong here.

One source of truth

Everything starts from design tokens — color, type, spacing, radius, elevation, touch targets, motion — written once. The docs site, the React Native components, and (later) the AI harness all read from them, so nothing drifts.

The components are real React Native, rendered here through react-native-web. So the live previews on this site are the shipping components, and the code you copy is real, working code — not a web mock-up.

How to read a component page

Every component page uses the same sections, in the same order:

1. Live preview — the real component, with toggles for variants and states.
2. Purpose — what it's for, in plain words.
3. Anatomy — the parts that make it up.
4. Variants — every variant, shown.
5. Code — the real import + usage.
6. When to use / When NOT to use — concrete scenarios.
7. The correct scenario — the canonical case it's designed for.
8. Anti-patterns — a ✅ / ❌ pair, not just a description.
9. Edge cases — empty, long Burmese text, offline, error…
10. Tokens used — exactly which tokens it pulls from.

Start with Button — it's the simplest component and exercises every part of the template.

Set up

New to the repo? See Install & import to get it running locally and learn how to use a component in your app.