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

# Essie Wine · Design System

> Neighbourhood hospitality in soft colour and line

**Theme:** light · **Industry:** food-beverage · **Source:** https://essiewine.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._

Essie Wine’s homepage pairs a neighbourhood wine-bar identity with muted colour, fine typography, and a hand-drawn storefront illustration. A spacious editorial flow moves from venue story and food imagery to menus, bookings, private dining, vouchers, and practical details.

## North star

Let generous white space, restrained colour bands, and fine editorial type make hospitality feel intimate rather than transactional.

## Overview

The page balances a white canvas with broad blocks of muted mauve, olive-gold, and pale gray-green. Mauve establishes the illustrated opening and returns in the footer; olive-gold anchors the private-dining and booking area. Near-black text and deep blue-green details provide contrast without making the page feel stark. BasicCommercial LT Com Roman carries headings and navigation in a light, refined voice, while Elementa handles uppercase labels and outlined actions; AdobeCaslon adds a literary serif note to selected copy. Generous whitespace and an asymmetrical image sequence create a calm editorial rhythm rather than a rigid card grid. Photography focuses on food, wine, and interiors, while the opening illustration gives the venue a distinctive, human scale. Borders are thin and rectangular, with no visible shadow system or rounded UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Primary headings, body copy, navigation, and the outlines of booking and menu actions. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and spacious content sections between the coloured bands. |
| Olive Cellar | `#aa9e54` | `--color-olive-cellar` | brand | Large private-dining and booking section background, supporting dark copy and form controls. |
| Dusty Rosé | `#c9a9b5` | `--color-dusty-rose` | brand | Illustrated hero and footer background, creating the page’s warm mauve signature. |
| Cellar Teal | `#062d32` | `--color-cellar-teal` | semantic | Muted navigation, footer, and form text; also appears as the dominant line colour in the hero illustration. |
| Chalk Sage | `#e9e9e2` | `--color-chalk-sage` | surface | Quiet menu-section surface, adding a subtle tonal break from the white canvas. |
| Slate Teal | `#344b52` | `--color-slate-teal` | semantic | Fine footer border and hairline details; secondary to the stronger ink and mauve palette. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#aa9e54` (Olive Cellar) · `--color-surface-2` → `#c9a9b5` (Dusty Rosé) · `--color-surface-3` → `#e9e9e2` (Chalk Sage) · `--color-surface-4` → `#000000` (Soft Ink) · `--color-text` → `#000000` (Soft Ink) · `--color-text-muted` → `#062d32` (Cellar Teal) · `--color-border` → `#344b52` (Slate Teal) · `--color-accent` → `#aa9e54` (Olive Cellar)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#aa9e54` | 7.73:1 | AAA |
| `#000000` | `#c9a9b5` | 9.83:1 | AAA |
| `#000000` | `#e9e9e2` | 17.22:1 | AAA |
| `#062d32` | `#ffffff` | 14.69:1 | AAA |
| `#062d32` | `#aa9e54` | 5.41:1 | AA |
| `#062d32` | `#c9a9b5` | 6.88:1 | AA |
| `#062d32` | `#e9e9e2` | 12.05:1 | AAA |
| `#aa9e54` | `#ffffff` | 2.72:1 | fail |
| `#aa9e54` | `#c9a9b5` | 1.27:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BasicCommercial LT Com Roman | `--font-display` | webfont | 300 | Headings, navigation, and selected larger form text. | Cormorant Garamond |
| Elementa | `--font-body` | webfont | 300, 400 | Uppercase body labels, buttons, links, and small image captions. | Josefin Sans |
| AdobeCaslon | `--font-adobecaslon` | webfont | 300 | Selected editorial copy, especially the private-dining description. | Cormorant Garamond |

- **BasicCommercial LT Com Roman:** Light weight with restrained tracking; sentence-case headings and naturally styled navigation.
- **Elementa:** Light, widely tracked uppercase for actions and labels; captions can use regular weight.
- **AdobeCaslon:** Light serif treatment adds an occasional literary contrast to the otherwise restrained type system.

### Type scale — Golden Ratio (ratio ≈ 1.606, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 49px | 300 | 1.18 | 0.003em | — | BasicCommercial LT Com Roman | Primary page or hero heading, when present. |
| h2 | 38px | 300 | 1.18 | 0.004em | — | BasicCommercial LT Com Roman | Section headings for editorial and venue content. |
| body | 19px | 300 | 1.16 | 0.008em | uppercase | Elementa | Uppercase supporting copy and small editorial labels. |
| caption | 16px | 400 | 1 | 0 | — | Elementa | Image captions and compact supporting text. |
| button | 19px | 300 | 1.16 | 0.008em | uppercase | Elementa | Uppercase text in outlined menu and booking actions. |
| nav | 19px | 300 | 1.16 | 0.026em | — | BasicCommercial LT Com Roman | Brand wordmark and primary navigation links. |
| link | 19px | 300 | 1.16 | 0.008em | uppercase | Elementa | Uppercase inline and outlined calls to action. |
| eyebrow | 19px | 300 | 1.16 | 0.042em | uppercase | Elementa | Widely tracked uppercase section labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 8, 20, 22, 23, 27, 35, 40, 100, 150 px.
- Section rhythm 40px · element gap 20px · card padding — · max content width 1088px.

