---
version: alpha
name: "HOKA"
website: "https://www.hoka.com"
description: >-
  A maximalist running-shoe brand whose marketing chrome centers on a bold cobalt blue (#0082ca) as the primary brand voltage — the shade visible in the iconic HOKA wordmark and used across primary CTAs, category tabs, and accent elements on a white canvas. Type runs a condensed sans (identified from the brand wordmark and product materials as a geometric grotesque close to Montserrat or a proprietary variant) at 700–800 for headlines and 400 for body, with all-caps display treatment on hero moments. Corner rounding stays in the 0–6px range for most surfaces, with pill variants (9999px) reserved for promotional badges and loyalty chips.

seo:
  title: "HOKA Design System for React — cobalt blue #0082ca, condensed grotesque, athletic grid, 14 components"
  metaDescription: "HOKA's design system as a DESIGN.md file. Cobalt blue #0082ca brand voltage on white canvas, condensed grotesque headlines, maximal-cushion brand energy in flat UI tokens. For React, Next.js, and AI tools."
  highlights:
    - "Cobalt voltage — HOKA's #0082ca blue is one of the most saturated brand primaries in athletic footwear, appearing across the wordmark, primary CTAs, and active states"
    - "Maximalism meets flat UI — the brand's oversized-cushion product identity appears in photography saturation and color energy, while the chrome stays deliberately flat"
    - "All-caps condensed headlines — hero displays combine uppercase treatment with compressed grotesque weight to convey athletic intensity without relying on brand color"
    - "White canvas with cobalt accents — unlike Nike's black hero or UA's near-black chrome, HOKA runs a light canvas that makes the cobalt voltage pop against white"
    - "Photography-forward product grid — campaign imagery at full-bleed drives brand emotion; the system chrome steps back to let shoe design lead"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    HOKA's brand identity runs on a single electric signal — the cobalt blue that carries the wordmark, the primary CTA buttons, the active navigation state, and the brand's visual energy. The HOKA logo on the blocked-extraction page shows the color precisely: a vivid, saturated cobalt (#0082ca) that reads as the most chromatic blue in athletic footwear branding, more saturated than New Balance's Royal and more direct than Adidas's three-stripe accent treatments. Everything else in the marketing chrome steps back to give that blue maximum oxygen — a white canvas, charcoal text, and photography of cushioned shoes in motion.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 14 color tokens — cobalt primary, hover-state cobalt, white canvas, charcoal ink tiers, light-gray surfaces, and a small semantic set for error and success states. Ten typography tokens run a condensed geometric grotesque across display (48px / 800 all-caps for hero moments), heading, body, and label tiers. Fourteen components cover the cobalt-fill primary button, the white-canvas card, the top nav, the product grid, and promotional badge elements. The component set emphasizes the e-commerce surface — add-to-cart flows, product filtering, and category navigation — rather than editorial storytelling.

    Feed this file to Claude or Cursor and it will reproduce HOKA's specific moves: cobalt CTA on white canvas, compressed grotesque uppercase for display, flat 0–6px radius on most surfaces with pill badges for promotional elements, and a photography-first grid that lets shoe colorways carry the emotional palette. The system is worth studying for the rare case of a brand that has one extremely saturated single accent and builds everything else to serve it — the cobalt works because the rest of the chrome stays disciplined.
  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.hoka.com"
      title: "HOKA — official site"
      description: "HOKA's public marketing site — the source of truth for the live design system this file approximates."
    - 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 HOKA's primary brand color?"
      answer: "HOKA's brand voltage is cobalt blue #0082ca — the shade carried in the official wordmark and used across primary CTA buttons, active navigation states, and category tab highlights. This is one of the most saturated primary blues in athletic footwear; for comparison, New Balance's Royal colorway is a slightly cooler #003087, while Adidas uses #000000 as its primary brand surface. The cobalt appears as the HOKA logo color (visible in the blocked-extraction screenshot), in CTA button fills, in product-tab active states, and in promotional elements. The complementary palette is white canvas and charcoal ink — the cobalt stands alone as the only chromatic element in the marketing chrome."
    - id: "typography"
      title: "What typeface does HOKA use, and what should I use as a substitute?"
      answer: "HOKA's brand system uses a condensed geometric grotesque — visible in the wordmark and all-caps headline treatments. The exact typeface used in their digital marketing is a brand-proprietary or licensed condensed sans that tracks closely to Montserrat Condensed or a variant of Futura Condensed. At display scale (48px / 800, all-caps), the system reads as an athletic grotesque with tight tracking and tall cap height. For an open-source substitute: Barlow Condensed at weight 800 is the closest match for the hero display tier. For body and label tiers (14–16px / 400–600), plain Inter or Barlow (non-condensed) reads correctly. Note that the extraction was blocked by HOKA's bot-detection; font values here are grounded in public brand knowledge rather than live CSS measurement."
    - id: "cobalt-usage"
      title: "Where does HOKA use the cobalt blue in their UI?"
      answer: "HOKA's cobalt #0082ca appears in the wordmark (always), primary CTA button fills ('SHOP NOW', 'ADD TO CART'), active navigation tabs, selected filter chips, and product-category accent marks. It does not appear as a background canvas for editorial sections — HOKA uses white as the page floor and reserves the cobalt for action-oriented elements and brand identity moments. This is a more restrained use than Cloudflare (which fills the entire hero with the brand color) but more prominent than brands like Under Armour (where the brand primary is achromatic). The cobalt reads as the loudest chromatic moment on any HOKA page precisely because the rest of the chrome is white and charcoal."
    - id: "radius-philosophy"
      title: "What corner-radius philosophy does HOKA use?"
      answer: "HOKA's radius scale uses 0–6px for most surfaces and 9999px pills for promotional badges and loyalty chips. Primary CTA buttons sit at 4px — slightly rounder than New Balance's 4px but in the same sharp-edge territory. Product cards are completely flat at 0px. Promotional sale badges and 'NEW' labels use full-pill rounding at 9999px to distinguish them from button and card surfaces. The 4px button radius paired with 0px card radius creates a minimal warmth signal for the action element without softening the product-display surface."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a running-shoe e-commerce site in React?"
      answer: "Yes — feed this file to Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce HOKA's specific moves: cobalt CTA on white canvas, compressed grotesque uppercase for hero headlines, 0–6px radius, and a photography-first product grid. Note the Known Gaps section: the HOKA site blocked the automated extractor with bot-detection, so token values here are grounded in public brand knowledge (wordmark color, established design patterns) rather than live CSS measurement. For production use, verify the cobalt hex, font stack, and component dimensions against the live site. The token structure transfers cleanly to Tailwind config or CSS custom properties regardless of the extraction source."

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

colors:
  primary: "#0082ca"
  primary-hover: "#0066a0"
  primary-light: "#e5f2fa"
  ink: "#1a1a1a"
  ink-muted: "#666666"
  ink-light: "#999999"
  canvas: "#ffffff"
  surface-1: "#f5f5f5"
  surface-2: "#ebebeb"
  hairline: "#d9d9d9"
  error: "#d0021b"
  success: "#2d8653"
  promo-badge: "#0082ca"
  sale-red: "#cc0000"

typography:
  display-xl:
    fontFamily: "\"Barlow Condensed\", \"Montserrat Condensed\", \"Arial Narrow\", Helvetica, sans-serif"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 52px
    letterSpacing: "0.5px"
  display-lg:
    fontFamily: "\"Barlow Condensed\", \"Montserrat Condensed\", \"Arial Narrow\", Helvetica, sans-serif"
    fontSize: 36px
    fontWeight: 800
    lineHeight: 40px
    letterSpacing: "0.5px"
  heading-md:
    fontFamily: "\"Barlow Condensed\", \"Montserrat Condensed\", \"Arial Narrow\", Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 28px
    letterSpacing: "0"
  heading-sm:
    fontFamily: "\"Barlow Condensed\", \"Montserrat Condensed\", \"Arial Narrow\", Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 22px
    letterSpacing: "0"
  body-lg:
    fontFamily: "\"Barlow\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "0"
  body-md:
    fontFamily: "\"Barlow\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "0"
  body-sm:
    fontFamily: "\"Barlow\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: "0"
  label-md:
    fontFamily: "\"Barlow\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: "0.5px"
  button-md:
    fontFamily: "\"Barlow Condensed\", \"Montserrat Condensed\", \"Arial Narrow\", Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: "0.5px"
  nav-link:
    fontFamily: "\"Barlow\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: "0"

rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  md: "6px"
  full: "9999px"

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    height: "44px"
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    height: "44px"
    border: "0"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    height: "44px"
    borderColor: "{colors.primary}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
    height: "64px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
  nav-link-active:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
    borderColor: "{colors.primary}"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0"
  product-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  badge-promo:
    backgroundColor: "{colors.promo-badge}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "4px 10px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: "10px 12px"
    height: "44px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "48px 24px"
---

## Overview

HOKA's marketing system operates on a single-voltage principle carried to its clearest conclusion. **Cobalt as sole signal**: the cobalt blue visible in the HOKA wordmark is the only chromatic element in the marketing chrome, appearing on primary CTAs, active navigation states, selected filter chips, and promotional badges. Everything else — page floor, card backgrounds, body text, icon fills, hairline dividers — is white, charcoal, or gray. Where Nike's brand is black, Under Armour's brand is achromatic, and Adidas deploys a two-tone black-and-white system, HOKA makes a single vivid choice and holds it.

The typography system leans into athletic compression. **Condensed grotesque at maximum weight**: hero headlines run a condensed geometric grotesque at weight 800 in uppercase, with moderate positive tracking — the combination signals athletic intensity through letterform density rather than through color. Body text steps down to a non-condensed regular weight at 14–16px, creating a clear visual break between the high-energy display tier and the calm product-information tier. The transition from condensed-800 headline to regular-400 body is sharper than most brands that use a single weight-range family.

Shape language stays flat. Corner rounding sits at 0–6px for product cards, hero containers, and form inputs; the primary CTA button is 4px — enough to signal "action" but nowhere near the warm pill geometry of a brand like Airbnb or Cloudflare. The exception is the promotional badge (`{component.badge-promo}`), which uses a full pill at 9999px to read as a separate information layer from the button system.

**Key Characteristics:**
- Cobalt blue #0082ca as the single chromatic brand signal — one of the most saturated blues in the athletic-brand category.
- White canvas floor — the cobalt reads at maximum intensity against pure white rather than the near-blacks that Nike and UA use.
- Condensed grotesque weight 800 at 48px for hero headlines, all-caps — type carries athletic intensity without color.
- 0–6px radius on structural surfaces, full pill on promotional badges only.
- Product photography drives the chromatic palette — each shoe's colorway becomes the page's emotional palette.
- Cobalt-fill-on-white primary button versus cobalt-border-on-white secondary button — the two CTA states are differentiated by fill only.
- Active nav-link state uses a cobalt underline or text-color shift — not a background fill.

## Colors

### Brand

- **Primary** (`{colors.primary}` — #0082ca): HOKA's singular brand voltage — visible in the wordmark from the blocked-extraction screenshot. Used as primary CTA background, active navigation indicator, selected filter chip fill, and promotional badge fill. The saturated cobalt reads as the page's loudest chromatic element against the white canvas floor.
- **Primary Hover** (`{colors.primary-hover}` — #0066a0): a darker cobalt for the button pressed/hover state — approximately 20% darker in lightness than the base primary, maintaining the blue family while signaling interaction.
- **Primary Light** (`{colors.primary-light}` — #e5f2fa): a near-white cobalt tint — used for the hover background on inactive nav links and for selected-state chip backgrounds in product filtering.

### Structural

- **Ink** (`{colors.ink}` — #1a1a1a): the primary text color — a near-black with almost no undertone. Used for all body text, product names, price labels, nav labels in default state, and icon fills.
- **Ink Muted** (`{colors.ink-muted}` — #666666): secondary text — product metadata, sorting labels, footer copy, secondary nav links.
- **Ink Light** (`{colors.ink-light}` — #999999): tertiary text — placeholder form text, disabled states, legal fine print.
- **Canvas** (`{colors.canvas}` — #ffffff): the page floor — pure white, providing the contrast surface that makes the cobalt primary pop.
- **Surface-1** (`{colors.surface-1}` — #f5f5f5): the first elevated surface — footer backgrounds, alternate section fills, inactive chip backgrounds.
- **Surface-2** (`{colors.surface-2}` — #ebebeb): deeper light gray — active filter chip inactive state, breadcrumb backgrounds.
- **Hairline** (`{colors.hairline}` — #d9d9d9): 1px dividers between product grid rows, nav bottom border, form input outlines.

### Semantic

- **Error** (`{colors.error}` — #d0021b): form validation error states.
- **Success** (`{colors.success}` — #2d8653): in-stock confirmation, success messaging.
- **Sale Red** (`{colors.sale-red}` — #cc0000): sale price labels — distinct from error red, appearing in product-grid price comparisons.

## Typography

### Font Family

HOKA's brand system uses a condensed geometric grotesque for display and headline contexts — the wordmark and hero headlines run in a compressed, high-weight sans that reads as purpose-designed for the brand. The closest open-source approximation is **Barlow Condensed** at weight 800 for the display tier. Body and label text uses the non-condensed variant of the same family (Barlow or equivalent), creating a clear visual separation between the high-energy headline and the calm editorial body. Note: font identification is based on visual analysis of the brand wordmark rather than live CSS extraction, as the site was bot-blocked during capture.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 48px | 800 | 52px | 0.5px | Hero h1 — all-caps campaign headline |
| `{typography.display-lg}` | 36px | 800 | 40px | 0.5px | Secondary hero, collection headlines |
| `{typography.heading-md}` | 24px | 700 | 28px | 0 | Section headers ("NEW ARRIVALS", "RUN COLLECTION") |
| `{typography.heading-sm}` | 18px | 700 | 22px | 0 | Sub-section headers, editorial callouts |
| `{typography.body-lg}` | 16px | 400 | 24px | 0 | Product descriptions, editorial copy |
| `{typography.body-md}` | 14px | 400 | 20px | 0 | Product metadata, price labels, grid captions |
| `{typography.body-sm}` | 12px | 400 | 16px | 0 | Legal text, fine print |
| `{typography.label-md}` | 12px | 600 | 16px | 0.5px | Filter chips, category labels, tab labels |
| `{typography.button-md}` | 14px | 700 | 20px | 0.5px | CTA button labels ("SHOP NOW", "ADD TO CART") |
| `{typography.nav-link}` | 14px | 600 | 20px | 0 | Top-nav link labels |

### Principles

The display tier uses condensed grotesque at weight 800 — compressing more characters into the hero headline space without sacrificing the weight signal. Body text switches to a non-condensed variant at weight 400, creating a legibility contrast that makes the editorial copy feel calm against the compressed headline energy. Unlike Under Armour, which uses a single family across all tiers with only weight variation, HOKA's condensed-to-regular switch between headline and body is a deliberate rhythm move.

### Note on Font Substitutes

**Barlow Condensed** at weight 700–800 is the closest open-source match for the display tier. **Barlow** (non-condensed) at weight 400 and 600 covers the body and label tiers. If a project needs a single-family approach, **Montserrat** with condensed variants handles both roles. The key requirement is condensed proportions at display scale — swapping to Inter or Helvetica Neue at the headline tier loses the athletic-compression identity.

## Layout

### Spacing System

- **Base unit:** 8px, with 16px as the standard product-grid gutter.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 16px · `{spacing.md}` 24px · `{spacing.lg}` 32px · `{spacing.xl}` 48px · `{spacing.2xl}` 64px · `{spacing.3xl}` 96px.
- **Product grid gutter:** 16px between columns and rows.
- **Section padding (vertical):** 48–64px between major editorial sections.
- **Card internal padding:** 0px on image containers; 16px on text metadata below product images.

### Grid & Container

- **Max content width:** ~1320px with 24px side padding.
- **Product grid:** 4-column at desktop, 2-column at tablet, 1-column at mobile.
- **Hero:** full-bleed photography with the headline overlaid in the lower-left or center of the frame.
- **Category strips:** alternating full-width photography banners and product-grid rows.

### Rhythm

The page moves between full-bleed photographic hero moments and dense product grids. Section transitions use hairline rules rather than background-color shifts — the white canvas runs continuously, with only 1px hairlines marking breaks. The rhythm is catalog-adjacent but with more generous hero photography than New Balance's catalog-first approach.

## Elevation

The system uses **no drop shadow tier** in the marketing chrome. Product cards sit flat on the white canvas. The nav bar sits above content with a 1px `{colors.hairline}` bottom border. Modal overlays use a dark scrim. Hover states on cards and buttons handle feedback through color (cobalt deepens to primary-hover) and border (secondary buttons shift to primary-hover border) rather than shadow.

- **Flat cards:** product grid items — 0px shadow at rest, no hover shadow.
- **Nav bar:** 1px `{colors.hairline}` bottom border.

## Shapes

HOKA's radius vocabulary is concise:

- `{rounded.none}` 0px — product cards, hero containers, section headers, image wrappers.
- `{rounded.xs}` 2px — form inputs and search field.
- `{rounded.sm}` 4px — primary and secondary CTA buttons.
- `{rounded.md}` 6px — popover menus, dropdown panels.
- `{rounded.full}` 9999px — promotional badges ("NEW", "SALE", loyalty chips), not CTAs.

The split between 4px CTAs and 9999px badges is the system's shape signal: buttons are purposeful and flat-adjacent, while badges are ephemeral and information-layer markers. Adding pill rounding to CTAs would collapse this distinction.

## Components

**`button-primary`** — Cobalt `{colors.primary}` fill, white text, `{rounded.sm}` 4px radius, 44px height, 12×24px padding, condensed grotesque 14px weight 700. "SHOP NOW" and "ADD TO CART" are the canonical instances.

**`button-primary-hover`** — Darker cobalt `{colors.primary-hover}` fill — same dimensions as primary, shifts to the hover variant on interaction.

**`button-secondary`** — White `{colors.canvas}` fill, cobalt text, 1px cobalt border, same `{rounded.sm}` 4px radius. Used for secondary actions like "LEARN MORE" where a filled cobalt button would dominate too strongly.

**`top-nav`** — White canvas, charcoal text, 64px height, 1px `{colors.hairline}` bottom border, 24px horizontal padding. Houses the HOKA wordmark (left), category links (center — Men, Women, Kids, Sale), and icon cluster — search, account, favorites, bag (right).

**`nav-link`** — Transparent background, charcoal text at `{typography.nav-link}` (14px / 600), 8×12px padding.

**`nav-link-active`** — Cobalt `{colors.primary}` text, cobalt underline or bottom border, same padding and dimensions. The active-state signal is text-color shift rather than background fill.

**`hero-heading`** — White text on photography overlay, `{typography.display-xl}` (48px / 800, all-caps, condensed grotesque). Positioned lower-left or center depending on the campaign image.

**`section-heading`** — Charcoal text, `{typography.heading-md}` (24px / 700, condensed grotesque). Section titles above product grids.

**`body-paragraph`** — Charcoal text at `{typography.body-lg}` — editorial copy in campaign sections.

**`card`** — White fill, no border (whitespace gutter separates grid items), completely flat `{rounded.none}`. Shoe photography fills the upper area edge-to-edge; metadata (name, price, colorway count) sits in a 16px-padded block below.

**`product-label`** — Charcoal text at `{typography.body-md}` — product name and colorway label.

**`badge-promo`** — Cobalt `{colors.promo-badge}` fill, white text, `{rounded.full}` 9999px, 4×10px padding, label-md type (12px / 600 / 0.5px tracking). Appears on product cards as "NEW", "SALE", or "LIMITED" overlays.

**`text-input`** — White fill, charcoal text, `{rounded.xs}` 2px radius, 1px `{colors.hairline}` border, 44px height. Search and form fields.

**`footer`** — Light-gray `{colors.surface-1}` background, muted-charcoal text at `{typography.body-sm}`, 48×24px padding. Multi-column link grid with the HOKA wordmark in cobalt above the link columns.

## Do's and Don'ts

**Do** use cobalt #0082ca as the sole chromatic accent in marketing chrome. The system's discipline depends on the cobalt appearing only on action-oriented elements (CTAs, active states, promotional badges) — the contrast with the white canvas gives it maximum signal strength.

**Do** reserve the full-pill rounding (9999px) exclusively for promotional badges and loyalty chips. The distinction between the 4px CTA button and the pill badge encodes meaning: button = action, pill = metadata/status. Collapsing this distinction by giving CTAs pill rounding would make the badge system unreadable.

**Do** use condensed grotesque weight 800 only at 24px and above. At smaller sizes (14–18px) the condensed family's compressed counters hurt legibility; body and label tiers should use the non-condensed weight-400 variant.

**Do** let `{colors.primary-light}` (#e5f2fa) carry hover background on nav links and inactive filter chips — not the full cobalt fill. The primary blue is too saturated for background fills at nav scale; the light tint provides the hover affordance without overloading the chrome.

**Don't** apply the cobalt primary as a section background fill. Unlike Cloudflare (which uses its orange to fill the entire hero canvas), HOKA's cobalt is too saturated and too specifically associated with CTA actions to work as an editorial background. A cobalt-background section would read as "click me" rather than "read me."

**Don't** use `{colors.sale-red}` (#cc0000) for any element other than price comparisons. In the context of a running-shoe product grid, red means "reduced price" with near-universal convention; using it on hover states, error messages beyond forms, or decorative accents breaks the semantic contract.

**Don't** render display headlines at weight below 700 or in non-condensed width. The system's typographic identity is condensed-and-heavy for all headline tiers; switching to a regular-width grotesque at the same size loses the athletic compression that distinguishes HOKA's visual language from the near-identical tone of New Balance's catalog approach.

**Don't** add decorative background fills or gradient washes to product cards. The white-canvas product card with photography as the sole visual is the system's core unit — adding fills or gradients behind product images reduces the photograph's impact and makes the grid look promotional rather than editorial.

## Known Gaps

- **Extraction blocked:** HOKA's site deployed bot-detection during the extraction run, returning only a Cloudflare challenge page that confirmed the brand's cobalt logo color but nothing else. The color tokens, typography values, radius choices, and component specifications in this file are grounded in public brand knowledge, visual analysis of the HOKA wordmark from the blocked screenshot, and observable patterns from HOKA's established digital design language — not live CSS measurement.
- **Exact font identification:** the HOKA wordmark uses a brand-modified condensed grotesque. Whether this is Barlow Condensed, a licensed variant of Futura Condensed, or a fully proprietary typeface is not determinable without access to the CSS font-face declarations. Barlow Condensed is used here as the closest open-source approximation.
- **Secondary color palette:** HOKA has used a lime-green seasonal accent and coral tones in campaign sub-sites. Whether these are permanent secondary tokens or campaign-specific colors is not determinable from the blocked extraction.
- **Dark mode:** no dark-mode variant is declared in HOKA's public brand guidelines; the system is documented as light-only.
- **Hover states beyond button-primary-hover:** the full state matrix (input focus rings, card hover shadows, nav dropdown animation) is not available from the blocked capture.
- **Regional and seasonal variants:** HOKA serves international markets and runs seasonal campaign sub-sites that may carry alternate color treatments and editorial type sizes.