commerce · Phase 10
hero.title
An information-heavy technical storefront. Spec tables, compatibility, brands and side-by-side comparisons do the selling that photography does elsewhere.
Visual direction
Modern electronics retailer.
- White
- Light gray
- Soft cool gray
- Charcoal
- Restrained blue
More information-dense than Furniture or Fashion, but precise and technical without becoming a dark tech dashboard. Specs, compatibility and comparison do the selling.
- Category
- Device
- Compare
- Cart
- 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 electronics customer 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
- ProductsVariantsCategoriesSpecificationsBrandsCompatibility
- Merchandising
- ComparisonsNew arrivalsDeals
- Commerce
- CartCheckoutOrdersInventoryFinancingPaymentsOrder tracking
- Account
- ReviewsAuthAccountAddressesProfilePayment methodsNotifications
- Content
- StoryFAQGuidesTeam
Vocabulary
The shared foundation, relabelled. Each row shows the shared default and what this business calls it instead.
- Customer
- Customer
- Product
- Device
- Products
- Devices
- Collection
- Category
Design tokens
mixed mode. This page is already rendering in the business palette.
Mode
- mode
- mixed
- domain
- Commerce
Colors
background
surface
surfaceAlt
border
textMuted
text
primary
secondary
accent
- background
- #f8fafc
- surface
- #ffffff
- surfaceAlt
- #eef2f6
- border
- #D0DAE6
- textMuted
- #5f6f7e
- text
- #16202b
- primary
- #1f4b7a
- secondary
- #5a7186
- accent
- #0b6bcb
Typography
- stack
- technical
- display
- archivo
- heading
- archivo
- body
- archivo
- label
- jetBrainsMono
Spacing, radius, imagery, motion
- space.section
- 5rem
- space.gutter
- 1rem
- radius.card
- 0.5rem
- radius.control
- 0.375rem
- imagery.ratio
- 4/3
- imagery.treatment
- studio
- motion.duration
- 150ms
- shadow.card
- inherited