HOKA Design System

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

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.