---
version: alpha
name: Tonal
description: Premium home strength-training system built on a near-black earthy canvas with electric mint CTAs — GT America Expanded at black-weight uppercase delivers athletic authority, while the deep charcoal-olive surface projects hardware-grade confidence.

colors:
  # Primary canvas — near-black earthy foundation
  background: "#1c1c1a"           # dominant charcoal-olive canvas (rgb 28,28,26)
  background-deep: "#000000"      # pure black used in deep hero/overlay sections
  surface: "#2b2e35"              # slightly lifted dark surface for cards and modals (rgb 43,46,53)
  surface-light: "#f4f4f4"        # light section contrast breaks (rgb 244,244,244)
  surface-white: "#ffffff"        # white card/input surfaces in light sections

  # Ink / text
  ink: "#f7f7f7"                  # was #1c1c1a (= same hex as background → 1:1 body-contrast); fixed to match on-dark (#f7f7f7) — dark-canvas brand, ink is primary text on the dark canvas; #f7f7f7 on #1c1c1a = 15.9:1
  on-dark: "#f7f7f7"              # near-white primary text on dark canvas (rgb 247,247,247)
  on-dark-muted: "#747576"        # mid-gray secondary text on dark (--atlas-text-placeholder)
  on-surface-light: "#1c1c1a"     # dark ink on light section breaks

  # Brand accent — electric mint / teal
  primary: "#11ddc4"              # electric mint — primary CTAs, "DISCOVER TONAL", focus outlines
  on-primary: "#1c1c1a"           # dark text on mint buttons (legible on this luminous teal)
  primary-hover: "#0ebca7"        # slightly deeper mint on hover (extracted from dembrandt hover)
  primary-container: "#0a3d36"    # deep teal tint for badge backgrounds  /* estimated */

  # Interactive / link states
  link-hover: "#11ddc4"           # mint underline on hover links (rgb 17,221,196 from JSON)

  # Semantic
  error: "#be2119"                # --atlas-text-negative (extracted from CSS vars)
  success: "#38a169"              # --fides-overlay-gpc-applied-background-color (extracted)

  # Borders
  border: "#ebebeb"               # light dividers in light sections (rgb 235,235,235)
  border-dark: "#2b2e35"          # dark surface dividers (surface color reused as border)

  # Focus ring
  focus-ring: "#41a1e6"           # --atlas-focus-outline-color base (rgba 65,161,230 — flattened)

  # Shadow tints
  shadow-soft: "#1a1a1a"          # was rgba(0,0,0,0.1) — dark diffused elevation shadow

typography:
  display-hero:
    fontFamily: "GT America Expanded, Arial Black, Arial, sans-serif"
    fontSize: 96px
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -1px
  display:
    fontFamily: "GT America Expanded, Arial Black, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "GT America Expanded, Arial Black, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.3px
  heading-sub:
    fontFamily: "GT America Expanded, Arial Black, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.2px
  heading-card:
    fontFamily: "GT America Expanded, Arial Black, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: 0px
  body-large:
    fontFamily: "GT America, Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body:
    fontFamily: "GT America, Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-medium:
    fontFamily: "GT America, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  button-ui:
    fontFamily: "GT America, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.5px
  nav-link:
    fontFamily: "GT America, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  label-upper:
    fontFamily: "GT America Expanded, Arial Black, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "GT America, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  # Primary CTA — electric mint fill, dark text
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  # Secondary CTA — dark fill, white text (on dark sections)
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
    border: "1px solid {colors.on-dark}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"

  # Ghost CTA — black fill, white text (on dark sections, dark background variant)
  button-ghost:
    backgroundColor: "{colors.background-deep}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"

  # Showroom / accent CTA — mint border (on dark nav)
  button-accent-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
    border: "1px solid {colors.primary}"
  button-accent-outline-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  # Navigation bar — dark sticky header
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 16px 24px

  # Feature card — dark surface with content
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.md}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"

  # Light content card
  card-light:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.on-surface-light}"    # was {colors.ink}; after ink changed to #f7f7f7, use on-surface-light (#1c1c1a) for dark text on white cards = 17.1:1
    rounded: "{rounded.md}"
    padding: 24px

  # Email / text input (light context)
  input:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.on-surface-light}"    # was {colors.ink}; after ink changed to #f7f7f7, use on-surface-light (#1c1c1a) = 17.1:1
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    border: "1px solid {colors.border-dark}"
  input-focus:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.on-surface-light}"    # was {colors.ink}
    border: "1px solid {colors.primary}"

  # Promo badge / label chip
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
---

