Foodie

Dark

Foodie

Eleven screens, an ordering flow from a browse list to a delivery you can watch arrive. Nothing here is drawn for the mock-up: every control is an instance of a component you already have, so one token change moves all eleven.

Preview

Eleven screens, an ordering flow from a browse list to a delivery you can watch arrive. Each screen exists twice in the file, once with Color Tokens on Light and once on Dark, so the theme button swaps an export rather than restyling anything.

Foodie, 11 screens

393 x 852 each, Light and Dark

Foodie app, category screen, light — Category

Foodie app, category screen, dark — Category

Foodie app, restaurant screen, light — Restaurant

Foodie app, restaurant screen, dark — Restaurant

Foodie app, cart empty screen, light — Cart empty

Foodie app, cart empty screen, dark — Cart empty

Foodie app, checkout screen, light — Checkout

Foodie app, checkout screen, dark — Checkout

Foodie app, tracking screen, light — Tracking

Foodie app, tracking screen, dark — Tracking

Foodie app, orders screen, light — Orders

Foodie app, orders screen, dark — Orders

Foodie app, favourites screen, light — Favourites

Foodie app, favourites screen, dark — Favourites

Foodie app, account screen, light — Account

Foodie app, account screen, dark — Account

The Light row and the Dark row are the same eleven frames with one variable mode changed, not two separate builds.

What it is built from

This is the whole point of the set. The flow places 106 instances, 84 of them Appetite components across 9 distinct components and 22 of them Lucide icons. Nine components carry an entire ordering app.

Component

Placed

Where it appears

Button

Restaurant, Dish, Cart, Cart empty, Checkout, Tracking, Favourites, Account

Horizontal Card

Home, Category, Orders

List

Dish, Cart, Checkout, Account

iOS / Status bar

Every screen

Top Bar

Every screen that carries a title bar

Chip

Home, Category

Navigation

Home, Category, Orders, Account

Avatar

Tracking, Account

Segmented Control

Orders

Lucide icons

12 distinct icons, one stroke weight

Everything else is layout and text. Six things are drawn locally rather than instanced: the round overlay button on Restaurant and Dish, the search pill on Home, the inline rating, the dish and basket rows, the quantity steppers, whose plus and minus are Button instances, and the four step delivery timeline on Tracking. The overlay button, the search pill and the timeline duplicate Button, Search and Progress Steps, and are the three worth folding back in.

Tokens

No screen carries a raw colour, a raw radius or a raw type size. Every frame sits in a variable mode and reads down through the same six collections as every component.

Collection

Modes

What the screens take from it

Foundations

Default

The primitive ramps every other collection points at

Color Tokens

Light, Dark

Every surface, text and border colour on the screens

Platform

ios-md, ios-lg, android

Frame width, radius and inset. The screens sit on ios-md

Typography

Default

The type ramp behind every label on every screen

Platform Bridge

Brand, System

Apple and Material roles, unused here but reachable

Motion

Default

Durations, curves and springs for the transitions between screens

Every Foodie frame is pinned to Color Tokens Light or Dark and Platform ios-md. The dark row is the light row with one mode changed, which is why the two exports agree line for line. Rebrand at Colors and all eleven screens follow.