Skip to content
Appetite UI Symbol
Appetite UI
Where it fitsTokensComponentsScreensAI connectDocs
Get access
Components
/
Booking
Dark

Booking

Eleven screens, a whole stay booking flow from search to a confirmed trip. 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, a whole stay booking flow from search to a confirmed trip. 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.

Booking, 11 screens
393 x 852 each, Light and Dark
Booking app, explore screen, lightBooking app, explore screen, dark
Explore
Booking app, results screen, lightBooking app, results screen, dark
Results
Booking app, listing screen, lightBooking app, listing screen, dark
Listing
Booking app, filters screen, lightBooking app, filters screen, dark
Filters
Booking app, dates screen, lightBooking app, dates screen, dark
Dates
Booking app, guests screen, lightBooking app, guests screen, dark
Guests
Booking app, review and pay screen, lightBooking app, review and pay screen, dark
Review and pay
Booking app, confirmed screen, lightBooking app, confirmed screen, dark
Confirmed
Booking app, trips screen, lightBooking app, trips screen, dark
Trips
Booking app, trips empty screen, lightBooking app, trips empty screen, dark
Trips empty
Booking app, profile screen, lightBooking app, profile screen, dark
Profile

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 100 instances, 85 of them Appetite components across 13 distinct components and 15 of them Lucide icons. Edit Button once and it changes on nine of the eleven screens.

Component
Placed
Where it appears
Button
21
Results, Listing, Filters, Dates, Guests, Review and pay, Confirmed, Trips empty, Profile
Chip
15
Explore, Results, Filters, Dates
iOS / Status bar
11
Every screen
Top Bar
8
Every screen that carries a title bar
List
8
Filters, Review and pay, Profile
Horizontal Card
8
Results, Trips
Navigation
5
Explore, Results, Trips, Trips empty, Profile
Vertical Card
2
Explore
Segmented Control
2
Dates, Trips
Avatar
2
Listing, Profile
Date Picker
1
Dates
Range Slider
1
Filters
Badge
1
Listing
Lucide icons
15
14 distinct icons, one stroke weight

Everything else on these screens is layout and text. Six things are drawn locally rather than instanced: the round overlay button on Listing, the search pill on Explore, the inline rating, the amenity rows, the stepper wrappers, whose plus and minus are Button instances, and the price histogram behind the Range Slider. The first two duplicate something the system already ships, Button and Search, and are the two 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 Booking 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.

Previous
Input
Next
Toggle