> Atmospheric study inspired by Coca-Cola's publicly visible design language. Void Energy is not affiliated with, endorsed by, sponsored by, or licensed by Coca-Cola. The downloadable atmosphere file contains color, motion, and typographic-rhythm tokens only — no brand logos, marks, or proprietary assets. All trademarks are the property of their respective owners.

---

---
name: Coca-Cola
version: alpha
description: Coca-Cola's iconic classic-red reading — canonical Coke Red #F40009 (Pantone-anchored, verified against Coca-Cola.com SVG logo) on near-white canvas. The "Spencerian-on-paper" / commercial-poster register recast as a flat-light atmosphere. Coke Black #1E1E1E text rhythm. Distinguished from modern-black by mode + voice (heritage marketing light vs matte-can dark) and from vintage-script by physics (modern flat vs porcelain-sign retro).

colors:
  primary: "#F40009"
  secondary: "#a00006"
  neutral: "#828080"
  surface: "#ffffff"
  surface-container: "#fbfafa"
  on-surface: "#1E1E1E"
  on-surface-variant: "#4a4a4a"
  outline: "#FDCCCE"
  error: "#a60000"

typography:
  display-lg:
    fontFamily: "'Inter', sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-lg:
    fontFamily: "'Inter', sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.015em"
  headline-md:
    fontFamily: "'Inter', sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.01em"
  headline-sm:
    fontFamily: "'Inter', sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
  body-lg:
    fontFamily: "'Inter', sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: "'Inter', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "'Inter', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: "'Inter', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "0.02em"
  label-sm:
    fontFamily: "'Inter', sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "0.02em"

spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 48px
  "2xl": 64px
  "3xl": 96px
  "4xl": 128px
  "5xl": 160px

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
    padding: 16px
    typography: "{typography.label-md}"
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-container}"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
    padding: 16px
    typography: "{typography.label-md}"
  button-tertiary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface-variant}"
    rounded: "{rounded.full}"
    padding: 16px
    typography: "{typography.label-md}"
  text-disabled:
    textColor: "{colors.neutral}"
    typography: "{typography.body-sm}"
  button-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
    padding: 16px
    typography: "{typography.label-md}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 12px
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 32px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
---

# Coca-Cola

Coca-Cola's iconic classic-red reading — canonical Coke Red #F40009 (Pantone-anchored, verified against Coca-Cola.com SVG logo) on near-white canvas. The "Spencerian-on-paper" / commercial-poster register recast as a flat-light atmosphere. Coke Black #1E1E1E text rhythm. Distinguished from modern-black by mode + voice (heritage marketing light vs matte-can dark) and from vintage-script by physics (modern flat vs porcelain-sign retro).

This document describes the **Light Edition** atmosphere (`coca-cola-classic-red`) — a light/flat reading of Coca-Cola produced by the Void Energy design system. Render it live at https://voidenergy.dev/atmospheres/coca-cola, or boot it in any Void Energy app:

```js
voidEngine.loadExternal('https://voidenergy.dev/atmospheres/coca-cola/classic-red.json');
```

## Overview

Coca-Cola's **Light Edition** reading. The mood: opaque surfaces with crisp shadows; the mode: light. Headings are set in Open Sans; body copy is Open Sans.

Two principles govern everything below:

1. **Generous whitespace over dense packing.** Surfaces breathe. When a gap feels tight, go one size up rather than down. Void Energy's spacing scale is intentionally wide (8 → 160px).
2. **Sentence case controls over uppercase shouting.** Buttons, inputs, and labels use natural sentence case with medium weight by default. Uppercase is an intentional, infrequent choice — never applied to metrics, chrome, or dashboard cards by default.

## Colors

The palette is built on three layers:

