Sierra Nevada
Huge olive and black uppercase headlines on off-white, with rust orange pills.
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.
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.
Avoid
- Set body copy bold: it sits at weight 300.
- Use a pure white ground.
- Round anything except buttons.
Colors
Color roles
Background
#f7f7f0The page ground
Surface
#ffffffRaised panels, bands and cards
Text
#1a1a1aPrimary ink, 16.2:1 on the background
Muted text
#737347Supporting copy, 4.6:1 on the background
Accent
#c64406Primary actions
Border
#e5e5e5Hairlines and dividers
Typography
Type
Gotham SSm Adisplay and body, 100% of the text
Use Montserrat. Gotham is a paid typeface. Montserrat is a free stand-in, not a match.
Systems that ship
Hierarchy at a glance
A quieter supporting head
Body copy carries the explanation, so it has to stay readable at length on every screen.
Labels, captions and metadata
Sizes in use: 185px / 70px / 55px / 17px / 15px / 13px
Spacing
Spacing
No single base unit: these are the values the page repeats.
Shape
Corners and depth
Components
Buttons and cards
Rebuilt here from the measured values, not copied from the site's code.
BREW FINDERPause carousel
DESIGN.md
Hand this to your AI coding tool
Drop it in your repo as DESIGN.md and point Claude Code, Cursor or Codex at it before you ask for a page.
# 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.
Sierra Nevada and its marks belong to their owner. This page is an independent analysis of the public website, measured on 2026-10-06. We're not affiliated with or endorsed by Sierra Nevada.