# Stone Brewing design system

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

## Overview

Stone Brewing works on #000000 black with white type and a bright #00bde8 cyan band. Brandon Grotesque sets 86px headlines at weight 800 in uppercase with a 0.93 line height. Body copy switches to Merriweather at 16px with a generous 1.88 line height, and buttons are white rectangles with black labels.

- Theme: dark
- Mood: dark, cyan, heavy sans, serif body, craft beer
- Category: Brewery

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#000000` | The page ground |
| Surface | `#060606` | Raised panels, bands and cards |
| Text | `#ffffff` | Primary ink, 21.0:1 on the background |
| Muted text | `#6f6f6f` | Supporting copy, 4.2:1 on the background |
| Accent | `#00bde8` | Primary actions |
| Border | `#363636` | Hairlines and dividers |

Full palette, most used first: `#000000`, `#ffffff`, `#00bde8`, `#6f6f6f`, `#0db14b`, `#333333`, `#0d6efd`.

## Typography

- **Merriweather**: display and body, 71.3% of the text. Use Merriweather. Merriweather is free under the SIL Open Font License.
- **brandon-grotesque**: display and body, 28.7% of the text. Use Outfit. Brandon Grotesque is a paid typeface. Outfit is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | brandon-grotesque | 86px | 800 | 0.93 | 0 |
| Heading | brandon-grotesque | 60px | 800 | 1.17 | 0 |
| Subheading | brandon-grotesque | 30px | 800 | 1 | 0 |
| Body | Merriweather | 16px | 400 | 1.88 | 0 |
| Small | Merriweather | 14px | 400 | 1.5 | 0 |

Sizes in use, largest first: 86px, 60px, 30px, 24px, 18px, 16px, 14px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 6px, 8px, 10px, 12px, 15px, 20px, 22px, 24px, 40px.

## Shape

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

Shadows, most used first:

- `rgba(0, 0, 0, 0.2) 0px 5px 5px 0px`

## Components

### Primary button ("LEARN MORE")

- Fill: #ffffff
- Text: #000000, 18px at weight 700
- Border: none
- Corner: 0px
- Height: 67px, padding 20px 40px

## Do

- Pair heavy uppercase headlines with a serif body on black.
- Give body copy a very open line height, near 1.9.
- Use one bright cyan for bands and accents.

## Don't

- Round the buttons: they are white rectangles.
- Use the cyan for body text.
- Lighten the ground; the page is pure black.

## CSS variables

```css
:root {
  --color-background: #000000;
  --color-surface: #060606;
  --color-text: #ffffff;
  --color-text-muted: #6f6f6f;
  --color-accent: #00bde8;
  --color-border: #363636;
  --font-display: "brandon-grotesque", system-ui, sans-serif;
  --text-display: 86px;
  --weight-display: 800;
  --font-heading: "brandon-grotesque", system-ui, sans-serif;
  --text-heading: 60px;
  --weight-heading: 800;
  --font-subheading: "brandon-grotesque", system-ui, sans-serif;
  --text-subheading: 30px;
  --weight-subheading: 800;
  --font-body: "Merriweather", system-ui, sans-serif;
  --text-body: 16px;
  --weight-body: 400;
  --font-small: "Merriweather", system-ui, sans-serif;
  --text-small: 14px;
  --weight-small: 400;
  --space-1: 6px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 20px;
  --space-7: 22px;
  --space-8: 24px;
  --space-9: 40px;
  --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.