Common UI components
The building blocks of the Kashew app, designed from the system tokens — greyscale surfaces, one gold accent used only where attention is earned, SF Pro for words, SF Mono for money. Toggle the theme to verify both modes.
Buttons & actions
Primary = gold fill + ink label. One primary per screen.
Primary actions live in the 50–56pt comfortable range. 44pt (Medium) is Apple's tappable floor.
Dashed = invisible 44pt hit region around a smaller glyph.
Below 44pt, keep the visible button compact but pad the tappable area out to 44pt. Space adjacent small controls ≥ 8pt apart to avoid mis-taps.
Inputs & fields
Monetary input uses the SF Mono / tabular face.
Selection & toggles
Split a bill between people.
Chips, tags & badges
Cards & surfaces
Round-ups are on
Spare change from each purchase goes to your Travel pot.
List rows
Sheets & dialogs
Send €120.00
Delete this pot?
Feedback & status
No transactions yet
When you spend or get paid, it'll show up here.
Skeletons mirror the real layout so content swaps in without a jump. Match the final element's shape and size; shimmer pauses under Reduce Motion. In SwiftUI, .redacted(reason: .placeholder) on the real view is the native route.