- **Primary (`#F40009`)** — the single interactive accent. Used for buttons, links, focused inputs, and selection states. Do not repurpose for decoration.
- **Secondary (`#a00006`)** — companion accent for secondary actions, charts, and data-series 2. Always distinguishable from primary; never a competing focal point.
- **Surface stack** — three background layers that convey depth:
  - `surface-container` (`#fbfafa`) — the page canvas.
  - `surface` (`#ffffff`) — floating cards, panels, and chrome.
  - `outline` (`#FDCCCE`) — borders and dividers. Low-contrast by design: borders should whisper structure, not shout.

Text forms a descending-contrast hierarchy:

- `on-surface` (`#1E1E1E`) — primary text. WCAG AA against surface layers.
- `on-surface-variant` (`#4a4a4a`) — secondary text, captions, metadata.
- `neutral` (`#828080`) — disabled states and tertiary hints only.

Semantic signal:

- `error` (`#a60000`) — destructive actions and validation failures. Reserved for genuinely negative states; not for warnings or info.

## Typography

This atmosphere pairs **Open Sans** for headings and **Open Sans** for body. The full nine-level scale (display through label) is in the frontmatter `typography` block.

### Brand typography overrides

Coca-Cola's identity carries explicit overrides on the typographic axis. Anything not listed inherits the system default.

- **Display weight** (h1, h2): `800`
- **Heading weight** (h3, h4): `700`
- **Display tracking** (h1, h2): `0.02em`
- **Heading tracking** (h3, h4): `0.01em`

## Layout & Spacing

Void Energy uses an **8px base grid** with a wide scale:

- **Component level** (tight): xs (8), sm (16), md (24), lg (32)
- **Layout level** (accelerated): xl (48), 2xl (64), 3xl (96), 4xl (128), 5xl (160)

Apply along two axes:

1. **Surface padding floor.** Floating surfaces use `lg` (32px) minimum padding and `lg` inner gaps. Sunk/inset surfaces drop to `md` (24px). Never use `sm` or `xs` on a floating card.
2. **Layout gaps.** Page sections use `2xl` (64px) between them. Content blocks inside a section use `xl` (48px). Grouped controls use `md` (24px). Tight couplings (label → input, icon + text) use `xs` (8px).

The scale density-scales at runtime across five presets: Compact (×0.8), Cozy (×0.9), Standard (×1), Roomy (×1.1), Airy (×1.2). Static snapshots assume Standard.

## Elevation & Depth

This is a **flat-physics** atmosphere. Surfaces are opaque (`#ffffff`); shadows are minimal (5–10% opacity in light mode, 30–40% in dark mode for visibility). Hover has no Y translation and no scale by default — flat physics expresses interactivity through tint changes, not lift.

### Brand motion overrides

Coca-Cola's identity carries explicit overrides on the motion axis. Speeds are in milliseconds; easings are CSS `<easing-function>` values. Anything not listed inherits the active physics preset.

- `--ease-spring-bounce`: `cubic-bezier(0.34, 1.56, 0.64, 1)`

## Shapes

Coca-Cola's radii reflect the brand's shape language. The active scale:

- `rounded.sm`: 4px
- `rounded.md`: 8px
- `rounded.lg`: 16px
- `rounded.xl`: 24px
- `rounded.full`: 9999px

## Components

The frontmatter `components` block covers the canonical atoms. Notes on applying them:

### Buttons

- `button-primary` — primary action, anchored on `#F40009`. One per view.
- `button-secondary` — companion action, on `#a00006`.
- `button-tertiary` — quietest button; for cancel, dismiss, tertiary navigation.

### Inputs & Cards

- `input` — surface background, `body-md` typography, 12px padding. Native `<input>` / `<select>` / `<textarea>` with SCSS providing the visual treatment.
- `card` — surface background, generous 32px padding (`lg`). The default container for content groups.

## Do's and Don'ts

**Do:**

