A clean high-contrast athletic storefront where the chrome deliberately recedes so full-bleed product photography can shout — the hint’s "bold colour-blocked, chunky silhouettes" describes the imagery and shoe silhouettes, not the UI, which is near-monochrome. The entire page is one geometric sans, Jost (a Futura relative), with headings at weight 700 and frequently UPPERCASE while body and nav sit at 400, so emphasis is binary weight and case rather than colour, and tracking stays normal even at the 36px section head. Ink is a blue-cast near-black #2a2a38 on a white canvas, secondary #666666, and the single chromatic UI colour is a mid blue #0077b8 reserved for links, while orange #bf4800 and red #a60000 surface only as tiny labels. Structure is carried by 1px #e6e6e6 and #cccccc hairlines with a shared 8px image radius and 2px controls; elevation is essentially flat, the one real shadow a navy-tinted rgba(23,73,77,.15) drop. CTAs are outline controls laid over campaign imagery that fill solid #000000 on hover, and the newsletter field is a 56px bordered box at 2px radius. There are no CSS gradients, no canvas or video and no backdrop blur — all colour and bulk live in the photography; motion is tiny at 0.1–0.15s on cubic-bezier(.4,0,.2,1) with Swiper carousels, and the site suppresses its focus ring (an anti-pattern).
⚠ site only
Browse HOKA in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: au.hoka.com (live DOM, computed styles), 2026-07-27 (desktop 1512px). US path www.hoka.com/en/us geo-redirects to au.hoka.com. Coverage: homepage. 1 stylesheet cross-origin (chat widget) — itsww-*keyframes/animation excluded as third-party. No:rootcustom properties (SFCC/hand-authored theme): palette read from the colour census, not tokens. Reality check: the hint ("bold colour-blocked, chunky silhouettes") describes the PRODUCT PHOTOGRAPHY and shoe silhouettes, not the chrome. The UI itself is restrained and near-monochrome — a blue-black #2a2a38 ink on white with ONE blue accent #0077b8; all colour and bulk live in full-bleed campaign imagery.
A clean, high-contrast Swiss-athletic storefront where the interface deliberately recedes so the product photography can shout. The entire page is one geometric sans (Jost, a Futura relative) on white, with headings set UPPERCASE at weight 700 and everything else at 400 — restraint by weight and case, not by colour. Chrome is a blue-tinted near-black #2a2a38 with a single mid blue #0077b8 for links; there are no decorative gradients, no shadows to speak of, and structure is carried by thin #e6e6e6 / #cccccc hairlines and a shared 8px image radius. CTAs are ghost/outline controls laid over imagery that fill solid black on hover. Feels: clean, athletic, high-contrast, product-first.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #2a2a38 | Primary text + headings (blue-cast near-black, 792×) |
| black | #000000 | Max-contrast text, hover fill for CTAs |
| white | #ffffff | Text on imagery / dark bands |
| muted | #666666 | Secondary text |
| faint | #cccccc | Tertiary text, disabled, hairlines |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background, cards |
| surface | #f7f6f9 | Section tint / inset panels (56×) |
| surface-2 | #f4f5f7 | Alt panel fill |
| dark-band | #2a2a38 | Full-bleed dark section fill (e.g. newsletter) |
| border | #e6e6e6 | Control/card hairline |
| border-2 | #cccccc | Input hairline |
| border-strong | #343a40 | Emphasised 1px border |
| Token | Hex | Role / usage |
|---|---|---|
| blue | #0077b8 | Links, secondary "+" buttons — the one UI accent |
| blue-deep | #0b4062 | Deep-blue band fill |
| orange | #bf4800 | Rare highlight (2×) |
| red | #a60000 | Sale / error label (1×) |
Rule: chrome stays blue-black + white; #0077b8 is the only chromatic UI colour — everything else vivid is photography.
Jost, -apple-system, sans-serif — a single geometric sans across the whole page (1181× dominant). Jost is an open Google Font (a Futura-like relative), so the preview loads the real face.#2a2a38. No display face — the homepage hero is photographic, so no <h1> role rendered; the display treatment is the UPPERCASE 700 section head.| Role | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|
| Section head (h3) | 36 / 40 | 700 | normal | UPPERCASE |
| Sub-head (h2) | 24 / 32 | 700 | normal | none |
| Body (p) | 16 / 24 | 400 | normal | none |
| Nav / label | 14 / 20 | 400 | normal | UPPERCASE |
| Button | 14–16 / 20 | 400–700 | normal | none |
Patterns: headings are 700 and mostly UPPERCASE; body/nav are 400; tracking stays normal at every size (no negative tracking even on the 36px head). Weight is binary — 400 or 700, nothing between.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.