← Sweetie

Advanced Interface · WK05 · Lists

List item system

One list item structure, two tones. The same slots build every row in Sweetie: a leading icon, avatar, bowl thumbnail or nothing; one or two lines of text; trailing text, an icon or both. Rows either navigate one level deeper or expand to reveal sub-items, and every interactive row has Enabled, Hover and Pressed states.

StructureLeading: icon / avatar / thumbnail / none · Text: 1 or 2 lines · Trailing: text / icon / both / none
ActionsNavigate: chevron row pushes a deeper screen with a back button · Expand: chevron-down row reveals sub-items
StatesEnabled · Hover · Pressed, shown side by side and live on every interactive row

In the prototype

Where the lists live in Sweetie

The Serene list builds both side sheets of the tablet prototype: the order details in Order history (flow 05) and the profile sheet. Both frames below are the real prototype — expand, navigate and tap the rows yourself. Phone isn’t built yet — the prototype is tablet only for now.

Used · 01 Serene · display, expand and navigate rowsUsed · leading dot · trailing text / chevronNot in the prototype yet · Elegant toneNot yet · leading icon, avatar, bowl thumbnailNot yet · push to a deeper screen with back

05 · Order history · tap a bowl → order details (scrolled to the list)

12
Live prototype, tablet landscape 1210 × 834. Hover a number on the right to see where it is.
  1. 1Display rows · In this bowlLeading colour dot, one-line label and trailing text (the portion). No action, so no hover state.
  2. 2Navigate row, on its own card · Edit in bowl builderTwo-line row with a chevron that nudges right on hover; tapping opens this bowl in the builder (flow 03). Nutrition sits above as plain figures, always visible — it is no longer a collapsible row.

Profile · tap the profile icon

1234
Live prototype, tablet landscape 1210 × 834. Hover a number on the right to see where it is.
  1. 1Navigate row · Order historyTrailing count (8) and chevron; opens flow 05.
  2. 2Expand row · Dietary preferencesOpens WK03 Serene checkboxes; the trailing “2 on” updates as you tick them.
  3. 3Expand row · Default paymentOpens WK03 Serene radios; the trailing text shows the chosen card.
  4. 4Card with header · NotificationsTwo-line rows (label + description) with WK03 Serene switches.