- Use `primary` (`#F40009`) for exactly one action per view.
- Default to sentence case on buttons and labels. Uppercase is a choice, not a default.
- Maintain WCAG AA contrast (4.5:1 for body text, 3:1 for UI components).
- Apply `lg` (32px) padding minimum to cards.
- Wrap native `<button>`, `<input>`, `<select>` rather than rebuilding interaction from `<div>`.

**Don't:**

- Don't substitute Coke Red — canonical is #F40009 (Pantone-verified against Coca-Cola.com SVG); approximations like #e61a1a were older PMS 484 derivations.
- Don't substitute canvas with cream — Coke's heritage commercial pages use near-white #fbfafa, not warm cream.
- Don't drop the Rule 8 accepted red/color-error overlap — context disambiguates without override.
- Don't repurpose `primary` (`#F40009`) for decoration. It is a load-bearing interaction signal.
- Don't use `error` (`#a60000`) for warnings. Error is reserved for destructive and failure states.
- Don't use `neutral` for body text — it is for disabled states and tertiary hints only.

## Responsive Behavior

Void Energy is mobile-first. Breakpoints:

- **mobile** 0px (default)
- **tablet** 768px
- **desktop** 1024px

Spacing, control heights, and typography all density-scale at runtime. Touch targets have a floor: 44px on coarse pointers (mobile/tablet), 36px on fine pointers (desktop).

## Agent Prompt Guide

When asked to build UI "in the Light Edition aesthetic," default to:

- **Backgrounds:** `#fbfafa` for the page canvas; `#ffffff` for floating cards.
- **Text:** `#1E1E1E` for primary, `#4a4a4a` for secondary.
- **Accents:** `#F40009` for the single most important action; `#a00006` for companion actions.
- **Radii:** 8px on surfaces and inputs; pill on buttons.
- **Padding:** 32px on cards, 16px on buttons, 12px on inputs.
- **Typography:** Open Sans for headings; Open Sans for body and labels.

## Sources

The Light Edition palette and shape language derive from publicly visible Coca-Cola surfaces:

- https://www.coca-cola.com
- https://www.coca-colacompany.com
- https://en.wikipedia.org/wiki/Coca-Cola

## License

Void Energy ships under the Business Source License (BSL 1.1). Source is visible; production use requires a license from DGRS Labs until the four-year auto-convert clause elapses. This DESIGN.md file itself is distributed under the same license as the repository it lives in.

This atmosphere is an atmospheric study of publicly visible Coca-Cola design language. Void Energy is not affiliated with, endorsed by, sponsored by, or licensed by Coca-Cola. The atmosphere file contains color, motion, and typographic-rhythm tokens only — no brand logos, marks, or proprietary assets.

## The Full System

This file describes the **Light Edition** atmosphere as a single snapshot. The Void Energy runtime is larger:

- **Coca-Cola variants** — see https://voidenergy.dev/atmospheres/coca-cola for the full set of atmospheres in this brand (alternate modes, eras, or interpretations).
- **Three physics presets:** glass (translucent + blur), flat (opaque + crisp shadows), retro (CRT phosphor + steps motion). Physics controls blur, border width, motion, and radius behavior — never color.
- **Two color modes:** light and dark. Glass requires dark; flat and retro work with both.
- **Density scaling:** Compact / Cozy / Standard / Roomy / Airy (×0.8 – ×1.2), applied multiplicatively to the spacing scale.
- **Component library:** Svelte 5 components (Runes) with a native-first pattern — wrappers around `<button>`, `<input>`, `<select>`, `<dialog>`, etc.
- **JSON download:** https://voidenergy.dev/atmospheres/coca-cola/classic-red.json is a portable artifact. Boot it in any Void Energy app via `voidEngine.loadExternal()`, or hand it to any tool that consumes the @void-energy/atmosphere-spec format.

For the full installable system, see the Void Energy repository. For agent-to-agent communication outside the live runtime, this DESIGN.md is the authoritative snapshot of the Coca-Cola Light Edition aesthetic.