---
version: alpha
name: Garmin
description: "Instrument-panel precision: condensed caps, square corners, black bars on white."
colors:
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#D9D9D9"
  primary: "#920000"
  near-black: "#1A1A1A"
  card-grey: "#D8D8D8"
typography:
  fine-print:
    fontFamily: Roboto
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  caption:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small-label:
    fontFamily: Roboto
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  button-bar:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  body-input:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  sub-heading:
    fontFamily: Roboto
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  section-head:
    fontFamily: Roboto
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  display:
    fontFamily: Oswald
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  hero:
    fontFamily: Oswald
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
rounded:
  buttons: 0px
  inputs: 0px
  cards: 3px
  chips-small-marks: 2px
spacing:
  xs: 0.25rem
  sm: 0.5rem
  md: 1rem
  lg: 1.5rem
  xl: 2rem
  xxl: 5rem
---
# Garmin — Style Reference
> Instrument-panel precision: condensed caps, square corners, black bars on white.

**Theme:** light

Garmin's storefront reads like the bezel of one of its own devices — an almost aggressively neutral black-on-white system where every accent is structural, not decorative. The signature move is compression plus squareness: Oswald condensed uppercase carries all display, navigation, and labels, while every corner is cut to 0px so buttons, inputs, and bars sit as hard rectangles. Solid black slabs — the nav wordmark, the "FEATURED" divider with its downward pointer tab, the starburst "NEW"/"SALE" badges — punctuate a bright white canvas that exists mainly to hold full-bleed lifestyle photography. Body copy drops to plain Roboto, humanist and quiet, so the condensed caps do all the shouting. There is essentially no color: the palette is ink black, pure white, a near-black text grey, and a single reserved oxblood red that only ever appears as text. The result feels like technical hardware documentation dressed for retail — engineered, legible, unsentimental.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Black | `#000000` | `--color-ink` | Primary text, nav bar, FEATURED bar, badge fills, button outlines. The system's structural workhorse — used as much for solid slabs as for type. |
| Pure White | `#FFFFFF` | `--color-canvas` | Page canvas and reversed text over photography or on black slabs. The default ground everything sits on. |
| Near Black | `#1A1A1A` | `--color-ink-soft` | Softer body/secondary ink where pure black would be too heavy at small sizes. |
| Signal Red | `#920000` | `--color-signal` | Deep oxblood red — appears only as a text color. *(inferred role)* Reserve for alerts / errors / editorial sale markers; never a CTA fill or link accent. |
| Hairline Grey | `#D9D9D9` | `--color-hairline` | Input borders and 1px dividers; the lightest structural line. |
| Card Grey | `#D8D8D8` | `--color-border-card` | Card outline hairline, one shade darker than the input border. |

## Tokens — Typography
### Oswald — condensed uppercase for all display, nav, labels, product titles, and badges · `--font-display`
- **Substitute:** Bebas Neue, Roboto Condensed, Arial Narrow
- **Weights:** 400, 500, 700 (display frequently set at 400 — the condensed form supplies the emphasis, not the weight)
- **Sizes:** 40px (h1 / hero), 32px, 20px (section heads), 14.4px (FEATURED bar), 14px (buttons)
- **Line height:** tight, ~1.0–1.15 for stacked caps headlines
- **Letter spacing:** near-normal to slightly tight; the condensed proportions already compress the line
- **Role:** every uppercase moment — the GARMIN wordmark neighborhood, top nav, hero headline, product names, black tag chips. Compression reads as instrument-panel density.

