Skip to content

Work / Aakalan / Wiki / Concepts

design-set-rules

Conceptverified 2026-10-30

design-set-rules

The wireframes are the spec: when a screen and a wireframe disagree, the wireframe wins. Open designs/mobile/index.html from disk. canon check (pnpm check:designs) is the gate and CI runs it.

  • There is no home group. The first screen after entry is the Balances tab, and the product names it Balances everywhere.
  • Two tabs and the centre Add. Balances ((tabs)/index) is one list sorted by size behind a People/Groups segmented control. Spending ((tabs)/spending) has the summary as header and the month's rows as body. Account is pushed off the header avatar.
  • payments and numbers are one section on account.tsx. The route is person/[id], not friend/[id]: the People cut is the only place the product names them, and it does not say "friend".
  • A route holding one control is the wrong shape. payment-details, appearance and currency are cards on account.tsx, not routes. A row whose subtitle must summarise the screen it hides means delete the screen.
  • Do not bring back (reasoning on each screen's page): the pending-settlement banner (an "Unconfirmed" flag on the row), the group Type picker (categoryForName derives it), a duplicate Simplify toggle (one persisted group setting), the "Half" settle amount, and horizontal chip scrollers (one PickerRow + WithSheet).
  • Every word a dialog shows is drawn on designs/mobile/components/alert.html. Adding an Alert.alert means adding its copy there in the same change; the copy check fails otherwise.
  • One token differs on purpose: the second brand colour is saffron in src/global.css and accent in tokens.js, same values. See tokens.
  • The wireframes draw the same eight-colour wheel src/lib/avatar-color.ts hashes into, in its order. See reserved-money-direction.