STORES.COM APP · BRAND GUIDES · 2026-07-14

Brand guides, app vs. retail website — side by side

Left card: the brand as it lives in the app mock-up (each mode's actual CSS tokens, now on Material role names — surface-dim/bright, primary/secondary-container, outline-variant — derived by single flat color-mix(in oklch) landed at Material tones). Right card: the brand per the siteContext scheme registry — the single canonical color source (registry-only as of 7/14) — plus fonts and logo. Companion to /themes.

Names — exact Material 3
Every role below is a literal Material 3 color role (md.sys.color.*): primary · secondary-container · surface-dim/surface-bright · on-surface-variant · outline-variant. Component fills use md.comp.* tokens that reference those roles.
Derivation — M3's tonal method
Derived roles are placed by perceptual tone — a single flat color-mix(in oklch,…), the CSS-native analog of Material's HCT method. Neutrals (on-surface-variant, outline-variant) land on Material's exact tone values; containers & surface tiers sit at each brand's tuned depth.
Values — our theme data
Every value is that brand's own siteContext theme data (Material's brand-color application): MorningSave #00004d, SideDeal #d8002a, Meh #ff6000, Stores #00b1ff … the M3 structure, our palette.
Material 3 color roles — what each name means (Google's definitions)
m3.material.io/styles/color/roles ↗
primaryKey brand fills — prominent buttons, active states
on-primaryText & icons on primary
primary-containerStandout tonal fill of the primary color
on-primary-containerText & icons on a primary-container
secondarySupporting accent color
on-secondaryText & icons on secondary
secondary-containerRecessive fills — chips, selected states
surfaceDefault component / page background
surface-dimDimmest surface — the app background
surface-brightBrightest surface — elevated cards
on-surfacePrimary text & icons on a surface
on-surface-variantLower-emphasis text & icons — metadata, captions
outline-variantSubtle dividers & decorative borders

Registry gaps — what admin.stores.com/theme would need to fully back the app

The Theme Builder stores 6 roles per scheme, per site today (3 pairs). The app uses the full Material 3 set — the extra roles are derived in this mock-up's CSS from those 6 anchors. To make the registry the single source of truth for the dev build, here's the delta.

Material 3 role (app uses)In the registry todayTo cover the app
primary / on-primary✓ stored— anchor
secondary / on-secondary✓ stored— anchor
surface / on-surface✓ stored— anchor
secondary-container✗ missingadd — tonal fill from secondary (chips, selected states)
primary-container / on-primary-container✗ missingadd — from primary (OutletStores chips)
surface-dim / surface-bright✗ missingadd — the two surface tiers (one tone step off surface)
on-surface-variant✗ missingadd — low-emphasis text/icons (neutral, M3 T30/T80)
outline-variant✗ missingadd — dividers & decorative borders (neutral, M3 T80/T30)
error / on-error / error-container✗ not storedoptional — M3's error roles; today status colors (success/warn/bad) are fixed semantic hexes, exempt
Two ways to close it:  (a) store every role in each site's light+dark scheme — simplest for consumers, and the Theme Builder can show/tune each one; or (b) store the 6 anchors + a derivation step — the single flat color-mix(in oklch,…) tone recipe this mock-up uses — which mirrors Material's own “key colors → generated scheme” model and keeps the stored data small. Either way it's per-site (each brand keeps its own values). The component tokens (app-bar, price, active-indicator) stay app-side — they map system roles onto components, they aren't new registry data.