---
title: "Woven design system"
variant: extended
source: https://wovenwhisky.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/wovenwhisky-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Woven · Design System

> Quietly editorial whisky, grounded in craft and place.

**Theme:** light · **Industry:** food-beverage · **Source:** https://wovenwhisky.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Woven pairs warm off-white fields and restrained typography with tactile whisky photography. The homepage moves between product discovery, workshop booking, brand storytelling, editorial content and a compact community footer.

## North star

Let quiet, warm space and honest whisky photography lead; use typography and rules only to organize the story.

## Overview

The page is built around a warm, muted canvas (#eeede5), with white reserved for the About block and product-card captions, and a soft grey (#ddddda) distinguishing the latest releases band. Dark charcoal (#232323) carries most navigation, headings and body copy; black appears in fine rules and button outlines. Bright blue (#0000ee) is measured but not a defining visual motif in the screenshots, so do not promote it as a primary brand colour. Spezia’s semi-mono and medium cuts give copy and headings a distinctive, quietly technical character, while uppercase labels and buttons provide small moments of structure. The composition alternates centered product displays with asymmetrical two-column image-and-copy sections. Bottle imagery, workshop scenes and editorial crops supply rich texture against otherwise flat, spacious surfaces. Sections feel deliberately paced, with generous blank areas and modest, square-cornered controls rather than cards, shadows or decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charcoal Ink | `#232323` | `--color-charcoal-ink` | brand | Primary text, navigation, headings, and dark-filled booking and checkout buttons. |
| Woven Canvas | `#eeede5` | `--color-woven-canvas` | brand | Main page canvas behind the experience, product range, visit, journal, and community sections. |
| Pure Rule | `#000000` | `--color-pure-rule` | neutral | Thin button and footer rules; the black hero appearance is screenshot-specific and not the measured page canvas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | About section, product-card caption surfaces, and selected navigation or link backgrounds. |
| Link Blue | `#0000ee` | `--color-link-blue` | accent | Rare measured accent in text or links; not a prominent brand colour in the supplied screenshots. |
| Soft Charcoal | `#4a4a4a` | `--color-soft-charcoal` | semantic | Muted supporting copy, secondary descriptions, and less prominent text. |
| Release Grey | `#ddddda` | `--color-release-grey` | surface | Distinct background band behind the latest releases product display. |
| Pale Line | `#f2f2f2` | `--color-pale-line` | neutral | Minor measured border or incidental detail; not a defining section fill. |

### Semantic aliases

`--color-canvas` → `#eeede5` (Woven Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#ddddda` (Release Grey) · `--color-text` → `#232323` (Charcoal Ink) · `--color-text-muted` → `#4a4a4a` (Soft Charcoal) · `--color-border` → `#000000` (Pure Rule) · `--color-accent` → `#0000ee` (Link Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#232323` | `#eeede5` | 13.38:1 | AAA |
| `#232323` | `#ffffff` | 15.72:1 | AAA |
| `#232323` | `#ddddda` | 11.55:1 | AAA |
| `#4a4a4a` | `#eeede5` | 7.55:1 | AAA |
| `#4a4a4a` | `#ffffff` | 8.86:1 | AAA |
| `#4a4a4a` | `#ddddda` | 6.51:1 | AA |
| `#0000ee` | `#eeede5` | 8:1 | AAA |
| `#0000ee` | `#ffffff` | 9.4:1 | AAA |
| `#0000ee` | `#ddddda` | 6.9:1 | AA |

### Gradients

- `linear-gradient(90deg, rgb(0, 0, 0), rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Spezia Semi-Mono Regular | `--font-mono` | webfont | 400, 700 | Body copy, navigation, links, and mono-leaning general text. | Space Mono |
| Spezia Medium | `--font-display` | webfont | 400, 500 | Main headings, button labels, and emphasized uppercase brand links. | Space Grotesk |
| Spezia Semi-Mono Light | `--font-spezia-semi-mono-light` | webfont | 400 | Captions and light secondary text, including small supporting labels. | IBM Plex Mono |
| Figtree | `--font-figtree` | webfont | 700 | Small eyebrow labels. | Figtree |

- **Spezia Semi-Mono Regular:** Regular weight and measured semi-mono character; keep tracking neutral, with uppercase used selectively for labels.
- **Spezia Medium:** Medium weight with neutral tracking; headings remain mixed case or sentence case, buttons often uppercase.
- **Spezia Semi-Mono Light:** Use a lighter mono-like voice for captions; preserve the restrained, low-contrast hierarchy.
- **Figtree:** Measured bold weight; compact uppercase eyebrow with notably expanded tracking.

### Type scale — Major Third (ratio ≈ 1.26, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 400 | 1.13 | 0 | — | Spezia Medium | Primary page or section statement in Spezia Medium. |
| h2 | 24px | 400 | 1.5 | 0 | — | Spezia Medium | Section headings and prominent editorial statements. |
| h3 | 20px | 400 | 1.5 | 0 | uppercase | Spezia Semi-Mono Regular | Uppercase mono-style subheadings and product group labels. |
| body | 16px | 400 | 1.63 | 0 | — | Spezia Semi-Mono Regular | Main descriptive copy and brand storytelling. |
| caption | 14px | 400 | 1.63 | 0 | — | Spezia Semi-Mono Light | Light product captions and compact supporting details. |
| button | 16px | 400 | 1 | 0 | uppercase | Spezia Medium | Uppercase action labels on booking and purchase controls. |
| nav | 15px | 400 | 2.4 | 0 | — | Spezia Semi-Mono Regular | Main site navigation and utility links. |
| link | 16px | 400 | 1.63 | 0 | — | Spezia Semi-Mono Regular | Inline and product links, styled consistently with body copy. |
| eyebrow | 12px | 700 | 4.17 | 0.167em | uppercase | Figtree | Small uppercase section kicker with expanded tracking. |
| code | 16px | 400 | 1.63 | 0 | — | Spezia Semi-Mono Regular | No visible code UI; use the measured body-like style if needed. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 8, 10, 15, 20, 26, 30, 40, 60, 70 px.
- Section rhythm 70px · element gap — · card padding — · max content width 1160px.

Use a centered content area capped at the measured 1160px, with comfortable density and broad section breathing room. Alternate centered single-column product and editorial sections with two-column splits for workshop and maker stories. Align section headings centrally for discovery bands and left-align copy in image-led splits. Keep product tiles in a tidy grid with white caption strips; let imagery occupy substantial areas without adding decorative card chrome. Section rhythm is spacious, with the measured section gap of 70px.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease-out` on interactive elements.

The interface is mostly flat: no measured shadows, and cards use square corners rather than rounded containers. Use thin dark rules and button borders to define controls, with white caption panels separating product labels from image fields. Establish depth through photography and section contrast, not overlays or floating surfaces.

## Imagery

Use authentic product and place photography: whisky bottles against quiet neutral backdrops, hands-on blending scenes, glassware, and editorial crops. Product images sit in orderly grids with clean pale backgrounds; lifestyle images are larger and paired with copy in split layouts. The screenshots show photographic media, not a dominant illustration system. Avoid heavy filters, badges, or overly glossy 3D treatments.

## Components

### Primary booking button

Charcoal (#232323) fill with white text, a matching 2px border, square corners, and uppercase label; used for booking actions.

### Experience CTA

Muted blue-grey (#bec7c7) fill, black 1px border, square corners, and a medium Spezia label; keep it visually quieter than primary checkout actions.

### Product tile

Bottle image on a pale field with a white caption surface below, centered product name and price, and no card shadow.

### Main navigation

Minimal header navigation and utility controls in Spezia Semi-Mono Regular, with measured 15px nav text and restrained spacing.

### Split story block

Pair concise copy and a small section heading with a large adjacent photograph; align copy to the start rather than centering it.

### Shop all link

A compact, square-cornered outline control centered beneath product collections, using dark text and a thin border.

### Community signup

Footer email input and submit action organized alongside link groups, separated from the footer content by a fine horizontal rule.

### Measured component styles

- **Primary button** (“BOOK NOW”): background #232323 · text #ffffff · border 2px solid #232323 · radius 0px · padding 10px 30px · 700 12px Spezia Semi-Mono Regular · uppercase
- **Secondary button** (“BOOK YOUR EXPERIENCE”): background #bec7c7 · text #000000 · border 1px solid #000000 · radius 0px · padding 5.3px 17.6px · 500 17.6px Spezia Medium
- **Link** (“WOVEN WITH OTTOLENGHI £60”): background #ffffff · text #232323 · radius 0px · padding 0px · 400 16px Spezia Semi-Mono Regular
- **Input**: transparent background · text #232323 · radius 0px · padding 10px 20px 10px 10px · 400 14px Figtree
- **Card** (“CLOSE CART SHOPPING CART Your cart is cu”): background #ffffff · text #232323 · radius 0px · padding 0px · 400 16px Spezia Semi-Mono Regular
- **Navigation item** (“FAQs”): transparent background · text #232323 · radius 0px · padding 0px 10px · 400 15px Spezia Semi-Mono Regular

## Do

- Use Woven Canvas (#eeede5) as the dominant page surface.
- Reserve Release Grey (#ddddda) for a distinct product-release band.
- Set headings and navigation in the supplied Spezia families or close mono-friendly substitutes.
- Show bottle photography clearly and give product names and prices simple caption strips.
- Use square controls with restrained dark outlines and no shadows.
- Alternate centered discovery areas with image-and-copy story splits.

## Don't

- Do not make Link Blue (#0000ee) a dominant brand colour.
- Do not add gradients, drop shadows, or rounded card treatments.
- Do not crowd the page with dense text or tightly packed sections.
- Do not use decorative badges over product photography.
- Do not replace the warm canvas with a stark all-white layout.
- Do not treat screenshot-only black hero rendering as the measured default canvas.

## Agent prompt

Build a new whisky brand page with Woven’s quiet editorial feel. Use Woven Canvas (#eeede5) as the main background, Charcoal Ink (#232323) for copy and controls, Gallery White (#ffffff) for clean caption and story surfaces, and Release Grey (#ddddda) for one differentiated product band. Keep Link Blue (#0000ee) rare. Use Spezia-style mono-friendly typography, restrained uppercase labels, square buttons, thin borders, and no shadows. Organize content into broad, calmly paced sections: centered product discovery, asymmetrical photography-and-copy stories, and an understated footer. Prioritize bottle and workshop photography with natural framing and pale backgrounds. Keep copy concise, align text deliberately, and let whitespace and imagery create hierarchy rather than extra decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width opening field with centered wordmark treatment and compact utility navigation. | brand introduction, menu access, cart access | minimal header, large wordmark, dark visual field |
| 2 | video | Centered title over a two-column experience area with a video and booking action. | experience discovery, booking CTA | centered heading, video-led section, pale canvas |
| 3 | product-grid | Centered heading above a two-column product grid and a centered shop link. | browse products, compare prices, shop all | product photography, white caption strips, centered labels |
| 4 | feature-split | Two-column workshop story with descriptive copy and a large experience photograph. | workshop discovery, book now, gift card | left-aligned copy, large photo, paired dark buttons |
| 5 | testimonials | Single-column centered quotation with a compact attribution. | social proof | centered quote, small attribution, open background |
| 6 | other | White single-column brand story with centered heading and supporting media and text. | brand discovery, find out more | white surface, centered heading, editorial spacing |
| 7 | feature-split | Two-column story pairing left-aligned copy with a close-up whisky photograph. | brand values, maker story | split layout, image-led story, warm canvas |
| 8 | product-showcase | Centered release heading above a three-product row and shop-all action. | discover releases, shop all | grey section band, bottle lineup, centered product labels |
| 9 | content-feed | Single-column editorial feature with image collage, short introduction, and article link. | read latest article, editorial discovery | image collage, centered copy, spacious canvas |
| 10 | footer | Two-column footer with link lists and a community signup form below a fine divider. | community signup, social links, policy navigation | two-column groups, thin horizontal rule, compact text |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/wovenwhisky-com