# Tonal Design System

## Overview

Tonal is fitness hardware that looks like a piece of modern furniture — and its design system is built to match that premise. The dominant canvas is a deep charcoal-olive black (`{colors.background}`), a near-black with just enough warm undertone to feel tactile rather than corporate. Against it, the interface deploys the kind of restraint you'd expect from an industrial designer, not a performance-supplement brand. Photography carries the emotional weight; typography and color carry the product confidence.

The typographic choice is the system's most distinctive decision. GT America Expanded at weight 900 — full Black — is used for all display and heading text, always uppercase, always tight with sub-1.0 line height. At 96px, the letterforms have a compressed, poster-quality density. At 32px on a card heading, they read as hardware spec labels. There's no serif alternate, no editorial variable-weight trick — just maximum-weight grotesque expansion as the single expressive register. GT America Standard (Regular and Medium) handles body copy and UI labels at readable weights without competing with the display voice.

The brand accent is electric mint (`{colors.primary}`) — a luminous `#11ddc4` teal-green that sits in the narrow band between cyan and turquoise. It appears exclusively on primary CTAs ("DISCOVER TONAL," "GET THE CODE," "VISIT A SHOWROOM" border states) and the occasional focus outline. It never appears decoratively. The restraint is intentional: a home gym that costs north of $3,000 earns attention through confidence, not color quantity.

**Key Characteristics:**
- Charcoal-olive canvas (`{colors.background}`) as the dominant dark foundation — warm enough to feel premium, dark enough to disappear behind product photography
- GT America Expanded Black at weight 900 for all display text — uppercase, tight line height (0.9), compressed print-poster density
- Single chromatic accent: electric mint (`{colors.primary}`) reserved strictly for primary CTAs and active border states
- Sharp-edge shapes — buttons and most UI elements use `{rounded.none}` (0px radius), conveying hardware precision
- Typography runs uppercase on all display levels, lowercase on body and UI labels — a clean register split
- 8px grid base with generous large-scale spacing (96–128px) for hero sections matching the physical scale of the product
- Dark-dominant experience alternates with `{colors.surface-light}` contrast bands for social proof, specs, and accessories
- Subtle card elevation via soft drop shadows — `rgba(0,0,0,0.1)` — never colored, never warm
- Motion is purposeful and measured: 0.3s transitions on nav and buttons, 0.5s on hero slideUp animations, `cubic-bezier(0.4, 0, 0.2, 1)` as the system easing
- CSS frameworks: Tailwind CSS arbitrary values with PrimeReact and Fluent UI primitives
- Focus ring uses a cool-blue (`{colors.focus-ring}`) at low opacity — accessible without visual noise
- Label chips and micro-text use `{typography.label-upper}` with wide positive tracking (1.5px) — the only place tracking opens up

## Colors

### Primary
- **Charcoal Olive** (`{colors.background}`): The dominant canvas. A near-black with a faint warm-neutral undertone that prevents the sterile read of pure `#000000`. Every hero section, navigation bar, and feature module rests on this surface. It makes the product photography feel moody and editorial.
- **Deep Black** (`{colors.background-deep}`): Pure black used in the deepest hero layers and full-bleed overlay sections where maximum contrast is needed.
- **Lifted Dark** (`{colors.surface}`): A slightly lighter charcoal (`#2b2e35`) for cards, modals, and content panels that need to float above the base canvas.
- **Light Break** (`{colors.surface-light}`): Near-white (`#f4f4f4`) used for contrast-reversal sections — product specs, accessories grids, testimonials — giving the eye a periodic reset from the dark dominant.
- **White** (`{colors.surface-white}`): Pure white for input fields and card surfaces within light sections.

### Brand Accent
- **Electric Mint** (`{colors.primary}`): `#11ddc4` — a luminous cyan-teal that sits between turquoise and mint. Applied to primary CTAs, active toggle states, and hairline accent borders. The on-primary text (`{colors.on-primary}`) is the dark canvas color, not white — the mint is light enough to need dark contrast. Hover state darkens to `{colors.primary-hover}` (`#0ebca7`).

