Design language

Commerce replica branding guide

Template D mirrors the commerce-v1 homepage with a warm neutral canvas, photographic category tiles, and the same commerce catalogue imagery that deep-links to the live storefront.

Colour system

Warm neutrals with charcoal contrast

Combine the bright canvas with slate accents and soft grey surfaces. The contrast keeps imagery front and centre while matching the live replica.

Warm canvas

--template-d-background

Site backdrop, sticky navigation, and footer shell.

Polished surface

--template-d-surface

Hero content well, product cards, and highlight modules.

Soft grey veil

--template-d-surface-muted

Product media backgrounds and service tiles.

Slate night

--template-d-surface-strong

Hero banner, category overlays, and link treatments.

Iris focus

--template-d-accent

Focus rings, avatar border, and interactive emphasis states.

Typography

Inter for clarity and pace

Inter drives the entire typography stack in commerce-v1. Maintain generous tracking on labels and light leading on hero copy so the layout stays airy across breakpoints.

Type scale

  • Display

    Considered essentials for every day.

    Clamp 2.25rem → 3.1rem / -0.01em
  • Product title

    Bomber Jacket

    Clamp 1.1rem → 1.4rem / -0.01em
  • Body

    Layered neutrals and everyday tailoring.

    1rem / 1.55 line height
  • Label

    Shop by category

    0.85rem uppercase / 0.08em tracking

Voice attributes

  • Direct & helpful

    Use short, utility-driven sentences that prioritise clarity while keeping a friendly, service-led tone.

  • Merchandising first

    Lead with product names, pricing, and category cues so shoppers immediately recognise catalogue context.

  • Conversational flair

    Balance the playful hero copy with pragmatic CTAs that align with the reference storefront experience.

Application

Layout and interaction guidance

Anchor spacing to shared tokens: sticky header padding, marquee gutters, and card radius align exactly with the reference site.

Navigation remains sticky with a translucent blur and template toggle anchored to the lower viewport edge.

Hero uses a two-column split with dark slate canvas and rounded media cutout mirroring commerce-v1.

Product rails rely on horizontal scroll with scroll snapping while catalogue grids step to three columns on desktop.

Implementation notes

Translating commerce-v1 patterns

Apply these foundations across homepage and supporting pages to keep Template D in lock-step with the reference commerce build.

Hero banner

Pair the editorial headline with a translucent primary CTA pill and a supporting link. The media tile should maintain a gradient overlay for legibility.

Category tiles

Use high-contrast photography with bottom-aligned copy, badge treatments, and gradient veils to protect text.

Product catalogue

Cards share the same padding, radius, and focus state whether rendered in the horizontal rail or grid catalogue.