Nike About

Overview

Nike's About site embodies **Architectural Minimalism**—a design philosophy that strips away ornament to reveal pure functional form. The interface is built on a stark black (#111111) and white (#ffffff) duality, creating maximum contrast and visual clarity. This monochromatic approach serves the brand's core mission: to serve athletes with uncompromising directness. The emotional response is one of confidence and precision—every pixel earns its place. The brand voice is declarative and inclusive: "We serve kids, pros, dreamers, women, teams, coaches, men, beginners, girls, rebels, athletes." The tone is never apologetic, never decorative. It speaks in imperatives and truths. Example sentence: "If you have a body, you are an athlete."

Colors

The color system operates on a principle of **Maximum Contrast Hierarchy**. Primary (#ffffff) is the dominant accent—used on all call-to-action buttons, interactive elements, and text on dark backgrounds. It commands attention through its purity and brightness against the #111111 surface. Secondary (#808080) and Tertiary (#999999) provide mid-tone support for disabled states, secondary navigation, and supporting text. The surface stack is deliberately shallow: surface (#111111), surface-container-high (#2d2d2d), and surface-container-highest (#3d3d3d) create subtle layering without sacrificing the bold monochromatic aesthetic. On-surface (#ffffff) and on-surface-variant (#cccccc) ensure legibility across all contexts. Error (#ff4444) is reserved for validation and critical feedback, breaki

Typography

The type system pairs **FuturaNike** (display, 72px, 700 weight, -0.04em tracking) for hero statements with **Helvetica Neue** (body, 16px, 400 weight) for all supporting content. This pairing communicates athletic authority through the geometric precision of Futura while maintaining accessibility through Helvetica's neutral clarity. Display sizes (72px) are reserved for mission statements and hero headlines; headline-lg (48px, 600 weight) anchors section introductions; body-md (16px, 400 weight) carries narrative content. Label-md (14px, 500 weight, 0.01em tracking) is applied to buttons and interactive labels. All type on dark backgrounds receives a subtle text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to enhance legibility at small sizes. Line-height is consistently generous (1.5 for body,

Layout

The layout operates on a **12-column fluid grid** with responsive breakpoints at 480px (sm), 600px (md), 900px (lg), 1200px (xl), and 1500px (xl2). Container max-width is 1280px, centered with symmetric margins (20px on mobile, 32px on tablet, 40px on desktop). The gutter spacing is 20px at mobile, scaling to 40px at xl breakpoints. Sections are separated using lg spacing (40px) for visual rhythm. The hero section occupies full viewport height with centered content, establishing immediate visual hierarchy. Navigation is fixed at the top (60px height) with a dark background (#111111) and white text (#ffffff), creating a persistent anchor. White-space is weaponized: large negative space around hero text (72px display) forces focus. The grid margin (--grid-margin) is applied consistently to a

Elevation & Depth

Depth is conveyed through **Flat Layering with Precise Shadows**—not through color gradation, but through strategic use of box-shadow and z-index stacking. Level 1 (Base): surface #111111 with no shadow. Level 2 (Cards/Containers): surface-container (#111111) with 1px solid border at #4d4d4d and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Modals/Overlays): surface-container-high (#2d2d2d) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) and a 2px border at outline (#4d4d4d). Interactive elements (buttons, inputs) use a 40px height standard with 13px 24px padding, creating a tactile prese

Shapes

The shape philosophy is **Geometric Precision with Functional Softness**. Buttons use border-radius: 80px (full pill shape) to signal interactivity and approachability—the rounded form contrasts with the angular typography. Input fields also use 100px border-radius for consistency. Cards and containers use 16px (lg) border-radius, providing subtle softness without compromising the architectural aesthetic. Navigation items and list elements use 8px (md) border-radius. The full (9999px) radius is reserved for badge components and circular icon buttons (30px diameter). This tiered approach ensure

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses backgroundColor: {colors.primary} (#ffffff), textColor: {colors.on-primary} (#111111), fontWeight: 500, padding: 13px 24px, height: 40px, and border-radius: 80px. On hover, backgroundColor transitions to {colors.primary-fixed-dim} (rgba(255, 255, 255, 0.75)) with a 250ms ease-out transition. Active state uses rgba(255, 255, 255, 0.75). **button-secondary** uses transparent background with a 1px solid border at {colors.outline} (#4d4d4d), textColor: {colors.on-surface} (#ffffff), and the same 40px height. On hover, backgroundColor becomes {colors.surface-container-high} (#2d2d2d). **button-ghost** is fully transparent with no border, used for tertiary actions; on hover it receives a subtle rgba(255, 255

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ffffff) exclusively for primary CTAs and interactive focus states—it is the only accent color in the system.
• Do maintain 1.5 line-height minimum on body text (16px × 1.5 = 24px) to support readability and Spanish language expansion.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to elevated cards and modals to establish clear depth hierarchy.
• Do use FuturaNike at 72px+ with -0.04em letter-spacing for hero headlines to maximize impact and brand recognition.
• Do apply 250ms ease-out transitions to all interactive state changes (hover, active, focus) for consistent motion language.

**Don't**

• Don't introduce color beyond the defined monochromatic palette (#111111, #ffffff, grays #2d2d2d–#e5e5e5, and error #ff4444)—the brand's power lies in its restraint.
• Don't use border-radius: 0px anywhere in the interface; minimum is 2px (sm) to maintain the geometric-precision aesthetic.
• Don't apply text-shadow to body text on light backgrounds; reserve it only for small labels over dark backgrounds.
• Don't exceed 1280px container max-width; enforce this at xl breakpoints to maintain reading line-length and visual hierarchy.
• Don't mix typefaces within a single component; use FuturaNike for display only, Helvetica Neue for all UI and body text.