---
title: "Altitude Beverages design system"
variant: extended
source: https://altitudebev.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/altitudebev-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Altitude Beverages · Design System

> A quiet, editorial stage for functional drinks

**Theme:** light · **Industry:** food-beverage · **Source:** https://altitudebev.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Altitude Beverages pairs oversized editorial typography with immersive, colorful product photography to give its non-alcoholic drinks a premium, lifestyle-led presence. A restrained white interface and a long blue-gray gradient transition keep the page spacious and let the cans carry most of the color.

## North star

Keep the interface quiet and spacious so editorial typography and vivid, full-bleed drink photography lead every moment.

## Overview

The page balances a clean white canvas with image-led bursts of saturated color. The opening composition places oversized, rounded product photographs around a central scene in orange and botanical tones; the measured screenshot colors there belong largely to photography, not a flat brand palette. EditorialNew supplies the delicate, high-contrast feel of the large headline and supporting copy, while DepartureMono makes navigation, labels, and actions feel precise and technical. HelveticaNowDisplay handles compact captions and the oversized footer statement. Layout is intentionally spacious: a long blue-gray gradient occupies much of the scroll before the compact three-card product display, followed by a wide photographic newsletter panel and a loose three-column footer. Soft pill navigation and rounded cards contrast with the fine typography. Keep surfaces largely flat, use restrained gray for product-card backdrops, and let photography—not decorative UI—provide the strongest color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and negative space around the hero, product cards, newsletter, and footer. |
| Mist Gray | `#d9d9d9` | `--color-mist-gray` | surface | Neutral product-card surfaces and soft navigation or button backdrops; not the main page canvas. |
| Glacier Tint | `#e0fcff` | `--color-glacier-tint` | semantic | Light text color in measured styles; use sparingly where pale lettering overlays a dark image. |
| Footer Ash | `#cdcdce` | `--color-footer-ash` | neutral | Muted footer text and secondary copy. |
| Night Ink | `#07060b` | `--color-night-ink` | brand | Near-black action text and the darkest starting tone in the measured blue-gray gradient. |
| Midnight Slate | `#0c0c14` | `--color-midnight-slate` | brand | Early dark stop in the long blue-gray gradient visible below the hero. |
| Dusk Navy | `#191d2d` | `--color-dusk-navy` | brand | Deep blue gradient stop that transitions the page from dark into slate. |
| Blue Charcoal | `#22283e` | `--color-blue-charcoal` | brand | Dark slate gradient stop in the extended transition below the opening imagery. |
| Storm Slate | `#35445b` | `--color-storm-slate` | brand | Mid-dark blue-gray gradient stop. |
| Harbor Blue | `#456075` | `--color-harbor-blue` | brand | Muted blue gradient stop between deep slate and softer blue. |
| Mountain Blue | `#57778c` | `--color-mountain-blue` | brand | Mid-gradient blue-gray, part of the long atmospheric transition. |
| Haze Blue | `#68899c` | `--color-haze-blue` | brand | Lighter blue-gray gradient stop. |
| Glacier Blue | `#7996a4` | `--color-glacier-blue` | brand | Soft blue-gray gradient stop as the background lightens. |
| Cloud Slate | `#8ca2af` | `--color-cloud-slate` | brand | Pale slate gradient stop in the lower half of the transition. |
| Silver Blue | `#a0b2bc` | `--color-silver-blue` | brand | Light blue-gray gradient stop approaching the white canvas. |
| Frost Blue | `#adbec6` | `--color-frost-blue` | brand | Lightest measured blue-gray gradient stop before the transition fades toward white. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#d9d9d9` (Mist Gray) · `--color-text` → `#e0fcff` (Glacier Tint) · `--color-text-muted` → `#cdcdce` (Footer Ash) · `--color-border` → `#d9d9d9` (Mist Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e0fcff` | `#ffffff` | 1.07:1 | fail |
| `#e0fcff` | `#d9d9d9` | 1.31:1 | fail |
| `#cdcdce` | `#ffffff` | 1.59:1 | fail |
| `#cdcdce` | `#d9d9d9` | 1.13:1 | fail |

