What is HOKA's primary brand color?

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.

What typeface does HOKA use, and what should I use as a substitute?

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.

Where does HOKA use the cobalt blue in their UI?

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.

What corner-radius philosophy does HOKA use?

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.

Can I use this DESIGN.md to build a running-shoe e-commerce site in React?

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.

HOKA Design System

HOKA's design system as a DESIGN.md file.

About HOKA DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source hoka.com

E-commerce & Retail

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.

What makes it distinct

Cobalt voltageHOKA'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 UIthe brand's oversized-cushion product identity appears in photography saturation and color energy, while the chrome stays deliberately flat
All-caps condensed headlineshero displays combine uppercase treatment with compressed grotesque weight to convey athletic intensity without relying on brand color
White canvas with cobalt accentsunlike 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 gridcampaign imagery at full-bleed drives brand emotion; the system chrome steps back to let shoe design lead

Live at hoka.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

hoka.com

Explore HOKA

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

HOKA design system FAQ

Common questions about HOKA's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

HOKA — official site

HOKA's public marketing site — the source of truth for the live design system this file approximates.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.