### Roboto — neutral humanist sans for body, paragraphs, sub-copy, and form fields · `--font-body`
- **Substitute:** Inter, Helvetica Neue, Arial
- **Weights:** 400, 500, 700
- **Sizes:** 16px (input / long-form links), 14px, 14.4px, 13px, 12.8px, 11px (fine print)
- **Line height:** ~1.4–1.6 for readable paragraphs
- **Letter spacing:** default; mixed-case, calm, no styling
- **Role:** the quiet layer under the caps — hero sub-line ("With one goal — helping you reach yours."), descriptions, inputs, and utility links.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Fine print | 11px | 1.4 | normal | `--text-2xs` |
| Caption | 12px / 12.8px | 1.4 | normal | `--text-xs` |
| Small label | 13px / 13.33px | 1.4 | normal | `--text-sm` |
| Button / bar | 14px / 14.4px | 1.2 | normal | `--text-base` |
| Body / input | 16px | 1.5 | normal | `--text-md` |
| Sub-heading | 18px | 1.3 | normal | `--text-lg` |
| Section head | 20px | 1.2 | normal | `--text-xl` |
| Display | 32px | 1.1 | tight | `--text-2xl` |
| Hero | 40px | 1.05 | tight | `--text-3xl` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (generous whitespace on a white canvas, punctuated by dense black bars)

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| None | 0 | `--g-spacing-none` |
| XS | 0.25rem (4px) | `--g-spacing-xs` |
| SM | 0.5rem (8px) | `--g-spacing-sm` |
| MD | 1rem (16px) | `--g-spacing-md` |
| LG | 1.5rem (24px) | `--g-spacing-lg` |
| XL | 2rem (32px) | `--g-spacing-xl` |
| XXL | 5rem (80px) | `--g-spacing-xxl` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons | 0px (hard square) |
| Inputs | 0px |
| Cards | 3px *(one card measured at 3px; most surfaces are 0px)* |
| Chips / small marks | 2px |
| Circular controls (carousel arrow) | 100% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Card lift | `rgb(217, 217, 217) 0px 2px 3px 1px` | `--shadow-card` |
| Overlay | `rgba(0, 0, 0, 0.24) 0px 2px 4px 1px` | `--shadow-overlay` |
| Divider | `rgb(238, 238, 238) 0px 1px 0px 0px` | `--shadow-divider` |

### Layout
- **Page max-width:** ~1440px (breakpoints: 480 / 768 / 1024 / 1200 / 1350 / 1440 / 1824)
- **Section gap:** 80px (`--g-spacing-xxl`)
- **Card padding:** 0px on the media, 16px 0 14px on the title block
- **Element gap:** 16px (`--g-spacing-md`)

## Components
### Primary Nav
**Role:** Persistent top bar of first-level departments.
White ground, black GARMIN wordmark left, department links (SMARTWATCHES, SPORTS & FITNESS, OUTDOOR RECREATION, AUTO & HOME, MARINE, AVIATION, SALE) in Oswald condensed uppercase, ~13px, `#000000`. Utility cluster right (Support, search, account, cart). No borders, no radius — separation is pure whitespace and a hairline divider.

### Ghost Button — On Photography
**Role:** Hero CTA over full-bleed imagery ("LEARN MORE").
Transparent fill, `1px #FFFFFF` border, `#FFFFFF` text, radius `0px`, padding `8px 24px`, 14px / weight 500, uppercase. Square outline reversed out of the image — no fill, no shadow.

### Ghost Button — On White
**Role:** Secondary action on light surfaces.
Transparent fill, `1px #000000` border, `#000000` text, radius `0px`, padding `8px 24px`, 14px / 500. The dark twin of the hero button.

### Filled Button — Invert
**Role:** Emphasis action on dark or photographic ground.
`#FFFFFF` fill, `#000000` text, `1px #000000` border, radius `0px`, padding `8px 24px`, 14px / 500. Reads as a hard white plate.

### Tag Chip
**Role:** Inline black label / marker (FEATURED-style tag).
`#000000` fill, `#FFFFFF` text, radius `0px`, padding `4px 8px`, 12.8px / 400, uppercase. A miniature of the structural black slab.

### FEATURED Divider Bar
**Role:** Full-width section separator announcing a content strip.
`#000000` bar, centered `#FFFFFF` uppercase label, padding `16px 64px`, 14.4px / 400, with a downward-pointing triangular tab centered on its bottom edge — a signature Garmin cue that ties the bar to the cards below.

### Text Input
**Role:** Form / search field.
`#FFFFFF` fill, `#000000` text, `1px #D9D9D9` border, radius `0px`, padding `10px 8px`, 16px / 400. Square, low-contrast border, no shadow.

### Product Card
**Role:** Featured-product tile in the horizontal carousel.
White ground, optional `1px #D8D8D8` outline (radius `3px`) or borderless, media at full card width, title below in Oswald condensed uppercase ~20px `#000000` with `16px 0 14px` padding. A black starburst "NEW"/"SALE" badge overlaps the top-left corner.