### Gradients

- `linear-gradient(rgb(6, 5, 10) 0%, rgb(12, 12, 20) 5.43%, rgb(25, 29, 45) 12.1%, rgb(34, 40, 62) 18.86%, rgb(53, 68, 91) 25%, rgb(69, 96, 117) 32.3%, rgb(87, 119, 140) 38.7%, rgb(104, 137, 156) 44.45%, rgb(121, 150, 164) `
- `linear-gradient(rgb(217, 217, 217) 0%, rgba(199, 76, 23, 0.7) 100%)`
- `linear-gradient(rgba(217, 217, 217, 0) 0%, rgba(168, 43, 58, 0.7) 100%)`
- `linear-gradient(rgba(217, 217, 217, 0) 0%, rgba(190, 193, 58, 0.7) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| EditorialNew | `--font-body` | webfont | 200 | Large hero headline and refined supporting editorial copy. | Cormorant Garamond |
| DepartureMono | `--font-mono` | webfont | 400 | Uppercase navigation, buttons, product labels, and compact utility text. | Space Mono |
| HelveticaNowDisplay | `--font-display` | webfont | 500, 400, 800 | Captions and bold oversized display lettering, especially the footer statement. | Inter |

- **EditorialNew:** Light weight, close tracking, and delicate editorial contrast; use sentence case.
- **DepartureMono:** Monospaced, regular weight, uppercase for controls and navigation; keep the tone technical and crisp.
- **HelveticaNowDisplay:** Use regular or heavy weights; captions are uppercase and tightly tracked.

### Type scale — Custom (ratio ≈ 2.154, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 160px | 800 | 1 | -0.05em | — | HelveticaNowDisplay | Oversized bold footer statement and prominent display moments. |
| h1 | 60px | 200 | 1.06 | -0.025em | — | EditorialNew | Large, light editorial hero headline. |
| h2 | 40px | 200 | 1.06 | -0.025em | — | EditorialNew | Editorial section headings and prominent product messaging. |
| body | 16px | 200 | 1.06 | -0.025em | — | EditorialNew | Light-weight product and supporting descriptive copy. |
| caption | 11px | 400 | 1 | -0.05em | uppercase | HelveticaNowDisplay | Compact uppercase labels and small supporting captions. |
| button | 14px | 400 | 1 | 0 | uppercase | DepartureMono | Uppercase monospaced CTA labels. |
| nav | 14px | 400 | 1.43 | -0.071em | uppercase | DepartureMono | Uppercase monospaced links in the floating navigation. |
| code | 14px | 400 | 1.43 | 0 | — | DepartureMono | Utility-style monospaced text where technical details appear. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 7, 8, 9, 12, 16, 17, 20, 24, 28, 36, 56, 64 px.
- Section rhythm 360px · element gap 6px · card padding 64px · max content width 1432px.

Use a spacious, full-width composition with the measured page max width of 1432px. The hero is a central image framed by narrow product panels, with navigation floating over the imagery. Preserve the unusually long gradient-led interval before the product showcase. Set product cards in a three-item row, then use a full-bleed newsletter image and a three-column footer. Keep section rhythm generous (measured section gap 360px), align text with its image or card, and avoid dense content clusters.

## Shape & elevation

- Radius: button `9999px` · card `44px` · nav `9999px` · link `44px` · xs `44px` · pill `9999px`
- No box shadows measured: the page is flat.

The measured system has no shadows, so rely on image contrast and overlapping composition rather than drop-shadow effects. Keep card surfaces flat and rounded, with 44px card corners and pill-shaped navigation or buttons. The hero’s layered photographs and floating text panels create depth; fine borders are secondary and should not become a repeated decorative motif.

## Imagery

Use high-quality lifestyle and product photography as the visual anchor: close views of cans, citrus, botanicals, and people sharing drinks. The hero uses tall side panels framing a larger central scene, with rounded corners and visible can detail. Product cards isolate each can against pale gray. The newsletter returns to a wide photographic scene with a translucent central overlay. Avoid illustration-led substitutes.

## Components

### Floating navigation

A translucent, pill-shaped control over the hero image with uppercase DepartureMono links for Shop, About, Find Us, and Cart.

### Hero composition

A large central lifestyle photograph flanked by tall product-image panels; overlay a light EditorialNew headline, small monospaced kicker, and white pill Shop button.

### Product cards

Three rounded gray cards featuring individual cans and compact product names and flavor descriptions; measured card radius is 44px.

### Newsletter panel

A full-width lifestyle photograph with a softly translucent centered panel, short signup message, and a minimal uppercase email field.

### Footer

A loose three-column layout for contact, social, policy, and account links, finished with a very large bold display statement.

### Pill CTA

Compact uppercase monospaced action text in a fully rounded button; Shop uses a pale background and near-black lettering.

### Measured component styles

- **Primary button** (“SHOP”): background #fafafa · text #07060b · radius 100px · padding 16px 28px · 400 14px DepartureMono · uppercase
- **Secondary button** (“TALK(AT)ALTITUDE.BEV”): background #d9d9d9 · text #fafafa · radius 100px · padding 17px 28px · 400 14px DepartureMono · uppercase
- **Link** (“ROSEMARY SPRITZ Herbal \| Bittersweet \| R”): background #d9d9d9 · text #fafafa · radius 44px · padding 36px 20px · 400 16px ui-sans-serif
- **Input**: transparent background · text #fafafa · radius 0px · padding 0px · 400 12px DepartureMono · uppercase
- **Card** (“PRICKLY PEAR MARGARITA Citrus \| Crisp \| ”): background #d9d9d9 · text #fafafa · radius 44px · padding 64px · 400 16px ui-sans-serif
- **Navigation item** (“SHOP ABOUT FIND US CART (0)”): transparent background · text #f9f9f9 · radius 0px · padding 0px · 400 14px DepartureMono · uppercase

## Do

- Let product photography supply the strongest color.
- Keep the canvas white and the interface visually quiet.
- Use EditorialNew for expressive, light editorial headlines.
- Set navigation and control labels in uppercase mono.
- Use rounded image panels and pill-shaped controls.
- Preserve generous whitespace and long section transitions.

## Don't

- Do not turn the hero’s orange photography into a flat site-wide brand color.
- Do not add shadows absent from the measured system.
- Do not crowd the page with dense grids or excessive copy.
- Do not replace the product photography with generic illustrations.
- Do not make every text style bold or oversized.
- Do not use decorative borders as a substitute for image-led depth.

## Agent prompt

Build a new Altitude Beverages page with a quiet white canvas (#ffffff, Gallery White) and generous breathing room. Use EditorialNew or a close light editorial serif for large headlines, DepartureMono or Space Mono for uppercase navigation and actions, and HelveticaNowDisplay or Inter for captions and bold display text. Let rich product photography dominate; treat vivid orange and botanical tones as image content rather than interface colors. Use Mist Gray (#d9d9d9) for restrained product-card surfaces and the measured blue-gray gradient sequence from Night Ink (#07060b) through Frost Blue (#adbec6) only for atmospheric transitions. Favor rounded image panels, pill controls, flat surfaces, and layered photography without shadows. Keep content sparse, arrange products in a three-card row, and close with a wide photographic signup panel and airy footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Central full-height photographic hero framed by two narrow product-image panels; floating pill navigation and overlay copy. | floating navigation, primary shop CTA, product-focused storytelling | rounded photo panels, editorial headline, pill navigation, monospaced labels |
| 2 | product-grid | Three rounded product cards arranged in a row, with a compact section label and supporting product details. | product discovery, direct product links | pale gray card surfaces, rounded corners, can photography, concise flavor labels |
| 3 | newsletter | Full-width lifestyle photograph with a translucent centered signup panel. | email capture, first-order incentive | photographic background, overlay panel, minimal email field |
| 4 | footer | Loose three-column information area followed by an oversized display statement. | social navigation, policy and account links, contact link | uppercase utility links, muted text, bold display lettering |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/altitudebev-com