commerce · Phase 11
hero.title
A fast, dense grocery front end. Weight, unit, pack size, brands, deals and reorder dominate the interface, with speed as the primary design constraint.
Visual direction
Modern grocery delivery and supermarket.
- White
- Fresh green
- Lime
- Warm neutral
Should prioritise speed and convenience. Dense browsing, quick-add interactions, pack sizes, weight and unit, and a reorder-first account area.
- Category
- Item
- Pack size
- Basket
- Delivery
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 grocery shopper is called that here, and only here. This page is served in EN, one of the 3 locales this business supports.
Enabled capabilities
27 features this business turns on. Anything absent is never rendered.
- Catalog
- ProductsCategoriesBrandsWeightUnitPack sizeDietary tags
- Merchandising
- DealsPopular itemsCross-sellGallery
- Commerce
- ReorderSubscriptionsWishlistCartCheckoutOrdersInventoryPayments
- Account
- ReviewsAuthAccountAddressesProfileNotifications
- Content
- StoryFAQ
Vocabulary
The shared foundation, relabelled. Each row shows the shared default and what this business calls it instead.
- Customer
- Shopper
- Product
- Item
- Products
- Items
- Cart
- Basket
- Order
- Delivery
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
- #f9fbf7
- surface
- #ffffff
- surfaceAlt
- #eff5ec
- border
- #CFDDC7
- textMuted
- #64735D
- text
- #1f2a1c
- primary
- #2f7a35
- secondary
- #7a9440
- accent
- #4a9a2a
Typography
- stack
- quiet
- display
- newsreader
- heading
- outfit
- body
- outfit
- label
- outfit
Spacing, radius, imagery, motion
- space.section
- 4.5rem
- space.gutter
- 1rem
- radius.card
- 0.75rem
- radius.control
- 0.5rem
- imagery.ratio
- 1/1
- imagery.treatment
- studio
- motion.duration
- 140ms
- shadow.card
- inherited