Color Palette
Background Colors
Black (dominant)
#000000 · ×13460
Cyan 2 (green)
#408267 · ×4
Fill & Brand / Social Platform Colors
Cyan (TikTok)
#69C9D0 · ×8
Dominant Color Note
#000000 pure black appears 13,460 times — the single most-used color token across the entire series of 23 systems. The adidas product catalog, imagery backgrounds, and UI surfaces are overwhelmingly black. No accent color is defined at the brand level; the fill colors are exclusively social platform brand colors (Facebook, Twitter, TikTok, Google).
Typography
--font-family-2 · AdihausDIN
AdihausDIN
Impossible is Nothing. Designed for speed, built for the sport.
Regular · 400
Bold · 700
--font-family-3 · adidasFG
adidasFG
Three Stripes. Tiro 23. Ultraboost 22. Samba OG. Gazelle Bold.
Times (base fallback)
AdihausDIN (UI)
adidasFG (display)
IMPOSSIBLE IS NOTHING
Display · 38px · Bold · line-height: 40px · letter-spacing: +2.5px
Ultraboost 22
Heading XL · 30px · Bold · line-height: 32px · letter-spacing: +2.5px
New Arrivals
Heading · 24px · Bold · line-height: 28px
Engineered for maximum cushioning and energy return. Run farther with Boost technology.
Body · 16px · Regular · line-height: 24px · letter-spacing: +3px
₹12,999 · Available in 4 colors · Free shipping above ₹4,999
Body Small · 14px · Regular · line-height: 22px · letter-spacing: +2.5px
RUNNING · TRAINING · ORIGINALS
Label · 12px · Bold · uppercase · letter-spacing: +3px
Letter Spacing — All-Positive (unique in series alongside MongoDB)
SPORT
--letter-spacing-tight
+2.5px · headings, display, product names — wider than most systems' "wide" token
RUNNING · TRAINING
--letter-spacing-normal
+3px · labels, categories, uppercase body copy
Spacing
Spacing Scale
18 steps — 1.5px → 64px (includes sub-pixel 1.5px and 1.75px)
Borders
Border Radii — Only 2 tokens (most minimal in series)
adidas defines only 2 border-radius tokens — the smallest radius vocabulary in the series alongside Mistral AI. The 5px value is used for cards and interactive elements; 50% is used exclusively for circular avatars and badges. No pill, no large radius — consistent with the sharp, geometric brand aesthetic.
Border Widths — 4 tokens (includes 2.5px and 5px accent)
--border-width-hairline
1px · ×149 — default dividers, cards, inputs
--border-width-thin
2px · ×22 — CTAs, selected states, focus outlines
--border-width-base
2.5px · ×8 — active nav underline, product highlight
--border-width-thick
5px · ×8 — Three Stripes accent bars, section dividers
Shadows / Elevation
Shadow Tokens
1 token — solid gray omnidirectional glow
--shadow-sm
×1
rgb(128,128,128) 0px 0px 10px 0px — omnidirectional gray glow, no offset. Used on product card hover, not on layout surfaces. Non-transparent solid gray color is unique (vs. typical rgba).
No shadow defined
adidas relies on solid 1px borders for UI surface definition — no elevation scale beyond the single card shadow token.
No shadow defined
Zero-offset, zero-spread shadows from rgba base would be the norm, but adidas opts for the non-transparent solid gray approach instead.
Z-Index
15 layers — the most extreme z-index range in the series. Starts clean (1→1000), jumps to 7999/8000/8002 (adidas header cluster, matching the CSS custom property --header-mf-z-index: 8000), then escalates dramatically to 2-billion territory and peaks at signed 32-bit INT_MAX: 2147483647.
| Layer | Value | Usage |
|---|
| --z-1 | 1 | Base positioned elements |
| --z-2 | 9 | Elevated inline surfaces |
| --z-3 | 10 | Sticky navigation sub-elements |
| --z-4 | 99 | Dropdowns, tooltips |
| --z-5 | 100 | Product image overlays, badges |
| --z-6 | 1000 | Modals, cart drawers |
| --z-7 | 7999 | Pre-header layer |
| --z-8 | 8000 | adidas Master Frame header (--header-mf-z-index) |
| --z-9 | 8002 | Header dropdowns above nav bar |
| --z-10 | 2,000,000,000 | Cookie consent / GDPR overlays |
| --z-11 | 2,000,000,001 | Above cookie consent |
| --z-12 | 2,000,000,002 | Critical compliance layer |
| --z-13 | 2,000,000,003 | Topmost compliance stack |
| --z-14 | 2,100,000,000 | Emergency / debug override |
| --z-15 | 2,147,483,647 | INT_MAX — absolute topmost layer in any browser |
Breakpoints
26 breakpoints — 280px → 1920px. The most comprehensive breakpoint system in the entire series (tied only with GitHub at 51). Starts at 280px (ultra-small Android phones), includes iPhone 14 Pro/15 edge cases (389/390px), and ends at 1920px full-HD. Paired tokens (479/480px, 599/600px, 767/768px, 959/960px, 1279/1280px, 1599/1600px) indicate straddle pairs for device targeting.
Opacity
Opacity Tokens
1 token — 0.9 only
Single token at 90%, used for the header/navigation overlay during scroll or mega-menu open — near-opaque but slightly translucent. Alongside Nike's single 85% token, adidas represents the most minimal opacity vocabulary in the series.
Accessibility
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| #767677 (Mid Gray) | #000000 (Black) | 4.63:1 | AA |
| #767677 (Mid Gray) | #FFFFFF (White) | 4.54:1 | AA |
| #767677 (Mid Gray) | #ECEFF1 (Light Gray) | 3.93:1 | AA Large |
| #767677 (Mid Gray) | #408267 (Cyan 2) | 1:1 | Fail |
| #767677 (Mid Gray) | #E9ECEF (Light Gray 3) | 3.83:1 | AA Large |
| #E32B2B (Red) | #000000 (Black) | 4.65:1 | AA |
| #E32B2B (Red) | #FFFFFF (White) | 4.52:1 | AA |
| #E32B2B (Red) | #ECEFF1 (Light Gray) | 3.91:1 | AA Large |
| #E32B2B (Red) | #408267 (Cyan 2) | 1.01:1 | Fail |
| #808080 (Mid Gray 2) | #000000 (Black) | 5.32:1 | AA |
| #808080 (Mid Gray 2) | #FFFFFF (White) | 3.95:1 | AA Large |
| #808080 (Mid Gray 2) | #ECEFF1 (Light Gray) | 3.42:1 | AA Large |
| #808080 (Mid Gray 2) | #408267 (Cyan 2) | 1.15:1 | Fail |
| #808080 (Mid Gray 2) | #E9ECEF (Light Gray 3) | 3.33:1 | AA Large |
CSS Variables Reference
Black (dominant · ×13460)--color-black#000000
White--color-white#FFFFFF · ×422
Light Gray--color-light-gray#ECEFF1 · ×99
Cyan 2 (green surface)--color-cyan-2#408267 · ×4
Light Gray 3--color-light-gray-3#E9ECEF · ×1
White 2--color-white-2#F9F7F6 · ×1
Mid Gray (body text)--color-mid-gray#767677 · ×168
Red (error text)--color-red#E32B2B · ×24
Mid Gray 2--color-mid-gray-2#808080 · ×7
Light Gray 2 (border)--color-light-gray-2#D3D7DA · ×7
Mid Gray 3 (border)--color-mid-gray-3#929396 · ×6
Dark Gray (border)--color-dark-gray#363333 · ×1
Cyan (TikTok)--color-cyan#69C9D0 · ×8
Facebook--color-blue-3#1877F2 · ×2
Twitter / X--color-blue-5#1DA1F2 · ×2
TikTok Red--color-red-4#EE1D52 · ×2
Dark Purple--color-dark-purple#400090 · ×2
Times (base fallback)--font-family-baseTimes
AdihausDIN (UI)--font-family-2AdihausDIN
adidasFG (display)--font-family-3adidasFG
Regular / Bold onlyfont-weight400 / 700
10px → 38px (7 sizes)2xs → 2xl
16px → 40px (7 line-heights)tight → lh-7
All-positive tracking (tight)--letter-spacing-tight+2.5px
All-positive tracking (normal)--letter-spacing-normal+3px
Instant (200ms) · ×12--duration-instant0.2s
Fast (300ms) · ×60 (most used)--duration-fast0.3s
Normal (500ms) · ×1--duration-normal0.5s
Slow (800ms) · ×4--duration-slow0.8s
Ease In-Out (sole easing)--easing-ease-in-outease-in-out · ×8
Nav overlay (only token)--opacity-900.9 · ×2
Hairline / Thin / Base / Thickborder widths1/2/2.5/5px
sm (5px)--radius-sm5px · ×2
md (circle)--radius-md50% · ×2
1 shadow (gray glow)--shadow-smrgb(128,128,128) 10px
Base / Navigation--z-1 / --z-31 / 10
Header cluster--z-7/z-8/z-97999/8000/8002
GDPR compliance stack--z-10 → --z-132B → 2,000,000,003
Emergency override--z-142,100,000,000
INT_MAX (absolute top)--z-152,147,483,647
8px (×330 — most used)--space-58px
16px (×247)--space-1016px
ADIDAS DESIGN SYSTEM · GENERATED 17/04/2026 · 27 COLOR TOKENS · 3 FONT FAMILIES · 2 FONT WEIGHTS · 7 FONT SIZES · 7 LINE HEIGHTS · 2 LETTER SPACING (ALL POSITIVE) · 18 SPACING STEPS · 2 RADIUS · 4 BORDER WIDTHS · 1 SHADOW · 4 DURATIONS · 1 EASING · 15 Z-INDEX LAYERS (INT_MAX) · 26 BREAKPOINTS · 1 OPACITY