commerce · Phase 9
hero.title
A routines-led beauty storefront. Formulas carry ingredients, benefits and shades, and the customer journey is a routine rather than a product list.
Visual direction
Premium beauty, skincare and cosmetics brand.
- Cream
- Soft blush
- Rose
- Warm beige
- Plum accent
Should feel soft, premium and editorial. Ingredient storytelling, benefits, shades and routines replace the product grid as the primary structure.
- Concern
- Routine
- Formula
- Shade
- Bag
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 beauty client 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
- ProductsCategoriesShadesIngredientsBenefits
- Merchandising
- RoutinesNew arrivalsGalleryCross-sell
- Commerce
- DiscountsWishlistCartCheckoutOrdersPaymentsSubscriptions
- Account
- LoyaltyReviewsAuthAccountAddressesProfilePayment methodsNotifications
- Content
- StoryJournalGuides
Vocabulary
The shared foundation, relabelled. Each row shows the shared default and what this business calls it instead.
- Customer
- Client
- Product
- Formula
- Products
- Formulas
- Cart
- Bag
- Collection
- Routine
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
- #fdf7f5
- surface
- #ffffff
- surfaceAlt
- #f8ece9
- border
- #E9D1D2
- textMuted
- #7D656A
- text
- #2b1f22
- primary
- #b3657a
- secondary
- #c9a79c
- accent
- #6b1f3a
Typography
- stack
- atelier
- display
- cormorant
- heading
- cormorant
- body
- gantari
- label
- gantari
Spacing, radius, imagery, motion
- space.section
- 6.5rem
- space.gutter
- 1.5rem
- radius.card
- 1.5rem
- radius.control
- 999px
- imagery.ratio
- 4/5
- imagery.treatment
- studio
- motion.duration
- 450ms
- shadow.card
- inherited