# Wovenwhisky · Design system migration spec

> Source: https://wovenwhisky.com  ·  Curated by OpenDesign  ·  en

> An excellent example of a modern craft brand using restraint and high-quality imagery to create a premium, trustworthy aesthetic.

## 1. Identity DNA

The system's identity is best understood as a modern apothecary meets a high-end boutique studio—a place where precise, artisanal craft is presented with contemporary clarity. It is a refined, craft-focused whisky experience brand that blends artisanal heritage with clean, modern curation.

**One-liner:** A refined, craft-focused whisky experience brand blending artisanal heritage with clean, modern curation.
**Keywords:** artisanal · craft · bespoke · whisky · experience
**Analogy:** A modern apothecary meets a high-end boutique studio.

## 2. Color

The palette is a study in restraint, grounding the interface in warm neutrals from off-white to dark charcoal. This subdued foundation is deliberately sparse, relying on high-quality photography to provide the visual warmth and richness.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#ECEDE5` | card background |
| `--ink` | `#232323` | body text |
| `--ink-soft` | `#4A4A4A` | secondary text |
| `--muted` | `#ECEDE5` | placeholder |
| `--line` | `rgba(35,35,35,1)` | divider |

**Color principle:** Warm neutrals grounded in dark charcoal, relying on high-quality photography to provide visual warmth.

The governing principle is that the color system serves as a quiet, sophisticated stage for the product photography.

## 3. Typography

Typographic voice is one of structured clarity, defined by all-cased headings with generous letter-spacing. The system mixes a transitional serif for display with a clean monospaced font for technical details, creating a hierarchy built on size and weight rather than color.

- **Display:** transitional-serif
- **Body:** geometric-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | 2px | Modal heading 'WOVEN' |
| heading | 20px | 1.5 | 400 | 1px | Section headings like 'EXPERIENCE WHISKY' |
| body | 16px | 1.625 | 400 | 0px | Standard paragraph text |
| caption | 12px | 1.625 | 400 | 1px | Fine print and small labels |

**Type rules:**
- Uppercase all section headings and UI labels with generous letter-spacing.
- Maintain a strict typographic hierarchy using size and weight rather than color.
- Use a clean monospaced font for product pricing and technical details.

## 4. Spacing

All spatial relationships are orchestrated on a strict 8px baseline grid, ensuring consistent rhythm and alignment throughout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px baseline grid

## 5. Surfaces

Surfaces are flat and defined by sharp, 1-2px borders, primarily using the dark charcoal ink. Depth is created not through shadows but through the interplay of these crisp edges and the layered photography.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px to 2px solid borders, primarily using the primary ink color for sharp, defined edges.

## 6. Layout

The layout skeleton is a clean, centered column, beginning with a full-viewport photographic hero. This anchors the composition, leading into structured grid sections for content and products.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A clean, centered layout with a prominent photographic hero followed by structured grid sections.

## 7. Motion & Interaction

Motion philosophy is one of minimal, functional enhancement. Transitions are smooth and brief, used primarily for professional state changes like modals and dropdowns, ensuring interactions feel immediate yet considered.

- **Durations:** micro 150ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.0, 0.25, 1.0)`
- **Patterns:**
  - Subtle fade-in and transform transitions for modals and dropdowns.
  - Smooth opacity transitions for hover states on interactive elements.

- **Hover:** Subtle opacity change or color inversion for interactive elements.
- **Click:** Immediate feedback with slight scaling or color shift.
- **Transition:** Smooth, brief transitions for UI state changes like menus or modals.
- **Keyboard:** Standard focus states, likely following browser defaults or subtle outlines.

## 8. Voice & Don'ts

The editorial voice is artisanal, premium, and inviting, yet always restrained. It favors clear, uppercase headlines and direct calls to action, presented in a clean, boxed format.

- **Tone:** Artisanal, premium, and inviting, yet restrained and sophisticated.
- **Headline style:** Uppercase, widely-spaced, and clear, focusing on the experience and the craft.
- **CTA style:** Direct and action-oriented, presented in a clean, boxed format.
- **Avoid:** Avoid overly casual or slang-heavy language. / Avoid cluttered layouts or aggressive promotional graphics. / Avoid bright, neon, or overly saturated color palettes.

### Don'ts
- ❌ Don't use bright, saturated colors — the palette is strictly limited to warm neutrals and dark charcoal.
- ❌ Don't use rounded corners on buttons or cards — the design strictly favors sharp, rectangular geometry.
- ❌ Don't use drop shadows or 3D effects — surfaces are flat and rely on borders and photography for depth.
- ❌ Don't use playful or whimsical typography — text is always clean, structured, and often monospaced.
- ❌ Don't use cluttered layouts — maintain generous white space and a clear visual hierarchy.
- ❌ Don't use aggressive, flashing animations — interactions are subtle, smooth, and functional.

The system deliberately excludes bright, saturated colors, rounded geometry, and playful whimsy to preserve its sophisticated, calm atmosphere.

## System Prompt (paste into AI tool)

```
This is a premium, artisanal whisky brand site that blends modern minimalism with craft heritage. The design relies on high-quality photography and a restrained color palette of warm whites (#FFFFFF, #ECEDE5) and dark charcoal (#232323). Typography mixes a transitional serif for display and a geometric sans or monospaced font for body and UI elements, often set in uppercase with wide letter-spacing. Critical constraints: maintain sharp rectangular geometry with no border-radius, avoid cluttered layouts in favor of generous white space, and never use bright or saturated colors that would disrupt the sophisticated, calm atmosphere.
```