### Text
- **Near-White on Dark** (`{colors.on-dark}`): `#f7f7f7` for all primary text on the dark canvas. The slight warmth of near-white (rather than pure white) prevents harshness against the olive-tinged background.
- **Mid Gray** (`{colors.on-dark-muted}`): `#747576` for secondary text, metadata, and captions on dark surfaces. Extracted from the `--atlas-text-placeholder` CSS variable.
- **Dark Ink** (`{colors.ink}`): `#1c1c1a` — the canvas color reused as ink on light sections, maintaining a closed palette.

### Semantic
- **Error** (`{colors.error}`): `#be2119` — from the `--atlas-text-negative` CSS variable. A deep red used for validation states and destructive actions.
- **Success** (`{colors.success}`): `#38a169` — extracted from the consent overlay CSS. Used for positive confirmation states.

### Borders & Shadows
- **Light Border** (`{colors.border}`): `#ebebeb` for hairline dividers in light sections.
- **Dark Border** (`{colors.border-dark}`): `#2b2e35` — the surface color doubled as a border for subtle inset definition on dark cards.
- **Shadow Base** (`{colors.shadow-soft}`): Represents the `rgba(0,0,0,0.1)` drop shadow base, flattened per Google design.md spec. Applied as a subtle 1–3px elevation shadow on cards.

## Typography

### Font Family
- **Display / Headings**: `GT America Expanded`, Black weight (900), uppercase. Fallbacks: `Arial Black, Arial, sans-serif`. This is a licensed grotesque from Grilli Type; no Google Font equivalent captures the exact Black Expanded proportions.
- **Body / UI**: `GT America`, Standard variant, weights 400–500. Fallbacks: `Arial, Helvetica, sans-serif`. Mixed case for body paragraphs and UI labels.
- **Closest Google Font substitute**: Barlow Condensed (Black 900 for display) + Barlow (Regular/Medium for body) — captures the expanded grotesque structure at accessible licensing.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Page-level hero lockups — "THE ULTIMATE STRENGTH TRAINING SYSTEM" |
| `display` | Section hero headlines — feature introductions |
| `heading-section` | Section-level headings — product category headers |
| `heading-sub` | Sub-section headings — feature names, spec groupings |
| `heading-card` | Card and module headings |
| `body-large` | Lead paragraphs, callout copy in feature sections |
| `body` | Running body copy — feature descriptions, product details |
| `body-medium` | UI body text, list items, short descriptions |
| `button-ui` | All button labels and CTA text |
| `nav-link` | Navigation items and dropdown links |
| `label-upper` | Eyebrow labels, chip text, micro-tags (all uppercase via `text-transform`) |
| `caption` | Legal copy, image captions, footnotes |

### Principles
- All display and heading tokens (`display-hero` through `heading-card`) render uppercase — the expanded grotesque silhouette only fully registers in caps
- Sub-1.0 line height on display text creates poster-style stacking; never apply generous line height to heading tokens
- GT America Standard handles body and UI text at regular weight — it deliberately recedes behind the Black display face
- Letter-spacing opens up only at label scale (`{typography.label-upper}`) — 1.5px tracking for readability at small uppercase sizes
- No italic usage present in the design system; weight and scale do all expressive work

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Tonal's spacing is bimodal — tight spacing (4–16px) for component internals and interface density, then a dramatic jump to large-scale spacing (64–128px) for section separation. This mirrors the product itself: precision engineering within modules, expansive breathing room between them. Hero sections breathe at 128px vertical padding; feature cards pack at 16–24px.

### Grid & Container
- Max content width: 1440px (primary design width)
- Fluid multi-column grid using Tailwind CSS with responsive modifiers
- Full-bleed photography sections intersperse with contained-width content columns
- Sidebar product configurations use a fixed-width left panel with fluid right content pane

### Whitespace Philosophy
- Large-scale vertical rhythm at 96–128px for hero and section breaks — the product is furniture-scale, and the layout reflects that physical presence
- Component-level spacing is tighter (8–24px) — the interface is precise, not airy
- Full-bleed sections alternate with contained-width columns to create visual rhythm without a rigid grid constraint

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Base canvas, full-bleed photography modules |
| Subtle (Level 1) | `0 1px 3px rgba(0,0,0,0.1)` | Navigation dropdowns, hover states on interactive elements |
| Card (Level 2) | `0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)` | Feature cards, accessory panels, modal containers |
| Elevated (Level 3) | Layered card shadow + surface background shift | Configuration panels, product spec modals |
| Dialog (Level 4+) | Card shadow + `{colors.background-deep}` overlay | Email capture modals, showroom booking overlays |
| Focus Ring | `{colors.focus-ring}` at low opacity | Accessible keyboard focus on interactive elements |

