The NewStore system
Building blocks for every page.
One editorial language — big type, generous space, and a clear rhythm of edge-to-edge moments. Every page here is a pattern you compose from, never hand-roll. Pick one from the sidebar, or see it on a real page.
Foundations
Color
The primary brand palette and the secondary/support tokens — change a token and the whole site moves.
Gradients
Two families — background gradients (two dark + one light) and directional text gradients (The Luminary, The Catalyst, The Kinetic). Vertical, top-to-bottom, with colour stops.
Typography
The typefaces and the type scale every page inherits.
Iconography
The tinted-chip icon style: a 10% brand-blue rounded square with a duotone icon on top.
Spacing & rhythm
Vertical rhythm and the section padding scale that set the page cadence.
Voice & copy
How we write: confident, plain, outcome-led — the product explains, the words point.
Backgrounds
Buttons
Cards
Cards
The three-up icon / heading / body card grid.
Pillars
A three-up “pillars” row — each card pairs a one-word promise with a small bespoke illustration.
Feature card rail
A horizontal snap-scroll rail of media cards.
Screen mockups
The associate-app screens, for device shots and story beats.
Content bento
The six-column bento grid with named tiles.
Showcase bento
A bento where each tile holds a mini product-UI mockup with a caption beneath — the “see the product” grid.
Feature bento
A headline + four-tile feature grid: a photo tile, a capability pill-cloud, a tall image tile with a CTA, and a wide tile carrying either a live mockup or a customer film.
Benefit pillars
Four benefit cards in a 2×2, each closing on a slowly drifting rail of capability names.
Layout
Split feature
Two-column copy + visual rows — one split, or several alternating (this replaces the old Feature row).
Tabs
Tabbed panels for peer topics in one footprint.
Spec columns
Three columns of short checked statements, on hairlines instead of card chrome.
Statement
A full-width editorial type beat.
Full-bleed image
An edge-to-edge image moment.
Proof
Stats
Proof-number treatments in one place: the count-up metric grid, KPI cards (metric + trend badge + prior-period compare), and trend stat cards (headline metric + rising/falling sparkline).
Testimonials
A big pull-quote, an auto-scrolling wall of review cards, or a photo-forward spotlight.
Quote carousel
An auto-advancing testimonial rotator.
Logo marquee
A scrolling trust-logo strip.
Components
Phone frame
The frosted iPhone shell around a screen.
Routing console
A browser-framed dashboard showing the platform operating live.
Platform proof
The three trust visuals: a live store-event feed, a 16:9 film frame, and live platform health from the public Statuspage.
Module directory
The shared platform cross-nav: POS as the core plus the five modules, with a detail panel for the selected one.
Accordion
A disclosure list for FAQs and progressive detail.
Discovery tracks
Two routes to one purchase, where the agent track visibly absorbs the middle of the brand-led funnel.
Extension layers
Three blocks seated on one API layer: NewStore modules tinted, your own pieces neutral.
Timeline
A numbered step sequence with a connecting hairline.
Reveals
Scroll-in entrance animations (reduced-motion aware).
Enters
The first-screen entrance. Pure CSS on a timer, so it ships in the server HTML and animates without waiting on hydration — which is what <Reveal> cannot do above the fold.
Thinking orbs
Dotted thought-orb indicators for agentic commerce — six tuned states for the moments an agent is doing work on the shopper’s behalf.