adidas

Overview

adidas is a global leader in athletic apparel, footwear, and equipment, serving athletes and lifestyle consumers across all performance categories. The design system embodies 'Athletic Minimalism'—a philosophy that strips away ornamentation to expose pure function and brand authority. The UI leverages high-contrast black-and-white foundations paired with strategic accent colors (membership green #408267, brand blue #007bc6, and error red #e32b2b) to create visual hierarchy that guides users toward conversion. The emotional response is one of confidence and clarity: every interface element serves a purpose, every color choice signals intent.

The adidas voice is direct, motivational, and unambiguous. Copy is action-oriented ('Aceitar todas os cookies', 'Homem', 'Mulher') with no hedging or softness. Typography is bold and geometric, reflecting the brand's heritage in performance engineering. Tone example: 'Reimaginadas em colaboração com Mute'—spare, factual, product-focused. The brand personality rejects decoration; it celebrates the athlete's discipline and the product's technical merit.

Colors

The color system operates on a principle of maximum contrast and functional clarity. Primary (#000000) is pure black, used for all primary CTAs, text, and structural elements—it commands attention and conveys authority. On-primary (#ffffff) ensures legibility at all scales. Secondary (#408267, adidas membership green) is the brand's signature accent, deployed on membership-related CTAs, badges, and hover states to signal premium tier or special status; it carries an emotional weight of growth and community. Tertiary (#007bc6, adidas brand blue) serves as a secondary accent for links, highlights, and informational elements, providing visual relief without competing with primary. Error (#e32b2b) is reserved for sale badges, warnings, and destructive actions—it appears frequently in promotion

Typography

The type system is built on two font families: adidasFG (geometric, display-focused) for headlines and high-impact messaging, and AdihausDIN (functional, sans-serif) for body copy and UI labels. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand statements; headline-lg (40px, 700 weight) for section titles; headline-md (28px, 700 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 22px line-height) handle product descriptions and long-form content with generous line-height (1.4–1.5x) to ensure readability over product imagery. Label-md (14px, 700 weight) and label-sm (12px, 700 weight) are applied to buttons, badges, and form labels with 0px letter-spacing for tight, athletic appearance. All type scal

Layout

The layout system uses a 12-column grid with a maximum container width of 1600px, supporting responsive breakpoints at 768px (tablet) and 960px (desktop). Spacing is semantic and hierarchical: unit (10px) is the base increment; sm (10px) for tight component spacing; md (20px) for standard section gutters and card padding; lg (40px) for major section separation; xl (60px) for hero and full-width spacing. The gutter (20px) is applied consistently to left/right margins on all container-bound content, creating a breathing room that prevents edge-to-edge visual fatigue. White space is aggressive and intentional—product cards are separated by at least md (20px) horizontally and lg (40px) vertically to emphasize individual items and reduce cognitive load. Hero sections use full-width imagery with

Elevation & Depth

Depth is conveyed through a minimal shadow system and strategic use of background color shifts rather than heavy drop shadows. Level 1 (Base): no shadow, surface color #ffffff or #f5f5e5. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: {colors.surface-container-lowest} (#eceff1), used for product cards, input fields, and standard containers. Level 3 (Elevated/Modal): box-shadow: 0 5px 10px rgba(64, 130, 103, 0.3) for membership-related elements, or 0 5px 10px rgba(0, 0, 0, 0.15) for standard modals; background: {colors.surface} (#ffffff). Membership-specific ele

Shapes

The shape philosophy is 'Functional Geometry'—minimal border-radius values that suggest precision and engineering rather than softness or playfulness. Buttons and inputs use rounded: DEFAULT (4px), a subtle curve that softens hard edges without introducing visual noise. Cards and containers use rounded: md (6px) for slightly more breathing room while maintaining the athletic aesthetic. Modals and overlays use rounded: md (6px) to match card styling and create visual consistency. Full-width elements (badges, pills, membership indicators) use rounded: full (9999px) to create a distinctive, pill-

Components

Action Elements

Buttons are the primary driver of conversion and must be immediately recognizable. Button-primary uses {colors.primary} (#000000) background with {colors.on-primary} (#ffffff) text, label-md typography (14px, 700 weight), 48px height, 0 16px padding, and rounded: DEFAULT (4px). All buttons apply a 0.3s cubic-bezier(0.3, 0, 0, 1) transition on background-color and box-shadow. On hover, button-primary transitions to {colors.primary-container} (#3b3b3c) with {elevation.md} shadow (0 3px 8px rgba(0, 0, 0, 0.15)), providing tactile feedback without changing the overall visual weight. Button-secondary uses transparent background with {colors.primary} text and a 1px solid {colors.primary} border; on hover, it shifts to {colors.surface-container-high} (#d3d7da) background. But