Identity Forge
shadcn/ui / radix-ui / react

Apex Sport

Inspired by Strava's Year in Sport report: a sports data visualization system built on full-bleed horizontal bands alternating between pitch-black nav, vivid orange (#fc5101) metric headers, silver-gray stat panels, and warm cream chart canvases. Oversized KPI numerals dominate stat panels; every text element is uppercase with tracked spacing; data visualization uses a single orange hue on the cream canvas. Zero border-radius throughout, completely flat with no shadows or elevation anywhere in the system.

Use this kitCustomize in StudioDownload DESIGN.md
sport
athletic
data
bold
flat
editorial
orange
monochromatic-viz
uppercase
alternating-bands
lollipop-chart
zero-radius

apexsport.com

apex

YOUR YEAR IN NUMBERS

Every mile. Every hour. Every personal best.

VIEW FULL REPORTTokens

apexsport.com

apex

YOUR YEAR IN NUMBERS

Every mile. Every hour. Every personal best.

VIEW FULL REPORTTokens

Exports

DESIGN.mdDTCG tokens JSONCSS variablesTailwind v3 configTailwind v4 themeshadcn registry JSONRegistry install endpoint

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F3F3EB"
    foreground: "#111111"
    card: "#CFD8D7"
    card-foreground: "#111111"
    popover: "#F3F3EB"
    popover-foreground: "#111111"
    primary: "#FC5101"
    primary-foreground: "#000000"
    secondary: "#CFD8D7"
    secondary-foreground: "#111111"
    muted: "#E8E8E0"
    muted-foreground: "#5A5E5D"
    accent: "#000000"
    accent-foreground: "#F3F3EB"
    destructive: "#BA1A1A"
    destructive-foreground: "#FFFFFF"
    border: "#C4C4BC"
    input: "#E8E8E0"
    ring: "#FC5101"
    success: "#2D8A4E"
    success-foreground: "#000000"
    warning: "#D97706"
    warning-foreground: "#000000"
    chart-1: "#FC5101"
    chart-2: "#9B3308"
    chart-3: "#F18954"
    chart-4: "#747C7A"
    chart-5: "#3C4444"
  palette:
    - { name: "black-nav", hex: "#000000", role: "surface" }
    - { name: "strava-orange", hex: "#fc5101", role: "primary" }
    - { name: "silver-stat", hex: "#cfd8d7", role: "surface" }
    - { name: "cream-canvas", hex: "#f3f3eb", role: "surface" }
    - { name: "white-ink", hex: "#ffffff", role: "ink" }
    - { name: "near-black", hex: "#111111", role: "ink" }
    - { name: "rust-dark", hex: "#9b3308", role: "brand-dark" }
    - { name: "peach-light", hex: "#f18954", role: "brand-light" }
    - { name: "muted-sage", hex: "#747c7a", role: "muted" }
    - { name: "dark-muted", hex: "#3c4444", role: "muted" }
    - { name: "light-muted", hex: "#c3a48f", role: "muted" }
    - { name: "warm-white", hex: "#f3f6ef", role: "surface" }
    - { name: "pale-peach", hex: "#f4e7da", role: "tint" }
    - { name: "light-teal", hex: "#dee8e7", role: "tint" }
    - { name: "data-orange", hex: "#fc5101", role: "data-viz" }
    - { name: "data-rust", hex: "#9b3308", role: "data-viz" }
    - { name: "data-peach", hex: "#f18954", role: "data-viz" }
    - { name: "data-sage", hex: "#747c7a", role: "data-viz" }
    - { name: "data-forest", hex: "#3c4444", role: "data-viz" }

shadcn CSS Variables

/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Barlow%20Condensed:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Space%20Mono:wght@400;700&display=swap");

:root {
  --radius: 0rem;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-sans: 'Barlow', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 60 25% 94%;
  --foreground: 0 0% 7%;
  --card: 173 10% 83%;
  --card-foreground: 0 0% 7%;
  --popover: 60 25% 94%;
  --popover-foreground: 0 0% 7%;
  --primary: 19 99% 50%;
  --primary-foreground: 0 0% 0%;
  --secondary: 173 10% 83%;
  --secondary-foreground: 0 0% 7%;
  --muted: 60 15% 89%;
  --muted-foreground: 165 2% 36%;
  --accent: 0 0% 0%;
  --accent-foreground: 60 25% 94%;
  --destructive: 0 75% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 60 6% 75%;
  --input: 60 15% 89%;
  --ring: 19 99% 50%;
  --success: 141 51% 36%;
  --success-foreground: 0 0% 0%;
  --warning: 32 95% 44%;
  --warning-foreground: 0 0% 0%;
  --chart-1: 19 99% 50%;
  --chart-2: 18 90% 32%;
  --chart-3: 20 85% 64%;
  --chart-4: 165 3% 47%;
  --chart-5: 180 6% 25%;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --gradient-hero: linear-gradient(180deg, #fc5101 0%, #e04800 100%);
  --gradient-brand: linear-gradient(90deg, #fc5101 0%, #f18954 100%);
  --gradient-subtle: linear-gradient(180deg, #f3f3eb 0%, #cfd8d7 100%);
  --duration: 150ms;
  --duration-slow: 300ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-tight: 0.05em;
  --tracking-normal: 0.02em;
  --font-weight-heading: 800;
  --font-weight-body: 400;
  --button-radius: 0rem;
  --card-radius: 0rem;
  --input-radius: 0rem;
  --badge-radius: 0rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: uppercase;

Install Targets

Registry

/r/apex-sport.json

Tailwind v4

@theme inline {
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-sans: 'Barlow', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));
  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));
  --radius-sm: 0rem;
  --radius-md: 0rem;
  --radius-lg: 0rem;
  --radius-xl: 0rem;
  --radius-button: 0rem;
  --radius-card: 0rem;
  --radius-input: 0rem;
  --radius-badge: 0rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --tracking-tight: 0.05em;
  --tracking-normal: 0.02em;
  --ease-kit: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-kit: 150ms;
  --duration-kit-slow: 300ms;
  --gradient-hero: linear-gradient(180deg, #fc5101 0%, #e04800 100%);
  --gradient-brand: linear-gradient(90deg, #fc5101 0%, #f18954 100%);
  --gradient-subtle: linear-gradient(180deg, #f3f3eb 0%, #cfd8d7 100%);
  --font-weight-heading: 800;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "apex-sport",
  "type": "registry:theme",
  "title": "Apex Sport",
  "description": "Bold alternating-band athletic data identity — vivid orange hero sections, oversized display numerals, all-caps condensed grotesque, lollipop charts, zero-radius flat design.",
  "categories": [
    "sport",
    "athletic",
    "data",
    "bold",
    "flat",
    "editorial",
    "orange",
    "monochromatic-viz",
    "uppercase",