Athletic Performance

---
name: athletic-performance
description: Apply the Athletic Performance visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Athletic Performance, mentions sport performance design, athletic bold, sportswear energy, or describes italic condensed uppercase type, volt highlight bars, black and white photography — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Athletic Performance Design System

Sport-brand velocity: italic condensed uppercase headlines that lean like a sprinter, hard black-and-white photography, a white ground built for speed, and a single volt accent used like a highlighter across finish-line moments.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Athletic Performance.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (sport performance design, athletic bold, sportswear energy, volt aesthetic, just-do-it style, training app bold), or describes its traits: italic condensed uppercase type; volt highlight bars; black and white photography; diagonal slice compositions; stat-driven modules; imperative copy voice.

## Design tokens

### Color palette

- Stark white ground: `#ffffff` (--color-bg)
- Stat modules and secondary panels: `#f4f4f4` (--color-surface)
- Near-black text and headline fill: `#0a0a0a` (--color-text)
- Secondary text and captions: `#4d4d4d` (--color-text-muted)
- Volt — highlight bars, underlines, and fills behind black text; never text itself on white: `#c9f31d` (--color-accent)
- Inverted section ground for dark passages: `#0a0a0a` (--color-ink)
- Hard rules and frame lines: `#0a0a0a` (--color-border)

### Typography

- Display / headings: Barlow Condensed (fallback: Arial Narrow, sans-serif) (ideal: Trade Gothic Bold Condensed No. 20, premium — use Barlow Condensed as the free substitute)
- Body: Barlow (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.414 ratio, base 16px — computed steps: 16px / 23px / 32px / 45px / 64px / 90px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 800, line-height 0.95, letter-spacing 0, uppercase
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 128 — High-tempo: tight headline stacks and stat clusters, then hard cuts to full-bleed photography. The page alternates sprint and recovery.
- Border radius: none 0px, pill 999px — Sharp rectangles for everything except pill-shaped tags and progress chips.
- Border treatment: 2px solid #0a0a0a — Hard black frames on stat modules and CTAs; many elements are borderless and rely on hard photo crops.

### Shadows

- none: `none` — Default — the style is flat and hard-edged
- punch: `0 16px 40px rgba(10, 10, 10, 0.22)` — Modals and floating video players only

### Layout

- Max content width: 1536px
- Diagonal energy: skewed section edges (3-6deg) and italic type create constant forward lean
- Full-bleed black-and-white athlete photography alternating with white stat sections
- Stat modules in rows: giant condensed number, small uppercase label, thin rule
- Invert to the ink ground for one climactic section per page

### Effects

- Volt highlight bars behind headline phrases (slightly overshooting the text)
- Skewed section dividers cutting across the page like a track line
- Oversized outlined numerals (transparent fill, 2px stroke) behind stat sections
- Duotone photo treatment: black and white with volt in rare hero moments

### Motion

- Easing: cubic-bezier(0.16, 1, 0.3, 1); durations 120ms / 240ms / 450ms
- Headlines slide in along their italic axis with a fast decisive entrance
- Stat numbers count up once when entering the viewport
- Hover states are instant fills — volt sweeps across buttons from the left
- Respect prefers-reduced-motion by replacing slides and counters with fades

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f4f4f4;
  --color-text: #0a0a0a;
  --color-text-muted: #4d4d4d;
  --color-accent: #c9f31d;
  --color-ink: #0a0a0a;
  --color-border: #0a0a0a;
  --radius-none: 0px;
  --radius-pill: 999px;
  --shadow-punch: 0 16px 40px rgba(10, 10, 10, 0.22);
  --border-default: 2px solid #0a0a0a;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: Barlow, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 0.95;
  --leading-body: 1.5;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 450ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800&family=Barlow:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White bar, heavy condensed wordmark, uppercase links; active link carries a volt underline bar
- **Hero:** Full-bleed black-and-white athlete image, leaning condensed headline with volt highlight, imperative one-liner, black CTA
- **Card:** White or surface module with 2px black frame, condensed uppercase title, stat row, hard-cropped image; hover sweeps a volt underline
- **Button (primary):** Black fill, white uppercase condensed label, square corners; hover sweeps volt fill with black text
- **Button (secondary):** White fill, 2px black border, black uppercase label; hover inverts
- **Form fields:** White fill, 2px black border, uppercase label above; focus adds a volt inner rule

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The leaning headline: extra-bold condensed uppercase italic, slanted like it's mid-sprint, with a volt (#c9f31d) highlight bar behind the key phrase and a hard-cropped athlete photo breaking the text block. Spend boldness here; keep everything else quiet.

## Do

- Keep headlines condensed, uppercase, italic, and huge — the lean is the brand
- Use volt only as bars, fills, and sweeps behind or under black type
- Write imperatives: short verbs, second person, no hedging
- Cut photography hard: tight crops, high contrast, real athletes mid-effort

## Don't

- Don't set volt text on white — it is a highlighter, not a text color
- Don't soften with rounded cards, gradients, or drop shadows
- Don't dilute to multiple accent hues; black, white, and volt is the whole kit
- Don't slip into streetwear drop mechanics — this style sells performance, not scarcity

## Accessibility notes

- Volt (#c9f31d) on white fails contrast badly (~1.5:1) — it must only appear as a fill behind black text or on the ink ground; the validator's accent-on-bg warning is by design here
- Italic condensed uppercase is display-only; body copy stays in regular Barlow sentence case
- Stat count-up animations and slide entrances need prefers-reduced-motion fallbacks

## Reference sites

- Nike: https://www.nike.com
- Adidas: https://www.adidas.com
- Gymshark: https://www.gymshark.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip athletic-performance.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/athletic-performance.json

Settings → Capabilities → Skills → Upload skill → athletic-performance.zip