ASICS Design System

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

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.