Three themes, one build, one set of tokens.

The client wanted to compare directions on his own phone, not in a meeting. So the shipped build carries three themes, and a switch at the bottom of My Profile flips between them. Every screen below is the same code and the same layout. Only the token values change: the primary color, the corner radius, the icon set, and how the two doors are filled.

Screens captured from the current build in the iOS Simulator, October 2026. Names and portraits are demo personas.

Each line below is a real file or rule in the Acts repo.

One TypeScript file holds the native system. Theme differences are expressed inside the tokens, so no screen ever asks which theme it is in.

expo/lib/theme.ts · excerpt

/** THE design system, native dialect: the same tokens the web carries. */
export const T = {
  ink:    "#26211a",
  line:   BRUT ? "#e2e1de" : "#e9e0d0",
  need:   APPLE ? "#0970e6" : BRUT ? "#b5302a" : "#c14b2a", // the ask side
  help:   "#1f6b58",                                       // the give side
  parish: "#2e6ca8",                                       // community, links elsewhere
  flame:  "#e8862a",                                       // the candle's flame, and only that
  radiusBtn: APPLE ? 12 : BRUT ? 8 : 999,
};

/** SPACING: the 8-pt grid. Use these, never ad-hoc numbers. */
export const SP = { xs: 4, sm: 8, stack: 12, md: 16, screen: 20, lg: 24, xl: 32 };

/** BUTTONS: every button spreads these (HIG: 44-pt targets or larger). */
export const BTN = { minHeight: 50, borderRadius: T.radiusBtn, paddingVertical: 14, paddingHorizontal: 20 };

export const serif = {
  fontFamily: Platform.select({ ios: "Georgia", android: "serif" }),
  fontStyle: "italic",
};

The two sides of the app never share a color. Asking is the need role, giving is the help role, and the request page shows all three actions as secondary buttons in their own roles, so the color tells you which side of the exchange you are on before you read the label.

A design review found tappable and decorative elements drifting into each other. The clearest case: a section heading's decorative rule was styled exactly like a selected tab. The fix was a written rule with four levels, each with one look, kept in the token file where both I and the coding agent read it before building a screen.

AI-generated code drifts toward one-off values. When the app started to feel sloppy, I audited the native code against the grid and fixed everything in one pass, then turned on lint for the native project.

Still open, and the next audit: on native, font sizes are still set per screen. The named type scale (34 · 28 · 20 · 17 · 15 · 13) is enforced on the web; bringing type roles into theme.ts is next.