ASICS Design System

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.