---
version: alpha
name: "Garmin"
website: "https://www.garmin.com"
description: >-
  A GPS-and-wearables maker whose marketing system is the rare consumer-electronics brand that runs entirely on grayscale and product photography — no brand voltage at all on the captured home page. Hero h1 sits at 40px Oswald regular weight 400 over the running-watch hero shot, body runs Roboto at 14.4px / weight 400, and a dense product-card grid below alternates 2-up landscape lifestyle photos with hard-edge ink-on-white text blocks. The radius scale is brutal — 2px on five surfaces, 100% on one circular avatar, and zero everywhere else. The Oswald-Roboto pairing (the brand uses obfuscated wrapper names "Superscripts-Oswald" and "Superscripts-Roboto" with full Noto Sans CJK fallback stacks) handles every typographic role from 11px caption to 40px display, with weight 400 carrying both display and body and only the uppercase nav labels stepping up to weight 500.

seo:
  title: "Garmin Design System for React — Oswald display, Roboto body, 14 components"
  metaDescription: "Garmin's marketing system documented as a DESIGN.md file. Grayscale-only palette, Oswald display at weight 400, Roboto body, 2px hard radius, 6 colors and 14 components for React, Next.js, and AI tools."
  highlights:
    - "Monochrome by choice — the captured home page uses only six colors, all grayscale plus a single deep red used twice; no brand voltage fires on marketing chrome at all"
    - "Oswald at weight 400 — display headlines sit at 40px in regular weight rather than the bold-condensed default Oswald is known for; the lightness reads as engineering-restraint, not fitness-shout"
    - "Roboto body, full CJK fallback — the obfuscated wrapper Superscripts-Roboto stacks Noto Sans TC/SC/JP/KR/Prompt as fallback, signaling Garmin's global aviation and outdoor markets"
    - "Hard-edge 2px radius — five of six declared radii are 2px on cards, chips, and buttons; the sixth is 100% on a single circular avatar. No 4-6-8-12-16-24px tier anywhere"
    - "Product photography as the chrome — every category band leads with a lifestyle landscape (runner, cyclist, hiker) rather than an icon, illustration, or feature glyph"
  tags:
    - "Consumer Electronics"
    - "Hardware & Robotics"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Garmin's home page does what very few consumer-electronics brands do: it skips brand voltage entirely. The captured surface has six color tokens, five of them grayscale (matte ink, soft ink, off-white, hairline gray, a single near-white) and one deep brick red used twice on a status flag. There is no Garmin Blue, no Garmin Orange, no chromatic accent on the marketing chrome anywhere above the fold. The page renders as monochrome plus product photography — the hero shows a runner mid-stride wearing a Forerunner 170, with a 40px Oswald headline ("FORERUNNER 70 & 170") in white over the photo and a thin uppercase eyebrow band above it. The brand carries itself on imagery and grayscale typography, the way an Outside Magazine spread does.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 6 color tokens — pure white, pure black, a soft ink, a hairline gray, a deep brick-red status flag, and an off-white surface tint — covering the entire captured page; 13 typography tokens running on Oswald for every display tier and Roboto for every body and label tier, with weights 400, 500, and a single 700 emphasis; a deliberately tiny radius scale of just 2px and 100%; and 14 components covering the product-card grid, the dense secondary-product strip, the uppercase nav labels, the email-capture input, and the eyebrow status band that runs above the hero.

    Feed this file to Claude or Cursor and it reproduces Garmin's specific moves: monochrome plus product photography rather than a chromatic brand voltage, Oswald at weight 400 as the display voice (not the heavy condensed default), Roboto body at 14.4px with the full CJK fallback stack, and the brutal 2px-or-circle radius binary. The one move worth borrowing if your product is hardware that photographs well: the willingness to skip brand color on the marketing surface and trust the imagery to carry chromatic interest. Most software brands cannot do this — the screen has no product photo, so the brand color has to do the heavy lifting. Garmin's hardware does the lifting; the chrome stays out of the way.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.garmin.com"
      title: "Garmin — official site"
      description: "Garmin's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Garmin's primary brand color?"
      answer: "The captured Garmin home page has no brand-voltage color. The marketing chrome is entirely grayscale — six color tokens covering pure white (491 occurrences), pure black (765 occurrences), a soft near-black for body text (220 occurrences), a hairline gray (19 occurrences), a single deep brick red used twice on a status flag, and an off-white. Garmin's better-known corporate blue (rendered as a logo color on physical packaging and the Forerunner product page) does not appear on the captured marketing surface. The brand reserves chromatic interest for product photography and lets the hardware do the chromatic work."
    - id: "typography"
      title: "What typography does Garmin use, and what should I substitute?"
      answer: "Garmin runs Oswald for every display tier and Roboto for every body and label tier, both delivered through obfuscated wrapper names (Superscripts-Oswald, Superscripts-Roboto) with comprehensive CJK fallback stacks (Noto Sans TC, Noto Sans SC, Noto Sans JP, Noto Sans KR, Prompt). The display tier sits at 40px Oswald weight 400 — counter-intuitive for a typeface most often associated with bold condensed sports headlines. Body sits at 14.4px Roboto weight 400. Nav labels move to weight 500 with uppercase transformation and 0.8px tracking. Open-source substitutes: both Oswald and Roboto are already free from Google Fonts — use them at the same weights and the system reproduces directly."
    - id: "radii-and-edges"
      title: "Why are Garmin's corners so sharp?"
      answer: "The captured radius scale has only two values: 2px (five occurrences across cards, chips, and inputs) and 100% (one occurrence on a single circular avatar). There is no 4-6-8-12-16-24px middle tier — every tappable surface is essentially hard-edged. The 2px softening is barely perceptible at body sizes; on inputs and product cards it reads as an engineered chamfer rather than a styled radius. This is unusual for consumer electronics, where Apple and Samsung lean on 12-16px soft corners; Garmin commits to hard edges as part of the engineering-instrument identity that runs through the cockpit and outdoor product lines."
    - id: "oswald-light-display"
      title: "Why is Garmin's Oswald display at weight 400 rather than the typical bold weight?"
      answer: "Oswald is most often deployed at weight 700 with uppercase tracking on sports and outdoor brands. Garmin runs it at weight 400 with title-case (sentence-case mixed) at 32-40px — the lightness reads as engineering restraint rather than fitness-shout. The single h2 uppercase 'Featured' band at the top runs at 14.4px Oswald weight 400 with 0.8px tracking — even the band that would normally carry bold shouting stays at regular weight. This pairs with the grayscale palette to position Garmin closer to a precision-instrument maker than to a consumer-fitness brand."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own hardware or outdoor-equipment marketing site?"
      answer: "Yes — the file feeds cleanly into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Garmin's specific moves: grayscale-only palette with no brand voltage on chrome, Oswald display at weight 400 (not the bold default), Roboto body with full CJK fallback, and the 2px-or-circle radius binary. The tokens resolve without invention — every hex, font name, and component value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the monochrome-plus-photography move only works if your product is itself a photographable object that carries chromatic interest. On a software surface the same palette reads as unfinished rather than as engineered."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#000000"
  ink-soft: "#1a1a1a"
  canvas: "#ffffff"
  hairline: "#d9d9d9"
  hairline-soft: "#eeeeee"
  status-deep-red: "#920000"

