# Duckhorn Vineyards design system

> Captured from https://www.duckhorn.com/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/duckhorn/). An independent analysis for reference: Duckhorn Vineyards and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Duckhorn grounds its page on #f7f6f5 off-white with #2a2826 ink and uses #1e3329 deep green for buttons and borders. EB Garamond does almost everything, from a 60px display line to 18px body, with Public Sans kept for small uppercase button labels. Corners stay square, and italic serif words lead section titles.

- Theme: light
- Mood: green, serif, elegant, napa, square buttons
- Category: Winery

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#f7f6f5` | The page ground |
| Surface | `#f2efea` | Raised panels, bands and cards |
| Text | `#2a2826` | Primary ink, 13.6:1 on the background |
| Accent | `#1e3329` | Primary actions; this system has no brand hue in its controls |
| Border | `#1e3329` | Hairlines and dividers |

Full palette, most used first: `#f7f6f5`, `#2a2826`, `#f2efea`, `#1e3329`, `#ffffff`.

## Typography

- **EB Garamond**: display and body, 77.5% of the text. Use EB Garamond. EB Garamond is free under the SIL Open Font License.
- **Public Sans**: display and body, 22.5% of the text. Use Public Sans. Public Sans is free under the SIL Open Font License.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | EB Garamond | 60px | 400 | 1.1 | 0 |
| Heading | EB Garamond | 30px | 400 | 1.35 | 0 |
| Subheading | EB Garamond | 17px | 400 | 1.35 | 0 |
| Body | EB Garamond | 18px | 400 | 1.4 | 0 |
| Small | EB Garamond | 17px | 400 | 1.35 | 0 |

Sizes in use, largest first: 60px, 30px, 24px, 18px, 17px, 16px, 14px, 13px, 12px.

## Spacing

Values sit on a 4px grid.
Values in use: 4px, 12px, 16px, 20px, 24px, 48px.

## Shape

Corners are square throughout.

Shadows, most used first:

- `rgba(0, 0, 0, 0.03) 0px 0px 20px 0px`

## Components

### Primary button ("+ QUICK ADD")

- Fill: #1e3329
- Text: #f2efea, 12px at weight 400
- Border: none
- Corner: 0px
- Height: 45px, padding 7px 20px

### Secondary button ("EXPLORE OUR WINES")

- Fill: #f3efeb
- Text: #2a2826, 13px at weight 400
- Border: 1px solid #dcd8d6
- Corner: 0px
- Height: 36px, padding 7px 20px

## Do

- Let one serif carry display and body, and keep a sans only for button labels.
- Use the deep green for solid buttons and keylines.
- Open section titles with an italic word.

## Don't

- Introduce a bright accent: the palette is off-white, ink and one green.
- Round the buttons; every corner is square.
- Set body copy in the sans.

## CSS variables

```css
:root {
  --color-background: #f7f6f5;
  --color-surface: #f2efea;
  --color-text: #2a2826;
  --color-accent: #1e3329;
  --color-border: #1e3329;
  --font-display: "EB Garamond", system-ui, sans-serif;
  --text-display: 60px;
  --weight-display: 400;
  --font-heading: "EB Garamond", system-ui, sans-serif;
  --text-heading: 30px;
  --weight-heading: 400;
  --font-subheading: "EB Garamond", system-ui, sans-serif;
  --text-subheading: 17px;
  --weight-subheading: 400;
  --font-body: "EB Garamond", system-ui, sans-serif;
  --text-body: 18px;
  --weight-body: 400;
  --font-small: "EB Garamond", system-ui, sans-serif;
  --text-small: 17px;
  --weight-small: 400;
  --space-1: 4px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 48px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.