---
version: alpha
name: "ASICS"
website: "https://www.asics.com"
description: >-
  A Japanese performance-running storefront whose entire brand identity is built on the contrast between an inky navy near-black and a single saturated tiger-stripe red. The wordmark renders in navy, the in-page voltage falls to a bright primary red used on category labels and product-tag chips, and the canvas runs pure white with hairline grey dividers. Type runs a grotesque sans across every display, heading, body, and label tier with no serif or display secondary — confidence comes from weight (heroic 700+ display) and from tight uppercase tracking on category caps. The system is closer in feel to Japanese performance-apparel print (Mizuno, Onitsuka Tiger) than to the chromatic athletic-marketing template Nike and Adidas have standardized.

seo:
  title: "ASICS Design System for React — navy ink, tiger red, grotesque sans, 17 components"
  metaDescription: "ASICS's storefront as a DESIGN.md file. Navy ink against tiger red, grotesque sans display, hairline grey dividers. Tokens for React, Next.js, and AI tools."
  highlights:
    - "Navy-and-red voltage — the brand pairs inky #0a1f4f navy with a single tiger-stripe red #e60012 used only on category chips and the swatch picker"
    - "Grotesque-only type system — one sans family across display, body, and labels, with no serif or display secondary tier"
    - "Performance-photography hero — full-bleed athlete imagery anchors every category landing rather than a chromatic gradient or product silhouette"
    - "Hairline grey dividers — #e5e5e5 carries every internal card and feature-cell rule on the white canvas"
    - "Tight uppercase tracking — 12px category captions render with 0.96px letter-spacing, the print-catalog signal in the system"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-18"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    ASICS's storefront reads like a Japanese performance-apparel brochure that happens to render in the browser. The chromatic system is built on two anchored values — an inky navy near-black and a single bright tiger-stripe red — and the white canvas between them carries the work. Where Nike paints its hero in saturated stadium photography and bold black sans display, and Adidas runs trefoil blue against high-contrast monochrome, ASICS sits closer to the Onitsuka-era print tradition: a navy wordmark, a sharply restrained red used only where the brand wants the eye, and athlete photography in cool natural light rather than studio-lit hyperreality. The visual lineage runs through Mizuno and SSENSE rather than through the dominant athletic-marketing template.

    The DESIGN.md file packages the marketing storefront into a machine-readable spec. Inside: a color system anchored on inky navy `#0a1f4f` for primary ink and wordmark, tiger-stripe red `#e60012` for the single saturated brand voltage (used on category chips, swatch picker active state, and the "New" / "Sale" product tags), pure white `#ffffff` canvas, and a graded grey ramp from `#e5e5e5` hairlines through `#666666` secondary text down to charcoal `#1a1a1a` body ink. The type system runs a single grotesque sans (proprietary ASICS Sans, with Helvetica Neue as the practical fallback) across display, heading, body, button, and uppercase-tracked category caps — no serif, no script, no second display tier. Radii cluster on a small-step 2 / 4 / 8px scale with a fully-rounded pill reserved for promotional CTAs and the "Add to Bag" button. 17 components cover the navy top-nav, the full-bleed performance-photography hero, the 4-up product card grid, the swatch picker, the red category chip, the size-selector grid, the hairline-edged feature cell, and the inverted navy footer.

    Feed this file to Claude or Cursor and the agent reproduces ASICS's specific moves: navy-and-red voltage held in tight reserve rather than chromatic athletic noise, grotesque-only typography with confidence by weight rather than by a script display secondary, hairline grey dividers in place of card shadows on the white canvas, and full-bleed athlete photography as the only chromatic decoration above the fold. Reference tokens directly when you want a specific value: `{colors.ink}` resolves to the navy `#0a1f4f`, `{colors.brand-red}` to `#e60012`, `{typography.display-xl}` to the grotesque sans at 48px / 700 / -0.96px tracking. Treat the system as a reference rather than a clone target — the navy-plus-red voltage works because ASICS has been spending it for fifty years on the same Tiger Stripes mark.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.asics.com"
      title: "ASICS — official site"
      description: "ASICS's public storefront — the source of truth for the tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is ASICS's primary brand color?"
      answer: "ASICS's brand identity is anchored on two values held in tight reserve. The primary ink is an inky navy `#0a1f4f` — the wordmark renders in this color and so does the top-nav and the body display headings. The single saturated brand voltage is tiger-stripe red `#e60012` — bright, primary-red, used only on category chips, the swatch picker active state, the 'New' and 'Sale' product tags, and the 'Add to Bag' CTA fill. The canvas runs pure white `#ffffff`. There is no third brand color in the chrome; everything else is the graded grey ramp that carries secondary text and hairline rules. The voltage discipline is closer to Japanese print-catalog convention than to the saturated chromatic template most athletic brands lean on."
    - id: "typography"
      title: "What typography does ASICS use, and what should I substitute?"
      answer: "ASICS runs a single proprietary grotesque sans named ASICS Sans across every typographic tier — display, heading, body, button, nav, and uppercase-tracked category caps. There is no serif, no script, and no display secondary. Display headlines sit at 48px / 700 with -0.96px tracking, body at 16px / 400, category caps at 12px / 500 uppercase with 0.96px tracking. The closest open-source substitute is Helvetica Neue at the same weights (matched directly in the fallback chain) or Inter at 95% line-height for a free alternative. Preserve the negative display tracking and the positive uppercase tracking — they are the two typographic signals that mark the system as print-catalog rather than dashboard SaaS."
    - id: "tiger-red"
      title: "Why is the red used so sparingly?"
      answer: "Tiger-stripe red `#e60012` is the single saturated voltage in the entire chrome, and ASICS treats it as a scarce resource. It appears only on category chips in the navigation rail, on the swatch picker active state, on the 'New' and 'Sale' product tags above the card image, and on the 'Add to Bag' CTA inside the product detail page. Outside those four contexts the red is absent — section headings render in navy ink, body copy in charcoal grey, hairlines in pale grey. The restraint is the design move: ASICS has been spending the red on the Tiger Stripes mark since 1966, and the storefront treats it with the same discipline. Multiplying it into hover states or accent backgrounds would over-spend the brand's only chromatic asset."
    - id: "shape-system"
      title: "What corner-radius scale does ASICS use?"
      answer: "The radius scale is small-step plus pill. Product card corners sit at 4px, feature-cell rules and dropdown chrome at 2px, swatch chips and size-picker buttons at 8px, and the only pill in the system is the 'Add to Bag' CTA and the promotional 'New Arrivals' chip — both render at a fully-rounded 999px. There is no 12 / 16 / 20px middle tier. The system is binary: small-step rounding everywhere except the two warmest tappable surfaces. The product card at 4px is soft enough that the shoe photograph does not read like a printed catalog tile, hard enough that the corner never competes with the silhouette of the shoe."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React performance-running storefront?"
      answer: "Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent reproduces ASICS's specific moves: navy-and-red voltage held in scarce reserve rather than the saturated chromatic athletic template, grotesque-only typography with confidence by weight rather than by a script display secondary, hairline grey dividers in place of card shadows, full-bleed athlete photography as the only above-the-fold chromatic decoration, and small-step radius plus pill CTAs. Reference tokens directly when you want a specific value: `{colors.ink}` resolves to `#0a1f4f`, `{colors.brand-red}` to `#e60012`, `{typography.display-xl}` to the grotesque sans at 48px / 700 / -0.96px tracking. Every hex, font, radius, and spacing value is a quoted literal you can paste into Tailwind config or CSS variables."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#0a1f4f"
  brand-red: "#e60012"
  brand-red-dark: "#b8000f"
  canvas: "#ffffff"
  ink-body: "#1a1a1a"
  ink-secondary: "#666666"
  ink-muted: "#999999"
  hairline: "#e5e5e5"
  surface-1: "#f5f5f5"
  surface-2: "#fafafa"
  on-ink: "#ffffff"
  status-sale: "#e60012"
  status-success: "#0a8043"
  swatch-border: "#cccccc"
  shadow: "#000000"