**Shadow Philosophy**: Tonal uses the minimum shadow necessary to convey hierarchy — a single `rgba(0,0,0,0.1)` drop shadow token does all the lifting. There is no warm tinting, no colored shadow (mint shadows would undermine the precision read), and no multi-layered theatrical treatment. Depth is communicated through surface color variation (`{colors.background}` vs `{colors.surface}`) rather than shadow drama. The effect is more product-photography styling than Material Design elevation.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Primary buttons, nav elements, most UI components |
| `sm` | 4px | Subtle rounding on secondary interface elements, switches |
| `md` | 8px | Input fields, card containers, dropdown menus |
| `pill` | 9999px | Promo badges, label chips |

Tonal's radius system is nearly binary: zero-radius for the primary interaction layer (buttons, navigation) and minimal rounding for container elements. The sharp-edged button is a deliberate hardware signal — Tonal is a piece of engineered equipment, and its CTAs communicate with the same precision. Rounded pill shapes appear only on small informational badges, never on interactive primary elements.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button Variants

- **`button-primary`** — Electric mint fill (`{colors.primary}`) with dark text (`{colors.on-primary}`), zero radius, 8px 16px padding. The primary "DISCOVER TONAL" and "GET THE CODE" CTAs. The mint is luminous enough to draw attention without text color reversal; dark text provides legible contrast.
- **`button-secondary`** — Dark canvas fill with white text and white border. Used for "VISIT A SHOWROOM" and secondary action pairs alongside a mint CTA.
- **`button-ghost`** — Pure black fill with white text. Dark-section secondary actions where the dark canvas needs reinforcement.
- **`button-accent-outline`** — Nav bar "VISIT A SHOWROOM" variant: dark background with mint border and mint text. Inverts to mint-fill on hover.

### Cards

- **`card`** (dark): Surface-color (`{colors.surface}`) lifted card for feature modules on dark sections. Subtle drop shadow conveys just enough elevation.
- **`card-light`**: White fill for accessory and product cards within light contrast-break sections.

### Inputs

Standard email/text inputs use white fill with a mid-gray border that converts to `{colors.primary}` mint on focus. Border-radius is `{rounded.md}` (8px) — the only UI element with meaningful rounding. Padding is compact at 8px 12px.

### Badges / Tags

- **`badge`**: Tinted teal container with mint text for promotional chips ("SAVE $495", spec highlights).
- **`badge-dark`**: Dark surface with near-white text for metadata tags on dark sections.

### Navigation

Sticky dark nav (`{colors.background}`) with near-white nav links and a mint-bordered "VISIT A SHOWROOM" CTA on the right. Dropdowns use the `{colors.surface}` lifted panel with 0.3s transition. Mobile: hamburger collapse.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for the primary CTA and active state borders — never as a background decoration or icon fill
- Apply `{typography.display-hero}` through `{typography.heading-card}` in uppercase only — the expanded grotesque silhouette depends on the cap form
- Maintain the `{rounded.none}` treatment on all interactive buttons — the zero-radius is the system's hardware signature
- Use `{colors.surface}` (lifted dark) for cards and panels that need to float above `{colors.background}` — never introduce new dark values
- Keep dark and light section alternation purposeful: hero → feature (dark) → social proof (light) → configuration (dark)
- Reference the `{typography.label-upper}` token for all eyebrow text — it carries the letterSpacing and fontWeight that make small uppercase readable
- Apply `{spacing.2xl}` (64px) minimum for section-level vertical padding — the product is furniture-scale, the layout should reflect it

### Don't
- Don't apply `{colors.primary}` to text links, icon states, or hover highlights — it belongs to primary CTAs and focus outlines only
- Don't introduce mid-range border-radius (12–24px) — the system is intentionally binary between `{rounded.none}` and `{rounded.md}` for containers
- Don't use GT America Expanded at weights below 900 for display headings — the compressed, heavy silhouette is the typographic identity
- Don't use lowercase display text — all display and heading tokens assume uppercase, and the font's proportions are tuned for that treatment
- Don't add colored shadows (mint or teal box-shadows) — the elevation system is neutral dark only
- Don't use the mint `{colors.primary}` as a section background or gradient component — it would dilute the CTA impact
- Don't stack multiple uppercase heading levels at similar sizes without at least a 1.5× size jump — the compressed letterforms require clear hierarchy

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <390px | Single column, hero headline wraps to 3–4 lines |
| Mobile | 390–767px | Full-width sections, stacked feature modules, hamburger nav |
| Tablet | 768–1023px | 2-column product grids emerge, side-by-side feature pairs |
| Desktop | 1024–1439px | Full multi-column layout, sticky nav, side-panel configurator |
| Large Desktop | ≥1440px | Max-width container (1440px) centered, no further scaling |

