# Sierra Nevada design system

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

## Overview

Sierra Nevada sets a #f7f7f0 off-white ground and #1a1a1a ink, with #c64406 rust orange pill buttons and #737347 olive for oversized words. Gotham runs a 185px black weight display tracked -0.022em and 70px headings at a 0.86 line height, then drops to 17px light body. Pills are the only rounded shape.

- Theme: light
- Mood: huge type, olive, rust, outdoors, craft beer
- Category: Brewery

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#f7f7f0` | The page ground |
| Surface | `#ffffff` | Raised panels, bands and cards |
| Text | `#1a1a1a` | Primary ink, 16.2:1 on the background |
| Muted text | `#737347` | Supporting copy, 4.6:1 on the background |
| Accent | `#c64406` | Primary actions |
| Border | `#e5e5e5` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#f7f7f0`, `#1a1a1a`, `#c94000`, `#1a400e`, `#000000`, `#737347`.

## Typography

- **Gotham SSm A**: display and body, 100% of the text. Use Montserrat. Gotham is a paid typeface. Montserrat is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Gotham SSm A | 185px | 900 | 1 | -0.022em |
| Heading | Gotham SSm A | 70px | 900 | 0.86 | -0.009em |
| Subheading | Gotham SSm A | 70px | 900 | 0.86 | -0.009em |
| Body | Gotham SSm A | 17px | 300 | 1.47 | 0 |
| Small | Gotham SSm A | 14.9px | 800 | 1.43 | 0.025em |

Sizes in use, largest first: 185px, 70px, 55px, 17px, 15px, 13px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 6px, 9px, 15px, 17px, 80px.

## Shape

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

No shadows: depth comes from color and borders.

## Components

### Primary button ("BREW FINDER")

- Fill: #c64406
- Text: #ffffff, 13px at weight 700
- Border: none
- Corner: pill (9999px)
- Height: 44px, padding 12px 18px

### Secondary button ("Pause carousel")

- Fill: transparent
- Text: #ffffff, 17px at weight 300
- Border: 1px solid #fcfcf9
- Corner: pill (9999px)
- Height: 44px, padding 0px 0px

## Do

- Run display type enormous and black weight, packed tight.
- Contrast heavy headlines with a light body weight.
- Use rust orange pills for the main actions.

## Don't

- Set body copy bold: it sits at weight 300.
- Use a pure white ground.
- Round anything except buttons.

## CSS variables

```css
:root {
  --color-background: #f7f7f0;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #737347;
  --color-accent: #c64406;
  --color-border: #e5e5e5;
  --font-display: "Gotham SSm A", system-ui, sans-serif;
  --text-display: 185px;
  --weight-display: 900;
  --font-heading: "Gotham SSm A", system-ui, sans-serif;
  --text-heading: 70px;
  --weight-heading: 900;
  --font-subheading: "Gotham SSm A", system-ui, sans-serif;
  --text-subheading: 70px;
  --weight-subheading: 900;
  --font-body: "Gotham SSm A", system-ui, sans-serif;
  --text-body: 17px;
  --weight-body: 300;
  --font-small: "Gotham SSm A", system-ui, sans-serif;
  --text-small: 14.9px;
  --weight-small: 800;
  --space-1: 6px;
  --space-2: 9px;
  --space-3: 15px;
  --space-4: 17px;
  --space-5: 80px;
  --radius-1: 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.