shop ecommerce product-page brand premium editorial luxury dark
Shop Product Brand
Editorial, design-forward product page with full-bleed imagery, brand storytelling, and minimal purchase flow — inspired by Apple and B&O.
dark Responsive
Live Preview
Sections
heroproduct-showcasestorycraftsmanshipspecspurchasefooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Arc Speaker — Sonance</title>
<meta name="description" content="Arc Speaker by Sonance. Precision-engineered wireless audio in a sculptural form. €349." />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
accent: { 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48' }
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<style>
html { scroll-behavior: smooth; }
.font-serif-editorial { font-family: 'Playfair Display', Georgia, serif; }
/* Brand tokens — Sonance (dark editorial, rose accent) */
:root {
--ws-color-primary: #f43f5e;
--ws-color-primary-hover: #e11d48;
--ws-color-primary-soft: rgba(244, 63, 94, 0.12);
--ws-color-surface: #020617;
--ws-color-surface-alt: #0f172a;
--ws-color-surface-muted: #1e293b;
--ws-color-text: #f1f5f9;
--ws-color-text-soft: #cbd5e1;
--ws-color-text-muted: #94a3b8;
--ws-color-text-faint: #64748b;
--ws-color-border: rgba(51, 65, 85, 0.6);
}
/* interactions/shine-sweep */
.shine-sweep {
--shine-color: oklch(1 0 0 / 0.12);
--shine-speed: 0.6s;
position: relative;
overflow: hidden;
isolation: isolate;
}
.shine-sweep::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, var(--shine-color) 50%, transparent 70%);
transform: translateX(-100%);
transition: none;
pointer-events: none;
z-index: 1;
}
.shine-sweep:hover::after {
animation: shine-sweep-move var(--shine-speed) ease-out;
}
@keyframes shine-sweep-move {
to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.shine-sweep::after { display: none; }
}
</style>
</head>
<body class="bg-slate-950 text-slate-200 antialiased">
<!-- ════════════════════════════════════════════════════════════════════
HERO — Full-bleed, massive typography, zero clutter
════════════════════════════════════════════════════════════════════ -->
<header class="ws-hero relative min-h-screen flex flex-col">
<!-- Minimal top bar -->
<div class="relative z-10 flex items-center justify-between px-6 sm:px-10 lg:px-16 py-6">
<a href="#" class="text-sm tracking-[0.25em] uppercase text-slate-400 hover:text-white transition-colors" aria-label="Sonance home">
Sonance
</a>
<button aria-label="Shopping bag, 0 items" class="p-2 text-slate-400 hover:text-white transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007z" />
</svg>
</button>
</div>
<!-- Hero content -->
<div class="flex-1 flex flex-col items-center justify-center px-6 text-center -mt-16">
<p class="text-sm tracking-[0.3em] uppercase text-slate-500 mb-6">Introducing</p>
<h1 class="font-serif-editorial text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-bold text-white tracking-tight leading-none">
Arc Speaker
</h1>
<p class="mt-6 text-lg sm:text-xl text-slate-400 max-w-md leading-relaxed">
Sound, sculpted.
</p>
<a href="#showcase" class="mt-12 text-sm tracking-[0.2em] uppercase text-slate-500 hover:text-white transition-colors">
Discover
<svg class="w-4 h-4 inline-block ml-1 animate-bounce" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
</svg>
</a>
</div>
</header>
<!-- ════════════════════════════════════════════════════════════════════
PRODUCT SHOWCASE — Cinematic image + feature highlights
════════════════════════════════════════════════════════════════════ -->
<section id="showcase" class="ws-product-card px-6 sm:px-10 lg:px-16 py-24 md:py-32">
<!-- Full-width product image -->
<div class="aspect-[16/9] w-full rounded-sm bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950 flex items-center justify-center overflow-hidden">
<div class="text-center">
<svg class="w-16 h-16 text-slate-700 mx-auto" fill="none" stroke="currentColor" stroke-width="0.5" viewBox="0 0 24 24" aria-hidden="true">
<path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
</svg>
<p class="mt-3 text-sm text-slate-600">Product image — 16:9</p>
</div>
</div>
<!-- Three feature highlights -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-0 mt-16 md:mt-24">
<div class="py-8 md:py-0 md:pr-12">
<p class="text-sm tracking-[0.2em] uppercase text-accent-500 mb-3">360° Audio</p>
<p class="text-slate-400 leading-relaxed">
Room-filling sound that adapts to your space. Six precision drivers, tuned by ear.
</p>
</div>
<div class="py-8 md:py-0 md:px-12 border-t md:border-t-0 md:border-l md:border-r border-slate-800/60">
<p class="text-sm tracking-[0.2em] uppercase text-accent-500 mb-3">18-Hour Battery</p>
<p class="text-slate-400 leading-relaxed">
All-day listening without compromise. USB-C fast charge gives 4 hours in 20 minutes.
</p>
</div>
<div class="py-8 md:py-0 md:pl-12 border-t md:border-t-0">
<p class="text-sm tracking-[0.2em] uppercase text-accent-500 mb-3">AirPlay & Bluetooth 5.3</p>
<p class="text-slate-400 leading-relaxed">
Seamless connectivity with lossless streaming. Works with everything you own.
</p>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════════
BRAND STORY — Editorial split layout
════════════════════════════════════════════════════════════════════ -->
<section class="px-6 sm:px-10 lg:px-16 py-24 md:py-32">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<!-- Text -->
<div class="order-2 lg:order-1 max-w-lg">
<p class="text-sm tracking-[0.2em] uppercase text-slate-500 mb-6">The Philosophy</p>
<h2 class="font-serif-editorial text-4xl sm:text-5xl text-white leading-tight mb-8">
Designed for<br />the way you<br /><em class="text-accent-500">listen</em>
</h2>
<p class="text-slate-400 leading-relaxed mb-6">
Most speakers are designed to be heard. Arc is designed to be experienced. We spent
three years refining the acoustic architecture — not in a lab, but in living rooms,
kitchens, and studios where music actually lives.
</p>
<p class="text-slate-400 leading-relaxed">
The result is a speaker that doesn't just play sound. It shapes it around you,
filling every corner without force, without distortion, without asking you to
sit in the sweet spot.
</p>
</div>
<!-- Image -->
<div class="order-1 lg:order-2 aspect-[3/4] w-full rounded-sm bg-gradient-to-b from-slate-800 via-slate-900 to-slate-950 flex items-center justify-center">
<div class="text-center">
<svg class="w-12 h-12 text-slate-700 mx-auto" fill="none" stroke="currentColor" stroke-width="0.5" viewBox="0 0 24 24" aria-hidden="true">
<path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
</svg>
<p class="mt-3 text-sm text-slate-600">Lifestyle image — 3:4</p>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════════
CRAFTSMANSHIP — Magazine editorial cards
════════════════════════════════════════════════════════════════════ -->
<section class="px-6 sm:px-10 lg:px-16 py-24 md:py-32">
<div class="text-center mb-16 md:mb-24">
<p class="text-sm tracking-[0.2em] uppercase text-slate-500 mb-4">Materials & Craft</p>
<h2 class="font-serif-editorial text-4xl sm:text-5xl text-white">
Every detail, considered
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Card 1 -->
<div class="relative aspect-[3/4] rounded-sm overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-b from-slate-800 to-slate-900"></div>
<div class="absolute inset-0 bg-gradient-to-t from-slate-950/90 via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-8">
<p class="text-sm tracking-[0.2em] uppercase text-accent-500 mb-2">Acoustic Mesh</p>
<p class="text-white text-lg font-light leading-snug mb-2">
Woven from recycled marine plastic
</p>
<p class="text-slate-400 text-sm leading-relaxed">
Acoustically transparent. Environmentally conscious. Each grille is unique.
</p>
</div>
</div>
<!-- Card 2 -->
<div class="relative aspect-[3/4] rounded-sm overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-b from-slate-700 to-slate-800"></div>
<div class="absolute inset-0 bg-gradient-to-t from-slate-950/90 via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-8">
<p class="text-sm tracking-[0.2em] uppercase text-accent-500 mb-2">Solid Aluminum</p>
<p class="text-white text-lg font-light leading-snug mb-2">
CNC-machined from a single block
</p>
<p class="text-slate-400 text-sm leading-relaxed">
Cold to the touch. Warm in tone. The enclosure doubles as a heat sink.
</p>
</div>
</div>
<!-- Card 3 -->
<div class="relative aspect-[3/4] rounded-sm overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-b from-slate-800 via-slate-850 to-slate-900"></div>
<div class="absolute inset-0 bg-gradient-to-t from-slate-950/90 via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-8">
<p class="text-sm tracking-[0.2em] uppercase text-accent-500 mb-2">Neodymium Drivers</p>
<p class="text-white text-lg font-light leading-snug mb-2">
Six drivers, hand-matched in pairs
</p>
<p class="text-slate-400 text-sm leading-relaxed">
Frequency response from 35Hz to 40kHz. You'll hear things you missed.
</p>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════════
SPECIFICATIONS — Minimal, borderless
════════════════════════════════════════════════════════════════════ -->
<section class="px-6 sm:px-10 lg:px-16 py-24 md:py-32">
<div class="max-w-2xl mx-auto">
<p class="text-sm tracking-[0.2em] uppercase text-slate-500 mb-12 text-center">Specifications</p>
<dl class="space-y-0">
<div class="flex justify-between py-5 border-b border-slate-800/60">
<dt class="text-slate-400">Drivers</dt>
<dd class="text-white text-right">6 x 40mm neodymium</dd>
</div>
<div class="flex justify-between py-5 border-b border-slate-800/60">
<dt class="text-slate-400">Frequency Response</dt>
<dd class="text-white text-right">35 Hz — 40 kHz</dd>
</div>
<div class="flex justify-between py-5 border-b border-slate-800/60">
<dt class="text-slate-400">Battery</dt>
<dd class="text-white text-right">18 hours / USB-C fast charge</dd>
</div>
<div class="flex justify-between py-5 border-b border-slate-800/60">
<dt class="text-slate-400">Connectivity</dt>
<dd class="text-white text-right">AirPlay 2, Bluetooth 5.3, Wi-Fi 6</dd>
</div>
<div class="flex justify-between py-5 border-b border-slate-800/60">
<dt class="text-slate-400">Dimensions</dt>
<dd class="text-white text-right">168 x 168 x 252 mm</dd>
</div>
<div class="flex justify-between py-5">
<dt class="text-slate-400">Weight</dt>
<dd class="text-white text-right">2.4 kg</dd>
</div>
</dl>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════════
PURCHASE — Centered, prominent, deliberately minimal
════════════════════════════════════════════════════════════════════ -->
<section class="ws-checkout px-6 sm:px-10 lg:px-16 py-24 md:py-40">
<div class="max-w-lg mx-auto text-center">
<h2 class="font-serif-editorial text-4xl sm:text-5xl text-white mb-4">
Arc Speaker
</h2>
<p class="text-3xl sm:text-4xl text-white font-light mb-12">
€349
</p>
<!-- Color selection -->
<fieldset class="mb-12">
<legend class="text-sm tracking-[0.2em] uppercase text-slate-500 mb-6">Color</legend>
<div class="flex items-center justify-center gap-5" role="radiogroup" aria-label="Choose color">
<button
role="radio"
aria-checked="true"
aria-label="Midnight Black"
class="w-10 h-10 rounded-full bg-slate-900 ring-2 ring-white ring-offset-2 ring-offset-slate-950 transition-all hover:scale-110 focus:outline-none focus:ring-accent-500"
></button>
<button
role="radio"
aria-checked="false"
aria-label="Lunar Silver"
class="w-10 h-10 rounded-full bg-slate-400 ring-2 ring-transparent ring-offset-2 ring-offset-slate-950 transition-all hover:scale-110 focus:outline-none focus:ring-accent-500"
></button>
<button
role="radio"
aria-checked="false"
aria-label="Desert Sand"
class="w-10 h-10 rounded-full bg-amber-200 ring-2 ring-transparent ring-offset-2 ring-offset-slate-950 transition-all hover:scale-110 focus:outline-none focus:ring-accent-500"
></button>
</div>
</fieldset>
<!-- Add to bag -->
<button class="shine-sweep w-full sm:w-auto px-16 py-4 bg-accent-500 hover:bg-accent-600 text-white text-sm tracking-[0.15em] uppercase rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 focus:ring-offset-slate-950">
Add to Bag
</button>
<p class="mt-6 text-sm text-slate-500">
Free shipping. 30-day returns. 2-year warranty.
</p>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════════
FULL-WIDTH CLOSING IMAGE
════════════════════════════════════════════════════════════════════ -->
<section class="px-6 sm:px-10 lg:px-16 pb-24 md:pb-32">
<div class="aspect-[21/9] w-full rounded-sm bg-gradient-to-br from-slate-900 via-slate-800 to-slate-950 flex items-center justify-center">
<div class="text-center">
<svg class="w-12 h-12 text-slate-700 mx-auto" fill="none" stroke="currentColor" stroke-width="0.5" viewBox="0 0 24 24" aria-hidden="true">
<path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
</svg>
<p class="mt-3 text-sm text-slate-600">Cinematic closing image — 21:9</p>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════════
FOOTER — Minimal, dark
════════════════════════════════════════════════════════════════════ -->
<footer class="ws-footer border-t border-slate-800/60 px-6 sm:px-10 lg:px-16 py-12" role="contentinfo">
<div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6">
<a href="#" class="text-sm tracking-[0.25em] uppercase text-slate-500 hover:text-white transition-colors" aria-label="Sonance home">
Sonance
</a>
<nav class="flex items-center gap-8 text-sm text-slate-500" aria-label="Footer navigation">
<a href="#" class="hover:text-white transition-colors">Support</a>
<a href="#" class="hover:text-white transition-colors">Shipping</a>
<a href="#" class="hover:text-white transition-colors">Returns</a>
<a href="#" class="hover:text-white transition-colors">Contact</a>
</nav>
<p class="text-xs text-slate-600">© 2026 Sonance</p>
</div>
</footer>
</body>
</html>
Design-first product page for premium brands. Dark editorial layout with oversized typography and generous whitespace. Tells the product story before showing the price.