### Starburst Badge
**Role:** Status flag on product media.
Solid `#000000` starburst (scalloped circle) with `#FFFFFF` uppercase text ("NEW", "SALE"). Overlaps the card's top-left; the only non-rectangular shape in the kit besides the circular arrow.

### Carousel Arrow
**Role:** Advance control for the product rail.
Circular button (radius `100%`), white fill with a thin border and subtle lift, `#000000` chevron. Sits at the right edge of the rail.

### Section Heading
**Role:** Content-block title.
Oswald 20px / 400 (up to 40px for hero), `#000000` on white or `#FFFFFF` reversed on photography, padding `16px 0 14px`, uppercase. No underline, no accent color.

## Do's and Don'ts
### Do
- Set all display, navigation, product names, and labels in Oswald condensed **uppercase** — that compression is the brand voice.
- Keep corners at `0px`. Buttons, inputs, and bars are hard rectangles; the only curves are the circular arrow (`100%`) and the scalloped badges.
- Use solid `#000000` slabs (nav, FEATURED bar, badges, chips) as the structural rhythm against a white canvas.
- Reverse `#FFFFFF` type and a `1px #FFFFFF` ghost outline over full-bleed photography for hero CTAs.
- Let photography carry the color; keep the UI chrome monochrome.
- Drop to plain Roboto mixed-case for body copy and form fields.

### Don't
- Don't round the buttons or cards — square is law; a pill button breaks the system instantly.
- Don't introduce brand colors for CTAs. There is no colored primary action; contrast comes from black/white inversion, not hue.
- Don't use `#920000` as a link or button color — it lives as text only (alerts / editorial), never as fill.
- Don't set body paragraphs in Oswald — the condensed face is for caps, not reading.
- Don't add heavy drop shadows; elevation is hairlines and luminance inversion, not blur.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Default page ground; holds photography and cards. |
| 1 | Structural Black | `#000000` | Nav bar, FEATURED divider, badges, tag chips — inverted slabs. |
| — | Hairline (input) | `#D9D9D9` | 1px field and divider lines on white. |
| — | Hairline (card) | `#D8D8D8` | 1px card outline, a step darker than input borders. |

## Elevation
Depth is conveyed almost entirely by **luminance inversion and hairlines**, not shadow. Black slabs read as "on top" of the white canvas by pure contrast; cards separate with a `1px #D8D8D8` outline and, at most, a whisper of `rgb(217, 217, 217) 0px 2px 3px 1px`. The heaviest shadow in the system, `rgba(0, 0, 0, 0.24) 0px 2px 4px 1px`, is reserved for true overlays. Dividers are a 1px `rgb(238, 238, 238)` line. Nothing floats far off the page.

## Imagery
Photography is central and load-bearing — full-bleed, high-production **lifestyle and outdoor** scenes (a runner cresting a tree-lined road, aerial suburbia) plus clean **studio product shots on white** (rangefinders, smart bands, flight displays, watches). The imagery supplies all the warmth and color the UI withholds; the chrome stays monochrome so the photos never compete. Product media sits edge-to-edge inside square cards, with the black starburst badge as the only graphic overlay.

## Layout
Full-bleed photographic hero spanning the viewport with left-aligned reversed headline and ghost CTA. Below it, a solid black **FEATURED** divider bar with a downward pointer tab introduces a horizontal **product carousel** — square white cards with corner starburst badges, advanced by a circular arrow at the right edge. Content is otherwise contained within a ~1440px measure with generous 80px section gaps. Navigation is a persistent white top bar of uppercase departments with a right-side utility cluster (support, search, account, cart).

## Typography Signature
Two modes, strictly divided. **Oswald condensed uppercase** owns every structural and display moment — often at weight 400, because the narrow letterforms already read as emphatic; stacking them into two-line hero headlines (`GARMIN ACQUIRES TRAININGPEAKS / AND TRAINHEROIC`) at 40px with tight leading gives the page its instrument-density. **Roboto** handles everything you actually read at length — sub-lines, descriptions, inputs — in calm mixed-case at 1.4–1.6 line height. The tension between the two (compressed shouting caps over neutral humanist body) is the whole voice: technical, retail-ready, never ornamental.

## Agent Prompt Guide
## Quick Color Reference
- background: #FFFFFF / text: #000000 (soft: #1A1A1A) / surface: #000000 (inverted slabs) / border: #D9D9D9 (inputs), #D8D8D8 (cards) / accent: #920000 (text-only, alerts/editorial) / primary action: no distinct CTA color — black/white inversion only

