Nike
MIT
Bold, performance-focused design system built on Nike's Podium language with striking orange accents, geometric typography, and pill-shaped buttons for athletic brand applications
Published by Layout27 importsminimal tierLayout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install nikeUI themeReskin shadcn or Layout UI components to match Nike.
npx shadcn add https://layout.design/r/nike/theme.json# layout.md — Nike Design System
---
## 0. Quick Reference
**Stack:** React/Next.js · Nike Podium Design System (PDS) · CSS custom properties (522 vars extracted, high confidence)
**Token source:** `extracted-css-vars` — use original variable names exactly as extracted.
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
/* ── Core Tokens (copy into :root or component scope) ── */
/* Colour */
--podium-cds-color-black: #111111; /* Primary text, primary button bg */
--podium-cds-color-white: #FFFFFF; /* Surface, inverse text */
--podium-cds-color-grey-100: #F5F5F5; /* Secondary bg, hover bg */
--podium-cds-color-grey-500: #707072; /* Secondary text, hover text */
--podium-cds-color-orange-400: #FF5000; /* Nike Orange — brand accent */
--podium-cds-color-gradient-brand-orange: linear-gradient(113.7deg, #FF0015 3.64%, #fe5000 50.92%, #FF6A00 97.26%); /* Brand hero gradient */
--podium-cds-color-box-focus-ring: rgba(39, 93, 197, 1); /* Focus ring — all interactive */
--podium-cds-color-red-600: #D30005; /* Error / critical */
--podium-cds-color-green-600: #007D48; /* Success */
--podium-cds-color-blue-500: #1151FF; /* Info / links */
--podium-cds-color-scrim-primary: rgba(17,17,17,0.36); /* Overlay scrim */
/* Typography */
--podium-cds-typography-body1: 400 1rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
--podium-cds-typography-body1-strong: 500 1rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-320-to-959-display1: 3rem/1 'Nike Futura ND','Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
/* Spacing */
--podium-cds-size-spacing-xs: 4px;
--podium-cds-size-spacing-s: 8px;
--podium-cds-size-spacing-m: 12px;
--podium-cds-size-spacing-l: 24px;
--podium-cds-size-spacing-xl: 36px;
--podium-cds-size-spacing-xxl: 60px;
/* Radius */
--podium-cds-button-border-radius: 30px; /* ALL buttons — pill shaped */
--podium-cds-size-border-radius-s: 4px;
--podium-cds-size-border-radius-xl: 24px;
--pds-radius-rounded: 9999px;
/* Motion */
--duration-fast: 0.1s;
--duration-base: 0.25s;
--ease-default: ease;
```
```tsx
// Primary Button — correct token usage
<button
className="ncss-btn-primary-dark"
style={{
font: 'var(--podium-cds-typography-body1-strong)',
backgroundColor: 'var(--podium-cds-color-black)',
color: 'var(--podium-cds-color-white)',
borderRadius: 'var(--podium-cds-button-border-radius)',
padding: '12px 24px',
border: 'none',
cursor: 'pointer',
transition: `background-color var(--duration-base) var(--ease-default)`,
}}
>
Shop Now
</button>
```
**NEVER rules:**
- NEVER use `border-radius` other than `--podium-cds-button-border-radius` (30px) on buttons — Nike uses pill buttons exclusively
- NEVER use Inter, Roboto, or system-ui as body font — always `'Helvetica Now Text', Helvetica, Arial, sans-serif`
- NEVER hardcode `#FF5000` or `#111111` — always reference the CSS variable
- NEVER use spacing values not in the `--podium-cds-size-spacing-*` scale
- NEVER omit focus ring: `box-shadow: 0 0 0 2px var(--podium-cds-color-box-focus-ring)` on `:focus-visible`
- NEVER use a non-pill border-radius on CTAs — even "small" buttons use `border-radius: 30px`
- NEVER construct dynamic Tailwind class names from token values (e.g. `bg-[${color}]`) — use static `var()` references
**Full design system → see layout.md**
<!-- Quick Reference truncated to fit the 75-line cap. See later sections for the full design system. -->
## 1. Design Direction & Philosophy
### Character & Aesthetic Intent
Nike's design language is **athletic minimalism with maximum impact**. The visual system is built on extreme typographic scale, high-contrast black-and-white surfaces, and selective use of brand orange as the sole saturated accent on neutral layouts.
The Podium Design System (PDS) is a mature, production-grade design system with two parallel naming conventions (`podium-cds-*` and `pds-*`) that must both be preserved.
**Mood:** Confident. Bold. Direct. The UI recedes so product imagery dominates. Typography carries energy — oversize display type is a core visual element, not a special occasion.
**What this design explicitly rejects:**
- Decorative gradients on UI chrome (gradient is reserved for the brand orange identity token only)
- Rounded corners > 30px on anything except pill buttons and `border-radius: 50%` circular elements
- Warm or neutral background tints — surfaces are pure white (`#FFFFFF`) or near-black (`#111111`)
- Drop shadows on buttons (Nike's button system uses `box-shadow: none` — elevation is communicated through colour contrast, not shadows)
- Multi-colour UI — secondary brand colours (yellow, purple, pink, teal, green) appear in product/editorial contexts only, never as UI chrome
- Serif typography in body copy — Palatino LT Pro Light is reserved for editorial "conversation" typestyles only
**Tone:** The copy and UI are terse and imperative. Calls to action are short verbs ("Shop", "Explore", "Find Your Fit"). Labels are sentence case or all-caps display, never mixed-case decorative.
---
## 2. Colour System
### Tier 1: Primitive Values
```css
/* ── Grey Scale ── */
--podium-cds-color-black: #111111; /* extracted: high confidence */
--podium-cds-color-white: #FFFFFF; /* extracted: high confidence */
--podium-cds-color-grey-50: #FAFAFA;
--podium-cds-color-grey-100: #F5F5F5;
--podium-cds-color-grey-200: #E5E5E5;
--podium-cds-color-grey-300: #CACACB;
--podium-cds-color-grey-400: #9E9EA0;
--podium-cds-color-grey-500: #707072;
--podium-cds-color-grey-600: #4B4B4D;
--podium-cds-color-grey-700: #39393B;
--podium-cds-color-grey-800: #28282A;
--podium-cds-color-grey-900: #1F1F21;
/* Alias: pds-* grey mirrors podium-cds-* grey exactly */
--pds-color-gray-50: #FAFAFA; /* Same value as grey-50 */
--pds-color-gray-100: #F5F5F5;
--pds-color-gray-800: #28282A;
--pds-color-gray-900: #1F1F21;
/* ── Orange (Primary Brand) ── */
--podium-cds-color-orange-50: #FFE2D6;
--podium-cds-color-orange-100: #FFC5AD;
--podium-cds-color-orange-200: #FFA584;
--podium-cds-color-orange-300: #FF8255;
--podium-cds-color-orange-400: #FF5000; /* Nike Orange — brand canonical */
--podium-cds-color-orange-500: #D33918; /* Badge text colour */
--podium-cds-color-orange-600: #9F290F;
--podium-cds-color-orange-700: #7E200D;
--podium-cds-color-orange-800: #5D180C;
--podium-cds-color-orange-900: #3E1009;
/* ── Red ── */
--podium-cds-color-red-50: #FFE5E5;
--podium-cds-color-red-400: #FF4E4A;
--podium-cds-color-red-500: #EE0005; /* SNKRS red */
--podium-cds-color-red-600: #D30005; /* Critical / error canonical */
--podium-cds-color-red-700: #A70E00;
/* ── Yellow ── */
--podium-cds-color-yellow-100: #FEEA55;
--podium-cds-color-yellow-200: #FEDF35; /* Warning bg canonical */
--podium-cds-color-yellow-300: #FFD11B;
--podium-cds-color-yellow-400: #FDC400; /* Brand accent warm */
/* ── Green ── */
--podium-cds-color-green-200: #83F13B; /* Brand accent vivid */
--podium-cds-color-green-500: #1EAA52;
--podium-cds-color-green-600: #007D48; /* Success canonical */
/* ── Blue ── */
--podium-cds-color-blue-400: #1190FF;
--podium-cds-color-blue-500: #1151FF; /* Focus ring / info canonical */
--podium-cds-color-blue-600: #0034E3;
/* ── Teal ── */
--podium-cds-color-teal-50: #D4FFFB; /* Brand accent cool */
/* ── Purple ── */
--podium-cds-color-purple-500: #6E0FF6; /* Brand accent vivid */
/* ── Pink ── */
--podium-cds-color-pink-500: #ED1AA0; /* Brand accent vivid */
/* ── Opacity / Scrim ── */
--podium-cds-color-scrim-primary: rgba(17,17,17,0.36);
--podium-cds-color-scrim-primary-inverse: rgba(17,17,17,0.80);
--podium-cds-color-focus-shadow: rgba(17, 17, 17, 0.12);
--podium-cds-color-box-focus-ring: rgba(39, 93, 197, 1);
--pds-color-opacity-white-1: #FFFFFF1F;
--pds-color-opacity-black-1: #1111111F;
--pds-color-opacity-black-2: #1111115C;
--pds-color-opacity-black-3: #111111CD;
```
### Tier 2: Semantic Aliases
```css
/* ── Backgrounds ── */
--podium-cds-color-bg-primary: var(--podium-cds-color-white); /* Default page background */
--podium-cds-color-bg-primary-inverse: var(--podium-cds-color-grey-900); /* Dark-mode page bg */
--podium-cds-color-bg-secondary: var(--podium-cds-color-grey-100); /* Subtle fill, card bg */
--podium-cds-color-bg-hover: var(--podium-cds-color-grey-200); /* Hover state bg */
--podium-cds-color-bg-hover-inverse: var(--podium-cds-color-grey-700);
--podium-cds-color-bg-active: var(--podium-cds-color-grey-100);
--podium-cds-color-bg-disabled: var(--podium-cds-color-grey-200);
--podium-cds-color-bg-disabled-inverse: var(--podium-cds-color-grey-600);
--podium-cds-color-bg-modal: var(--podium-cds-color-white);
--podium-cds-color-bg-image: var(--podium-cds-color-grey-100); /* Image placeholder */
--podium-cds-color-bg-loading: var(--podium-cds-color-grey-100); /* Skeleton loader */
--podium-cds-color-bg-always-dark: var(--podium-cds-color-black);
--podium-cds-color-bg-always-light: var(--podium-cds-color-white);
--podium-cds-color-bg-critical: var(--podium-cds-color-red-600);
--podium-cds-color-bg-success: var(--podium-cds-color-green-600);
--podium-cds-color-bg-warning: var(--podium-cds-color-yellow-200);
--podium-cds-color-bg-on-image-primary: var(--podium-cds-color-white);
--podium-cds-color-bg-on-image-secondary: var(--podium-cds-color-grey-200);
/* ── Text ── */
--podium-cds-color-text-primary: var(--podium-cds-color-black); /* Body text default */
--podium-cds-color-text-primary-inverse: var(--podium-cds-color-white);
--podium-cds-color-text-primary-on-light: var(--podium-cds-color-black);
--podium-cds-color-text-primary-on-dark: var(--podium-cds-color-white);
--podium-cds-color-text-secondary: var(--podium-cds-color-grey-500); /* Subheadings, captions */
--podium-cds-color-text-secondary-inverse: var(--podium-cds-color-grey-400);
--podium-cds-color-text-secondary-on-light: var(--podium-cds-color-grey-500);
--podium-cds-color-text-secondary-on-dark: var(--podium-cds-color-grey-400);
--podium-cds-color-text-disabled: var(--podium-cds-color-grey-400);
--podium-cds-color-text-disabled-inverse: var(--podium-cds-color-grey-600);
--podium-cds-color-text-disabled-on-light: var(--podium-cds-color-grey-400);
--podium-cds-color-text-disabled-on-dark: var(--podium-cds-color-grey-600);
--podium-cds-color-text-hover: var(--podium-cds-color-grey-500);
--podium-cds-color-text-hover-inverse: var(--podium-cds-color-grey-200);
--podium-cds-color-text-hover-on-light: var(--podium-cds-color-grey-500);
--podium-cds-color-text-hover-on-dark: var(--podium-cds-color-grey-200);
--podium-cds-color-text-link: var(--podium-cds-color-blue-500);
--podium-cds-color-text-critical: var(--podium-cds-color-red-600);
--podium-cds-color-text-success: var(--podium-cds-color-green-600);
--podium-cds-color-text-badge: var(--podium-cds-color-orange-500); /* Orange badge labels */
/* ── Borders ── */
--podium-cds-color-border-primary: var(--podium-cds-color-grey-500);
--podium-cds-color-border-primary-inverse: var(--podium-cds-color-grey-400);
--podium-cds-color-border-secondary: var(--podium-cds-color-grey-300);
--podium-cds-color-border-tertiary: var(--podium-cds-color-grey-200);
--podium-cds-color-border-active: var(--podium-cds-color-black);
--podium-cds-color-border-active-inverse: var(--podium-cds-color-white);
--podium-cds-color-border-disabled: var(--podium-cds-color-grey-300);
--podium-cds-color-border-disabled-on-dark: var(--podium-cds-color-grey-700);
--podium-cds-color-border-critical: var(--podium-cds-color-red-600);
--podium-cds-color-border-success: var(--podium-cds-color-green-600);
--podium-cds-color-focus-ring: var(--podium-cds-color-blue-500);
/* ── Status ── */
--podium-cds-color-critical: var(--podium-cds-color-red-600);
--podium-cds-color-critical-inverse: var(--podium-cds-color-red-400);
--podium-cds-color-success: var(--podium-cds-color-green-600);
--podium-cds-color-success-inverse: var(--podium-cds-color-green-500);
--podium-cds-color-info: var(--podium-cds-color-blue-500);
--podium-cds-color-info-inverse: var(--podium-cds-color-blue-400);
--podium-cds-color-warning: var(--podium-cds-color-yellow-200);
--podium-cds-color-warning-inverse: var(--podium-cds-color-yellow-100);
/* ── Brand Identity ── */
--podium-cds-color-brand-nike-orange: var(--podium-cds-color-orange-400); /* #FF5000 */
--podium-cds-color-brand-snkrs-red: var(--podium-cds-color-red-500); /* #EE0005 */
--podium-cds-color-gradient-brand-orange: linear-gradient(113.7deg, #FF0015 3.64%, #fe5000 50.92%, #FF6A00 97.26%);
```
### Tier 3: Component Tokens
```css
/* ── Button ── */
--podium-cds-button-color-bg-primary: var(--podium-cds-color-black);
--podium-cds-button-color-bg-primary-on-light: var(--podium-cds-color-black);
--podium-cds-button-color-bg-primary-on-dark: var(--podium-cds-color-white);
--podium-cds-button-color-bg-primary-hover: var(--podium-cds-color-grey-500);
--podium-cds-button-color-bg-primary-hover-on-light: var(--podium-cds-color-grey-500);
--podium-cds-button-color-bg-primary-hover-on-dark: var(--podium-cds-color-grey-300);
--podium-cds-button-color-bg-primary-disabled: var(--podium-cds-color-grey-200);
--podium-cds-button-color-bg-secondary: transparent; /* Secondary button bg */
--podium-cds-button-color-border-secondary: var(--podium-cds-color-grey-300);
--podium-cds-button-color-border-secondary-hover: var(--podium-cds-color-black);
--podium-cds-button-color-border-secondary-disabled: var(--podium-cds-color-grey-300);
--podium-cds-button-border-radius: 30px; /* PILL — applied to ALL buttons */
--podium-cds-button-border-width: var(--podium-cds-size-border-width-m); /* 1.5px */
--podium-cds-button-text-decoration-line: underline; /* CTA underline style */
/* ── Icon Button ── */
--podium-cds-icon-button-color-bg-primary: var(--podium-cds-color-black);
--podium-cds-icon-button-color-bg-secondary: var(--podium-cds-color-grey-100);
--podium-cds-icon-button-color-bg-secondary-hover: var(--podium-cds-color-grey-300);
--podium-cds-icon-button-color-bg-tertiary-hover: var(--podium-cds-color-grey-200);
--podium-cds-icon-button-color-bg-disabled: var(--podium-cds-color-grey-200);
```
### Accent / Brand Secondary Palette
These colours appear in editorial, product tiles, and illustration contexts. **NEVER use as UI chrome.**
| Token | Value | Usage |
|---|---|---|
| `--pds-color-yellow-400` | `#FDC400` | Seasonal / promo tile accent |
| `--pds-color-red-500` | `#EE0005` | SNKRS brand identity |
| `--pds-color-blue-400` | `#1190FF` | Illustrative accent, info inverse |
| `--pds-color-purple-500` | `#6E0FF6` | Category / editorial accent |
| `--pds-color-pink-500` | `#ED1AA0` | Category / editorial accent |
| `--pds-color-green-200` | `#83F13B` | Category / editorial accent vivid |
---
## 3. Typography System
Nike uses **three distinct typeface roles**. Never mix them outside their designated roles.
| Role | Typeface | When to use |
|---|---|---|
| **Display / Brand** | Nike Futura ND | Campaign headlines, hero statements, brand identity |
| **UI / Product** | Helvetica Now Text / Helvetica Now Display Medium | All UI, product names, nav, buttons, body copy |
| **Editorial / Conversation** | Palatino LT Pro Light | Long-form editorial, product story paragraphs |
### Composite Typography Tokens
```css
/* ── Body (all breakpoints) ── */
--podium-cds-typography-body1: 400 1rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
/* font: 400 16px/24px — primary body copy */
--podium-cds-typography-body1-strong: 500 1rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
/* font: 500 16px/24px — emphasis in body, button labels */
--podium-cds-typography-body2: 400 .875rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
/* font: 400 14px/21px — small body, captions */
--podium-cds-typography-body2-strong: 500 .875rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-body3: 400 .75rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
/* font: 400 12px/18px — legal, footnotes */
--podium-cds-typography-body3-strong: 500 .75rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-body4: 400 .625rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
/* font: 400 10px/15px — micro labels */
--podium-cds-typography-body4-strong: 500 .625rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
/* ── Titles (UI section headings, 320px–1919px) ── */
--podium-cds-typography-320-to-1919-title1: 500 2.5rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
/* 40px — primary section heading */
--podium-cds-typography-320-to-1919-title2: 500 2rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
/* 32px — secondary heading */
--podium-cds-typography-320-to-1919-title3: 500 1.5rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
/* 24px — tertiary heading / card title */
--podium-cds-typography-320-to-1919-title4: 500 1.25rem/1.5 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
/* 20px — overline-level heading */
--podium-cds-typography-1920-plus-title1: 500 3rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
/* 48px — 1920px+ title */
/* ── Oversize Display (Helvetica Now Display — scale) ── */
/* Mobile 320–959px */
--podium-cds-typography-320-to-959-oversize1: 500 6rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-320-to-959-oversize2: 500 4.75rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-320-to-959-oversize3: 500 3.75rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
/* Tablet 960–1439px */
--podium-cds-typography-960-to-1439-oversize1: 500 7.5rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-960-to-1439-oversize2: 500 6rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-960-to-1439-oversize3: 500 4.75rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
/* Desktop 1440–1919px */
--podium-cds-typography-1440-to-1919-oversize1: 500 9.375rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-1440-to-1919-oversize2: 500 7.5rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-1440-to-1919-oversize3: 500 6rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
/* Ultrawide 1920px+ */
--podium-cds-typography-1920-plus-oversize1: 500 11.625rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-1920-plus-oversize2: 500 9.375rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-1920-plus-oversize3: 500 7.5rem/1.2 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
/* PDS oversize variants (Helvetica Now Display Bold) */
--pds-typography-oversize-1: 500 11.625rem/1 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
--pds-typography-oversize-2: 500 9.375rem/1 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
--pds-typography-oversize-3: 500 7.5rem/1 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
/* ── Brand Display (Nike Futura ND) ── */
/* Mobile 320–959px */
--podium-cds-typography-320-to-959-display1: 3rem/1 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
/* 48px — hero headline mobile */
--podium-cds-typography-320-to-959-display2: 2.5rem/1.1 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-320-to-959-display3: 2rem/1.1 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-320-to-959-display4: 1.5rem/1.1 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
/* Tablet/Desktop 960–1919px */
--podium-cds-typography-960-to-1919-display1: 6rem/1 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-960-to-1919-display2: 4.75rem/1 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--podium-cds-typography-960-to-1919-display3: 3.75rem/1 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
/* Ultrawide 1920px+ */
--podium-cds-typography-1920-plus-display1: 7.5rem/1 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
/* PDS brand display tokens */
--pds-typography-brand-display-1: 7.5rem/.9 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-brand-display-2: 6rem/.9 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-brand-display-3: 4.75rem/.9 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-brand-display-4: 3.75rem/.9 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-brand-display-5: 3rem/.9 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
/* PDS display tokens (Helvetica Now Display XBold) */
--pds-typography-display-1: 7.5rem/1.1 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-display-2: 6rem/1.1 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-display-3: 4.75rem/1.1 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-display-4: 3.75rem/1.2 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-display-5: 3rem/1.2 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
/* ── Editorial / Conversation (Palatino LT Pro Light) ── */
--podium-cds-typography-320-to-959-conversation1: 300 2rem/1.35 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--podium-cds-typography-320-to-959-conversation2: 300 1.5rem/1.35 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--podium-cds-typography-320-to-959-conversation4: 300 1rem/1.5 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--podium-cds-typography-1920-plus-conversation1: 300 3.75rem/1.25 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--podium-cds-typography-1920-plus-conversation2: 300 3rem/1.25 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--podium-cds-typography-1920-plus-conversation3: 300 2.5rem/1.35 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--podium-cds-typography-1920-plus-conversation4: 300 1.25rem/1.35 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--pds-typography-conversation-1: 300 3.75rem/1.2 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--pds-typography-conversation-2: 300 3rem/1.2 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--pds-typography-conversation-3: 300 2.5rem/1.25 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--pds-typography-conversation-4: 300 1.25rem/1.35 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
/* ── Editorial Body (960px+) ── */
--podium-cds-typography-960-plus-editorial-body1: 400 1.25rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
--podium-cds-typography-960-plus-editorial-body1-strong: 500 1.25rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
```
### Font Weight Scale
```css
--podium-cds-font-weight-regular: 400; /* Body text, label */
--podium-cds-font-weight-medium: 500; /* UI emphasis, headings, buttons */
--podium-cds-font-weight-bold: 700; /* Strong emphasis */
/* Note: 300 weight used exclusively for Palatino LT Pro Light (conversation styles) */
```
### Font Size Raw Scale
```css
--podium-cds-font-size-xxs: 12px;
--podium-cds-font-size-xs: 14px;
--podium-cds-font-size-s: 16px; /* Base — body default */
--podium-cds-font-size-m: 20px;
--podium-cds-font-size-l: 24px;
--podium-cds-font-size-xl: 28px;
--podium-cds-font-size-xxl: 32px;
--podium-cds-font-size-xxxl: 40px;
--podium-cds-font-size-xxxxl: 48px;
--podium-cds-font-size-xxxxxl: 72px;
```
**Typography pairing rules:**
- Hero/campaign headline → Nike Futura ND (`--pds-typography-brand-display-*`)
- Section titles → Helvetica Now Display Medium (`--podium-cds-typography-*-title*`)
- Oversize numbers/stats → Helvetica Now Display Bold (`--pds-typography-oversize-*`)
- Body/UI → Helvetica Now Text (`--podium-cds-typography-body1`)
- Long editorial paragraphs → Palatino LT Pro Light (`--podium-cds-typography-*-conversation*`)
- **NEVER** mix Nike Futura ND and Palatino on the same text block
---
## 4. Spacing & Layout
```css
/* ── Podium Spacing Scale (primary system) ── */
--podium-cds-size-spacing-xs: 4px; /* Tight internal padding, icon gap */
--podium-cds-size-spacing-s: 8px; /* Small gap, inline spacing */
--podium-cds-size-spacing-m: 12px; /* Default form item gap */
--podium-cds-size-spacing-l: 24px; /* Card padding, section sub-spacing */
--podium-cds-size-spacing-xl: 36px; /* Between card groups */
--podium-cds-size-spacing-xxl: 60px; /* Section-to-section gap */
--podium-cds-size-spacing-xxxl: 84px; /* Major section separation */
--podium-cds-size-spacing-xxxxl: 120px; /* Page-level top/bottom padding */
/* ── Grid System ── */
--podium-cds-size-spacing-grid-gutter: 16px; /* Interior column gutter */
--podium-cds-size-spacing-grid-gutter-l: 12px; /* Large layout gutter */
--podium-cds-size-spacing-grid-exterior-gutter-s: 24px; /* Page edge margin — mobile */
--podium-cds-size-spacing-grid-exterior-gutter-l: 48px; /* Page edge margin — desktop */
/* ── PDS Space Scale (fine-grained, maps to podium scale) ── */
--pds-space-2: 2px;
--pds-space-4: 4px; /* = podium xs */
--pds-space-6: 6px; /* button padding-top-s */
--pds-space-8: 8px; /* = podium s */
--pds-space-10: 10px;
--pds-space-12: 12px; /* = podium m */
--pds-space-16: 16px; /* = grid gutter */
--pds-space-20: 20px;
--pds-space-24: 24px; /* = podium l */
--pds-space-32: 32px;
--pds-space-40: 40px;
--pds-space-48: 48px; /* = exterior gutter l */
--pds-space-60: 60px; /* = podium xxl */
--pds-space-72: 72px;
--pds-space-90: 90px;
/* Note: --pds-space-* values are not always 4px-grid-aligned. Use --podium-cds-size-spacing-* for new work. */
/* ── Border Radius ── */
--pds-radius-0: 0px; /* Sharp — no rounding */
--podium-cds-size-border-radius-s: 4px; /* Small chip, tag */
--podium-cds-size-border-radius-m: 8px; /* Card, input field */
--podium-cds-size-border-radius-l: 12px; /* Panel, modal corner */
--podium-cds-size-border-radius-xl: 24px; /* Large card / sheet */
--podium-cds-button-border-radius: 30px; /* ALL buttons — canonical pill */
--pds-radius-rounded: 9999px; /* Perfect pill / circular badge */
/* ── Border Width ── */
--podium-cds-size-border-width-s: 1px;
--podium-cds-size-border-width-m: 1.5px; /* Default button border */
--podium-cds-size-border-width-l: 2px;
/* ── Icon Sizes ── */
--podium-cds-size-icon-s: 16px; /* Small inline icon */
--podium-cds-size-icon-m: 24px; /* Default UI icon */
--podium-cds-size-icon-l: 48px; /* Large decorative icon */
/* ── Form Sizes ── */
--podium-cds-size-form-input-container-height: 86px; /* Full label+field container */
--podium-cds-size-form-input-field-height: 56px; /* Input field only */
/* ── Button Sizes ── */
/* Small */
--podium-cds-button-height-s: 34px;
--podium-cds-button-padding-top-s: 6px;
--podium-cds-button-padding-bottom-s: 6px;
--podium-cds-button-padding-sides-s: 16px;
/* Medium */
--podium-cds-button-height-m: 46px;
--podium-cds-button-padding-top-m: 12px;
--podium-cds-button-padding-bottom-m: 12px;
--podium-cds-button-padding-sides-m: 24px;
/* Large */
--podium-cds-button-height-l: 58px;
--podium-cds-button-padding-top-l: 18px;
--podium-cds-button-padding-bottom-l: 18px;
--podium-cds-button-padding-sides-l: 24px;
```
### Breakpoints
| Name | Min-width | Max-width | Notes |
|---|---|---|---|
| xs | 0px | 319px | — |
| sm | 320px | 599px | Mobile baseline |
| sm-md | 600px | 639px | — |
| md | 640px | 767px | — |
| md-lg | 768px | 889px | Tablet portrait |
| lg | 890px | 959px | — |
| xl | 960px | 1023px | Tablet landscape / typography tier change |
| xl-2xl | 1024px | 1199px | — |
| 2xl | 1200px | 1439px | — |
| 3xl | 1440px | 1599px | Desktop / typography tier change |
| 4xl | 1600px | 1879px | Wide desktop |
| 5xl | 1880px | 1919px | — |
| 6xl | 1920px+ | — | Ultrawide / typography tier change |
**Key layout breakpoints for typography:** `320px`, `960px`, `1440px`, `1920px`
---
## 5. Page Structure & Layout Patterns
> **Note:** No screenshots were provided. All section rows are inferred from the component inventory, computed styles, and layout digest. Rows marked **(inferred)** are structural inferences.
### 5.1 Section Map
| # | Section | Layout type | Key elements | Status |
|---|---|---|---|---|
| 1 | Global Navigation | `display:block` sticky header | Logo, category links, search, cart, member icon | (inferred) |
| 2 | Hero / Campaign Banner | Full-bleed with overlay | Oversize display type, product image, 1–2 pill CTAs | (inferred) |
| 3 | Featured Category Grid | CSS Grid / card grid | Product cards (12 instances), section heading h2 | from digest |
| 4 | Product Tile Carousel | Horizontal scroll flex | Card tiles with image, name, price, colour count | (inferred) |
| 5 | Brand / Editorial Story | Full-bleed image + text overlay | Conversation typography, gradient scrim, CTA button | (inferred) |
| 6 | Secondary Feature Grid | 2–3 col grid | Tile pair/trio, each full-bleed image with caption + CTA | (inferred) |
| 7 | Member / Join Banner | Contained, centred | Short headline, supporting copy, join CTA | (inferred) |
| 8 | Footer | Multi-column grid | Nav links, social icons, legal text, country selector | (inferred) |
### 5.2 Layout Patterns
**Navigation (`role_navigation`):**
- `display: block` at root; inner elements use flex row
- Background: `var(--podium-cds-color-bg-primary)` (#FFFFFF)
- Transition: `transform 0.15s` — slides in/out on mobile
- Exterior padding: `var(--podium-cds-size-spacing-grid-exterior-gutter-s)` (24px mobile), `var(--podium-cds-size-spacing-grid-exterior-gutter-l)` (48px desktop)
- No box shadow — border-bottom `1px var(--podium-cds-color-border-tertiary)` separates from content (inferred)
**Hero Section:**
- Full viewport width, variable height
- Text overlay uses `--podium-cds-color-scrim-primary` (rgba(17,17,17,0.36)) or `--podium-cds-color-gradient-brand-orange` depending on context
- CTAs: `display: inline-flex`, `border-radius: 30px`, `padding: 12px 24px` (medium size)
- Primary CTA: black bg on light images (`--podium-cds-button-color-bg-primary`); white bg on dark images (`--podium-cds-button-color-bg-primary-on-dark`)
**Product Card Grid:**
- Card: `display: block`, `border-radius: 0px` (cards are sharp-cornered), `background: transparent`
- Grid gap: `var(--podium-cds-size-spacing-grid-gutter)` (16px)
- Exterior gutters: 24px (mobile), 48px (desktop)
- Typical grid: 2 columns mobile → 3 columns tablet → 4 columns desktop (inferred)
**Filter/Sort Bar (`.cls_btn`):**
- `display: flex`, `flex-direction: row`, `align-items: center`, `gap: 4px`
- Background: `var(--podium-cds-color-grey-100)` (#F5F5F5)
- Border-radius: `30px` (pill-shaped filter chips)
- Padding: `6px 16px`
- Margin between chips: `8px 16px 8px 0`
### 5.3 Visual Hierarchy
- **Dominant:** Full-bleed campaign imagery, oversize Nike Futura ND display type
- **Primary CTAs:** Black pill buttons (`border-radius: 30px`, bg `#111111`) on light sections; white pill buttons on dark/image sections
- **Secondary CTAs:** Underlined text links (`--podium-cds-button-text-decoration-line: underline`) — no border, no bg
- **Whitespace rhythm:** Section separation uses `--podium-cds-size-spacing-xxl` (60px) minimum; hero sections are flush edge-to-edge
- **Image positions:** Product images are the primary visual weight; text is overlaid or follows below with minimal padding
- **Badge placement:** Orange badge labels (`--podium-cds-color-text-badge`) float above product card images in top-left position (inferred)
### 5.4 Content Patterns
**Repeating product card pattern:**
1. Full-width image (aspect ratio ~1:1.2, background `--podium-cds-color-bg-image`)
2. Product name (`--podium-cds-typography-body1-strong`, `--podium-cds-color-text-primary`)
3. Category/subtitle (`--podium-cds-typography-body1`, `--podium-cds-color-text-secondary`)
4. Price (`--podium-cds-typography-body1-strong`, `--podium-cds-color-text-primary`)
5. Colour swatches (optional)
**Repeating hero/feature tile pattern:**
1. Full-bleed background image
2. Scrim overlay (`--podium-cds-color-scrim-primary` or gradient)
3. Headline (`--podium-cds-typography-*-display*`, white)
4. Sub-headline or supporting copy (optional)
5. 1–2 pill CTA buttons (`inline-flex`, centred or left-aligned)
---
## 6. Component Patterns
### 6.1 Button (Primary)
**Anatomy:** Container (pill) → [optional leading icon] → Label text → [optional trailing icon]
**Token-to-property mappings:**
| State | Background | Text | Border | Box-shadow |
|---|---|---|---|---|
| Default | `--podium-cds-button-color-bg-primary` (#111111) | `--podium-cds-color-white` | none | none |
| Hover | `--podium-cds-button-color-bg-primary-hover` (#707072) | `--podium-cds-color-white` | none | none |
| Focus-visible | `--podium-cds-button-color-bg-primary` | `--podium-cds-color-white` | none | `0 0 0 2px var(--podium-cds-color-box-focus-ring)` |
| Active | `--podium-cds-color-bg-active` (#F5F5F5) | `--podium-cds-color-black` | none | none |
| Disabled | `--podium-cds-button-color-bg-primary-disabled` (#E5E5E5) | `--podium-cds-color-text-disabled` (#9E9EA0) | none | none |
| Loading | `--podium-cds-button-color-bg-primary` | hidden | none | none |
```tsx
// production-ready Primary Button with all states
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
size?: 's' | 'm' | 'l';
loading?: boolean;
children: React.ReactNode;
}
const Button: React.FC<ButtonProps> = ({
size = 'm',
loading = false,
disabled,
children,
...props
}) => {
const paddingMap = {
s: 'var(--podium-cds-button-padding-top-s) var(--podium-cds-button-padding-sides-s)',
m: 'var(--podium-cds-button-padding-top-m) var(--podium-cds-button-padding-sides-m)',
l: 'var(--podium-cds-button-padding-top-l) var(--podium-cds-button-padding-sides-l)',
};
return (
<button
className="ncss-btn-primary-dark"
disabled={disabled || loading}
style={{
display: 'inline-flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
gap: 'var(--podium-cds-size-spacing-xs)',
font: 'var(--podium-cds-typography-body1-strong)',
backgroundColor: 'var(--podium-cds-button-color-bg-primary)',
color: 'var(--podium-cds-color-white)',
borderRadius: 'var(--podium-cds-button-border-radius)',
padding: paddingMap[size],
border: 'none',
cursor: disabled || loading ? 'default' : 'pointer',
transition: `background-color var(--duration-base) var(--ease-default)`,
// Disabled state applied via CSS: --podium-cds-button-color-bg-primary-disabled
}}
{...props}
>
{loading ? (
<span
aria-label="Loading"
style={{
display: 'inline-block',
width: 'var(--podium-cds-size-icon-s)',
height: 'var(--podium-cds-size-icon-s)',
borderRadius: 'var(--pds-radius-rounded)',
border: `2px solid var(--podium-cds-color-white)`,
borderTopColor: 'transparent',
animation: 'pds-spin 0.8s linear infinite',
}}
/>
) : children}
</button>
);
};
```
```css
/* Companion CSS — state overrides */
.ncss-btn-primary-dark:hover:not(:disabled) {
background-color: var(--podium-cds-button-color-bg-primary-hover);
}
.ncss-btn-primary-dark:focus-visible,
.ncss-btn-primary-dark.focus-visible {
box-shadow: 0 0 0 2px var(--podium-cds-color-box-focus-ring);
outline: 0;
}
.ncss-btn-primary-dark:active:not(:disabled) {
background-color: var(--podium-cds-color-bg-active);
color: var(--podium-cds-color-black);
}
.ncss-btn-primary-dark:disabled,
.ncss-btn-primary-dark.disabled {
background-color: var(--podium-cds-button-color-bg-primary-disabled);
color: var(--podium-cds-color-text-disabled);
cursor: default;
}
```
---
### 6.2 Button (Secondary)
**Anatomy:** Container (pill, outlined) → Label text
| State | Background | Border | Text |
|---|---|---|---|
| Default | transparent | `--podium-cds-button-color-border-secondary` (#CACACB), `1.5px` | `--podium-cds-color-text-primary` |
| Hover | transparent | `--podium-cds-button-color-border-secondary-hover` (#111111), `1.5px` | `--podium-cds-color-text-primary` |
| Focus-visible | transparent | `--podium-cds-button-color-border-secondary-hover` | `--podium-cds-color-text-primary` + `box-shadow: 0 0 0 2px var(--podium-cds-color-box-focus-ring)` |
| Disabled | transparent | `--podium
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (226) */
--pds-color-black: #111111;
--pds-color-white: #FFFFFF;
--pds-color-red-50: #FFE5E5;
--pds-color-red-100: #FFC3C4;
--pds-color-red-200: #FFABAD;
--pds-color-red-300: #FF7975;
--pds-color-red-400: #FF4E4A;
--pds-color-red-500: #EE0005;
--pds-color-red-600: #D30005;
--pds-color-red-700: #A70E00;
--pds-color-red-800: #780700;
--pds-color-red-900: #530300;
--pds-color-orange-50: #FFE2D6;
--pds-color-orange-100: #FFC5AD;
--pds-color-orange-200: #FFA584;
--pds-color-orange-300: #FF8255;
--pds-color-orange-400: #FF5000;
--pds-color-orange-500: #D33918;
--pds-color-orange-600: #9F290F;
--pds-color-orange-700: #7E200D;
--pds-color-orange-800: #5D180C;
--pds-color-orange-900: #3E1009;
--pds-color-yellow-50: #FEF087;
--pds-color-yellow-100: #FEEA55;
--pds-color-yellow-200: #FEDF35;
--pds-color-yellow-300: #FFD11B;
--pds-color-yellow-400: #FDC400;
--pds-color-yellow-500: #FCA600;
--pds-color-yellow-600: #F08E0A;
--pds-color-yellow-700: #E57A09;
--pds-color-yellow-800: #CD6006;
--pds-color-yellow-900: #99470A;
--pds-color-green-50: #DFFFB9;
--pds-color-green-100: #BDFB72;
--pds-color-green-200: #83F13B;
--pds-color-green-300: #5FE63F;
--pds-color-green-400: #3CCD49;
--pds-color-green-500: #1EAA52;
--pds-color-green-600: #007D48;
--pds-color-green-700: #00643E;
--pds-color-green-800: #005034;
--pds-color-green-900: #003C2A;
--pds-color-blue-50: #D6EEFF;
--pds-color-blue-100: #B9E2FF;
--pds-color-blue-200: #87CEFF;
--pds-color-blue-300: #4CABFF;
--pds-color-blue-400: #1190FF;
--pds-color-blue-500: #1151FF;
--pds-color-blue-600: #0034E3;
--pds-color-blue-700: #061DBB;
--pds-color-blue-800: #02068E;
--pds-color-blue-900: #020664;
--pds-color-teal-50: #D4FFFB;
--pds-color-teal-100: #9CFFF7;
--pds-color-teal-200: #69EEE7;
--pds-color-teal-300: #31CBCB;
--pds-color-teal-400: #1CB2B6;
--pds-color-teal-500: #008E98;
--pds-color-teal-600: #0A7281;
--pds-color-teal-700: #005C68;
--pds-color-teal-800: #004856;
--pds-color-teal-900: #043441;
--pds-color-purple-50: #E4E1FC;
--pds-color-purple-100: #D6D1FF;
--pds-color-purple-200: #BEAFFD;
--pds-color-purple-300: #A082FF;
--pds-color-purple-400: #8755FF;
--pds-color-purple-500: #6E0FF6;
--pds-color-purple-600: #5400CC;
--pds-color-purple-700: #4400A9;
--pds-color-purple-800: #300080;
--pds-color-purple-900: #1C0060;
--pds-color-pink-50: #FFE1F3;
--pds-color-pink-100: #FFCDEA;
--pds-color-pink-200: #FFB0DD;
--pds-color-pink-300: #FE90CC;
--pds-color-pink-400: #FC5DBB;
--pds-color-pink-500: #ED1AA0;
--pds-color-pink-600: #D00B84;
--pds-color-pink-700: #A50767;
--pds-color-pink-800: #770349;
--pds-color-pink-900: #4C012D;
--pds-color-gray-50: #FAFAFA;
--pds-color-gray-100: #F5F5F5;
--pds-color-gray-200: #E5E5E5;
--pds-color-gray-300: #CACACB;
--pds-color-gray-400: #9E9EA0;
--pds-color-gray-500: #707072;
--pds-color-gray-600: #4B4B4D;
--pds-color-gray-700: #39393B;
--pds-color-gray-800: #28282A;
--pds-color-gray-900: #1F1F21;
--podium-cds-color-scrim-primary: rgba(17,17,17,0.36);
--podium-cds-color-scrim-primary-inverse: rgba(17,17,17,0.80);
--podium-cds-color-gradient-brand-orange: linear-gradient(113.7deg, #FF0015 3.64%, #fe5000 50.92%, #FF6A00 97.26%);
--podium-cds-color-focus-shadow: rgba(17, 17, 17, 0.12);
--podium-cds-color-box-focus-ring: rgba(39, 93, 197, 1);
--podium-cds-button-color-bg-secondary: transparent;
--podium-cds-dialog-bg-blur: 4px;
--podium-cds-color-brand-nike-orange: var(--podium-cds-color-orange-400);
--podium-cds-color-brand-snkrs-red: var(--podium-cds-color-red-500);
--podium-cds-icon-button-color-bg-secondary: var(--podium-cds-color-grey-100);
--podium-cds-button-color-border-secondary-hover: var(--podium-cds-color-black);
--podium-cds-button-color-border-secondary-hover-on-dark: var(--podium-cds-color-white);
--podium-cds-color-text-critical: var(--podium-cds-color-red-600);
--podium-cds-color-text-hover-on-dark: var(--podium-cds-color-grey-200);
--podium-cds-button-color-border-secondary-disabled-on-dark: var(--podium-cds-color-grey-600);
--podium-cds-color-border-disabled-on-dark: var(--podium-cds-color-grey-700);
--podium-cds-color-bg-primary-inverse: var(--podium-cds-color-grey-900);
--podium-cds-color-bg-primary-on-light: var(--podium-cds-color-grey-800);
--podium-cds-color-text-success: var(--podium-cds-color-green-600);
--podium-cds-color-bg-warning: var(--podium-cds-color-yellow-200);
--podium-cds-color-text-disabled-on-light: var(--podium-cds-color-grey-400);
--podium-cds-color-text-hover-on-light: var(--podium-cds-color-grey-500);
--podium-cds-color-info: var(--podium-cds-color-blue-500);
--podium-cds-button-color-border-secondary-disabled: var(--podium-cds-color-grey-300);
--podium-cds-color-critical-inverse: var(--podium-cds-color-red-400);
--podium-cds-color-success-inverse: var(--podium-cds-color-green-500);
--podium-cds-color-info-inverse: var(--podium-cds-color-blue-400);
--podium-cds-color-warning-inverse: var(--podium-cds-color-yellow-100);
--podium-cds-color-text-badge: var(--podium-cds-color-orange-500);
--pds-color-scheme: light;
--pds-color-opacity-white-1: #FFFFFF1F;
--pds-color-opacity-black-1: #1111111F;
--pds-color-opacity-black-2: #1111115C;
--pds-color-opacity-black-3: #111111CD;
----gradient-role_dialog-bg: linear-gradient(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0)); /* Gradient from role_dialog background /* reconstructed */ */
--podium-cds-color-black: #111111;
--podium-cds-color-white: #FFFFFF;
--podium-cds-color-grey-100: #F5F5F5;
--podium-cds-color-grey-500: #707072;
--podium-cds-color-orange-400: #FF5000;
--podium-cds-color-red-600: #D30005;
--podium-cds-color-green-600: #007D48;
--podium-cds-color-blue-500: #1151FF;
--podium-cds-color-grey-50: #FAFAFA;
--podium-cds-color-grey-200: #E5E5E5;
--podium-cds-color-grey-300: #CACACB;
--podium-cds-color-grey-400: #9E9EA0;
--podium-cds-color-grey-600: #4B4B4D;
--podium-cds-color-grey-700: #39393B;
--podium-cds-color-grey-800: #28282A;
--podium-cds-color-grey-900: #1F1F21;
--podium-cds-color-orange-50: #FFE2D6;
--podium-cds-color-orange-100: #FFC5AD;
--podium-cds-color-orange-200: #FFA584;
--podium-cds-color-orange-300: #FF8255;
--podium-cds-color-orange-500: #D33918;
--podium-cds-color-orange-600: #9F290F;
--podium-cds-color-orange-700: #7E200D;
--podium-cds-color-orange-800: #5D180C;
--podium-cds-color-orange-900: #3E1009;
--podium-cds-color-red-50: #FFE5E5;
--podium-cds-color-red-400: #FF4E4A;
--podium-cds-color-red-500: #EE0005;
--podium-cds-color-red-700: #A70E00;
--podium-cds-color-yellow-100: #FEEA55;
--podium-cds-color-yellow-200: #FEDF35;
--podium-cds-color-yellow-300: #FFD11B;
--podium-cds-color-yellow-400: #FDC400;
--podium-cds-color-green-200: #83F13B;
--podium-cds-color-green-500: #1EAA52;
--podium-cds-color-blue-400: #1190FF;
--podium-cds-color-blue-600: #0034E3;
--podium-cds-color-teal-50: #D4FFFB;
--podium-cds-color-purple-500: #6E0FF6;
--podium-cds-color-pink-500: #ED1AA0;
--podium-cds-color-bg-primary: var(--podium-cds-color-white);
--podium-cds-color-bg-secondary: var(--podium-cds-color-grey-100);
--podium-cds-color-bg-hover: var(--podium-cds-color-grey-200);
--podium-cds-color-bg-hover-inverse: var(--podium-cds-color-grey-700);
--podium-cds-color-bg-active: var(--podium-cds-color-grey-100);
--podium-cds-color-bg-disabled: var(--podium-cds-color-grey-200);
--podium-cds-color-bg-disabled-inverse: var(--podium-cds-color-grey-600);
--podium-cds-color-bg-modal: var(--podium-cds-color-white);
--podium-cds-color-bg-image: var(--podium-cds-color-grey-100);
--podium-cds-color-bg-loading: var(--podium-cds-color-grey-100);
--podium-cds-color-bg-always-dark: var(--podium-cds-color-black);
--podium-cds-color-bg-always-light: var(--podium-cds-color-white);
--podium-cds-color-bg-critical: var(--podium-cds-color-red-600);
--podium-cds-color-bg-success: var(--podium-cds-color-green-600);
--podium-cds-color-bg-on-image-primary: var(--podium-cds-color-white);
--podium-cds-color-bg-on-image-secondary: var(--podium-cds-color-grey-200);
--podium-cds-color-text-primary: var(--podium-cds-color-black);
--podium-cds-color-text-primary-inverse: var(--podium-cds-color-white);
--podium-cds-color-text-primary-on-light: var(--podium-cds-color-black);
--podium-cds-color-text-primary-on-dark: var(--podium-cds-color-white);
--podium-cds-color-text-secondary: var(--podium-cds-color-grey-500);
--podium-cds-color-text-secondary-inverse: var(--podium-cds-color-grey-400);
--podium-cds-color-text-secondary-on-light: var(--podium-cds-color-grey-500);
--podium-cds-color-text-secondary-on-dark: var(--podium-cds-color-grey-400);
--podium-cds-color-text-disabled: var(--podium-cds-color-grey-400);
--podium-cds-color-text-disabled-inverse: var(--podium-cds-color-grey-600);
--podium-cds-color-text-disabled-on-dark: var(--podium-cds-color-grey-600);
--podium-cds-color-text-hover: var(--podium-cds-color-grey-500);
--podium-cds-color-text-hover-inverse: var(--podium-cds-color-grey-200);
--podium-cds-color-text-link: var(--podium-cds-color-blue-500);
--podium-cds-color-border-primary: var(--podium-cds-color-grey-500);
--podium-cds-color-border-primary-inverse: var(--podium-cds-color-grey-400);
--podium-cds-color-border-secondary: var(--podium-cds-color-grey-300);
--podium-cds-color-border-tertiary: var(--podium-cds-color-grey-200);
--podium-cds-color-border-active: var(--podium-cds-color-black);
--podium-cds-color-border-active-inverse: var(--podium-cds-color-white);
--podium-cds-color-border-disabled: var(--podium-cds-color-grey-300);
--podium-cds-color-border-critical: var(--podium-cds-color-red-600);
--podium-cds-color-border-success: var(--podium-cds-color-green-600);
--podium-cds-color-focus-ring: var(--podium-cds-color-blue-500);
--podium-cds-color-critical: var(--podium-cds-color-red-600);
--podium-cds-color-success: var(--podium-cds-color-green-600);
--podium-cds-color-warning: var(--podium-cds-color-yellow-200);
--podium-cds-button-color-bg-primary: var(--podium-cds-color-black);
--podium-cds-button-color-bg-primary-on-light: var(--podium-cds-color-black);
--podium-cds-button-color-bg-primary-on-dark: var(--podium-cds-color-white);
--podium-cds-button-color-bg-primary-hover: var(--podium-cds-color-grey-500);
--podium-cds-button-color-bg-primary-hover-on-light: var(--podium-cds-color-grey-500);
--podium-cds-button-color-bg-primary-hover-on-dark: var(--podium-cds-color-grey-300);
--podium-cds-button-color-bg-primary-disabled: var(--podium-cds-color-grey-200);
--podium-cds-button-color-border-secondary: var(--podium-cds-color-grey-300);
--podium-cds-button-border-width: var(--podium-cds-size-border-width-m);
--podium-cds-icon-button-color-bg-primary: var(--podium-cds-color-black);
--podium-cds-icon-button-color-bg-secondary-hover: var(--podium-cds-color-grey-300);
--podium-cds-icon-button-color-bg-tertiary-hover: var(--podium-cds-color-grey-200);
--podium-cds-icon-button-color-bg-disabled: var(--podium-cds-color-grey-200);
--podium-cds-size-border-width-s: 1px;
--podium-cds-size-border-width-m: 1.5px;
--podium-cds-size-border-width-l: 2px;
/* Typography (95) */
--podium-cds-typography-320-to-959-oversize1: 500 6rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-959-oversize2: 500 4.75rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-959-oversize3: 500 3.75rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-959-display1: 3rem/1 'Nike Futura ND','Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-959-display2: 2.5rem/1.1 'Nike Futura ND','Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-959-display3: 2rem/1.1 'Nike Futura ND','Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-959-display4: 1.5rem/1.1 'Nike Futura ND','Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-959-conversation1: 300 2rem/1.35 'Palatino LT Pro Light',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-959-conversation2: 300 1.5rem/1.35 'Palatino LT Pro Light',Helvetica,Arial,sans-serif;
--podium-cds-typography-1920-plus-conversation4: 300 1.25rem/1.35 'Palatino LT Pro Light',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-959-conversation4: 300 1rem/1.5 'Palatino LT Pro Light',Helvetica,Arial,sans-serif;
--podium-cds-typography-body1: 400 1rem/1.5 'Helvetica Now Text',Helvetica,Arial,sans-serif;
--podium-cds-typography-body1-strong: 500 1rem/1.5 'Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-1919-title1: 500 2.5rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-1919-title2: 500 2rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-1919-title3: 500 1.5rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-320-to-1919-title4: 500 1.25rem/1.5 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-960-to-1439-oversize1: 500 7.5rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-960-to-1919-display1: 6rem/1 'Nike Futura ND','Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-960-to-1919-display2: 4.75rem/1 'Nike Futura ND','Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-960-to-1919-display3: 3.75rem/1 'Nike Futura ND','Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-1920-plus-conversation2: 300 3rem/1.25 'Palatino LT Pro Light',Helvetica,Arial,sans-serif;
--podium-cds-typography-1920-plus-conversation3: 300 2.5rem/1.35 'Palatino LT Pro Light',Helvetica,Arial,sans-serif;
--podium-cds-typography-960-plus-editorial-body1: 400 1.25rem/1.5 'Helvetica Now Text',Helvetica,Arial,sans-serif;
--podium-cds-typography-960-plus-editorial-body1-strong: 500 1.25rem/1.5 'Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-1440-to-1919-oversize1: 500 9.375rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-1920-plus-oversize1: 500 11.625rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-1920-plus-display1: 7.5rem/1 'Nike Futura ND','Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-1920-plus-title1: 500 3rem/1.2 'Helvetica Now Display Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-1920-plus-conversation1: 300 3.75rem/1.25 'Palatino LT Pro Light',Helvetica,Arial,sans-serif;
--podium-cds-typography-body2: 400 .875rem/1.5 'Helvetica Now Text',Helvetica,Arial,sans-serif;
--podium-cds-typography-body2-strong: 500 .875rem/1.5 'Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-body3: 400 .75rem/1.5 'Helvetica Now Text',Helvetica,Arial,sans-serif;
--podium-cds-typography-body3-strong: 500 .75rem/1.5 'Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-typography-body4: 400 .625rem/1.5 'Helvetica Now Text',Helvetica,Arial,sans-serif;
--podium-cds-typography-body4-strong: 500 .625rem/1.5 'Helvetica Now Text Medium',Helvetica,Arial,sans-serif;
--podium-cds-button-text-decoration-line: underline;
--podium-cds-font-weight-regular: 400;
--podium-cds-font-weight-medium: 500;
--podium-cds-font-weight-bold: 700;
--podium-cds-font-size-xxs: 12px;
--podium-cds-font-size-xs: 14px;
--podium-cds-size-icon-s: 16px;
--podium-cds-font-size-m: 20px;
--podium-cds-size-icon-m: 24px;
--podium-cds-font-size-xl: 28px;
--podium-cds-font-size-xxl: 32px;
--podium-cds-font-size-xxxl: 40px;
--podium-cds-size-icon-l: 48px;
--podium-cds-font-size-xxxxxl: 72px;
--podium-cds-font-style-normal: normal;
--pds-motion-easing-functional: cubic-bezier(0.4, 0, 0.2, 1);
--pds-motion-easing-expressive: cubic-bezier(0.6, 0, 0.1, 1);
--podium-cds-shadow-100: 0px 4px 8px 0px rgba(17, 17, 17, 0.06),0px 0px 24px 4px rgba(17, 17, 17, 0.03);
--podium-cds-shadow-100-inverse: 0px 4px 8px 0px rgba(17, 17, 17, 0.18),0px 0px 24px 4px rgba(17, 17, 17, 0.09);
--podium-cds-size-form-input-container-height: 86px;
--podium-cds-size-form-input-field-height: 56px;
--podium-cds-transition-timing-function-ease: cubic-bezier(.25, .1, .25, 1);
--pds-typography-oversize-1: 500 11.625rem/1 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
--pds-typography-oversize-2: 500 9.375rem/1 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
--pds-typography-oversize-3: 500 7.5rem/1 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
--pds-typography-brand-display-1: 7.5rem/.9 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-brand-display-2: 6rem/.9 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-brand-display-3: 4.75rem/.9 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-brand-display-4: 3.75rem/.9 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-brand-display-5: 3rem/.9 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-display-1: 7.5rem/1.1 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-display-2: 6rem/1.1 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-display-3: 4.75rem/1.1 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-display-4: 3.75rem/1.2 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-display-5: 3rem/1.2 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-conversation-1: 300 3.75rem/1.2 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--pds-typography-conversation-2: 300 3rem/1.2 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--pds-typography-conversation-3: 300 2.5rem/1.25 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--pds-typography-conversation-4: 300 1.25rem/1.35 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;
--pds-typography-editorial-body-1: 400 1.25rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
--pds-typography-editorial-body-1-strong: 500 1.25rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-title-1: 500 3rem/1.2 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
--pds-typography-title-2: 500 2.5rem/1.2 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
--pds-typography-title-3: 500 2rem/1.2 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
--pds-typography-title-4: 500 1.5rem/1.2 'Helvetica Now Display Bold', Helvetica, Arial, sans-serif;
--pds-typography-body-1: 400 1rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
--pds-typography-body-1-strong: 500 1rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-legal: 400 .875rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
--pds-typography-body-2-strong: 500 .875rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-body-3: 400 .75rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
--pds-typography-body-3-strong: 500 .75rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--pds-typography-body-4: 400 .625rem/1.5 'Helvetica Now Text', Helvetica, Arial, sans-serif;
--pds-typography-body-4-strong: 500 .625rem/1.5 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
--font-size-2xl: 76px; /* 2 elements — e.g. h3 "BREAK 'EM", h3 "NIKE FOOTBALL X LEGO" /* mined from computed styles */ */
--line-height-tight: 18px; /* 46 elements — e.g. p "Store suchen", p "Hilfe", p "Bestellstatus" /* mined from computed styles */ */
--line-height-normal: 21px; /* 20 elements — e.g. h2 "Community Discounts", p "Highlights", p "Trends" /* mined from computed styles */ */
--podium-cds-font-size-s: 16px;
--podium-cds-font-size-l: 24px;
--podium-cds-font-size-xxxxl: 48px;
/* Spacing (55) */
--podium-cds-breakpoint-xs: 320px;
--pds-breakpoint-s: 600px;
--pds-breakpoint-m: 960px;
--pds-breakpoint-l: 1440px;
--pds-breakpoint-xl: 1920px;
--podium-cds-button-padding-top-s: 6px;
--podium-cds-button-padding-top-m: 12px;
--podium-cds-button-padding-top-l: 18px;
--podium-cds-button-padding-sides-s: 16px;
--podium-cds-button-padding-sides-m: 24px;
--podium-cds-button-padding-underline: 0;
--podium-cds-button-height-s: 34px;
--podium-cds-button-height-m: 46px;
--podium-cds-button-height-l: 58px;
--podium-cds-size-spacing-xs: 4px;
--podium-cds-size-spacing-s: 8px;
--podium-cds-size-spacing-xl: 36px;
--podium-cds-size-spacing-xxl: 60px;
--podium-cds-size-spacing-xxxl: 84px;
--podium-cds-size-spacing-xxxxl: 120px;
--podium-cds-size-spacing-grid-exterior-gutter-l: 48px;
--podium-cds-size-border-width-s: 1px;
--podium-cds-size-border-width-m: 1.5px;
--podium-cds-size-border-width-l: 2px;
--podium-cds-button-border-width: var(--podium-cds-size-border-width-m);
--pds-space-10: 10px;
--pds-space-20: 20px;
--pds-space-32: 32px;
--pds-space-40: 40px;
--pds-space-72: 72px;
--pds-space-90: 90px;
--space-xl: 30px; /* 9 elements — e.g. summary .accordion-panel-wrapper, summary .accordion-panel-wrapper, div .content-wrapper /* mined from computed styles */ */
--podium-cds-size-spacing-m: 12px;
--podium-cds-size-spacing-l: 24px;
--podium-cds-size-spacing-grid-gutter: 16px;
--podium-cds-size-spacing-grid-gutter-l: 12px;
--podium-cds-size-spacing-grid-exterior-gutter-s: 24px;
--pds-space-2: 2px;
--pds-space-4: 4px;
--pds-space-6: 6px;
--pds-space-8: 8px;
--pds-space-12: 12px;
--pds-space-16: 16px;
--pds-space-24: 24px;
--pds-space-48: 48px;
--pds-space-60: 60px;
--podium-cds-size-icon-s: 16px;
--podium-cds-size-icon-m: 24px;
--podium-cds-size-icon-l: 48px;
--podium-cds-size-form-input-container-height: 86px;
--podium-cds-size-form-input-field-height: 56px;
--podium-cds-button-padding-bottom-s: 6px;
--podium-cds-button-padding-bottom-m: 12px;
--podium-cds-button-padding-bottom-l: 18px;
--podium-cds-button-padding-sides-l: 24px;
/* Radius (9) */
--podium-cds-button-border-radius: 30px;
--podium-cds-size-border-radius-s: 4px;
--podium-cds-size-border-radius-m: 8px;
--podium-cds-size-border-radius-l: 12px;
--podium-cds-size-border-radius-xl: 24px;
--pds-radius-0: 0px;
--pds-radius-rounded: 9999px;
--radius-sm: 2px; /* 9 elements — e.g. button .vjs-default-button "Reset restore all se", button .vjs-done-button "Done", button .vjs-default-button "Zurücksetzen Alle Ei" /* mined from computed styles */ */
--radius-md: 50%; /* 5 elements — e.g. button ._3fh4aDHS, button ._3fh4aDHS, button .TYczRBi0 /* mined from computed styles */ */
/* Effects (27) */
--podium-cds-button-box-shadow-hover-width: 0;
--podium-cds-elevation-10: 10;
--podium-cds-elevation-20: 20;
--podium-cds-elevation-30: 30;
--podium-cds-elevation-40: 40;
--podium-cds-elevation-50: 50;
--podium-cds-elevation-60: 60;
--podium-cds-elevation-70: 70;
--podium-cds-elevation-80: 80;
--podium-cds-elevation-90: 90;
--podium-cds-elevation-100: 100;
--pds-motion-delay-50: 50ms;
--pds-motion-delay-100: 100ms;
--podium-cds-transition-duration-fast: 150ms;
--pds-motion-delay-200: 200ms;
--podium-cds-transition-duration-normal: 250ms;
--pds-motion-duration-300: 300ms;
--pds-motion-duration-350: 350ms;
--pds-motion-duration-400: 400ms;
--podium-cds-form-shadow-focus: 0 0 0 12px var(--podium-cds-color-focus-shadow);
--pds-ratio-16-9: 16 / 9;
--pds-ratio-3-2: 3 / 2;
--pds-ratio-1-1: 1 / 1;
--pds-ratio-4-5: 4 / 5;
--pds-ratio-3-4: 3 / 4;
--pds-ratio-2-3: 2 / 3;
--pds-ratio-9-16: 9 / 16;
/* Motion (45) */
----motion-Qrke3I-M: @keyframes Qrke3I-M {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}; /* @keyframes Qrke3I-M */
----motion-PDTHp9yE: @keyframes PDTHp9yE {
0% { text-overflow: ellipsis; overflow: hidden; white-s… <0.2KB elided>; /* @keyframes PDTHp9yE */
----motion-_3FGhfyw3: @keyframes _3FGhfyw3 {
0% { text-overflow: clip; white-space: normal; }
99%… <0.2KB elided>; /* @keyframes _3FGhfyw3 */
----motion-_3N1WTAJ-: @keyframes _3N1WTAJ- {
11% { max-width: 10px; }
11.5% { max-width: 9px; }
61.5% { max-width: 9px; }
62% { max-width: 10px; }
}; /* @keyframes _3N1WTAJ- */
----motion-c5JhUTb3: @keyframes c5JhUTb3 {
11% { max-width: 10px; }
11.5% { max-width: 9px; }
61.5% { max-width: 9px; }
62% { max-width: 10px; }
}; /* @keyframes c5JhUTb3 */
----motion-_2M8riywt: @keyframes _2M8riywt {
0% { transform: translateZ(0px); }
100% { transform: translate3d(-50%, 0px, 0px); }
}; /* @keyframes _2M8riywt */
----motion-_22kD7MgC: @keyframes _22kD7MgC {
0% { transform: translateX(100%); }
100% { transform: translateX(0px); }
}; /* @keyframes _22kD7MgC */
----motion-_1Io7Ckl7: @keyframes _1Io7Ckl7 {
0% { transform: translateX(-100%); }
100% { transform: translateX(0px); }
}; /* @keyframes _1Io7Ckl7 */
----motion-animation-npr22l: @keyframes animation-npr22l {
0% { opacity: 0; transform: translateX(5%); }
100% { opacity: 1; transform: translateX(0px); }
}; /* @keyframes animation-npr22l */
----motion-slide-search-results-tray: @keyframes slide-search-results-tray {
0% { right: -100px; }
100% { right: 0px; }
}; /* @keyframes slide-search-results-tray */
----motion-scaleup: @keyframes scaleup {
0% { transform: scale(0.5); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}; /* @keyframes scaleup */
----motion-open: @keyframes open {
0% { grid-template-rows: 0fr; opacity: 0; }
100% { grid-template-rows: 1fr; opacity: 1; padding-bottom: 30px; }
}; /* @keyframes open */
----motion-close: @keyframes close {
0% { grid-template-rows: 1fr; opacity: 1; }
100% { grid-template-rows: 0fr; opacity: 0; padding-bottom: 0px; }
}; /* @keyframes close */
----motion-glitch-1: @keyframes glitch-1 {
0%, 79% { clip-path: inset(0px 0px 100%); }
80% { cli… <0.4KB elided>; /* @keyframes glitch-1 */
----motion-glitch-2: @keyframes glitch-2 {
0%, 79% { clip-path: inset(0px 0px 100%); }
80% { cli… <0.4KB elided>; /* @keyframes glitch-2 */
----motion-pds-fade-in: @keyframes pds-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes pds-fade-in */
----motion-pds-fade-out: @keyframes pds-fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes pds-fade-out */
----motion-pds-slide-in-from-top: @keyframes pds-slide-in-from-top {
0% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}; /* @keyframes pds-slide-in-from-top */
----motion-pds-slide-in-from-bottom: @keyframes pds-slide-in-from-bottom {
0% { transform: translateY(10px); }
100% { transform: translateY(0px); }
}; /* @keyframes pds-slide-in-from-bottom */
----motion-pds-slide-in-from-left: @keyframes pds-slide-in-from-left {
0% { transform: translateX(-10px); }
100% { transform: translateX(0px); }
}; /* @keyframes pds-slide-in-from-left */
----motion-pds-slide-in-from-right: @keyframes pds-slide-in-from-right {
0% { transform: translateX(10px); }
100% { transform: translateX(0px); }
}; /* @keyframes pds-slide-in-from-right */
----motion-pds-slide-out-to-top: @keyframes pds-slide-out-to-top {
0% { transform: translateY(0px); }
100% { transform: translateY(-10px); }
}; /* @keyframes pds-slide-out-to-top */
----motion-pds-slide-out-to-bottom: @keyframes pds-slide-out-to-bottom {
0% { transform: translateY(0px); }
100% { transform: translateY(10px); }
}; /* @keyframes pds-slide-out-to-bottom */
----motion-pds-slide-out-to-left: @keyframes pds-slide-out-to-left {
0% { transform: translateX(0px); }
100% { transform: translateX(-10px); }
}; /* @keyframes pds-slide-out-to-left */
----motion-pds-slide-out-to-right: @keyframes pds-slide-out-to-right {
0% { transform: translateX(0px); }
100% { transform: translateX(10px); }
}; /* @keyframes pds-slide-out-to-right */
----motion-pds-slide-in-from-right-full: @keyframes pds-slide-in-from-right-full {
0% { transform: translateX(100%); }
100% { transform: translateX(0px); }
}; /* @keyframes pds-slide-in-from-right-full */
----motion-pds-slide-out-to-right-full: @keyframes pds-slide-out-to-right-full {
0% { transform: translateX(0px); }
100% { transform: translateX(100%); }
}; /* @keyframes pds-slide-out-to-right-full */
----motion-pds-slide-in-from-left-full: @keyframes pds-slide-in-from-left-full {
0% { transform: translateX(-100%); }
100% { transform: translateX(0px); }
}; /* @keyframes pds-slide-in-from-left-full */
----motion-pds-slide-out-to-left-full: @keyframes pds-slide-out-to-left-full {
0% { transform: translateX(0px); }
100% { transform: translateX(-100%); }
}; /* @keyframes pds-slide-out-to-left-full */
----motion-pds-slide-in-from-top-full: @keyframes pds-slide-in-from-top-full {
0% { transform: translateY(-100%); }
100% { transform: translateY(0px); }
}; /* @keyframes pds-slide-in-from-top-full */
----motion-pds-slide-out-to-top-full: @keyframes pds-slide-out-to-top-full {
0% { transform: translateY(0px); }
100% { transform: translateY(-100%); }
}; /* @keyframes pds-slide-out-to-top-full */
----motion-pds-slide-in-from-bottom-full: @keyframes pds-slide-in-from-bottom-full {
0% { transform: translateY(100%); }
100% { transform: translateY(0px); }
}; /* @keyframes pds-slide-in-from-bottom-full */
----motion-pds-slide-out-to-bottom-full: @keyframes pds-slide-out-to-bottom-full {
0% { transform: translateY(0px); }
100% { transform: translateY(100%); }
}; /* @keyframes pds-slide-out-to-bottom-full */
----motion-pds-zoom-in: @keyframes pds-zoom-in {
0% { transform: scale(0.95); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}; /* @keyframes pds-zoom-in */
----motion-pds-zoom-out: @keyframes pds-zoom-out {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.95); opacity: 0; }
}; /* @keyframes pds-zoom-out */
----motion-pds-spin: @keyframes pds-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}; /* @keyframes pds-spin */
----motion-pds-pulse: @keyframes pds-pulse {
0% { opacity: 0.8; }
50% { opacity: 0.25; }
100% { opacity: 0.8; }
}; /* @keyframes pds-pulse */
----motion-pds-accordion-expand: @keyframes pds-accordion-expand {
0% { max-height: 0px; }
100% { max-height: var(--radix-accordion-content-height, 500px); }
}; /* @keyframes pds-accordion-expand */
----motion-pds-accordion-collapse: @keyframes pds-accordion-collapse {
0% { max-height: var(--radix-accordion-content-height, 500px); }
100% { max-height: 0px; }
}; /* @keyframes pds-accordion-collapse */
----motion-swipe-out: @keyframes swipe-out {
0% { transform: translateX(var(--radix-toast-swipe-end-x)); }
100% { transform: translateX(100%); }
}; /* @keyframes swipe-out */
----motion-swipe-out-rtl: @keyframes swipe-out-rtl {
0% { transform: translateX(var(--radix-toast-swipe-end-x)); }
100% { transform: translateX(-100%); }
}; /* @keyframes swipe-out-rtl */
--duration-fast: 0.1s; /* 18 elements — e.g. div, div, div /* mined from computed styles */ */
--duration-base: 0.25s; /* 6 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-slow: 0.3s; /* 4 elements — e.g. button, button, button /* mined from computed styles */ */
--ease-default: ease; /* 299 elements — e.g. button, button, button /* mined from computed styles */ */
```
More from the gallery
Browse all kits →You may also like
atlassian.com
MITEnterprise design system for Atlassian's marketing site, featuring bold brand colours, custom typography, and structured spacing tokens built for large-scale SaaS platforms
Layout06
boldsaaslanding-pagelight
github.com
MITGitHub's production design system with 568 CSS custom properties, featuring clean typography, accessible colour tokens, and motion primitives built for developer platforms and collaborative workflows
Layout04
darkdeveloper-toolsaas
Customer.io
MITDark SaaS design system with mint-green accents and clean typography, built for product dashboards and developer-focused platforms
Layout011
darksaasdeveloper-tooldashboard