DESIGN.md · Analysis

Nike Circular Design

circulardesign.nike.com · 5 Oct 2026 · 47 colors · Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif

Nike Circular Design

Nike's design system for circular economy principles, emphasizing sustainability through bold typography, minimalist layout, and a signature lime-green accent that signals innovation and environmental responsibility.

Colors

surface#ffffff

surface-dim#f5f5f5

surface-bright#ffffff

surface-container-lowest#fafafa

surface-container-low#f0f0f0

surface-container#e9ecef

surface-container-high#e0e0e0

surface-container-highest#d0d0d0

on-surface#000000

on-surface-variant#505050

inverse-surface#1a1a1a

inverse-on-surface#ffffff

outline#666666

outline-variant#999999

surface-tint#ddfa6d

primary#ddfa6d

on-primary#000000

primary-container#e8ffa0

on-primary-container#1a1a00

inverse-primary#b8d600

secondary#5bbad5

on-secondary#ffffff

secondary-container#a8d9e8

on-secondary-container#0d3d4d

tertiary#6c757d

on-tertiary#ffffff

tertiary-container#c4c7c8

on-tertiary-container#1a1a1a

error#d32f2f

on-error#ffffff

error-container#ffcdd2

on-error-container#b71c1c

primary-fixed#e8ffa0

primary-fixed-dim#ddfa6d

on-primary-fixed#1a1a00

on-primary-fixed-variant#505000

secondary-fixed#a8d9e8

secondary-fixed-dim#5bbad5

on-secondary-fixed#0d3d4d

on-secondary-fixed-variant#1a5f75

tertiary-fixed#c4c7c8

tertiary-fixed-dim#6c757d

on-tertiary-fixed#1a1a1a

on-tertiary-fixed-variant#3a3a3a

background#ffffff

on-background#000000

surface-variant#e9ecef

Typography

display: fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif · fontSize: 64px · fontWeight: 400 · lineHeight: 72px · letterSpacing: -0.02em
headline-lg: fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif · fontSize: 48px · fontWeight: 400 · lineHeight: 56px · letterSpacing: -0.01em
headline-md: fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif · fontSize: 32px · fontWeight: 400 · lineHeight: 40px · letterSpacing: 0em
title-lg: fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif · fontSize: 24px · fontWeight: 400 · lineHeight: 32px · letterSpacing: 0em
body-lg: fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.02em

Design guidance

Overview

Nike Circular Design is a sustainability-focused design system that embodies the brand's commitment to circular economy principles and environmental responsibility. The aesthetic is rooted in Architectural Minimalism—clean geometric grids, bold sans-serif typography at scale (64px display weight 400), and a restrained palette dominated by pure white (#ffffff) and black (#000000) with a signature lime-green accent (#ddfa6d) that signals innovation and forward-thinking design. The UI evokes clarity, precision, and purposeful simplicity, transforming complex sustainability concepts into accessible visual language. The brand personality is authoritative yet approachable: direct, data-driven, and optimistic about circular design's potential. Voice is declarative and confident, avoiding jargon while celebrating specificity. Example sentence: 'Circular design isn't a trend—it's the future of how we make things.'

Colors