typography:
  display-lg:
    fontFamily: "Superscripts-Oswald, Oswald, \"Roboto Condensed\", Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 50px
    letterSpacing: "0.8px"
  display-md:
    fontFamily: "Superscripts-Oswald, Oswald, \"Roboto Condensed\", Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: "0.8px"
  heading-md:
    fontFamily: "Superscripts-Oswald, Oswald, \"Roboto Condensed\", Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: "0.8px"
  heading-sm:
    fontFamily: "Superscripts-Oswald, Oswald, \"Roboto Condensed\", Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "0.64px"
  eyebrow-caps:
    fontFamily: "Superscripts-Oswald, Oswald, \"Roboto Condensed\", Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "0.8px"
  body-lg:
    fontFamily: "Superscripts-Roboto, Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: 0
  body-md:
    fontFamily: "Superscripts-Roboto, Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  body-emphasis:
    fontFamily: "Superscripts-Roboto, Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 14.4px
    fontWeight: 700
    lineHeight: 21.6px
    letterSpacing: 0
  body-sm:
    fontFamily: "Superscripts-Roboto, Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 12.8px
    fontWeight: 400
    lineHeight: 19.2px
    letterSpacing: 0
  nav-link:
    fontFamily: "Superscripts-Roboto, Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 12.8px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "0.8px"
  nav-link-caps:
    fontFamily: "Superscripts-Roboto, Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 16.1px
    letterSpacing: "0.8px"
  caption:
    fontFamily: "Superscripts-Roboto, Roboto, \"Noto Sans TC\", \"Noto Sans SC\", \"Noto Sans JP\", \"Noto Sans KR\", Prompt, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 16.5px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  base: "12px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "50px"
  3xl: "64px"

