New Balance Design System

Overview

New Balance's digital design system is a catalog in web form — and that is the deliberate choice that distinguishes it from every other brand in athletic footwear. Heritage editorial grid: where Nike uses hero-scale typography and brand-voltage swashes, and Adidas runs a vertical-rhythm system built around custom type, New Balance lays out product in a dense 4-column grid with tight gutters, sets headlines in Helvetica Neue weight 700, and deploys a near-monochrome charcoal-on-off-white color scheme that has more in common with a 1990s running-shoe catalog than with the expressive, bespoke DTC brand design that emerged in the 2010s. The result reads less like a marketing site and more like a very good specialty-retail store.

The typographic system has no proprietary font and no variable-weight display family — Helvetica Neue at 700 does everything from the 48px hero headline to the 12px product label. This is not a budget constraint; Under Armour, Nike, and Adidas have all commissioned custom typefaces at roughly the same scale. New Balance uses Helvetica because Helvetica is the brand — the same sans that went on the 990 box in 1982 still carries the display headline in 2026. Swiss precision as identity: where most brands use type as differentiation, NB uses the most neutral grotesque available and relies on the running-shoe image to create brand feeling.

Shape language reinforces the editorial reading. Corner rounding stops at 4px on CTAs and 2px on inputs — the rest of the system is flat. No pill buttons, no generous 16px card rounding, no soft surfaces. Unlike Under Armour (which uses 9999px pills for CTAs) or Hoka (which defaults to rounded soft cards), New Balance's straight-edge geometry signals craft, precision, and product seriousness over approachability.

Key Characteristics:

• Deep charcoal #231f20 as the primary structural tone — carries nav text, primary CTA fill, icon fills, and body text.
• No chromatic brand accent in marketing chrome — all vivid color (red, royal blue, classic grey colorways) lives exclusively in product photography.
• Helvetica Neue weight 700 for every display heading — no custom typeface, no variable weight.
• 0–4px radius across the entire system — the sharpest edge language in the athletic e-commerce category.
• Four-column product grid at desktop with 16px gutters — catalog density over whitespace generosity.
• Hairline dividers (#d9d9d9) as section separators rather than background-color shifts.
• Sale price in deep red (#d40000) as the one chromatic moment in the editorial chrome.
• Promotional banner yellow (#f5c400) used selectively for loyalty and membership moments.

Colors

Structural

• Ink (#231f20): the system's primary structural tone — a near-black with a faint warm undertone that separates it from the flat pure black or the cooler near-black of the Under Armour system. Carries primary CTA backgrounds, nav text, body text, icon fills, and border accents. Used across the full system at high density.
• Canvas (#ffffff): the page floor and card background — pure white, providing the maximum contrast with product photography and charcoal text.
• Surface-1 (#f5f5f5): the first elevated surface — used for footer backgrounds, alternate section fills, and form input backgrounds. A warm near-white that reads as slightly different from canvas without introducing a visible color shift.
• Surface-2 (#ebebeb): a slightly deeper light gray — used for inactive filter chip backgrounds, breadcrumb fill, and secondary section dividers.
• Ink Muted (#6b6b6b): secondary text — product metadata, price secondary lines, footer link labels.
• Ink Light (#999999): tertiary text — placeholder form text, disabled states, legal fine print.
• Hairline (#d9d9d9): the system's primary divider tone — used as 1px horizontal rules between product grid rows, top-nav bottom border, and card section separators.
• Hairline Dark (#b2b2b2): a slightly deeper hairline for form field borders and interactive element outlines.

Semantic

• Error (#e20a17): the standard error state in form fields and alert messages. Not used in marketing chrome.
• Sale Red (#d40000): sale price labels and promotional callout text. The one chromatic appearance in the editorial chrome, always in a price-comparison context.
• Success (#2e7d32): in-stock confirmation, positive loyalty-point messages.
• Promo Yellow (#f5c400): used selectively in promotional banner backgrounds for NB Rewards and loyalty upsell moments.
• Promo Yellow Ink (#231f20): charcoal text on the yellow promotional banner surface.
• Shadow (#000000): used at 10–20% opacity for subtle product-image drop shadows.

Typography

Font Family

The system runs Helvetica Neue as its single typeface — no brand commission, no variable font, no display family addition. The fallback stack is Helvetica, then Arial, then system sans-serif. This is one of the most deliberately stock type stacks in the athletic category; the neutrality of the grotesque is the point. Display uses Helvetica Neue at 700; body at 400. There is no 500 (medium) weight in the system — the scale is binary: bold for structure, regular for content.

Hierarchy

Principles

The weight split is binary: 700 for everything structural (headings, buttons, nav, labels), 400 for everything editorial (body, metadata, captions). There is no 500 middle weight; the transition from structure to content is sharp. Display at 48px / 700 reads as compact and athletic, not as magazine-light in the way Cloudflare's 500 display does — the extra weight matches the brand's manufacturing-heritage positioning.

Note on Font Substitutes

Helvetica Neue is already the point; if you don't have it licensed, the fallback stack (Helvetica → Arial) is the intended fallback and reads correctly at all sizes. For projects that want an open-source equivalent, Inter at the same weights is very close at body sizes; at 48px display, Inter's aperture is slightly more open than Neue's but the difference is not visible to most viewers.

Layout

Spacing System

• Base unit: 8px, with 16px as the standard product-grid gutter.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.base} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 48px · {spacing.2xl} 64px · {spacing.3xl} 96px.
• Product grid gutter: 16px between columns and rows.
• Section padding (vertical): 48px between major editorial sections; hero section is full-bleed with no internal padding constraint.
• Card internal padding: 0px on the card container; product image fills edge-to-edge; 16px on the text-metadata block below the image.

Grid & Container

• Max content width: ~1320px with 24px side padding.
• Product grid: 4-column at 1200px+ desktop, 3-column at tablet, 2-column at large mobile, 1-column at small mobile.
• Hero: full-bleed photography, text overlay in the lower-left quadrant (headline + sub-copy + CTA).
• Category banners: full-width editorial strips, alternating between product-photography full-bleed and charcoal-background text-forward versions.

Rhythm

The page alternates between full-bleed photographic moments and dense product grids separated by a single hairline rule. There are no gradient-banded or color-blocked section transitions — bands share the same white canvas and the hairline marks the break. The rhythm is closer to a print catalog than to a software marketing site.

Elevation

The system uses minimal shadow. Product cards sit flat on the white canvas with no drop shadow in resting state; a faint rgba(0,0,0,0.1) shadow on hover is the only elevation signal. The nav bar sits on the canvas floor with a 1px {colors.hairline} bottom border rather than a shadow. There is no modal-level shadow declaration in the captured system.

• Flat cards: product grid items — 0px shadow at rest.
• Card hover: faint shadow (rgba(0,0,0,0.1)) materializes on interaction.
• Nav bar: 1px {colors.hairline} (#d9d9d9) bottom border provides separation from the hero.

Shapes

The radius scale is deliberately minimal — the sharpest in the athletic category:

• {rounded.none} 0px — the dominant state. Product cards, hero containers, section headers, image containers. Every framing surface in the system is flat.
• {rounded.xs} 2px — form inputs, small chip elements, search input field.
• {rounded.sm} 4px — primary and secondary CTA buttons. The only visible rounding in the system, and at 4px it reads as "barely not-sharp" rather than as warm or pill-adjacent.
• {rounded.full} 9999px — used only for avatar chips and circular icon elements; not present in primary CTAs or filter chips.

Components

button-primary — Charcoal {colors.ink} fill, white text, {rounded.sm} 4px radius, 44px height, 12×24px padding, Helvetica Neue 14px weight 700. "ADD TO BAG" and "SHOP NOW" are the canonical instances.

button-secondary — White {colors.canvas} fill, charcoal text, 1px charcoal border, same {rounded.sm} 4px radius and dimensions as primary. Used for "LEARN MORE" and alternate action CTAs.

top-nav — White {colors.canvas} surface, charcoal text, 60px height, 1px {colors.hairline} bottom border, 24px horizontal padding. Houses the NB shield logo (left), primary category links (center), and icon cluster — search, wishlist, account, bag (right).

nav-link — Transparent background, charcoal text at {typography.nav-link} (14px / 700), 8×12px padding. Hover state reveals an underline rather than a background fill.

hero-heading — White text on photography overlay, {typography.display-xl} (48px / 700). The hero text renders over a photographic background, positioned lower-left.

section-heading — Charcoal text, {typography.heading-md} (28px / 700). Section titles like "NEW ARRIVALS" and "TRENDING NOW" above product grids.

body-paragraph — Charcoal text at {typography.body-lg} — editorial product-description copy in category headers.

body-paragraph-muted — Muted {colors.ink-muted} text at {typography.body-md} — secondary metadata, product subtitle lines.

card — White {colors.canvas} fill, no border (whitespace gutter separates cards), completely flat {rounded.none}. Product image fills the upper portion edge-to-edge; metadata (name, colorway count, price) sits in a 16px-padded block below.

product-label — Charcoal text at {typography.body-md} — product name below the card image.

price-label — Charcoal text at {typography.body-md} — standard product price.

sale-price-label — Sale-red {colors.sale-red} text at {typography.body-md} — reduced price in product cards. The only chromatic element in the product-grid chrome.

text-input — White fill, charcoal text, {rounded.xs} 2px radius, 1px {colors.hairline-dark} border, 44px height. Search and form inputs.

footer — Light-gray {colors.surface-1} background, muted text, {typography.body-sm} at 12px, 48×24px padding. Multi-column link grid with the NB wordmark and legal below.

Do's and Don'ts

Do use charcoal #231f20 — not pure #000000 — for all text, icon, and border fills. The near-black has a barely-perceptible warm undertone that matters for brand fidelity at display scale; pure black reads slightly different on screen and diverges from the brand's physical packaging standards.

Do keep the product grid at 4 columns with 16px gutters at desktop viewport. The catalog density is intentional — reducing to 3 columns or adding generous 32px gutters makes the site read as a lifestyle brand rather than a performance-product catalog, which contradicts the brand positioning.

Do use {typography.display-xl} Helvetica Neue 700 for hero headlines without customizing the weight or adding tracking. The sans is the identity here — customizing it into a condensed or ultra-light version breaks the catalog heritage reading.

Do let product photography carry all chromatic moments. The monochrome chrome exists specifically to give each shoe's colorway maximum visual impact — introducing background fills or accent colors behind product cards reduces that contrast.

Don't apply {rounded.full} pill rounding to CTA buttons. The system uses 4px — the contrast between NB's sharp CTAs and Under Armour's or Nike's pill CTAs is a deliberate brand differentiator. Using a pill on an NB-styled button immediately reads as the wrong brand.

Don't introduce a chromatic brand accent to the nav or hero chrome. The sale-red (#d40000) appears only in price-comparison contexts — placing it on a nav hover state or hero highlight strip makes the system read as a sale-mode page rather than a standard product page.

Don't use Helvetica Neue weight 500 or 600. The system is binary (700 or 400); adding a medium weight suggests a three-tier hierarchy that the brand's editorial restraint deliberately avoids.

Don't reduce button height below 44px. Both primary and secondary buttons share the 44px standard — this is the minimum accessible tap target and the brand's consistent action affordance size.

Known Gaps

• Extraction failure: the automated extractor encountered a CDN error page ("Oops! Something went wrong") when capturing newbalance.com rather than the live marketing surface. The color tokens, typography values, and component specifications in this file are grounded in publicly available knowledge of New Balance's design system rather than live CSS measurement. Exact frequency counts are not available.
• Custom font usage: New Balance has historically used Helvetica Neue but may have introduced a custom typeface in recent brand refreshes. The Helvetica stack should be treated as a baseline — verify against the live site before shipping production UI.
• Regional variants: New Balance serves distinct regional sites (UK, EU, Japan, China) that may use different accent colors or typography treatments. This spec covers the US marketing surface.
• NB Rewards / Loyalty surfaces: the yellow promotional banner (#f5c400) and loyalty-point micro-interactions are declared in this spec based on known brand usage but were not captured from the live marketing page.
• Dark mode: no dark-mode variant is known for the marketing surface. Product pages and the shopping bag may carry a dark nav variant on certain seasonal campaigns.
• Motion and hover states: the hover shadow on product cards and the underline-on-hover for nav links are described based on brand pattern knowledge, not from animated capture.