Use a comfortable editorial layout within the measured 1088px maximum page width, with a two-column structure where content and media sit side by side. Alternate this with centered text blocks and offset, asymmetric photo placements rather than repeating uniform cards. Keep the navigation quiet at the top, then let broad colour bands distinguish key moments. The measured rhythm combines a 40px section gap with a 20px element gap; preserve the spacious feel and avoid compressing the content.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is predominantly flat, with no measured shadow system or rounded-card language. Use thin, square-cornered outlines for actions and restrained hairlines for form and footer details. Separate content through whitespace, image placement, and solid section backgrounds instead of raised panels or layered effects.

## Imagery

Mix candid venue photography—food, wine shelves, and dining interiors—with a prominent hand-drawn storefront illustration. The opening illustration sits against a flat dusty-mauve field, with deep teal linework; the photographs remain natural and richly detailed. Frame images as editorial moments, sometimes offset within generous white space, and use small restrained captions rather than decorative overlays.

## Components

### Primary navigation

A simple horizontal row with the Essie Wine wordmark and links for About, Bookings, Menu, Vouchers, Contact, and Functions; use light Roman styling.

### Outlined action

Square-cornered transparent action with a 1px solid #000000 outline, uppercase Elementa text, and generous internal breathing room.

### Editorial photo

Unframed food, bottle-shop, or dining image placed asymmetrically with surrounding white space and a small Elementa caption where needed.

### Menu panel

A two-column section pairing menu information on #e9e9e2 with wine imagery; offer menu downloads as separate outlined actions.

### Booking form

Form fields arranged in a compact two-column layout on the #aa9e54 section, using thin underlines and an outlined submit action.

### Footer information

Centered hours, address, phone, and social links on #c9a9b5, with muted #062d32 text and understated credits below.

### Measured component styles

- **Primary button** (“SAMPLE WINES BY THE GLASS”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 27px · 300 19.008px Elementa · uppercase
- **Link** (“CLICK HERE TO MAKE A BOOKING”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 27px · 300 19.008px Elementa · uppercase
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 300 19.008px Elementa · uppercase
- **Card**: background #000000 · text #000000 · radius 0px · padding 0px · 400 16px Elementa
- **Navigation item** (“About Bookings Menu Vouchers Contact Fun”): transparent background · text #000000 · radius 0px · padding 0px · 300 19px BasicCommercial LT Com Roman

## Do

- Keep the white canvas dominant between coloured section bands.
- Use Dusty Rosé and Olive Cellar as broad, flat backgrounds.
- Reserve deep teal for restrained details and illustration linework.
- Set actions in uppercase Elementa with thin rectangular outlines.
- Arrange photography asymmetrically with ample surrounding whitespace.
- Maintain a light, editorial typographic voice.

## Don't

- Do not add gradients, drop shadows, or rounded card treatments.
- Do not use bright, saturated colours beyond the measured palette.
- Do not force the image sequence into a uniform card grid.
- Do not crowd the navigation or editorial text blocks.
- Do not apply uppercase styling to every heading and paragraph.
- Do not treat illustration-only colours as broad interface surfaces.

## Agent prompt

Build a new hospitality page in the Essie Wine visual style. Use Gallery White (#ffffff) as the main canvas, with broad Dusty Rosé (#c9a9b5) and Olive Cellar (#aa9e54) bands for major moments. Set primary copy in Soft Ink (#000000); use Cellar Teal (#062d32) for restrained secondary text and illustration details. Pair light Roman editorial headings and navigation with uppercase Elementa-style labels and actions. Introduce natural food, bottle, and interior photography in an asymmetrical sequence, balanced by generous whitespace. Prefer thin square-cornered outlines, underlined form fields, and flat surfaces; do not add shadows, rounded cards, or gradients. Keep the structure comfortable and editorial, with centered copy sections, occasional two-column splits, and a quiet footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White-canvas page opening with top navigation, a two-column measured structure, and a centered illustrated venue feature. | Primary navigation, Venue introduction, Menu and booking paths | Dusty mauve illustration backdrop, Fine Roman navigation, Asymmetric editorial photography, Outlined uppercase actions |

## Source CSS custom properties (selected)

```css
--primary: blue;
--gap: 10px;
--border-radius: 0;
--font-adobecaslon: "AdobeCaslon",-apple-system,BlinkMacSystemFont,sans-serif;
--font-basiccommercial: "BasicCommercial LT Com Roman",-apple-system,BlinkMacSystemFont,sans-serif;
--font-elementa: "Elementa",Arial,sans-serif;
```

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