components:
  hero-section:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.none}"
    padding: "0"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-lg}"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.display-md}"
  eyebrow-band:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.eyebrow-caps}"
    rounded: "{rounded.none}"
    padding: "16px 64px"
    height: "50px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-md}"
  body-paragraph-dark:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link-caps}"
    rounded: "{rounded.xs}"
    padding: "8px 24px"
    height: "40px"
    border: "0"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link-caps}"
    rounded: "{rounded.xs}"
    padding: "8px 24px"
    height: "40px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 16px"
    height: "56px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "0px 12.8px"
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  category-tile:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.none}"
    padding: "32px 0px 16px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "10px 8px"
    height: "40px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    padding: "32px"
---

## Overview

Garmin's marketing site inverts the consumer-electronics convention. **Monochrome by choice.** Where Apple frames its devices on a quiet near-white field with a single semantic accent (the green AppleCare badge, the red notification dot), Samsung leans on a saturated brand blue, and Fitbit on lime green, Garmin runs the captured home page with no chromatic accent on the chrome at all. Six color tokens — pure ink (`{colors.ink}` — #000000), a soft near-black for body text (`{colors.ink-soft}` — #1a1a1a), pure white (`{colors.canvas}`), a hairline gray (`{colors.hairline}` — #d9d9d9), an off-white (`{colors.hairline-soft}` — #eeeeee), and a single brick-red status flag (`{colors.status-deep-red}` — #920000) — cover every captured surface. The chromatic interest comes entirely from the product photography: a runner mid-stride, a cyclist on switchbacks, a hiker at altitude. The chrome stays out of the way.

The typographic system reinforces the engineering-instrument identity. **Oswald-at-rest.** Where Oswald is most often deployed at weight 700 with uppercase tracking on sports and outdoor brands (the typical "MARATHON 2024" headline), Garmin runs it at weight 400 — regular weight — across all four display tiers (40 / 32 / 20 / 16px). The hero h1 "FORERUNNER 70 & 170" sits in white over the running photo at 40px / 400 / 0.8px-tracked — visible without shouting. Roboto carries every body and label role at 14.4px / 400, with weight 500 only stepping in for the uppercase nav labels and weight 700 reserved for a single inline emphasis token (used twice on the page). This is not a fitness brand performing fitness; it is an instrument maker performing precision.

The radius scale is **brutally binary**. Only two values appear in the captured page: 2px (five occurrences on cards, chips, and the email-capture input) and 100% (one occurrence on a single circular avatar). There is no 4px, no 6px, no 8px, no 12-16-24px tier — surfaces are either hard-edged with a token chamfer or fully circular. This commits to the same instrument aesthetic the typography does: industrial precision rather than soft consumer-friendly.

