---
name: Athletic Brewing
description: "Worth including as a prime example of a modern DTC beverage brand using bold typography and high-contrast colors to communicate an active lifestyle."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#003A5D"
  tertiary: "#EBD923"
  neutral: "#414042"
  line: "rgba(0,58,93,1.0)"

typography:
  display:
    fontFamily: condensed-sans
    fontSize: 64px
    lineHeight: 0.9
    fontWeight: 900
    letterSpacing: "0.6px"
  display-sm:
    fontFamily: condensed-sans
    fontSize: 40px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "0.6px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.8
    fontWeight: 400
    letterSpacing: "0.6px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.17
    fontWeight: 400
    letterSpacing: "0.4px"

rounded:
  sm: 4px
  md: 16px
  lg: 16px
  pill: 10000px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A bold, nature-inspired e-commerce experience for premium non-alcoholic beer.

*A premium outdoor lifestyle brand that happens to brew beer*

## Colors

High-contrast pairing of deep navy and bright yellow for bold, energetic communication.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#003A5D`)** — uses `ink` token
- **Accent (`#EBD923`)** — uses `accent` token
- **Muted (`#414042`)** — uses `muted` token
- **Borders (`rgba(0,58,93,1.0)`)** — uses `line` token

## Typography

- **Display:** condensed-sans
- **Body:** geometric-sans

- All headings use uppercase transformation
- Maintain generous vertical spacing between elements
- Ensure high contrast between text and backgrounds

## Layout

Centered content with a prominent top navigation and full-width promotional banners.

*Rhythm:* Generous, air-driven spacing to let products breathe.

## Elevation & Depth

- rgba(0, 0, 0, 0.08) 0px 4px 16px 0px
- rgba(0, 0, 0, 0.04) 0px 2px 10px 5px
- Borders: 1px solid rgb(0, 58, 93)

## Shapes

- `sm`: 4px
- `md`: 16px
- `lg`: 16px
- `pill`: 10000px

## Components

- **button:** High-contrast primary buttons (yellow background, navy text) with pill-shaped rounding.
- **card:** Image-focused product cards with clear badges (e.g., 'Best Seller').
- **chip:** Small, pill-shaped tags used for product attributes.
- **input:** Clean, minimal form fields with standard border styling.
- **hero:** Large, split-layout or full-bleed sections with bold typography and high-quality photography.

## Do's and Don'ts

**Don't:**
- don't use thin or light font weights for headlines — screenshot shows heavy 900-weight typography
- don't use a muted or pastel color palette — screenshot shows high-saturation navy, cyan, and yellow
- don't use rounded squares or soft corners for buttons — screenshot shows extreme pill-shaped rounding
- don't use small, dense layouts with tight padding — screenshot shows generous whitespace and large touch targets
- don't use decorative serif fonts — screenshot uses clean, athletic sans-serifs
- don't use dark mode as the primary theme — screenshot uses a light background with dark text

---

## System Prompt (paste into AI agent)

```
The Athletic Brewing site is a premium DTC e-commerce platform for non-alcoholic beer. It uses a high-contrast palette of deep navy (#003A5D) and vibrant yellow (#EBD923) on white backgrounds, creating a bold and energetic feel. Typography is dominated by condensed sans-serifs for display and geometric sans-serifs for body text, almost always in uppercase for headlines. Key design features include generous spacing, pill-shaped buttons, and high-quality lifestyle photography. Critically, do not use thin font weights, muted colors, or square corners on buttons. Layouts are spacious and centered, prioritizing product visibility and clear calls to action.
```