# Ravines Wine Cellars design system

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

## Overview

Ravines pairs a white ground and black text with #383838 charcoal for buttons and panels, then lets #afb969 olive pick out a large serif numeral and italic phrases inside the body copy. Playfair Display sets 57.6px uppercase display, Montserrat runs 16.2px body, and small labels are bold uppercase tracked 0.075em. Hero buttons are outlined rectangles with 2px corners.

- Theme: light
- Mood: olive, charcoal, serif and sans, outlined buttons, finger lakes
- Category: Winery

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#383838` | Raised panels, bands and cards |
| Text | `#000000` | Primary ink, 21.0:1 on the background |
| Muted text | `#70744f` | Supporting copy, 4.9:1 on the background |
| Accent | `#383838` | Primary actions; this system has no brand hue in its controls |
| Highlight | `#afb969` | Brand color in artwork, marks and badges |
| Border | `#d8dab4` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#000000`, `#383838`, `#d8dab4`, `#afb969`, `#70744f`.

## Typography

- **Montserrat**: display and body, 91.7% of the text. Use Montserrat. Montserrat is free under the SIL Open Font License.
- **Playfair Display**: display and body, 8.3% of the text. Use Playfair Display. Playfair Display is free under the SIL Open Font License.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Playfair Display | 57.6px | 400 | 1.3 | 0 |
| Heading | Playfair Display | 23.4px | 700 | 1.3 | 0.001em |
| Subheading | Montserrat | 18px | 400 | 1.7 | 0 |
| Body | Montserrat | 16.2px | 400 | 1.3 | 0 |
| Small | Montserrat | 14.4px | 700 | 1.2 | 0.075em |

Sizes in use, largest first: 58px, 23px, 22px, 18px, 17px, 16px, 15px, 14px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 5px, 10px, 12px, 20px, 24px, 45px, 50px, 75px.

## Shape

Corner radii, smallest first: 2px, 10px, pill (9999px).

Shadows, most used first:

- `rgba(56, 96, 214, 0.25) 0px 0px 0px 0px`

## Components

### Primary button ("Facebook-square")

- Fill: #383838
- Text: #70744f, 17px at weight 400
- Border: none
- Corner: 10px
- Height: 31px, padding 0px 0px

### Secondary button ("SCHEDULE A TASTING")

- Fill: transparent
- Text: #ffffff, 16.2px at weight 700
- Border: 1px solid #d8dab4
- Corner: 2px
- Height: 42px, padding 12px 24px

## Do

- Mix italic olive serif phrases into plain sans body copy for emphasis.
- Use thin outlined buttons in a row over the hero photo.
- Set labels bold, uppercase and tracked wide.

## Don't

- Use the olive as a fill for buttons: it is reserved for type accents.
- Round the buttons beyond 2px.
- Run the serif for body text; it only appears at display sizes and in emphasis.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #383838;
  --color-text: #000000;
  --color-text-muted: #70744f;
  --color-accent: #383838;
  --color-highlight: #afb969;
  --color-border: #d8dab4;
  --font-display: "Playfair Display", system-ui, sans-serif;
  --text-display: 57.6px;
  --weight-display: 400;
  --font-heading: "Playfair Display", system-ui, sans-serif;
  --text-heading: 23.4px;
  --weight-heading: 700;
  --font-subheading: "Montserrat", system-ui, sans-serif;
  --text-subheading: 18px;
  --weight-subheading: 400;
  --font-body: "Montserrat", system-ui, sans-serif;
  --text-body: 16.2px;
  --weight-body: 400;
  --font-small: "Montserrat", system-ui, sans-serif;
  --text-small: 14.4px;
  --weight-small: 700;
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 45px;
  --space-7: 50px;
  --space-8: 75px;
  --radius-1: 2px;
  --radius-2: 10px;
  --radius-3: 9999px;
}
```

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