## Example Component Prompts
1. **Ghost hero button**: Transparent button with a `1px #FFFFFF` border and `#FFFFFF` uppercase Oswald label at 14px/500, radius `0px`, padding `8px 24px`, placed over a full-bleed photo. No fill, no shadow.
2. **FEATURED divider bar**: A full-width `#000000` bar with a centered `#FFFFFF` uppercase Oswald label at 14.4px, padding `16px 64px`, and a small downward-pointing triangular tab centered on its bottom edge.
3. **Product card**: A white card, radius `3px`, with an optional `1px #D8D8D8` border, edge-to-edge product photo on white, a black scalloped "NEW" starburst badge overlapping the top-left corner, and a `#000000` uppercase Oswald title at 20px below with `16px 0 14px` padding.
4. **Text input**: A `#FFFFFF` field with `1px #D9D9D9` border, radius `0px`, `#000000` Roboto text at 16px, padding `10px 8px`, no shadow.
5. **Top nav bar**: White bar with a black wordmark left, uppercase Oswald condensed department links (~13px, `#000000`) center, and a support/search/account/cart utility cluster right — no radius, no borders, separation by whitespace and a hairline.

## Similar Brands
- **Under Armour** — the same condensed-uppercase, black-on-white athletic-tech register with photography carrying the color.
- **The North Face** — rugged outdoor retail built on hard type and monochrome chrome over lifestyle imagery.
- **Bloomberg** — dense condensed caps and structural black slabs used as an information-instrument aesthetic.
- **Wired** — editorial use of heavy uppercase display type against a stark, near-monochrome grid.
- **Casio / G-Shock** — hardware-first, square-cornered, high-contrast product presentation with badge callouts.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-ink: #000000;
  --color-canvas: #FFFFFF;
  --color-ink-soft: #1A1A1A;
  --color-signal: #920000;
  --color-hairline: #D9D9D9;
  --color-border-card: #D8D8D8;

  /* Typography — Families */
  --font-display: 'Oswald', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Roboto', ui-sans-serif, system-ui, Arial, sans-serif;

  /* Typography — Scale */
  --text-2xs: 11px;
  --text-xs: 12.8px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-bar: 14.4px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --leading-tight: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Typography — Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Spacing */
  --g-spacing-none: 0;
  --g-spacing-xs: 0.25rem;
  --g-spacing-sm: 0.5rem;
  --g-spacing-md: 1rem;
  --g-spacing-lg: 1.5rem;
  --g-spacing-xl: 2rem;
  --g-spacing-xxl: 5rem;

  /* Border Radius */
  --radius-none: 0px;
  --radius-chip: 2px;
  --radius-card: 3px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-card: rgb(217, 217, 217) 0px 2px 3px 1px;
  --shadow-overlay: rgba(0, 0, 0, 0.24) 0px 2px 4px 1px;
  --shadow-divider: rgb(238, 238, 238) 0px 1px 0px 0px;

  /* Breakpoints */
  --g-breakpoint-xs: 480px;
  --g-breakpoint-sm: 768px;
  --g-breakpoint-md: 1024px;
  --g-breakpoint-lg: 1200px;
  --g-breakpoint-xl: 1350px;
  --g-breakpoint-xxl: 1440px;
  --g-breakpoint-xxxl: 1824px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-ink: #000000;
  --color-canvas: #FFFFFF;
  --color-ink-soft: #1A1A1A;
  --color-signal: #920000;
  --color-hairline: #D9D9D9;
  --color-border-card: #D8D8D8;

  /* Typography — Families */
  --font-display: 'Oswald', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Roboto', ui-sans-serif, system-ui, Arial, sans-serif;

  /* Typography — Scale */
  --text-2xs: 11px;
  --text-xs: 12.8px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-bar: 14.4px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --leading-tight: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-none: 0;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 5rem;

  /* Border Radius */
  --radius-none: 0px;
  --radius-chip: 2px;
  --radius-card: 3px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-card: rgb(217, 217, 217) 0px 2px 3px 1px;
  --shadow-overlay: rgba(0, 0, 0, 0.24) 0px 2px 4px 1px;
  --shadow-divider: rgb(238, 238, 238) 0px 1px 0px 0px;
}
```