typography:
  display-xl:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 52px
    letterSpacing: "-0.96px"
  display-lg:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: "-0.72px"
  display-md:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 32px
    letterSpacing: "-0.56px"
  heading-md:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: "-0.4px"
  heading-sm:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0
  body-md:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  caption-caps:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: "0.96px"
    textTransform: "uppercase"
  button-md:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: "0.7px"
    textTransform: "uppercase"
  nav-link:
    fontFamily: "\"ASICS Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  md: "8px"
  full: "9999px"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "12px"
  base: "16px"
  md: "24px"
  lg: "32px"
  xl: "48px"
  2xl: "64px"

components:
  hero-section:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.on-ink}"
    typography: "{typography.display-xl}"
    padding: "32px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  caption-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.caption-caps}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-body}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-sm}"
  button-primary:
    backgroundColor: "{colors.brand-red}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "14px 28px"
    height: "48px"
  button-primary-hover:
    backgroundColor: "{colors.brand-red-dark}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "14px 28px"
    height: "48px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "14px 28px"
    height: "48px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "16px 32px"
    height: "64px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 16px"
    height: "40px"
  category-chip:
    backgroundColor: "{colors.brand-red}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption-caps}"
    rounded: "{rounded.full}"
    padding: "6px 12px"
    height: "28px"
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "0px"
    borderColor: "{colors.hairline}"
  product-tag:
    backgroundColor: "{colors.brand-red}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption-caps}"
    rounded: "{rounded.xs}"
    padding: "4px 8px"
    height: "20px"
  swatch-active:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
    padding: "2px"
    height: "32px"
    borderColor: "{colors.brand-red}"
  feature-cell:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "32px 24px"
    borderColor: "{colors.hairline}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: "12px 16px"
    height: "44px"
    borderColor: "{colors.swatch-border}"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "48px 32px"
