Obsidian Champagne
Polished black stone, champagne gold hairlines and a whisper-thin roman.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A vitrine at night. Deep obsidian black, champagne gold used like gilded edging, and a delicate high-waisted roman set in generous capitals. Products sit in pools of warm light with acres of darkness around them. Hushed, precise, very expensive.
Obsidian Champagne is a luxury dark system built on restraint. It borrows from Art Deco jewellery vitrines, late-night hotel bars and the engraved stationery of old Parisian houses: a near-black canvas, champagne gold used only as hairlines and small fills, and a fine, high-waisted roman set in spaced capitals. Products are photographed in single pools of warm light so darkness becomes the frame. Nothing moves quickly and nothing is crowded. It should feel like a whisper in a very good room.
Principles
- Darkness is the display case — surround every product with black.
- Use gold as edging: hairlines, numerals, one button.
- Set display type in spaced capitals, never heavy.
- Leave 160px between sections; luxury is unhurried.
- One photograph per viewport, lit from a single source.
Motion
Everything arrives slowly — a 1.4-second fade and 12px rise — as if a curtain is being drawn by hand; on hover, gold hairlines warm into a faint champagne glow.
Do & don't
Do
- ✓ Surround products with at least 40% empty black.
- ✓ Use roman numerals for sequence.
- ✓ Keep gold hairlines at exactly 1px.
Don't
- ✕ Don't use pure white or pure black hex values.
- ✕ Don't add shadows or gradients to cards.
- ✕ Don't use more than one gold button per screen.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 364 lines of DESIGN.md in total.
More like this
All Dark & Cinematic →
Noir Cinema
No. 028Letterboxed, grainy and lit from one side, like a 1947 crime picture.
Ember Forge
No. 045Coal black, molten orange and condensed capitals hammered out of the fire.
Midnight Velvet
No. 046Indigo velvet, a lush italic serif and the glow of a stage at 11pm.
Moody Forest
No. 047Pine-dark greens, a sturdy old serif and mist hanging between the trunks.
Studio Black
No. 049Black page, white capitals the height of the screen, and nothing else.
Verdant Reserve
No. 100Private wealth in bottle green and gilt: engraved capitals, quiet numbers, old money.