# Velvet Dark Boutique

와인기 도는 딥 차콜 벨벳 바탕에 골드-브론즈 헤어라인으로 두른 모듈러 벤토 룩북 — 발광 없는 다크 럭셔리 부티크.

- taxonomy: luxury-editorial · dark-luxury, velvet, bento-grid, gold-bronze, serif-display, boutique · complexity=medium
- page types: landing, ecommerce, portfolio, marketing
- best for: 럭셔리 패션·주얼리 룩북과 제품 진열, 부티크 호텔·하이엔드 브랜드 랜딩, 다크 무드의 큐레이션 포트폴리오
- avoid for: 데이터 밀도 높은 대시보드, 밝고 경쾌한 소비자 앱, 정보 위주의 문서 사이트
- provenance: authored (design-diversity 팩 'web-velvet-dark-boutique' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual

## Design rules

# 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.


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Velvet Dark Boutique — theme.css (generated, do not edit) */
:root {
  --radius: 10px;
  --radius-selector: 8px;
  --radius-field: 8px;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Cormorant', 'Georgia', serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  --font-display: 'Cormorant', 'Georgia', serif;
  --spacing: 8px;
  --shadow: 0px 12px 32px 0px color-mix(in oklab, oklch(0 0 0) 40%, transparent);
  --ks-display-weight: 600;
  --ks-display-tracking: 0;
  --background: oklch(0.965 0.008 60);
  --foreground: oklch(0.250 0.020 345);
  --card: oklch(0.990 0.004 60);
  --card-foreground: oklch(0.250 0.020 345);
  --popover: oklch(0.990 0.004 60);
  --popover-foreground: oklch(0.250 0.020 345);
  --primary: oklch(0.550 0.100 70);
  --primary-foreground: oklch(0.965 0.008 60);
  --secondary: oklch(0.930 0.012 65);
  --secondary-foreground: oklch(0.300 0.020 345);
  --muted: oklch(0.945 0.010 60);
  --muted-foreground: oklch(0.500 0.015 40);
  --accent: oklch(0.550 0.100 70);
  --accent-foreground: oklch(0.965 0.008 60);
  --destructive: oklch(0.520 0.190 25);
  --destructive-foreground: oklch(0.965 0.008 60);
  --border: oklch(0.860 0.020 70);
  --input: oklch(0.860 0.020 70);
  --ring: oklch(0.550 0.100 70);
  --chart-1: oklch(0.550 0.100 70);
  --chart-2: oklch(0.714 0.105 77.5);
  --chart-3: oklch(0.450 0.060 65);
  --chart-4: oklch(0.657 0.017 37.8);
  --chart-5: oklch(0.350 0.030 345);
}

.dark {
  --background: oklch(0.194 0.015 347.1);
  --foreground: oklch(0.924 0.010 48.6);
  --card: oklch(0.233 0.019 342.0);
  --card-foreground: oklch(0.924 0.010 48.6);
  --popover: oklch(0.233 0.019 342.0);
  --popover-foreground: oklch(0.924 0.010 48.6);
  --primary: oklch(0.714 0.105 77.5);
  --primary-foreground: oklch(0.194 0.015 347.1);
  --secondary: oklch(0.261 0.022 342.9);
  --secondary-foreground: oklch(0.924 0.010 48.6);
  --muted: oklch(0.233 0.019 342.0);
  --muted-foreground: oklch(0.657 0.017 37.8);
  --accent: oklch(0.714 0.105 77.5);
  --accent-foreground: oklch(0.194 0.015 347.1);
  --destructive: oklch(0.550 0.180 25);
  --destructive-foreground: oklch(0.924 0.010 48.6);
  --border: oklch(0.615 0.096 72.7);
  --input: oklch(0.261 0.022 342.9);
  --ring: oklch(0.714 0.105 77.5);
  --chart-1: oklch(0.714 0.105 77.5);
  --chart-2: oklch(0.615 0.096 72.7);
  --chart-3: oklch(0.500 0.070 70);
  --chart-4: oklch(0.657 0.017 37.8);
  --chart-5: oklch(0.400 0.030 343.5);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<!-- Golden snippet for "Velvet Dark Boutique". Fragment — assumes the style's CSS variables
     (--background, --foreground, --card, --accent, --border, --primary, --muted-foreground,
      --font-serif, --font-sans, --radius, ...) are in scope.
     Tokens only; no literal colors or images. -->
<section style="background:var(--background); color:var(--foreground); font-family:var(--font-sans); padding:clamp(2rem,6vw,4.5rem) clamp(1.25rem,4vw,3.5rem); max-width:1200px; margin:0 auto;">
  <p style="font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 1rem;">
    The Autumn Edit
  </p>
  <h1 style="font-family:var(--font-serif); font-weight:600; font-size:clamp(2.2rem,4.5vw,3.8rem); line-height:1.18; margin:0 0 1rem; max-width:18ch;">
    Quiet luxury, framed in velvet.
  </h1>
  <p style="font-family:var(--font-serif); font-style:italic; font-size:1.15rem; line-height:1.5; color:var(--muted-foreground); max-width:60ch; margin:0 0 2rem;">
    A boutique lookbook where each piece floats in wine-dark light, edged in the thinnest line of gold.
  </p>
  <a href="#" style="display:inline-block; border:1px solid var(--accent); color:var(--accent); background:transparent; border-radius:calc(var(--radius) - 2px); padding:12px 26px; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;">
    View collection
  </a>

  <!-- Bento mosaic: deliberately uneven spans -->
  <div style="display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:150px; gap:16px; margin-top:clamp(2.5rem,6vw,4rem);">
    <article style="grid-column:span 7; grid-row:span 2; position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; display:flex; flex-direction:column; justify-content:flex-end;">
      <span style="position:absolute; inset:0; mix-blend-mode:overlay; opacity:.04; background:repeating-conic-gradient(var(--foreground) 0% 25%, transparent 0% 50%); background-size:3px 3px;"></span>
      <p style="position:relative; font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 .5rem;">Look 01</p>
      <h3 style="position:relative; font-family:var(--font-serif); font-weight:500; font-size:1.35rem; margin:0 0 .35rem;">The Velvet Coat</h3>
      <p style="position:relative; font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--accent); margin:0;">€1,480</p>
    </article>

    <article style="grid-column:span 5; grid-row:span 1; position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; flex-direction:column; justify-content:flex-end;">
      <span style="position:absolute; inset:0; mix-blend-mode:overlay; opacity:.04; background:repeating-conic-gradient(var(--foreground) 0% 25%, transparent 0% 50%); background-size:3px 3px;"></span>
      <h3 style="position:relative; font-family:var(--font-serif); font-weight:500; font-size:1.35rem; margin:0;">Silk & Bronze</h3>
    </article>

    <article style="grid-column:span 5; grid-row:span 1; position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; flex-direction:column; justify-content:flex-end;">
      <span style="position:absolute; inset:0; mix-blend-mode:overlay; opacity:.04; background:repeating-conic-gradient(var(--foreground) 0% 25%, transparent 0% 50%); background-size:3px 3px;"></span>
      <p style="position:relative; font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-foreground); margin:0 0 .35rem;">Accessory</p>
      <h3 style="position:relative; font-family:var(--font-serif); font-weight:500; font-size:1.35rem; margin:0;">Gilded Clasp</h3>
    </article>

    <article style="grid-column:span 4; grid-row:span 1; position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; align-items:flex-end;">
      <span style="position:absolute; inset:0; mix-blend-mode:overlay; opacity:.04; background:repeating-conic-gradient(var(--foreground) 0% 25%, transparent 0% 50%); background-size:3px 3px;"></span>
      <p style="position:relative; font-size:.82rem; font-weight:600; color:var(--accent); margin:0;">€320</p>
    </article>

    <article style="grid-column:span 8; grid-row:span 1; position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; align-items:flex-end;">
      <span style="position:absolute; inset:0; mix-blend-mode:overlay; opacity:.04; background:repeating-conic-gradient(var(--foreground) 0% 25%, transparent 0% 50%); background-size:3px 3px;"></span>
      <h3 style="position:relative; font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:1.15rem; color:var(--muted-foreground); margin:0;">"Warmth, held in shadow."</h3>
    </article>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/velvet-dark-boutique.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.