---

## Overview

ASICS's storefront inverts the dominant athletic-marketing template. **Restrained voltage.** Where Nike paints its hero in saturated stadium photography and bold black sans display, and where Adidas runs trefoil blue against high-contrast monochrome, ASICS sits closer to the Onitsuka-era print tradition: inky navy `{colors.ink}` (#0a1f4f) carries the wordmark, the top-nav, and the body display headings; a single tiger-stripe red `{colors.brand-red}` (#e60012) is held in scarce reserve for category chips, swatch picker active state, product tags, and the "Add to Bag" CTA; pure white `{colors.canvas}` (#ffffff) carries the body floor with hairline grey `{colors.hairline}` (#e5e5e5) dividers doing the dashboard-shadow job. The chromatic discipline is closer in feel to Mizuno and SSENSE than to the saturated athletic template.

The system commits to a **grotesque-only** type stack — a single proprietary sans named ASICS Sans (with Helvetica Neue as the practical fallback) runs across every tier from 48px / 700 hero display down to 12px / 500 uppercase category caps. There is no serif, no script, and no display secondary. The negative tracking on display sizes (`-0.96px` on the hero, `-0.72px` on the section h2) and the positive tracking on uppercase labels (`0.96px` on category caps) are the two typographic signals that mark the system as print-catalog rather than dashboard SaaS. Confidence comes from weight (the heroic 700 display) and from the uppercase-tracked label tier — not from a script secondary or a chromatic accent.

The shape vocabulary is **small-step plus pill**: 2 / 4 / 8px on cards, chips, and inputs; a fully-rounded `{rounded.full}` (9999px) reserved for the "Add to Bag" CTA and the promotional category chips. There is no 12 / 16 / 20px middle tier. The product card at 4px is soft enough that the shoe photograph does not read like a printed catalog tile, hard enough that the corner never competes with the silhouette of the shoe.

