← Sweetie

Advanced Interface · WK06 · Menus

Menu system

One menu item structure, two tones. Every row is built from the same slots: an optional left icon, a single line of text, and one right-side accessory (a shortcut, a badge, an icon or a submenu chevron). Rows group into sections with a header and a separator, and any row can open a submenu. Serene is the account menu on the profile icon; Elegant is the menu on each past order in Order history.

StructureLeft icon (optional) · single-line label · one right accessory: shortcut / badge / icon / submenu chevron
ConfigurationsSingle line · left icon · right icon · right shortcut · right badge · sections · submenu
StatesEnabled · Hover · Pressed on every row, shown side by side below and live in the prototype

01 · Serene

Account menu

Tone: calm, soft, unhurried. The menu is a sage card with generous corners; rows are rounded pills that warm to white on hover and settle into green when pressed. It opens with a slow fade and rise, rows arriving one after another. Function: it drops from the profile icon and gathers everything about Matt’s account — order history, rewards, the bag, settings, dietary preferences and pickup store — with ⌘ shortcuts for an iPad keyboard.

Figtree 17 / 22 Regulargreen-100 #DBE4CBradius 20 · rows 13rows 44 (M)ease (.45, 0, .2, 1)

Configurations

The full menu with its Dietary submenu open. Hover a number to find each configuration.

    States

    Enabled, Hover and Pressed for each kind of row. Hover the live menu in the prototype to feel the timing.

    Anatomy

    Measured from the real component at 1:1 (prototype pixels).

    02 · Elegant

    Order menu

    Tone: precise, quiet, editorial. A cream sheet with a hairline edge and small corners; light type in Sweetie green, rows divided by hairlines and sections by a thin band. It appears quickly with no stagger, and its submenu slides out from the side. Function: tap ··· on any past order, right-click it, or press and hold — then reorder, edit, view the receipt, rate, share, favorite or hide it.

    Figtree 17 / 22 Lightcream-50 #F9F6E6 · hairline #BDBDBDradius 13 · rows 0rows 44 (M)ease (.32, .72, 0, 1)

    Configurations

    The full menu with its Share submenu open. Hover a number to find each configuration.

      States

      Enabled, Hover and Pressed for each kind of row, including the destructive row.

      Anatomy

      Measured from the real component at 1:1 (prototype pixels).

      In the prototype

      Where the menus live in Sweetie

      Both frames are the real tablet prototype, opened with the menu already showing. Hover, click and use the arrow keys inside them. Shortcuts work too: ⌘B opens the bag, ⌘, opens profile & settings, and with an order menu open ⌘R reorders and ⌘E edits.

      01 Serene · profile icon → Account menu02 Elegant · ··· on every order, right-click, or press and holdSubmenus · Dietary, Pickup store, ShareShortcuts · ⌘B · ⌘, · ⌘O · ⌘R · ⌘E

      Account menu · tap the profile icon (top right)

      123456
      Live prototype, tablet landscape 1210 × 834. Hover a number on the right to see where it is.
      1. 1Section header · AccountCaption caps; groups the account rows.
      2. 2Left icon + right badge · Order historyBadge shows the live order count; opens flow 05.
      3. 3Left icon + shortcut · Bag ⌘BThe shortcut works anywhere in the prototype.
      4. 4Submenu · DietaryOpens on hover (160 ms) or tap; the checks change your dietary tags in the bowl builder.
      5. 5Right icon · Help & supportThe arrow says it leaves the app.
      6. 6Single line of text · Sign outNo icon, no accessory.

      Order menu · ··· on a past order, right-click, or press and hold

      123456
      Live prototype, tablet landscape 1210 × 834. Hover a number on the right to see where it is.
      1. 1Anchor · ··· buttonOn every row and on the Last order card. Right-click or press and hold a row opens the same menu at your finger.
      2. 2Section header · the orderDate and bowl, so you know which order you’re acting on.
      3. 3Left icon + shortcut · Reorder ⌘RAdds the bowl to your bag (skips sold-out ingredients).
      4. 4Right badge · Rate this bowlOutlined badge: +50 pts for rating.
      5. 5Submenu · ShareSlides out to the side; Copy link carries its own ⌘C.
      6. 6Destructive · Remove from historyRed label and icon; the row slides away.