Your brand has entered the chat
Products discovered across AI channels. Checkout right in the conversation.
Minimal Sneaker
$125.00 · In stock
🇺🇸 Order for $125.00
01 / Colors
Dark commerce tokens
Shopify nutzt Weiß als CTA, Schwarz als Bühne und Neon-Mint als präzises Signal. Die grünen Akzente sind sparsam, nicht flächig.
Neon Green
#36F4A4Accent, focus, AI labels.
Void Black
#000000Canvas and footer.
Deep Teal
#02090ACards, dark mockups.
Dark Forest
#061A1CSection surfaces.
Forest Elevated
#102620Glow and elevation.
White Ink / CTA
#FFFFFFText and filled buttons.
Muted Zinc
#A1A1AASecondary copy.
Sidekick Violet
#5A31F4AI product zone.
Card Border
#1E2C31Dark card boundary.
Sage Link
#9DABADInline feature links.
Midnight Blue
#000A1EDeveloper/AI sections.
Error Derived
#FF6B6BDerived, not observed.
02 / Typography
Huge, light, exact
Computed styles zeigen NeueHaasGrotesk für Display und Inter-Variable für Navigation, Body und CTAs.
Display XL
96px / 400 / 1.0Commerce theatre
Section H2
55px / 330 / 1.16Sell more in more places
Card title
20px / 400 / .3pxSell on every channel
Body / Link
18px / 500 / .72pxPut your products where shoppers search, shop, and scroll.
04 / Cards
Product mockup surfaces
Cards sind dunkle Produktbühnen mit radialem Glow, subtiler Kante und Commerce-UI im Inneren.
Sell on every channel
Search, shop and scroll with multichannel integration.
Sell face to face
POS and online inventory stay in sync.
05 / Brand-specific product patterns
Commerce-specific, not generic
Die wiederverwendbaren Muster müssen nach Shopify aussehen: AI chat, checkout, markets, steps, merchant proof.
01
AI chat commerce
Logo-Bubbles, Chat-Karte und "brand entered the chat" statt generischem Bot-UI.
02
Global order toast
Kleine Order-Karte mit Betrag, Flagge und Checkout-Status über Storefront-Mockup.
03
Build steps
01/02/03 Liste mit grünen Nummern und feinen Trennlinien.
04
Mega menu matrix
Produktlandkarte: Build, Sell, Marketing, Run, Get paid.
05
Checkout proof stats
15% und 250M+ als Beweisflächen mit grünen Overlines.
06
Merchant story rail
Echte Shop-Domains und Zitate als Vertrauensanker im dunklen Theater.
06 / Sidekick AI zone
Meet your secret weapon
Violett-blauer Verlauf markiert AI als eigene Produktwelt, bleibt aber in der dunklen Shopify-DNA.
Your very own commerce AI
Sidekick panels use dark translucent cards, bright white type and violet atmospheric depth.
▶
What winning looks like
Video teaser card with circular play control.
07 / Checkout and trust
No better place to build
Proof wird produktnah inszeniert: Conversion, Shop-Reichweite, Finanzierung, Geschwindigkeit.
Better conversion15%
World's best-converting checkout.
Verified shoppers250M+
Reach millions through Shop.
Merchant proof
“Funding we need to stock up on inventory and grow rapidly.”
08 / Forms
Dark inputs, mint focus
Formzustände sind aus Cookie-Banner, Focus-Ring und Dark Surface System abgeleitet.
Accept commerce updates
Start with AI setup
09 / Spacing
Keynote rhythm
8px base, aber große Sections nutzen 96-128px Theater-Abstand.
4pxxs8pxsm16pxlg24pxxl32pxxxl96pxsection128pxtheatre10 / Radius
Rounded but not soft
Cards nutzen 8-20px. CTAs sind konsequent pillenförmig.
4px
8px
12px
20px
28px
pill
11 / Elevation
Ambient occlusion
Auf dunklen Flächen wirken Shadows wie Verdichtung und Top-Edge-Glow, nicht wie helle Floating Cards.
Base
noneRing
Card stack
High overlay
Focus
Inset glow
12 / Extracted component tokens
Implementation values
Konkrete Werte für Agenten, die HTML/CSS/React mit Shopify-DNA bauen sollen.
Header64px height, transparent/black blur, white links, no visible heavy border
#000 / #fffPrimary button9999px radius, 12px 24px, Inter 18/550, white fill
#fff on #000Feature card12-20px radius, 24-32px padding, radial forest glow, subtle dark border
#02090A + #1E2C31Input8px radius, 12px 16px padding, dark forest fill, mint focus ring
#061A1C / #36F4A4Overline12px mono/body, uppercase, .72px tracking, green
#36F4A4Sidekick bandviolet to midnight gradient, translucent black cards
#5A31F4 -> #000A1E