### Touch Targets
- Button minimum height of 44px on mobile for primary CTAs
- Nav items expand to full-width tap targets on mobile collapse
- Modal close targets use standard 44px × 44px touch zone

### Collapsing Strategy
- Navigation collapses to hamburger at 767px with full-screen overlay menu
- Feature grids collapse from multi-column to single-column with maintained section alternation (dark/light bands preserved)
- Hero display text scales down from 96px display-hero to approximately 40–48px on mobile
- Side-by-side product comparison panels stack vertically on tablet and below

### Image Behavior
- Full-bleed photography sections maintain aspect ratio via CSS `object-fit: cover`
- Product hero images are `position: sticky` within scroll sequences on desktop
- Thumbnail grids reflow from 4-up to 2-up to 1-up through the breakpoint sequence

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — deep charcoal-olive canvas
- Text on dark: `{colors.on-dark}` — near-white primary text
- Brand accent: `{colors.primary}` — electric mint for CTAs
- Secondary text: `{colors.on-dark-muted}` — mid-gray on dark surfaces
- Border: `{colors.border}` — light hairline in light sections
- CTA: `{colors.primary}`

### Example Component Prompts

- "Build a hero section using `{colors.background}` as the full-bleed canvas. Place a GT America Expanded Black 900-weight uppercase heading at `{typography.display-hero}` sizing. Add a mint CTA button using `{colors.primary}` fill with `{colors.on-primary}` text, `{rounded.none}` radius, and 8px 16px padding. No border-radius on the button — zero edges are the signature."
- "Create a dark feature card using `{colors.surface}` as the card background, `{colors.on-dark}` for body text, `{rounded.md}` radius (8px), and 24px padding. Add a `{typography.heading-card}` uppercase heading in `{colors.primary}` tint for emphasis. Drop shadow: `0 1px 3px rgba(0,0,0,0.1)`."
- "Create a primary CTA button with `{colors.primary}` background, `{colors.on-primary}` text at `{typography.button-ui}` scale, `{rounded.none}` corners, and 8px 16px padding. On hover, transition background to `{colors.primary-hover}` over 0.3s `cubic-bezier(0.4, 0, 0.2, 1)`."
- "Build a sticky navigation bar using `{colors.background}` as the background, `{colors.on-dark}` for nav link text at `{typography.nav-link}` scale. Include a right-side 'VISIT A SHOWROOM' button with `{colors.primary}` border, `{colors.primary}` text color, and `{rounded.none}` radius. Transition to mint fill on hover."
- "Create a promo badge chip using `{colors.primary-container}` fill, `{colors.primary}` text, `{typography.label-upper}` scale (11px, weight 700, 1.5px letter-spacing, uppercase), and `{rounded.pill}` radius with 4px 12px padding. Suitable for 'SAVE $495' and 'LIMITED OFFER' labels."
- "Build a light-section product grid with `{colors.surface-light}` background. Product cards use `{colors.surface-white}` fill, `{colors.ink}` text, `{rounded.md}` radius, and 24px padding. Section heading uses `{typography.heading-section}` uppercase. This section provides the contrast break from the dominant dark canvas."

### Iteration Guide

1. Start with `{colors.background}` as the page canvas — the charcoal-olive darkness is the system foundation, not an option
2. Apply `{colors.primary}` only to the single most important CTA on any given view — its power depends entirely on restraint and exclusivity
3. Use `{typography.display-hero}` and all heading tokens uppercase at sub-1.0 line-height — the compressed silhouette is Tonal's typographic identity
4. Set all primary button and interactive element borders to `{rounded.none}` — zero radius is the hardware signal; never soften CTAs
5. Alternate dark sections (`{colors.background}`) with light breaks (`{colors.surface-light}`) for rhythm — maintain at least 2–3 dark modules between each light section
6. Keep shadow treatment neutral: `rgba(0,0,0,0.1)` only, never colored or warm
7. When in doubt, add more `{spacing.2xl}` vertical padding to section breaks — the product occupies physical space and the layout should match that presence

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Tonal. Brand names and trademarks belong to their respective owners.