The color system operates on a high-contrast, minimalist foundation with strategic accent deployment. Primary (#ddfa6d, a vibrant lime-green) is the brand's signature accent, reserved exclusively for call-to-action elements, focus states, and key interactive moments—it appears sparingly but commands attention. On-primary text (#000000) ensures WCAG AAA contrast (21:1 ratio) for accessibility. The surface stack anchors the design: surface (#ffffff) is the default background, surface-container (#e9ecef) provides subtle visual separation for grouped content, and surface-container-highest (#d0d0d0) defines borders and dividers. On-surface (#000000) and on-surface-variant (#505050) handle typography hierarchy, with variant used for secondary copy and disabled states. Secondary (#5bbad5, a cool

Typography

The type system prioritizes scale and weight contrast over font-family variation, using Helvetica Neue across all levels to reinforce Nike's corporate heritage and technical precision. Display (64px, weight 400, line-height 72px, letter-spacing -0.02em) anchors hero sections with commanding presence; headline-lg (48px, weight 400) introduces major sections; headline-md (32px, weight 400) breaks content into digestible chunks. Body-lg (18px, weight 400, line-height 28px) and body-md (16px, weight 400, line-height 24px) maintain readability at 1280px container width with generous line-height (1.5–1.6 ratio). Label-md (14px, weight 600, letter-spacing 0.01em) emphasizes UI labels and button text, while label-sm (12px, weight 500) handles captions and metadata. When displaying label-sm over bu

Layout

The layout system uses a 12-column fluid grid with a fixed max-width of 1280px, centered on the viewport. Sections are separated using lg spacing (40px) for major breaks and md spacing (24px) for subsection rhythm, creating a breathing, hierarchical page flow. The gutter width is 24px between columns, maintaining consistent horizontal rhythm. Container padding uses md spacing (24px) on desktop, reducing to sm spacing (12px) on tablet and xs spacing (4px) on mobile to preserve content density. White-space is treated as a design material: generous margins around hero typography (64px display text) and ample breathing room between card groups (lg spacing, 40px) reinforce the minimalist aesthetic. The grid system accommodates both full-width hero sections and constrained content areas; when co

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadow stacking. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor interactive states like hover on list items; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and dropdown panels, providing clear separation from the background; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating elements that demand visual prominence. All surfaces maintain a 1px border at surface-container-highest (#d0d0d0) in addition to shadows, creating a crisp, defined edge that reinforces the architectural

Shapes

The shape philosophy is Architectural Precision: minimal, intentional border-radius that respects the grid and typography scale. Buttons and input fields use rounded.DEFAULT (4px) for a subtle softness that avoids visual heaviness; cards and containers use rounded.lg (8px) to create slightly more breathing room while maintaining geometric clarity. The pinwheel logo and decorative SVG elements use rounded.full (9999px) where circular forms are required, but rectangular UI components never exceed 8px radius—this constraint preserves the technical, purposeful character of the design. Dividers and

Components

Action Elements Buttons follow a two-tier system: primary (button-primary) uses the signature lime-green (#ddfa6d) background with black text (#000000), 44px height, 12px 24px padding, and 4px border-radius. On hover (button-primary-hover), the background shifts to primary-fixed-dim (#ddfa6d) with a 1px border at inverse-primary (#b8d600), maintaining visual feedback within the green family. On active state (button-primary-active), background becomes inverse-primary (#b8d600) for deeper contrast. Secondary buttons (button-secondary) use transparent background with a 1px outline at #666666, preserving hierarchy while offering alternative actions. All buttons transition over 200ms ease-out to feel responsive without jarring motion.

Containers & Surfaces Cards (card) use white backgr

Do's and Don'ts

**Do**

Do use primary (#ddfa6d) exclusively for high-priority CTAs, focus states, and brand moments—never for backgrounds or large surface areas.
Do maintain 1px borders at surface-container-highest (#d0d0d0) on all cards and containers to define spatial relationships without relying on heavy shadows.
Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to interactive elements like cards and dropdowns; reserve lg elevation for modals and floating UI.
Do use Helvetica Neue weight 400 for all headings and weight 600 only for button labels and emphasized inline text to preserve visual hierarchy.
Do separate major sections with lg spacing (40px) and subsections with md spacing (24px) to create breathing room and guide the eye through content.

**Don't**

Don't use primary (#ddfa6d) for body text, backgrounds, or decorative elements—it must remain a high-contrast accent reserved for interaction.
Don't exceed 8px border-radius on any rectangular UI component; the architectural aesthetic depends on geometric precision, not soft curves.
Don't stack shadows beyond lg elevation (0 8px 24px rgba(0, 0, 0, 0.12))—the minimalist aesthetic rejects visual heaviness and depth layering.
Don't mix font families or use weights beyond 400 and 600; consistency in Helvetica Neue reinforces Nike's technical authority.
Don't reduce spacing below md (24px) for section separation or below sm (12px) for component padding—white-space is a design material, not a constraint to minimize.

---
version: alpha
name: Nike Circular Design
description: >-
  Nike's design system for circular economy principles, emphasizing sustainability through bold typography, minimalist
  layout, and a signature lime-green accent that signals innovation and environmental responsibility.
logo:
  src: https://circulardesign.nike.com/safari-pinned-tab.svg
colors:
  surface: '#ffffff'
  surface-dim: '#f5f5f5'
  surface-bright: '#ffffff'
  surface-container-lowest: '#fafafa'
  surface-container-low: '#f0f0f0'
  surface-container: '#e9ecef'
  surface-container-high: '#e0e0e0'
  surface-container-highest: '#d0d0d0'
  on-surface: '#000000'
  on-surface-variant: '#505050'
  inverse-surface: '#1a1a1a'
  inverse-on-surface: '#ffffff'
  outline: '#666666'
  outline-variant: '#999999'
  surface-tint: '#ddfa6d'
  primary: '#ddfa6d'
  on-primary: '#000000'
  primary-container: '#e8ffa0'
  on-primary-container: '#1a1a00'
  inverse-primary: '#b8d600'
  secondary: '#5bbad5'
  on-secondary: '#ffffff'
  secondary-container: '#a8d9e8'
  on-secondary-container: '#0d3d4d'
  tertiary: '#6c757d'
  on-tertiary: '#ffffff'
  tertiary-container: '#c4c7c8'
  on-tertiary-container: '#1a1a1a'
  error: '#d32f2f'
  on-error: '#ffffff'
  error-container: '#ffcdd2'
  on-error-container: '#b71c1c'
  primary-fixed: '#e8ffa0'
  primary-fixed-dim: '#ddfa6d'
  on-primary-fixed: '#1a1a00'
  on-primary-fixed-variant: '#505000'
  secondary-fixed: '#a8d9e8'
  secondary-fixed-dim: '#5bbad5'
  on-secondary-fixed: '#0d3d4d'
  on-secondary-fixed-variant: '#1a5f75'
  tertiary-fixed: '#c4c7c8'
  tertiary-fixed-dim: '#6c757d'
  on-tertiary-fixed: '#1a1a1a'
  on-tertiary-fixed-variant: '#3a3a3a'
  background: '#ffffff'
  on-background: '#000000'
  surface-variant: '#e9ecef'
typography:
  display:
    fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
    fontSize: 64px
    fontWeight: '400'
    lineHeight: 72px
    letterSpacing: '-0.02em'
  headline-lg:
    fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
    fontSize: 48px
    fontWeight: '400'
    lineHeight: 56px
    letterSpacing: '-0.01em'
  headline-md:
    fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
    fontSize: 32px
    fontWeight: '400'
    lineHeight: 40px
    letterSpacing: 0em
  title-lg:
    fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
    fontSize: 24px
    fontWeight: '400'
    lineHeight: 32px
    letterSpacing: 0em
  body-lg:
    fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.02em
rounded:
  sm: 2px
  DEFAULT: 4px
  md: 6px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 24px rgba(0, 0, 0, 0.12)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 24px
    height: 44px
    border: 1px solid {colors.primary}
    transition: all 200ms ease-out
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    textColor: '{colors.on-primary}'
    border: 1px solid {colors.inverse-primary}
  button-primary-active:
    backgroundColor: '{colors.inverse-primary}'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 24px
    height: 44px
    border: 1px solid {colors.outline}
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    border: 1px solid {colors.on-surface-variant}
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    border: 1px solid {colors.surface-container-highest}
    boxShadow: '{elevation.md}'
  card-hover:
    backgroundColor: '{colors.surface-dim}'
    boxShadow: '{elevation.lg}'
    transition: all 200ms ease-out
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    border: 1px solid {colors.outline-variant}
    height: 40px
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(221, 250, 109, 0.1)
    outline: none
  select-dropdown:
    backgroundColor: '#ffffff'
    border: 1px solid {colors.surface-container-highest}
    borderRadius: '{rounded.DEFAULT}'
    boxShadow: '{elevation.md}'
    padding: 6px 12px
    marginTop: 4px
    maxHeight: 300px
    overflowY: auto
  select-option:
    padding: 6px 12px
    lineHeight: '1.5'
    cursor: pointer
    backgroundColor: transparent
  select-option-hover:
    backgroundColor: '{colors.surface-container-low}'
  select-option-selected:
    backgroundColor: '{colors.surface-container}'
    fontWeight: '600'
  badge:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  divider:
    height: 1px
    backgroundColor: '{colors.surface-container-highest}'
    margin: '{spacing.md} 0'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons follow a two-tier system: primary (button-primary) uses the signature lime-green (#ddfa6d) background with black text (#000000), 44px height, 12px 24px padding, and 4px border-radius. On hover (button-primary-hover), the background shifts to primary-fixed-dim (#ddfa6d) with a 1px border at inverse-primary (#b8d600), maintaining visual feedback within the green family. On active state (button-primary-active), background becomes inverse-primary (#b8d600) for deeper contrast. Secondary buttons (button-secondary) use transparent background with a 1px outline at #666666, preserving hierarchy while offering alternative actions. All buttons transition over 200ms ease-out to feel responsive without jarring motion.

### Containers & Surfaces
Cards (card) use white backgr

## Do's and Don'ts

**Do**
- Do use primary (#ddfa6d) exclusively for high-priority CTAs, focus states, and brand moments—never for backgrounds or large surface areas.
- Do maintain 1px borders at surface-container-highest (#d0d0d0) on all cards and containers to define spatial relationships without relying on heavy shadows.
- Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to interactive elements like cards and dropdowns; reserve lg elevation for modals and floating UI.
- Do use Helvetica Neue weight 400 for all headings and weight 600 only for button labels and emphasized inline text to preserve visual hierarchy.
- Do separate major sections with lg spacing (40px) and subsections with md spacing (24px) to create breathing room and guide the eye through content.

**Don't**
- Don't use primary (#ddfa6d) for body text, backgrounds, or decorative elements—it must remain a high-contrast accent reserved for interaction.
- Don't exceed 8px border-radius on any rectangular UI component; the architectural aesthetic depends on geometric precision, not soft curves.
- Don't stack shadows beyond lg elevation (0 8px 24px rgba(0, 0, 0, 0.12))—the minimalist aesthetic rejects visual heaviness and depth layering.
- Don't mix font families or use weights beyond 400 and 600; consistency in Helvetica Neue reinforces Nike's technical authority.
- Don't reduce spacing below md (24px) for section separation or below sm (12px) for component padding—white-space is a design material, not a constraint to minimize.

Edit, then copy or download.