--- version: alpha name: Hoka description: Bold performance energy. Deep cobalt-and-white canvas with a vivid orange accent, oversized athletic typography, and aggressive full-bleed hero photography — a maximalist running brand that makes minimal UI choices. colors: # Primary canvas background: "#ffffff" surface: "#f5f5f5" # surface is the light grey used for product card and secondary section backgrounds # Text / ink ink: "#1a1a1a" ink-secondary: "#555555" # ink-secondary used for product descriptors, price metadata, helper text /* estimated */ # Brand identity primary: "#0066cc" # primary is Hoka's signature cobalt blue — used for CTAs, nav highlights, links /* estimated */ on-primary: "#ffffff" primary-hover: "#004fa3" # primary-hover is the darkened cobalt used on button hover states /* estimated */ primary-container: "#e6f0fa" # primary-container is the pale blue tint used for tag backgrounds and active pills /* estimated */ # Brand accent accent: "#f26522" # accent is Hoka's vivid orange — brand second color, used for sale labels, promo badges, highlight moments /* estimated */ on-accent: "#ffffff" # Borders border: "#dddddd" # border is the neutral light grey used for card outlines and dividers /* estimated */ border-strong: "#999999" # border-strong used for focused and active input borders /* estimated */ # Navigation nav-background: "#ffffff" nav-dark: "#1a1a1a" # nav-dark is the inverted dark nav used on certain campaign pages /* estimated */ # Semantic error: "#cc0000" success: "#1a7a3e" # error and success map to standard US e-commerce red/green /* estimated */ # Interaction / state focus-ring: "#0066cc" # focus-ring matches primary blue for accessibility consistency /* estimated */ shadow-soft: "#1a1a1a" # shadow-soft flattened from rgba(0,0,0,0.10) — Google format requires hex # Sale / markdown sale: "#cc0000" # sale red used for price markdown labels and sale badge backgrounds /* estimated */ typography: display-hero: fontFamily: "Hoka, 'DIN Condensed', 'Barlow Condensed', Arial Narrow, sans-serif" fontSize: 80px fontWeight: 700 lineHeight: 0.95 letterSpacing: -1px # display-hero: oversized condensed uppercase style for campaign hero headlines /* estimated */ display: fontFamily: "Hoka, 'DIN Condensed', 'Barlow Condensed', Arial Narrow, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.05 letterSpacing: -0.5px heading-section: fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 28px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px heading-sub: fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0px body-large: fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0px body: fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-medium: fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.5px button-ui: fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 1px label-caps: fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 11px fontWeight: 700 lineHeight: 1.3 letterSpacing: 1.5px # label-caps: ALL CAPS label style for category tags, sale indicators, filter chips /* estimated */ caption: fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 80px 5xl: 120px rounded: none: 0px sm: 4px md: 8px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 14px 28px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 14px 28px button-primary-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 14px 28px button-primary-dark-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 14px 28px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 14px 28px button-secondary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 14px 28px card-product: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 0px card-product-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.sm}" padding: 0px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px badge-sale: backgroundColor: "{colors.sale}" textColor: "{colors.on-primary}" typography: "{typography.label-caps}" rounded: "{rounded.none}" padding: 3px 8px badge-new: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-caps}" rounded: "{rounded.none}" padding: 3px 8px badge-category: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.label-caps}" rounded: "{rounded.sm}" padding: 4px 10px filter-pill: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.label-caps}" rounded: "{rounded.pill}" padding: 8px 16px filter-pill-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.label-caps}" rounded: "{rounded.pill}" padding: 8px 16px nav-bar: backgroundColor: "{colors.nav-background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 12px 32px banner-promo: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-caps}" padding: 10px 16px --- # Hoka Design System ## Overview Hoka lands on a performance paradox: a brand famous for maximum-cushion shoes that has chosen a near-minimal UI philosophy. The canvas is white (`{colors.background}`) — clean, bright, athletic — with the brand's signature cobalt blue (`{colors.primary}`) as the singular accent that ties navigation, CTAs, and interactive chrome into one coherent system. Orange (`{colors.accent}`) shows up as a secondary energy source: sale labels, promotional banners, high-urgency moments. These two pigments — blue and orange, complementary by the color wheel — create the visual electricity that runs through every commercial page on the site. The typography tells a story of two personalities. Campaign headlines arrive in a compressed, ultra-bold condensed face with sub-1.0 line-height — uppercase, wide-shouldered, as physically imposing as the maximalist foam stack the brand sells. Below it, Helvetica Neue handles everything operational: product names, descriptions, navigation links, button labels. The combination has the directness of a sports goods catalog translated into a digital flagship: nothing gratuitous, everything assertive. Letter-spaced all-caps labels (`{typography.label-caps}`) run through the product tier — "NEW COLORWAY", "SALE", "BESTSELLER" — with the confident bark of a coaching staff, not the whisper of a luxury house. Shape language is deliberately flat and sharp. Buttons use `{rounded.none}` — no radius, hard edges — giving every CTA a severity that says "stop and commit" rather than "casually click." Product cards receive a token 4px radius (`{rounded.sm}`) to soften image edges. Nothing in the system reaches for the pill; this is a performance brand, not a wellness brand, and the angular choices reflect that. Full-bleed photography — athletes mid-stride, shoes in motion against vivid studio backdrops — is the design's emotional core, and the sharp-edged UI retreats to let it dominate. **Key Characteristics:** - Cobalt blue (`{colors.primary}`) as the dominant brand accent — CTA color, link color, nav highlight - Vivid orange (`{colors.accent}`) reserved for sale labels, promo banners, and urgency-driven moments - Condensed bold display typography (sub-1.0 line-height) for campaign headlines — physically commanding - Helvetica Neue for all operational UI — body, nav, buttons — with letter-spaced ALL CAPS for label tier - Sharp-edged buttons (`{rounded.none}`) — no border radius on interactive controls - 4px radius on product cards — minimal softening without pill-shape hospitality - White (`{colors.background}`) primary canvas with light grey (`{colors.surface}`) for product grid sections - Full-bleed hero photography at the emotional core — the UI frames and defers - Flat elevation model — product cards are borderless or lightly bordered, no hover shadows - Promotional top banner in cobalt blue (`{colors.primary}`) or orange (`{colors.accent}`) for shipping/sale announcements - ALL CAPS button labels with 1px letter-spacing — assertive, not decorative ## Colors ### Primary Canvas - **White** (`{colors.background}`): Page background. The dominant field. Clean, athletic, no warmth — this is a performance brand, not a lifestyle one. - **Light Grey** (`{colors.surface}`): Product card grid backgrounds, secondary section fills. Creates a subtle separation between page and product without adding visual noise. ### Ink - **Near-Black** (`{colors.ink}`): Primary text, icon fills, secondary button fills. Slightly off-black preserves high contrast while avoiding the visual harshness of pure `#000000`. - **Mid Grey** (`{colors.ink-secondary}`): Descriptive copy, metadata, product sub-labels. Relieves the flat contrast between near-black and white without losing legibility. ### Brand Blue - **Cobalt** (`{colors.primary}`): The central brand accent. Applied to all primary CTA buttons, active nav states, text links, focus rings, and the promotional top banner. The visual anchor that makes the page unmistakably Hoka. - **Dark Cobalt** (`{colors.primary-hover}`): Hover state for primary buttons — a deeper shade of the same hue family. Indicates interactivity without a color-hue change. - **Pale Blue** (`{colors.primary-container}`): Tinted background for category badges and selected filter pills. The lightest expression of the brand blue. ### Brand Orange - **Vivid Orange** (`{colors.accent}`): Hoka's secondary brand color. Applied to sale price labels, promotional badges, high-urgency campaign moments, and select hero accent elements. Never applied to interactive controls — that role belongs to cobalt blue alone. ### Semantic & State - **Error Red** (`{colors.error}`): Form validation errors, out-of-stock warnings. - **Success Green** (`{colors.success}`): Order confirmations, in-stock indicators. - **Sale Red** (`{colors.sale}`): Markdown price labels and sale badge backgrounds — a sharper red than semantic error, optimized for retail urgency. - **Focus Ring** (`{colors.focus-ring}`): Keyboard focus indicator, matching `{colors.primary}` for visual consistency. ### Borders & Shadows - **Light Border** (`{colors.border}`): Card edges, input outlines, dividers. - **Strong Border** (`{colors.border-strong}`): Active input states, focused form elements. - **Shadow Tint** (`{colors.shadow-soft}`): Flattened from rgba(0,0,0,0.10) — the theoretical base for any floating element. ## Typography ### Font Family - **Display (Hoka custom / DIN Condensed)**: Hoka uses a proprietary or licensed condensed grotesque for campaign headlines. Closest open substitute: `Barlow Condensed` (Google Fonts). Full fallback: `'Hoka', 'DIN Condensed', 'Barlow Condensed', Arial Narrow, sans-serif`. Used exclusively for hero display headlines at 48–80px, uppercase, aggressive sub-1.0 line-height. - **UI (Helvetica Neue)**: All navigation, body text, buttons, captions, and label copy. Clean, neutral, performance-utilitarian. Fallback: `Helvetica, Arial, sans-serif`. ### Hierarchy The complete type scale is declared in the `typography:` token block above. | Token | Use | |---|---| | `display-hero` | Full-width campaign hero headlines — condensed, 80px, uppercase | | `display` | Section hero headlines and feature campaign headers — 48px | | `heading-section` | Section titles and product category headers — 28px/700 | | `heading-sub` | Product names, card titles, sub-section labels — 20px/700 | | `body-large` | Editorial lead copy and taglines — 18px | | `body` | Product descriptions, nav flyout copy — 16px/400 | | `body-medium` | Emphasized body copy and inline bold — 16px/500 | | `nav-link` | Primary navigation links — 14px/700, 0.5px tracking | | `button-ui` | All CTA and button labels — 14px/700, 1px letter-spacing, uppercase | | `label-caps` | Product status labels (NEW, SALE, BESTSELLER), filter tags — 11px/700, 1.5px tracking | | `caption` | Price metadata, legal footnotes, size guide links — 13px/400 | ### Principles - Two font worlds: condensed display for campaign energy, Helvetica Neue for operational clarity — they never cross-contaminate - Button labels use ALL CAPS with 1px letter-spacing — this is brand personality, not a legacy habit - Negative tracking at display scale (−0.5px to −1px) tightens large headlines; the label tier opens outward (+1.5px) to ensure readability at 11px - Weight range is focused: 400 for reading, 500 for emphasis, 700 for headlines and all interactive text - Condensed display headlines are always uppercase — they are athletic event banners, not literary headlines ## Layout ### Spacing System The complete spacing scale lives in the `spacing:` token block above. Base unit: `{spacing.xs}` (4px). Primary micro-rhythm: 8px (`{spacing.sm}`). Section transitions: 64–120px. Spacing personality is compressed at the product level and expansive at the page level. Product card metadata sits at 4–8px gaps; section breaks jump to 64–120px. The system avoids comfortable mid-range softness — it goes from tight to generous with athletic decision. ### Grid & Container - Max content width: ~1440px, centered with 32px horizontal padding at desktop - Product grid: 4-column on large desktop, 3-column on desktop, 2-column on tablet, 1-column on mobile - Hero sections: full-bleed photography edge to edge, text overlay anchored lower-left or centered - Navigation: compact sticky top bar (~60px) with logo left, category links center, utility icons right ### Whitespace Philosophy - Product grids are dense — tight 8–12px card gaps prioritize inventory density over breathing room - Section breaks are generously spaced (64–120px) to create emotional relief between commerce zones - Full-bleed photography fills every hero moment without margin or padding — the product is the page ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, no border | Product cards in grid, hero imagery, navigation | | Subtle (Level 1) | `1px solid {colors.border}` | Card edges in product listing (when on white) | | Floating (Level 2) | `0 4px 16px rgba(0,0,0,0.10)` | Dropdown menus, size selectors, cart drawer | | Focus Ring | `0 0 0 2px {colors.focus-ring}` | Keyboard focus on interactive elements | **Shadow Philosophy**: Hoka's elevation model is nearly flat. Cards in the product grid are borderless on grey backgrounds and lightly bordered on white sections. The system reserves shadows for overlay drawers (cart, nav flyouts) and modals — never for product tiles. The effect is a flat retail surface that feels like a catalog spread, where all visual hierarchy comes from photography, color, and type weight rather than dimensional tricks. ## Shapes The complete radius scale lives in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | All buttons, promotional badges, nav elements — the dominant shape language | | `sm` | 4px | Product card images, category thumbnails | | `md` | 8px | Select dropdowns, tooltips, floating menus | | `pill` | 9999px | Filter chips in product listing (selected state stays pill) | The system is functionally binary: buttons and UI chrome are hard-edged (`{rounded.none}`); product cards get a whisper of softening (`{rounded.sm}`). The pill shape appears only in filter interactions, where it serves the convention of discrete tag selection. This angular philosophy reads as athletic authority — sharp edges belong in a running gear context, not rounded hospitality. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — Cobalt blue (`{colors.primary}`) fill, white text, zero border-radius, 1px letter-spaced uppercase label. The dominant CTA across product pages, checkout, and hero sections. - **`button-primary-hover`** — Deepens to dark cobalt (`{colors.primary-hover}`), same geometry. - **`button-primary-dark`** — Near-black fill for use on white or light grey backgrounds when cobalt is already dominant in the section. - **`button-secondary`** — White fill with 1px near-black border, black text — the outlined companion. Used for secondary actions ("Find My Size", "Compare"). - **`button-secondary-hover`** — Inverts to near-black fill on hover — decisive, direct. ### Cards - **`card-product`** — Light grey (`{colors.surface}`) background, 4px radius. Product image fills to card edge within the boundary. Product name in `{typography.heading-sub}`, price in `{typography.caption}`, sale badge overlaid at top-left. ### Inputs - **`input`** — White background, 0px radius, 1px `{colors.border}` outline. Flat and direct. - **`input-focus`** — Same geometry, border darkens to `{colors.border-strong}`. Focus ring via `{colors.focus-ring}` outline. ### Badges - **`badge-sale`** — Red fill, white uppercase label text. Overlays product card top-left. The retail urgency signal. - **`badge-new`** — Cobalt blue fill, white label. Applied to new colorways and seasonal launches. - **`badge-category`** — Pale blue container (`{colors.primary-container}`) with cobalt text. Used for activity category chips (Road / Trail / Track). ### Filter Pills - **`filter-pill`** — White fill, light border, ALL CAPS label. Pill-shaped selection chips in product listing filters. - **`filter-pill-active`** — Near-black fill, white text. Selected state. ### Navigation - **`nav-bar`** — White sticky header, ~60px. Hoka wordmark left, category links center (MEN / WOMEN / KIDS / SALE), bag/search/account icons right. Active link underlined in `{colors.primary}`. ### Promotional Banner - **`banner-promo`** — Full-width cobalt blue or orange strip at page top. White uppercase `{typography.label-caps}` text for shipping promos and sale announcements. ## Do's and Don'ts ### Do - Use `{colors.primary}` cobalt exclusively for primary CTAs, links, and active navigation states — it is the single brand color allowed on interactive chrome - Apply `{rounded.none}` to all buttons — the square-edged CTA is Hoka's interactive signature; never soften it - Use uppercase with letter-spacing (`{typography.button-ui}`, `{typography.label-caps}`) for all buttons, badges, and product status labels — it is not optional - Reserve `{colors.accent}` orange for sale labels, promotional urgency, and campaign-level accents only — it should never appear on interactive buttons - Let full-bleed photography carry emotional weight — keep UI chrome minimal and out of the photography zone - Use `{colors.surface}` grey for product grid section backgrounds when cards need separation from the page - Apply `{badge-sale}` red and `{badge-new}` cobalt badges as overlays on product card images — never below the fold - Maintain 4-column product grids on desktop with dense 8–12px gaps — the abundance signals a brand with range ### Don't - Don't add border-radius to CTA buttons — any softening undermines the athletic authority the shape conveys - Don't use orange (`{colors.accent}`) for primary CTAs — it reads as urgency/sale, not primary interaction - Don't apply shadows to product cards — the grid is flat; shadows make it feel unintentionally heavy - Don't use condensed display typography (`{typography.display-hero}`) below 32px — it loses legibility before it loses personality - Don't mix the display font and Helvetica Neue in the same text block — they belong to separate visual registers (campaign vs. commerce) - Don't use the pill shape (`{rounded.pill}`) outside filter chip contexts — the system is angular everywhere else - Don't add secondary colors to the nav bar — white background with cobalt-only hover states is the correct nav pattern - Don't reduce button letter-spacing — `{typography.button-ui}`'s 1px tracking is part of the CTA voice, not padding --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <375px | Single column, hero text scales down to 40px, full-bleed imagery retained | | Mobile | 375–767px | Single column, hamburger nav, display at 48px, 16px horizontal padding | | Tablet | 768–1023px | 2-column product grid, nav partially visible, display at 56px | | Desktop | 1024–1439px | 3-column product grid, full horizontal nav, display at 64px | | Large Desktop | ≥1440px | 4-column product grid, max-width container centered, display at 80px | ### Touch Targets - Primary buttons at 14px vertical padding + 14px line-height → ~42px height; borderline WCAG 2.5.5 - Product cards are fully tappable surfaces - Nav icons (bag, search, account) sized to 44×44px tap targets - Filter pills at 8px vertical padding meet 40px with natural font ascent ### Collapsing Strategy - Navigation collapses to hamburger drawer below 768px; search and bag icons stay visible - Hero display text scales: 80px → 56px → 40px as viewport narrows; line-height remains sub-1.0 - Product grid collapses: 4-col → 3-col at 1200px → 2-col at 768px → 1-col at 480px - Section spacing compresses from 120px to 64px to 32px at mobile - Button radius stays `{rounded.none}` at all breakpoints — the shape identity is inviolable ### Image Behavior - Hero photography: full-bleed at all breakpoints, art-directed crops from desktop landscape to mobile portrait - Product card images: `{colors.surface}` grey background during load; square aspect ratio maintained - Responsive srcset via Hoka's CDN with dimension parameters - Lazy loading applied to below-fold product grid images --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (#ffffff) - Primary CTA: `{colors.primary}` (#0066cc) - CTA text: `{colors.on-primary}` (#ffffff) - Primary text: `{colors.ink}` (#1a1a1a) - Secondary text: `{colors.ink-secondary}` (#555555) - Brand orange: `{colors.accent}` (#f26522) - Border: `{colors.border}` (#dddddd) - Sale label: `{colors.sale}` (#cc0000) - Product card bg: `{colors.surface}` (#f5f5f5) ### Example Component Prompts 1. **Primary CTA Button**: background `{colors.primary}` (#0066cc), text `{colors.on-primary}` (#ffffff), border-radius `{rounded.none}` (0px), padding 14px 28px, font Helvetica Neue 700 14px uppercase with 1px letter-spacing. Hover: background `{colors.primary-hover}` (#004fa3), 0.2s ease transition. 2. **Product Card Grid**: 4-column grid with 8px gap. Each card: `{colors.surface}` (#f5f5f5) background, `{rounded.sm}` (4px) radius, no shadow. Square product image fills card top, then below: product name in Helvetica Neue 700 16px `{colors.ink}` (#1a1a1a), price in Helvetica Neue 400 13px. Sale badge overlaid top-left: `{colors.sale}` (#cc0000) background, white uppercase Helvetica Neue 700 11px, 1.5px letter-spacing, 0px radius. 3. **Campaign Hero Section**: Full-bleed photography, text lower-center overlay. Headline in condensed Barlow-Condensed-style 80px/700 uppercase `{colors.ink}` with -1px letter-spacing and 0.95 line-height. Subheadline in Helvetica Neue 18px/400 `{colors.ink-secondary}`. Primary CTA button: cobalt blue `{colors.primary}`, 0px radius, 14px 28px padding, uppercase 700 with 1px tracking. 4. **Navigation Bar**: White (`{colors.background}`) sticky header 60px. Hoka wordmark left. Center: "MEN", "WOMEN", "KIDS", "SALE" in Helvetica Neue 700 14px `{colors.ink}`, 0.5px letter-spacing, 24px gap. Right: search, bag, account icons in `{colors.ink}`. Active link: 2px cobalt underline (`{colors.primary}`). Banner above: full-width `{colors.primary}` (#0066cc) bar, white 11px/700 uppercase centered text, 10px vertical padding. 5. **Product Filter Bar**: Row of pill-shaped filter chips. Default: white fill, 1px `{colors.border}` (#dddddd) border, `{rounded.pill}` radius, Helvetica Neue 700 11px uppercase 1.5px letter-spacing `{colors.ink}`, padding 8px 16px. Selected: near-black (`{colors.ink}` #1a1a1a) fill, white text, same pill shape. "Sale" category chip: `{colors.accent}` (#f26522) fill, white text. ### Iteration Guide 1. Start with a white canvas (`{colors.background}`) — Hoka's UI is a clean stage for athletic photography 2. Cobalt blue (`{colors.primary}`) is the only interactive color — every CTA, link, and active state uses it 3. Never soften buttons — `{rounded.none}` is non-negotiable; angular edges signal performance authority 4. ALL CAPS + letter-spacing is mandatory for button labels and product status tags — lowercase erodes brand voice 5. Orange (`{colors.accent}`) signals urgency/sale only — if something feels promotional, it gets orange; if it's interactive, it gets cobalt 6. Product photography carries all the emotion — keep surrounding UI minimal, flat, and out of the way 7. The condensed display font is the campaign voice — deploy it exclusively for hero-scale headlines (48px+) --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Hoka. Brand names and trademarks belong to their respective owners.