# HOKA — Marketing Site Design Spec

> 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) — its `ww-*` keyframes/animation excluded as third-party. No `:root` custom 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text & ink
| 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 |

### Surfaces & borders
| 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 |

### Accent & semantic
| 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.

## 3. Typography Rules

- Font stack: `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.
- Body: 16px / 24px / 400 / `#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.

## 4. Component Stylings

### Buttons
- **Primary (over imagery)**: transparent rest, text `#ffffff`, 1px `#e6e6e6` border, radius `2px`, h `56px`, Jost 16/700, padding `0`. Hover: background fills `#000000` (`.wysiwym-link-button:hover`).
- **Ghost / link-button**: transparent, text `#2a2a38`; default text link hovers to `#000000`.
- **Icon "+" button**: transparent, text `#0077b8`, Jost 14/400.
- Image tiles as buttons: hover drops to `opacity: 0.75`.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| CTA (outline) | transparent / white text / 1px `#e6e6e6` | bg → `#000000` | **suppressed** (`outline:0`) | — | `#cccccc` text |
| Text link | `#2a2a38` | `#000000` | suppressed | — | — |
| Image tile | opacity 1 | opacity `0.75` | suppressed | — | — |

Focus is an anti-pattern here: `.focus\:outline-none:focus` and the js-focus-visible shim set `outline:0`. Recommended replacement: `0 0 0 3px rgba(0,119,184,.35)`.

### Inputs
- Search: h `48px`, transparent bg, no border, 16px, placeholder `#ffffff` (over dark).
- Email (newsletter): h `56px`, 1px `#cccccc` border, radius `2px`, padding `0 64px 0 16px`, 16px.

### Cards / media
- Product & article tiles: image radius `8px` (the dominant radius, 112×), thin or no border, no shadow.

## 5. Layout Principles

- Full-bleed campaign hero images (2400×800 class), edge-to-edge, with overlaid outline CTAs.
- Content sits in a wide centered container; product grids are Swiper carousels ("Trending Now").
- Section rhythm alternates white content bands with occasional dark `#2a2a38` / deep-blue `#0b4062` bands.
- Nav: white bar, UPPERCASE 14px links, HOKA wordmark; utility row above (Qantas points, contact).
- Newsletter block on the dark band with a bordered email field.

## 6. Depth & Elevation

- Radius scale: `2px` controls · `6px` small · `8px` images/cards (dominant) · `9999px` pills (6×) · `50%` avatars.
- Borders do the structural work: `1px #e6e6e6` (control), `1px #cccccc` (input), `1px #343a40` (emphasis).
- Shadows are nearly absent — the only real one is a navy-tinted `rgba(23,73,77,.15) 0px 20px 30px` on a floating element; the rest are transparent placeholders.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| top | 0.15s | cubic-bezier(0.4, 0, 0.2, 1) | sticky/reveal chrome |
| width | 0.1s | cubic-bezier(0.4, 0, 0.2, 1) | search expand |
| opacity | (hover) | — | image tiles → 0.75 |

House easing is the Material `cubic-bezier(0.4, 0, 0.2, 1)`; durations are short (0.1–0.15s). Keyframes observed: `spin` + `swiper-preloader-spin` (loaders), `dot-left/right/centre-9f229e44` (a three-dot loader). Carousel is Swiper. No GSAP/Framer/Lenis detected on brand chrome; the `ww-*` widget animation belongs to the third-party chat widget and is excluded. No `prefers-reduced-motion` block (anti-pattern).

## 8. Backgrounds, Effects & WebGL

None decorative — flat white surfaces. Atmosphere is entirely 10+ full-bleed raster campaign images; zero CSS gradients (the one "gradient" hit is an inline SVG icon data-URL), zero canvas/WebGL, zero video, zero grain, zero backdrop-filter.

## 9. Do's and Don'ts

### Do
- Set the whole UI in Jost; headings 700 and often UPPERCASE, body/nav 400 — weights are binary.
- Keep chrome blue-black `#2a2a38` on white; reserve `#0077b8` for links only.
- Let full-bleed product/campaign photography carry all the colour and "bulk".
- Use outline CTAs over imagery that fill `#000000` on hover.
- Structure with 1px `#e6e6e6`/`#cccccc` hairlines; 8px radius on images, 2px on controls.
- Keep motion tiny (0.1–0.15s) on the Material easing.

### Don't
- Don't add decorative gradients, shadows or backdrop blur — the surface is flat.
- Don't introduce a second type family or a mid weight between 400 and 700.
- Don't tint the chrome with the campaign colours (orange/red are labels only).
- Don't ship suppressed focus — replace `outline:0` with a visible blue ring.
- Don't add negative tracking; Jost stays at `normal` even at 36px.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| max 355 / 479 | small-phone tweaks |
| 640 / 767 / 768 | phone→tablet: nav collapses to hamburger, grids reflow |
| 1024 / 1280 | tablet→desktop layout |
| 1536 / 1728 / 1920 | large-desktop max-widths |

A device-targeted ladder (10 seams) rather than a framework default. No dark-scheme blocks (`darkSchemeBlocks:0`), no container queries, no reduced-motion block. Mobile nav is a hamburger; carousels swipe.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#2a2a38` · Muted `#666666` · Border `#e6e6e6` · Accent `#0077b8`
- Font: `Jost, sans-serif` · Body: 16px · Radius: 2px control / 8px image · Control height: 56px
- Focus: suppressed on site — use `0 0 0 3px rgba(0,119,184,.35)` · Hover fill: `#000000`

<hoka-marketing_design_language>
Use the HOKA marketing design language: a clean, high-contrast athletic storefront on a white canvas where the chrome recedes and full-bleed product photography carries all the colour. Set the entire UI in Jost (a Futura-like geometric sans); headings weight 700 and frequently UPPERCASE, body and nav weight 400, with tracking left normal even at 36px — weights are binary, never a mid step. Ink is a blue-cast near-black #2a2a38; secondary #666666; the one chromatic UI colour is a mid blue #0077b8 reserved for links, while orange #bf4800 and red #a60000 appear only as tiny labels. Structure comes from 1px #e6e6e6/#cccccc hairlines, an 8px radius on images and 2px on controls; elevation is essentially flat (one navy-tinted rgba(23,73,77,.15) shadow at most). CTAs are outline controls over imagery that fill solid #000000 on hover; the newsletter field is a 56px bordered box at 2px radius. Motion is tiny (0.1–0.15s on cubic-bezier(.4,0,.2,1)); Swiper carousels; no gradients, canvas, video or backdrop blur. Feels: clean, athletic, product-first. Avoid: tinting the chrome with campaign colours, a second type family or a mid font-weight, decorative gradients/shadows, negative tracking, and suppressed focus rings (replace outline:0 with a visible blue ring).
</hoka-marketing_design_language>