# Velvet Dark Boutique

## Overview
Dark luxury boutique for lookbooks and product display. A wine-tinted deep charcoal ground — never pure black — carries a modular bento grid of differently-sized tiles, each wrapped in a crisp non-glowing gold-bronze hairline and dusted with a procedural velvet-matte grain. Serif display headings, small uppercase sans labels. The mood is quiet, warm, and expensive; depth comes from surface-lightness steps and hairlines, not glow. This style is dark-canonical (precedent: mercury/dark-luxury): the dark map is the authored spec, the light map is a faithful ivory/bronze adaptation.

## Colors & Roles
Foundation is wine-charcoal `background` with a slightly lighter `card` surface and a lighter-still hover step (`secondary`). `foreground` is warm off-white; `muted-foreground` a dusty mauve for meta and captions. The single chromatic voice is a warm gold `accent`/`primary` — used only on kickers, hairlines, links, and small price labels, kept under ~6% of the surface. Never paint gold across a tile fill. `border` is a gold-bronze hairline (ideally a `#c79a52 → #a87b3e` gradient via `border-image`). `destructive` is a muted wine-red (derived — the pack does not specify one).

## Typography Rules
A serif + sans mix. Display and headings use Cormorant serif (weight 500–600, tracking 0); pull-quotes and lookbook copy use Spectral italic 400. Kickers/labels, body, meta, and price labels use Inter — labels in uppercase with wide 0.18em tracking in gold. Body is Inter 0.95rem, line-height 1.66, measure 56–66 characters. Modular scale ratio ≈ 1.25.

## Layout Principles
Max content width 1200px. The signature is a 12-column bento grid where tiles claim uneven `grid-column`/`grid-row` spans (2×2, 4×2, 6×3, 3×4) to form a modular mosaic — an even, equal-size tile grid is forbidden. Tile gap 16px. Vertical section rhythm is balanced: `clamp(72px, 8vw, 112px)`. On mobile the bento reflows to 1–2 columns but the large/small size hierarchy is preserved.

## Depth & Elevation
Depth from surface-lightness steps (`card` vs `background`) and hairlines, not from heavy shadow. Tiles may carry a very soft `0 12px 32px rgba(0,0,0,0.4)` to float slightly. No colored glow, neon, or luminous borders — this is the line that separates it from luminous-dark-bento styles. A procedural velvet grain (`feTurbulence` baseFrequency ~1.2 monochrome, or fine dot noise) sits at opacity 0.04 with `mix-blend-mode: overlay`.

## Shapes
Tiles and images use radius 10px; buttons 8px. Corners are soft but never large (>14px) and never fully squared.

## Component Stylings
- **Button**: ghost — 1px solid gold, gold text, transparent fill, radius 8px, padding 12px 26px, uppercase 0.14em tracking. Hover fills solid gold with background-colored text over 300ms.
- **Card / Tile**: `card` surface, 1px gold-bronze hairline, radius 10px, velvet grain overlay. Hover lifts `translateY(-4px)`, brightens the hairline one step, and zooms an inner image to 1.05 (tile `overflow: hidden`).
- **Input**: 1px border, radius 8px; focus border goes gold (`ring`).
- **Nav**: gold-bronze 1px bottom hairline; Cormorant serif wordmark left, uppercase Inter links right, gold social links.
- **Image**: radius 10px, saturation −10%, brightness 0.95, light velvet grain overlay.

## Motion
Subtle only. Tiles fade up on scroll (opacity 0→1 + `translateY(14px→0)`, 360ms, 80ms stagger). Hover lifts the tile, brightens the hairline, and slow-zooms the inner image (600ms). Links reveal a gold underline on fade. No glow pulse, neon flicker, bounce, or snap. `prefers-reduced-motion` drops image zoom and entrance transforms, keeping only the hairline-brightness change.

## Do's and Don'ts
**Do:** keep the ground wine-charcoal (not black); build a size-hierarchied bento mosaic; confine gold to lines, text, and small labels under 6% area; use crisp non-glowing hairlines; generate the velvet grain in code.
**Don't:** use pure `#000000`; add glow/neon/luminous borders; introduce any accent other than gold or fill a tile with gold; build an even equal-size tile grid; use purple/multi-color gradients (gold-bronze hairline excepted); exceed 14px radius; use bounce/snap/pulse motion; rely on stock texture image files.

## Responsive Behavior
The bento reflows from a 12-column mosaic to 1–2 columns on narrow viewports while preserving the tile size hierarchy; display type scales via `clamp()`. Side padding steps from 56px desktop to 20px mobile.

## Agent Prompt Guide
> Build this in the 'Velvet Dark Boutique' style: a wine-tinted deep charcoal ground (never pure black), a modular bento grid of differently-sized lookbook tiles, each wrapped in a crisp non-glowing 1px gold-bronze hairline with a subtle procedural velvet-matte grain overlay. Serif Cormorant headings, Spectral italic pull-quotes, small uppercase Inter labels. One warm gold accent on kickers, hairlines, links, and small price labels only (under 6% area, never filling a tile). Depth from surface-lightness steps, not glow; subtle motion only — tiles fade-up and lift with a 1.05 image zoom on hover. Tile radius 10px, gap 16px, max-width 1200px.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-velvet-dark-boutique` (authored spec; all confidence `manual`). The dark map is the pack's specified palette; the light map is a faithful authored ivory/bronze adaptation (not measured). `destructive`, `chart-3/4/5`, and all light-mode roles are derived from the gold/bronze/charcoal set. Fonts (Cormorant, Spectral, Inter) are open Google Fonts (OFL); the velvet texture is procedural SVG/CSS, no stock assets.