cadence Design · v1.2
Ask the system — try “touch targets”⌘K
04 · Native

Same system, in your pocket.

The manager app and the Crew worker app run the same tokens as the web — warm paper, jade commits, purple agent. Swift and Kotlin constants are generated from the same tokens.json the web reads, so the three platforms cannot drift.

Mobile rules

What changes on a phone. And what never does.

CHANGES

Touch targets 44pt/dp minimum — table rows become 52. Display drops to 34, H1 to 26, body stays 15. Drawers become bottom sheets. The shell bar becomes a tab bar. Hover states become press states (tint, 140ms). The FAB is the one jade commit per screen.

NEVER CHANGES

The tokens. The three typefaces and their jobs. One jade commit per surface. Purple only when the agent acts. Status is a chip. Numbers in mono. Sentence case, no emoji, no exclamation points. Warm brown-black dark theme, never blue-black.

Crew — the worker app

The neutral-branded worker app.

Serif greeting, availability up front, one dark clock-in action, jade FAB. Try both themes — workers close out late.

Crew · schedule screen
Good afternoon,
Maya
Current Upcoming Past
4:00 PM–11:00 PM $22/hr
Friday Bar Service
Rooftop Lounge · tonight
Availability
Fri–Sun · evenings
ON
Schedule Clock + Pay Me
Tab bar: Schedule / Clock / Offers / Pay / Me — active in ink, rest in ink-4. The FAB is jade because it commits (pick up a shift). Clock-in is primary ink, 44pt tall, full width. Rates and times always mono.
Platform tokens

One source, three targets.

tokens.json is the source of truth. The CSS, Swift, and Kotlin files below are generated from it — change a hex once, ship it everywhere.

// SwiftUI
Button("Confirm 23") { confirm() }
    .background(CadenceColor.brand)          // jade — the one commit
    .foregroundColor(CadenceColor.bgCard)

// Compose
Button(colors = ButtonDefaults.buttonColors(
    containerColor = if (dark) CadenceDark.brand else CadenceLight.brand
)) { Text("Confirm 23") }