commerce · Phase 8
hero.title
A dense, appetite-led ordering experience built on categories, sizes, add-ons, spice levels and dietary tags, ending in a reorderable order history.
Visual direction
Modern restaurant and delivery kitchen.
- Cream
- Warm white
- Terracotta
- Orange
- Warm red
- Dark brown type
Should feel appetizing and fast, with food imagery doing most of the visual work. Categories, popular items, add-ons, dietary and spice indicators carry the ordering flow.
- Category
- Dish
- Size
- Add-ons
- Order
The experience itself is not built yet. What you are looking at is the foundation proving it out: the business configuration, the feature set it turns on, the vocabulary it uses, and the theme applied to this route. A food guest is called that here, and only here. This page is served in EN, one of the 3 locales this business supports.
Enabled capabilities
24 features this business turns on. Anything absent is never rendered.
- Catalog
- ProductsCategoriesMenusSizesAdd-onsDietary tagsSpice level
- Merchandising
- Popular itemsDealsGalleryCross-sell
- Commerce
- ReorderCartCheckoutOrdersPayments
- Account
- ReviewsAuthAccountAddressesProfileNotifications
- Content
- StoryFAQ
Vocabulary
The shared foundation, relabelled. Each row shows the shared default and what this business calls it instead.
- Customer
- Guest
- Product
- Item
- Products
- Items
- Cart
- Order
- Order
- Order
Design tokens
light mode. This page is already rendering in the business palette.
Mode
- mode
- light
- domain
- Commerce
Colors
background
surface
surfaceAlt
border
textMuted
text
primary
secondary
accent
- background
- #fdf8f1
- surface
- #ffffff
- surfaceAlt
- #f7ecdd
- border
- #E7D5BE
- textMuted
- #806551
- text
- #2e1d13
- primary
- #b4502a
- secondary
- #c9762c
- accent
- #a8321f
Typography
- stack
- warmth
- display
- fraunces
- heading
- fraunces
- body
- manrope
- label
- manrope
Spacing, radius, imagery, motion
- space.section
- 5.5rem
- space.gutter
- 1.25rem
- radius.card
- 1.25rem
- radius.control
- 999px
- imagery.ratio
- 1/1
- imagery.treatment
- natural
- motion.duration
- 180ms
- shadow.card
- inherited