# Athletic Brewing · Design system migration spec

> Source: https://athleticbrewing.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a modern DTC beverage brand using bold typography and high-contrast colors to communicate an active lifestyle.

## 1. Identity DNA

The Athletic Brewing design system operates like a well-organized outdoor gear shop: everything has a purpose, is built for performance, and is presented with the confident simplicity of a tool you trust. Its visual language is that of a premium outdoor lifestyle brand that happens to brew non-alcoholic beer, translating the energy and health-conscious ethos of an active life into a bold, nature-inspired e-commerce experience.

**One-liner:** A bold, nature-inspired e-commerce experience for premium non-alcoholic beer.
**Keywords:** Non-Alcoholic Beer · Athletic · Quality · Health-Conscious · Active
**Analogy:** A premium outdoor lifestyle brand that happens to brew beer

## 2. Color

Color is the system's primary signal of energy and clarity. A high-contrast pairing of deep navy and bright yellow creates a bold, almost athletic uniform for the interface, ensuring every element communicates with purpose.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#003A5D` | body text |
| `--muted` | `#414042` | placeholder |
| `--accent` | `#EBD923` | single accent |
| `--line` | `rgba(0,58,93,1.0)` | divider |

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

The principle is unmistakable: high-contrast pairing of deep navy and bright yellow for bold, energetic communication.

## 3. Typography

Typographically, the system speaks with the direct, powerful voice of a coach or a champion. It favors condensed sans-serifs for display and geometric sans-serifs for body text, with headings almost universally set in uppercase to command attention and reinforce brand presence.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 0.9 | 900 | 0.6px | Primary headlines and hero text |
| display-sm | 40px | 1.0 | 900 | 0.6px | Section headings |
| body | 16px | 1.8 | 400 | 0.6px | General body text |
| caption | 12px | 1.17 | 400 | 0.4px | Small disclaimers and metadata |

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

## 4. Spacing

The system is built on a generous, air-driven rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous, air-driven spacing to let products breathe.

## 5. Surfaces

Surfaces are treated with a light but precise touch. Subtle, diffused shadows provide just enough elevation to separate cards and interactive elements from the background, while a crisp, dark navy border defines form fields and sections with military-like clarity.

- **Radius:** sm 4px · md 16px · lg 16px · pill 10000px
- **Shadows:**
  - 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)

## 6. Layout

The layout skeleton is fundamentally centered and ordered. A prominent top navigation anchors the experience, while full-width promotional banners establish clear horizontal bands, creating a spacious gallery that prioritizes product visibility and unobstructed flow.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is employed as a functional punctuation mark, not a narrative. Transitions are quick and utilitarian—subtle shifts in shadow or color to confirm an interaction—keeping the focus on decisive action rather than spectacle.

- **Durations:** micro 100ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Quick 100ms transitions for hover states
  - 200ms ease-in-out for visibility changes
  - 300ms transitions for background colors

- **Hover:** Subtle color shifts or shadow increases on interactive elements.
- **Click:** Immediate feedback with micro-interactions on buttons.
- **Transition:** Smooth transitions for menus, modals, and state changes.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, active, and mission-driven. It communicates in bold, imperative statements and direct calls to action, avoiding passive language or complex terminology in favor of clarity that matches the product's straightforward promise.

- **Tone:** Confident, active, and mission-driven.
- **Headline style:** Bold, imperative, and often all-caps.
- **CTA style:** Direct and action-oriented, e.g., 'GET RUN WILD' or 'FIND IN STORE'.
- **Avoid:** Passive or overly formal language / Complex terminology unrelated to the product / Overly cluttered or busy visual layouts

### Don'ts
- ❌ 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

What the system deliberately avoids is as defining as what it includes: no thin weights, no muted palettes, no square corners, and no decorative serifs, committing fully to a bold, athletic, and high-contrast identity.

## System Prompt (paste into AI tool)

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