**Key Characteristics:**
- Six total color tokens, all grayscale except a single deep brick red (`{colors.status-deep-red}` — #920000) used twice as a status flag. No brand voltage on the marketing chrome.
- Ink (`{colors.ink}` — #000000) carries 765 occurrences (text 354, border 353, background 42, gradient 11) — pure black, not warmed near-black; the dominant tone by a wide margin.
- Oswald display at weight 400 (not the typical 700) across 32-40px display tiers; Roboto body at 14.4px / weight 400; uppercase nav labels at weight 500 / 0.8px tracking — three weights, two families, every typographic role covered.
- Full CJK fallback stack on every Roboto declaration (Noto Sans TC, SC, JP, KR, Prompt) — Garmin's global aviation and outdoor markets baked into the font stack.
- Hard-edge radius scale: `{rounded.xs}` 2px on five surfaces, `{rounded.full}` on one circular avatar. No middle tier whatsoever.
- Product photography carries the chromatic work — every category band leads with a runner / cyclist / hiker landscape rather than an icon, illustration, or feature glyph.
- Eyebrow band at the top of the hero (`{component.eyebrow-band}`) uses Oswald 14.4px / 400 / uppercase / 0.8px tracked, white on ink — the brand's only consistent label treatment.
- 16-and-8px dominate spacing (106 combined occurrences), with 32px (18 occurrences) and 50px (11 occurrences) carrying section padding.

## Colors

### Ink

- **Ink** (`{colors.ink}` — #000000): frequency 765. Used as text (354), border (353), background (42), shadow (5), gradient (11). The load-bearing tone — top-nav background, eyebrow band, hero canvas behind the product photo, button-primary fill, and the dominant border on cards and dividers. Pure black, not a warmed near-black; Garmin commits to maximum contrast rather than softening.
- **Ink Soft** (`{colors.ink-soft}` — #1a1a1a): frequency 220 — 110 text, 110 border. The body-paragraph text color on the white surfaces — running text sits at this softer tone while headings stay at pure ink. The pairing creates a subtle two-step ladder within the dark-on-light reading band.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 491 — 231 border, 232 text-on-dark, 28 background. Pure white, the page floor below the hero and the text-on-dark color above it. No off-white softening; the contrast against pure ink is uncompromising.
- **Hairline Soft** (`{colors.hairline-soft}` — #eeeeee): frequency 1, used as a single shadow tint. The lightest declared surface tone — likely reserved for hover states or subtle band fills that don't appear on the captured home page.

### Hairline

- **Hairline** (`{colors.hairline}` — #d9d9d9): frequency 19 — 18 shadow, 1 border. The single card-outline tone, used on product-card borders and the email-capture input outline. Notably it appears as shadow rather than border in 18 of 19 captures, suggesting it does most of its work as a 1-pixel soft shadow rather than a hard rule.

### Status

- **Status Deep Red** (`{colors.status-deep-red}` — #920000): frequency 2 — 1 text, 1 border. The single chromatic-non-grayscale color on the entire captured surface. Used as a status flag — likely on an "Out of stock" or "Limited availability" badge. A deep brick-red rather than a saturated emergency tone, reading as cautionary signage rather than as alarm.

## Typography

### Font Families

The system runs two families: **Oswald** for every display tier and **Roboto** for every body and label tier. Both are delivered through obfuscated wrapper names — `Superscripts-Oswald` and `Superscripts-Roboto` — that resolve to the real fonts via the foundry's licensing wrapper. Fallback stacks are extensive: every Roboto declaration walks `Noto Sans TC, Noto Sans SC, Noto Sans JP, Noto Sans KR, Prompt, sans-serif`, signaling Garmin's global aviation, marine, and outdoor markets where Traditional Chinese, Simplified Chinese, Japanese, Korean, and Thai script coverage is essential. Oswald falls back to `Roboto Condensed` then the same CJK stack.

### Hierarchy

| Token | Family | Size | Weight | Line Height | Tracking | Transform | Use |
|---|---|---|---|---|---|---|---|
| `{typography.display-lg}` | Oswald | 40px | 400 | 50px | 0.8px | none | Hero h1 ("FORERUNNER 70 & 170") |
| `{typography.display-md}` | Oswald | 32px | 400 | 40px | 0.8px | none | Section displays below the hero |
| `{typography.heading-md}` | Oswald | 20px | 400 | 32px | 0.8px | uppercase | Category-tile headings |
| `{typography.heading-sm}` | Oswald | 16px | 400 | 24px | 0.64px | uppercase | Card sub-titles, eyebrow labels |
| `{typography.eyebrow-caps}` | Oswald | 14.4px | 400 | 18px | 0.8px | uppercase | The black eyebrow band above the hero ("Featured") |
| `{typography.body-lg}` | Roboto | 18px | 400 | 27px | 0 | none | Promotional pullquotes and large body |
| `{typography.body-md}` | Roboto | 14.4px | 400 | 20px | 0 | none | Default running-text paragraph style |
| `{typography.body-emphasis}` | Roboto | 14.4px | 700 | 21.6px | 0 | none | Inline strong / pricing emphasis within body (2 occurrences) |
| `{typography.body-sm}` | Roboto | 12.8px | 400 | 19.2px | 0 | none | Caption rows and meta strips |
| `{typography.nav-link}` | Roboto | 12.8px | 400 | 24px | 0.8px | none | Top-nav category labels |
| `{typography.nav-link-caps}` | Roboto | 14px | 500 | 16.1px | 0.8px | uppercase | Uppercase button labels and section nav links |
| `{typography.caption}` | Roboto | 11px | 400 | 16.5px | 0 | none | Legal text and footnote captions |

### Principles

The defining typographic move is **Oswald at weight 400 instead of weight 700**. Most outdoor and sports brands deploy Oswald as a bold-condensed shouting display — Garmin runs it at regular weight across every display size, including the 40px hero. The lightness reads as engineering-restraint, repositioning Garmin from consumer-fitness brand into precision-instrument maker. The single weight-700 cell in the entire system is the inline body emphasis used twice on the page — every other typographic role sits at weight 400 or 500.

The CJK fallback stack on every Roboto declaration is the second distinguishing move. Most western marketing sites stop at `Roboto, sans-serif` as a fallback. Garmin walks the full Noto Sans CJK family explicitly, ensuring the marketing site renders correctly on every regional variant without per-locale CSS overrides. This is rare on a US-anchored marketing site.

### Note on Font Substitutes

Both **Oswald** and **Roboto** are free from Google Fonts — substitute them at the same weights and the system reproduces directly. The obfuscated `Superscripts-` wrappers are licensing wrappers, not separate typefaces; using the foundry-direct files is equivalent. For the CJK fallback, **Noto Sans CJK** is also free from Google Fonts; the full TC / SC / JP / KR / Prompt stack is available without subscription. There is no display alternative to Oswald that captures its specific narrow-but-not-condensed aspect; if you need to swap, Bebas Neue is too condensed and Barlow Condensed is too soft — Oswald itself is the only direct match.

## Layout

### Spacing System

- **Base unit:** 8px, with 16px as the dominant gap value (56 occurrences) followed closely by 8px (50 occurrences).
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 50px · `{spacing.3xl}` 64px.
- **Section padding (vertical):** the eyebrow band sits at 16x64px (`{spacing.md}` x `{spacing.3xl}`). Hero photography is full-bleed with 0 padding. Section breaks below the fold run `{spacing.xl}` (32px) top-bottom.
- **Card internal padding:** `{spacing.md}` (16px) on product cards.
- **CSS spacing scale exposed on :root:** Garmin declares `--g-spacing-xs` 0.25rem through `--g-spacing-xxl` 5rem, a six-step rem-based scale that maps to the captured pixel values.

### Grid & Container

- **Max content width:** 1440px (declared as `--g-breakpoint-xxl`). Below-fold sections cap around 1200px (`--g-breakpoint-lg`) for text columns.
- **Breakpoint scale:** declared as `--g-breakpoint-xs` 480px / `-sm` 768px / `-md` 1024px / `-lg` 1200px / `-xl` 1350px / `-xxl` 1440px / `-xxxl` 1824px — a seven-step breakpoint ladder that's wider than the typical Bootstrap-style four-step.
- **Hero block:** full-bleed product photography, headline overlay centered at ~365px text-block width.
- **Product grid:** dense 4-up cards below the hero with 16px gutters, alternating with 2-up landscape-photography category bands.

### Rhythm

The page rhythm alternates between **dense product grid** and **single-photo category band**. The hero is a single edge-to-edge photo. The eyebrow band above it is a thin black strip. Below the fold, a 4-up product card grid sits at full width, followed by a 2-up landscape-photography category band (running on the left, cycling on the right), then another 4-up product grid, then another 2-up band. There is no atmospheric transition between bands — every section terminates at a hard edge, the way an REI catalog spread does.

## Elevation

The system has essentially **no shadow tier**. The captured page has 5 occurrences of `{colors.ink}` used as shadow ink and 18 occurrences of `{colors.hairline}` used as a soft shadow tint — a small total relative to the 765 ink and 491 white occurrences. Card depth comes from the 1-pixel hairline outline rather than a layered drop shadow.

- **Flat (no shadow):** hero, all photography bands, the category tiles, the footer — 99% of surfaces.
- **Card elevation:** product cards carry a 1-pixel `{colors.hairline}` (#d9d9d9) shadow that reads more as a soft outline than as a drop shadow.
- **Modal scrim:** not exposed on the captured surfaces.

## Shapes

The radius scale is **brutally binary** — just two values appear in the captured page:

- `{rounded.none}` 0px — the dominant treatment. Hero, eyebrow band, category tiles, top-nav, footer, every section divider, and most surface fills. The page reads as a stack of hard-edged rectangles.
- `{rounded.xs}` 2px — 5 occurrences. Product cards, secondary chips, the email-capture input. A barely-perceptible chamfer rather than a styled radius; reads as engineered rather than as decorative.
- `{rounded.full}` — 1 occurrence. A single circular avatar on a user-account badge.

There is no 4px, no 6px, no 8px, no 12-16-24px tier. Surfaces are either hard-edged with a token chamfer or fully circular as a one-off avatar. The lack of middle radii is the same commitment the grayscale palette and weight-400 Oswald make: industrial precision rather than soft consumer-friendly chrome.

## Components

**`hero-section`** — Full-bleed photography with the headline overlay, 0 padding. The product photo extends edge-to-edge; the text block centers at ~365px width.

**`hero-heading`** — White text on the product photo, Oswald 40px / 400 / 0.8px-tracked. The display tier — visible without shouting.

**`section-heading`** — Same family one step down (32px / 400). Used for the section displays below the hero ("Train precisely with Forerunner", "Wherever you ride, ride with Garmin").

**`eyebrow-band`** — Ink `{colors.ink}` fill, white text, Oswald 14.4px / 400 / uppercase / 0.8px-tracked, 16x64px padding, 50px height. The thin black strip above the hero — runs across the full page width as a category eyebrow.

**`body-paragraph`** — Ink-soft `{colors.ink-soft}` running text at `{typography.body-md}` (14.4px Roboto / 400 / 20px line-height). The default body style on white surfaces.

**`body-paragraph-dark`** — White variant for body on dark surfaces (hero overlays, footer copy).

**`button-primary`** — Ink `{colors.ink}` fill, white text, Roboto 14px / 500 / uppercase / 0.8px-tracked, `{rounded.xs}` 2px radius, 8x24px padding, 40px height. No border. The primary CTA — "SHOP NOW", "LEARN MORE" — sits as a hard-edged black rectangle.

**`button-secondary`** — White `{colors.canvas}` fill, ink text, 1px ink border, same dimensions and typography. The inverse — used for secondary actions on light surfaces.

**`top-nav`** — Ink `{colors.ink}` band, 56px height, full-width. Garmin wordmark left, category labels center (Fitness / Outdoor / Marine / Aviation / Automotive — the brand's five market verticals), search + cart + account right.

**`nav-link`** — Transparent background, white text in `{typography.nav-link}` (Roboto 12.8px / 400 / 0.8px tracking), 0x12.8px padding. Category labels at title case with the wide tracking — not all-caps despite the precision aesthetic.

**`product-card`** — White `{colors.canvas}` fill, ink-soft text, 1px `{colors.hairline}` border (rendered as a soft shadow in most captures), `{rounded.xs}` 2px radius, 16px internal padding. Holds product thumbnail, title in `{typography.heading-sm}`, price in `{typography.body-emphasis}` (Roboto 14.4px / 700).

**`category-tile`** — Ink `{colors.ink}` fill, white text, no radius, 32x0x16px padding. The 2-up landscape-photo bands sit on a black surface with white Oswald headings overlaid on the right or below the image.

**`text-input`** — White fill, ink text, 1px `{colors.hairline}` border, **no radius** (0px), 10x8px padding, 40px height, Arial fallback at 16px. The email-capture row — the only input on the captured marketing surface, and notably the only major component that doesn't use the 2px `{rounded.xs}` chamfer.

**`footer`** — Ink `{colors.ink}` canvas, white text, 32px padding. Multi-column link list at `{typography.body-sm}`.

## Do's and Don'ts

**Do** trust photography to do the chromatic work. The system reserves color for product imagery and runner / cyclist / hiker lifestyle shots; adding a brand-voltage CTA fill breaks the monochrome-plus-photography move and reads as a marketing-conversion afterthought.

**Do** keep Oswald at weight 400 across every display tier. The lightness is the engineering-instrument signature; bumping to weight 700 turns the brand into a generic outdoor-sports shout and undercuts the precision identity.

**Do** declare the full CJK fallback stack on every body-and-label token. Garmin operates in aviation, marine, and outdoor markets globally; dropping Noto Sans TC / SC / JP / KR / Prompt would leave non-Latin scripts rendering in system fallback fonts that break the typographic discipline.

**Do** use `{rounded.xs}` (2px) on all tappable surfaces except inputs. Inputs go to `{rounded.none}` 0px — the email-capture row is the one component that commits fully to the hard edge. Following this rule is what separates the system's industrial chamfer from a generic 4-8px rounded card.

**Don't** add a brand-voltage accent color to the marketing chrome. The captured surface has six colors and that is the whole palette — introducing a Garmin Blue (or any chromatic CTA fill) violates the grayscale discipline and pulls the eye away from the product photography.

**Don't** use `{colors.status-deep-red}` (#920000) for anything except a stock-status flag. It appears twice on the entire captured page and is the only chromatic moment in the system — overusing it dilutes the single status-warning signal.

**Don't** introduce a 4px or 8px radius tier. The system runs 2px or 100%, with nothing in between. A 4-8px corner reads as borrowed from a generic SaaS card library rather than as Garmin's engineered chamfer.

**Don't** swap Oswald for a softer humanist sans (Manrope, DM Sans, Inter) on the display tier. Oswald's narrow-but-not-condensed aspect is the typographic fingerprint that ties the marketing site to Garmin's instrument-cluster industrial design; substituting a wider sans loses the visual link.

## Known Gaps

- **Brand color suppression:** the captured home page has no brand-voltage color. Garmin's better-known corporate blue lives on packaging, the Forerunner product configurator, and the Connect app — but it does not appear on the captured marketing chrome. This DESIGN.md captures the no-voltage marketing surface only.
- **Hover and focus states:** documented for none of the buttons; the captured surface exposes only resting states. The full state matrix (focus rings, active press, disabled tints) is not visible.
- **Form input variants:** `{component.text-input}` carries only the email-capture row at the bottom of the page. Search inputs, filter dropdowns, and product-configurator inputs live on deeper product pages and are not represented.
- **Dark mode:** the system is light-default with dark accent bands (hero, top-nav, footer, category tiles). There is no separate dark-mode CSS variable tier — the same tokens drive both surface treatments.
- **Motion:** the hero photography may auto-rotate; the spec captures end-state values only.
- **Product surfaces:** this DESIGN.md captures the global `garmin.com` home page only. The Garmin Connect app, the Forerunner product configurator, the Aviation and Marine vertical sites, and the Garmin Pilot app carry their own component sets with chromatic accents (notably the Aviation cockpit-blue family) that are not represented here.
- **CJK rendering:** the declared Noto Sans fallback stack is comprehensive but the captured page only renders Latin script — the rendered metrics on TC / SC / JP / KR / Prompt may differ from the captured Roboto values.