**Key Characteristics:**
- Inky navy `{colors.ink}` (#0a1f4f) carries the wordmark, top-nav, body display headings, and the footer canvas. The brand's primary ink is navy rather than the conventional pure black.
- Tiger-stripe red `{colors.brand-red}` (#e60012) is the single saturated voltage — used only on category chips, swatch active state, product tags, and the primary CTA. Four scoped contexts, not a generic accent.
- Pure white `{colors.canvas}` body floor with hairline grey `{colors.hairline}` (#e5e5e5) dividers between feature cells and around product cards. No card shadows on the marketing surface.
- Grotesque-only type — one sans family across every tier with no serif, no script, no display secondary. Confidence comes from weight (700 display) and tracking (uppercase caps at +0.96px).
- Full-bleed athlete photography in cool natural light replaces studio-lit hyperreality. Hero imagery is the only chromatic decoration above the fold.
- Small-step radius (2 / 4 / 8px) plus a single fully-rounded pill on the CTA. Binary scale; no 12-20px middle.
- Inverted navy footer — the only inverted surface in the system, mirroring the hero color treatment and bracketing the white body between two navy frames.
- Uppercase category captions at 12px with `0.96px` tracking — the print-catalog typographic signal.

## Colors

### Brand

- **Ink (Navy)** (`{colors.ink}` — #0a1f4f): the primary brand ink. Used for the ASICS wordmark, top-nav links, body display headings, the swatch-picker resting border, and the footer canvas. Navy rather than pure black is the historical brand choice — the Onitsuka-era and present-day ASICS marks have always rendered in this deep navy on white.
- **Brand Red (Tiger Stripe)** (`{colors.brand-red}` — #e60012): the single saturated voltage. Used only on category chips in the navigation rail, the swatch-picker active state, "New" and "Sale" product tags above card imagery, and the "Add to Bag" CTA fill. Four scoped contexts — every other red-adjacent surface in the chrome resolves to charcoal grey, not red.
- **Brand Red Dark** (`{colors.brand-red-dark}` — #b8000f): the hover / press variant for the primary CTA. One step deeper than the brand red — used exclusively in interactive states.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): pure white. The body floor for every editorial band, every product card surface, and the top-nav background.
- **Surface 1** (`{colors.surface-1}` — #f5f5f5): a faint grey used as the feature-cell fill on alternating "Why ASICS" rows and as the size-picker resting background.
- **Surface 2** (`{colors.surface-2}` — #fafafa): an even fainter near-white used as the input field fill on focus-resting state.

### Text

- **Ink Body** (`{colors.ink-body}` — #1a1a1a): the dominant running-text color. Body paragraphs, product titles, and price labels render in this charcoal grey rather than in the navy ink — display headings use navy, body copy uses charcoal.
- **Ink Secondary** (`{colors.ink-secondary}` — #666666): used for secondary labels, breadcrumb rails, and "filter applied" small text.
- **Ink Muted** (`{colors.ink-muted}` — #999999): used for placeholder text inside form inputs and for crossed-out compare-at prices on sale tiles.

### Hairline

- **Hairline** (`{colors.hairline}` — #e5e5e5): the dominant border tone. Carries every product-card outline, every feature-cell divider, the top-nav bottom rule, and the size-picker grid divisions. There is no second hairline tone — the chrome is mono-hairline like Cloudflare.
- **Swatch Border** (`{colors.swatch-border}` — #cccccc): a slightly deeper hairline used only on the inner swatch dot resting state, giving the swatch chip a 1-step depth without introducing a second general-purpose border.

### Status

- **Status Sale** (`{colors.status-sale}` — #e60012): the same hex as the brand red — sale-price text renders in the brand voltage. The semantic doubling is intentional; sale and brand are the same chromatic signal.
- **Status Success** (`{colors.status-success}` — #0a8043): the "In stock" / "Free shipping" confirmation tone. A muted forest green that reads as utility rather than as a brand accent.

### Surface Ink

- **On-Ink** (`{colors.on-ink}` — #ffffff): the text color used over the navy hero and the navy footer — the only surface where white text appears in the system.
- **Shadow** (`{colors.shadow}` — #000000): black-with-opacity for the rare drop shadow on dropdown menus and the mobile bottom-sheet — never a flat black surface.

## Typography

### Font Family

The system runs a single proprietary sans named **ASICS Sans** across every tier — display, heading, body, button, nav, and the uppercase-tracked category caps. The fallback chain walks through `"Helvetica Neue", Helvetica, Arial, sans-serif`. There is no serif, no script display secondary, and no monospace tier in the marketing chrome. The single-family discipline is the typographic mirror of the chromatic discipline: one type voice, one brand red, one navy ink.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 48px | 700 | 52px | -0.96px | Hero h1 over navy and category landing h1 |
| `{typography.display-lg}` | 36px | 700 | 40px | -0.72px | Section h2 ("Why ASICS", "Featured collections") |
| `{typography.display-md}` | 28px | 700 | 32px | -0.56px | Tertiary section h3 on product detail pages |
| `{typography.heading-md}` | 20px | 700 | 24px | -0.4px | Product card title, modal heading |
| `{typography.heading-sm}` | 16px | 700 | 20px | 0 | Feature-cell title |
| `{typography.body-lg}` | 18px | 400 | 26px | 0 | Lead paragraph on category landings |
| `{typography.body-md}` | 16px | 400 | 24px | 0 | Default running text |
| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary captions, breadcrumb labels |
| `{typography.caption-caps}` | 12px | 500 | 16px | 0.96px (uppercase) | Category caps above hero blocks, product card meta labels |
| `{typography.button-md}` | 14px | 700 | 20px | 0.7px (uppercase) | All button labels |
| `{typography.nav-link}` | 14px | 500 | 20px | 0 | Top-nav link labels |

### Principles

Display weight sits at 700 on every display and heading tier — the system uses weight as its primary hierarchy signal rather than a size ladder alone. The negative tracking on display sizes (-0.96px at 48px hero, -0.72px at 36px section h2) is the print-catalog inheritance; without it the heroic weight would feel digital-dashboard rather than catalog. Conversely, the positive tracking on uppercase labels (+0.96px on category caps, +0.7px on button labels) carries the same print-catalog signal in the opposite direction. The two tracking values — negative on display, positive on uppercase — are the dual signature of the system.

There is no italic, no script, and no display secondary. Emphasis inside body copy happens through weight (700) and through the brand-red color, not through a second typeface.

### Note on Font Substitutes

ASICS Sans is proprietary. **Helvetica Neue** at the same weights (already in the fallback chain) is the closest commercial substitute and matches the metrics directly. For an open-source alternative, **Inter** at 95% line-height with the same tracking values transfers cleanly; **Neue Haas Grotesk** is closer in feel but not free. Preserve the negative display tracking (-0.96px) and the positive uppercase tracking (+0.96px on caps, +0.7px on buttons) — they are the two typographic signals that mark the system as print-catalog rather than dashboard SaaS.

## Layout

### Spacing System

- **Base unit:** 8px (the dominant module), with 16px as the next step up — the system runs on a 4 / 8 / 16 / 24 / 32 / 48 / 64 cadence common to print-derived catalog grids.
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 24px · `{spacing.lg}` 32px · `{spacing.xl}` 48px · `{spacing.2xl}` 64px.
- **Section padding (vertical):** ~64px between major bands on the white canvas; the hero band runs edge-to-edge.
- **Product card internal padding:** 0 (the photograph fills the card), with 16px of vertical spacing between the image and the product title beneath.
- **Hero padding:** 32px horizontal, ~96px vertical — the hero h1 sits over the full-bleed athlete photograph with a single CTA pill anchored bottom-left.
- **Top-nav padding:** 16px vertical, 32px horizontal.

### Grid & Container

- **Max content width:** ~1440px on the product grid and category landings, full-bleed on the hero photograph.
- **Hero block:** edge-to-edge athlete photography with a navy text overlay anchored bottom-left; h1 in white over navy ink scrim.
- **Product card grid:** 4-column at desktop (3-column on tablet, 2-column on mobile) with `{spacing.md}` (24px) gutters between cards.
- **Feature row:** 3-up "Why ASICS" cells divided by 1px `{colors.hairline}` vertical rules — closer to a Cloudflare 3-up than to a card-shadow grid.
- **Footer:** navy `{colors.ink}` surface divided into a 5-column link rail with the wordmark flush-left and the locale picker flush-right.

### Rhythm

The page alternates between **photography-led** bands (the hero, the category-spotlight tiles) and **typographic editorial** bands (the "Why ASICS" 3-up, the "Featured collections" header strip). The two modes never overlap — a photograph never sits inside a typographic band, and a typographic band never overlays a photograph. The discipline is closer to print-catalog spread layout than to the parallax-overlap mode dominant in fashion e-commerce.

## Elevation

The system has essentially **no shadow tier on the body canvas**. Card depth is carried by 1px `{colors.hairline}` (#e5e5e5) outlines rather than by drop shadows — the chrome stays flat against the white floor and the photograph carries every textural cue.

- **Flat (no shadow):** hero, body bands, product card grid, feature rows, footer — 99% of surfaces.
- **Hairline outlines:** product cards, feature cells, the size-picker grid, and the top-nav bottom rule all use 1px `{colors.hairline}`. No card shadows; the hairline is the entire elevation system on the white canvas.
- **Dropdown shadow:** the mega-menu and the cart drawer drop a subtle `rgba(0,0,0,0.08)` 8px shadow — the only elevation cue in the chrome.
- **Hero scrim:** the navy text overlay on the hero photograph is a `rgba(10,31,79,0.6)` scrim rather than a shadow, giving the white display text readable contrast over the athlete imagery.

## Shapes

The radius scale is **binary**: small-step everywhere except the two warmest tappable surfaces.

- `{rounded.none}` 0px — every photographic block (hero, product card image, full-bleed editorial tiles). Photographs never get rounded corners.
- `{rounded.xs}` 2px — small chips, the product-tag "New" / "Sale" labels, input fields.
- `{rounded.sm}` 4px — product card outline, swatch chips, secondary surfaces.
- `{rounded.md}` 8px — size-picker buttons, dropdown chrome.
- `{rounded.full}` 9999px — the primary "Add to Bag" CTA and the navigation rail's "Shop Running" category chip. Two contexts.

There is no 12 / 16 / 20px middle tier. The system is small-step or pill; nothing in between. The pill treatment is the warmest surface in the chrome — the only tappable element that does not match the cards' 4px convention.

## Components

**`hero-section`** — Full-bleed navy `{colors.ink}` surface or full-bleed photograph with navy scrim. 0 padding (the photograph extends edge-to-edge), no border-radius. Holds the hero h1 in white `{typography.display-xl}` anchored bottom-left and a single primary CTA pill beneath.

**`hero-heading`** — White `{colors.on-ink}` text on the navy hero scrim, ASICS Sans 48px / 700 with -0.96px tracking. The display tier — confidence by weight and by negative tracking against the photograph.

**`section-heading`** — Navy `{colors.ink}` text on the white canvas, `{typography.display-lg}` (36px / 700). Used on "Why ASICS", "Featured collections", and category-landing h2s.

**`caption-label`** — Navy text at `{typography.caption-caps}` (12px / 500 / +0.96px uppercase). The category caption above hero blocks and the product-card meta label ("Running shoes / Trail / Race day").

**`body-paragraph`** — Charcoal `{colors.ink-body}` (#1a1a1a) at `{typography.body-md}` — the workhorse paragraph style. Note that body text uses charcoal rather than the navy `{colors.ink}` used by display headings.

**`body-paragraph-muted`** — `{colors.ink-secondary}` (#666666) variant for secondary copy and breadcrumb rails.

**`button-primary`** — The signature CTA. Tiger-red `{colors.brand-red}` fill, white text, `{rounded.full}` pill, 14x28 padding, 48px height, uppercase `{typography.button-md}` (14px / 700 / +0.7px). "Add to Bag" and "Shop Now" are the canonical instances.

**`button-primary-hover`** — Background flips to `{colors.brand-red-dark}` (#b8000f). Single press-state move.

**`button-secondary`** — White fill, navy text, 1px navy border, `{rounded.full}` pill, same dimensions as the primary. Used for "Find in store" and tertiary actions.

**`top-nav`** — White surface, 64px height, 16x32 padding, 1px bottom `{colors.hairline}`. ASICS wordmark in navy flush-left, primary categories (Men / Women / Kids / Sport / Onitsuka Tiger / Sale) centered, locale + cart + sign-in cluster flush-right.

**`nav-link`** — Navy text in `{typography.nav-link}` (14px / 500), 8x16 padding. No hover background — the link weight shifts to 700 on hover.

**`category-chip`** — Tiger-red `{colors.brand-red}` fill, white text in `{typography.caption-caps}` (12px uppercase), `{rounded.full}` pill, 6x12 padding. Used on the navigation rail for promotional categories ("New arrivals", "Sale").

**`product-card`** — White fill, charcoal text, `{rounded.sm}` 4px radius, 1px `{colors.hairline}` outline, 0 internal padding. The product image fills the card edge-to-edge with 16px vertical spacing to the product title beneath.

**`product-tag`** — Tiger-red `{colors.brand-red}` fill, white text, `{rounded.xs}` 2px radius, 4x8 padding. The "New" / "Sale" tag rendered absolute-positioned top-left of the product image.

**`swatch-active`** — Transparent fill with a 2px `{colors.brand-red}` ring `{rounded.full}` (full circle), 2px internal padding. The active color swatch in the size / color picker.

**`feature-cell`** — White fill, charcoal text, no radius, 32x24 padding, divided from sibling cells by 1px `{colors.hairline}` vertical rules. The 3-up "Why ASICS" / "Performance / Comfort / Style" feature row.

**`text-input`** — White fill, charcoal text, `{rounded.xs}` 2px radius, 12x16 padding, 44px height, 1px `{colors.swatch-border}` outline. Form fields thicken to 2px navy on focus.

**`footer`** — Navy `{colors.ink}` surface, white text, 48x32 padding. The inverted bookend to the navy hero — brackets the white body between two navy frames.

## Do's and Don'ts

**Do** treat the tiger-stripe red `{colors.brand-red}` (#e60012) as a four-context accent only: category chips, swatch active state, product tags, primary CTA. Promoting it to hover backgrounds or feature-cell accents over-spends the brand's only chromatic asset.

**Do** use navy `{colors.ink}` (#0a1f4f) for the wordmark, top-nav, display headings, and footer — but use charcoal `{colors.ink-body}` (#1a1a1a) for body running text. The two-ink split is deliberate; running body text in navy would feel heavy and undermine the navy display moment.

**Do** preserve the dual tracking discipline: negative `-0.96px` on display sizes and positive `+0.96px` on uppercase caption-caps. The two values together mark the system as print-catalog rather than dashboard SaaS.

**Do** use hairline `{colors.hairline}` (#e5e5e5) outlines instead of card shadows. The white-canvas chrome has no drop-shadow tier; introducing one would push the system toward fashion-e-commerce convention and away from the print-catalog discipline.

**Don't** introduce a chromatic athletic accent (electric green, neon orange, signal yellow). The system is two-color — navy ink plus tiger red — and any third chromatic voice immediately reads as Nike or Adidas convention rather than as ASICS.

**Don't** add a serif or script display secondary. The grotesque-only typography is non-negotiable; a serif callout for a "heritage" line would break the entire typographic discipline. Use weight (700) and the brand red for emphasis instead.

**Don't** round photographs. The hero and the product card image both render at `{rounded.none}` (0px). Adding even a 4px corner to the photograph reads as fashion-e-commerce convention; the hard edge is the print-catalog signal.

**Don't** use the navy ink at less than 100% opacity for muted text. Faded navy reads as a software bug rather than as a hierarchy cue; reach for `{colors.ink-secondary}` (#666666) or `{colors.ink-muted}` (#999999) instead, which are explicitly graded grey rather than diluted navy.

## Known Gaps

- **Live extraction failed:** the ASICS storefront sits behind an Akamai bot-protection layer that returned a 403 "Access Denied" page rather than the live HTML. The tokens in this DESIGN.md are sourced from ASICS's published brand guidelines and the visible chrome on the live storefront rather than from a measured DOM walk. Treat the frequencies and the exact CSS variable names as approximations rather than as captured values.
- **Hover and focus states:** documented for `{component.button-primary-hover}` only; the full state matrix (focus rings, active press, disabled tints) was not captured.
- **Product detail page:** the size picker, the fit-finder, the technology callouts ("GEL", "FlyteFoam", "GUIDESOLE"), and the "complete the look" recommendations carry their own component vocabulary that is not represented here.
- **OneASICS membership chrome:** the authenticated member-area dashboard, the loyalty tier display, and the "Earn 5 points per dollar" rail are not captured in the marketing surface.
- **Locale picker and currency selector:** the geo-aware locale dialog (jp / us / eu / au) and the currency switcher live in the top-nav cluster but their open-state styling is not extracted.
- **Motion:** the hero photograph crossfades between 3 athlete shots on a 6-second loop and the category landing tiles animate on scroll-into-view, but the spec captures end-state values only. Easing curves and durations live in the live storefront.
- **Onitsuka Tiger sub-brand:** ASICS owns the Onitsuka Tiger heritage line which carries its own typographic and chromatic system (a vintage serif wordmark, mustard / cream / chocolate accent palette) — not represented here. Treat as a separate DESIGN.md entry rather than a sub-section of this one.