Ultimate Performance Academy

Design Tokens

Complete CSS custom properties ready for implementation in your applications. Every token here mirrors the values documented across the rest of the design system.

Download as CSS

Colour Tokens

Brand Anchors

:root {
  /* Locked brand anchors */
  --color-yellow-200: #fef200;   /* Primary Yellow — marketing */
  --color-yellow-400: #facc15;   /* Primary Application — app UI */
  --color-yellow-500: #d5ad12;   /* Hover state */
  --color-yellow-600: #af8f0f;   /* Active state */

  --color-black-950:  #09090b;   /* Brand Black */
  --color-black-1000: #000000;   /* Pure black */
  --color-white:      #ffffff;
}

Yellow Scale

:root {
  --color-yellow-50:  #fffef2;
  --color-yellow-100: #fffccc;
  --color-yellow-200: #fef200;  /* Primary Yellow — marketing */
  --color-yellow-300: #fcdf0b;
  --color-yellow-400: #facc15;  /* Primary Application — app UI */
  --color-yellow-500: #d5ad12;
  --color-yellow-600: #af8f0f;
  --color-yellow-700: #8a700c;
  --color-yellow-800: #695609;
  --color-yellow-900: #4b3d06;
}

Black Scale

:root {
  --color-black-50:   #fafafa;
  --color-black-100:  #f5f5f5;
  --color-black-200:  #e5e5e5;
  --color-black-300:  #d4d4d4;
  --color-black-400:  #a3a3a3;
  --color-black-500:  #737373;
  --color-black-600:  #525252;
  --color-black-700:  #404040;
  --color-black-800:  #262626;
  --color-black-900:  #18181b;
  --color-black-950:  #09090b;  /* Brand Black */
  --color-black-1000: #000000;
}

Slate Scale (cool dark-mode neutrals)

:root {
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;  /* Body text on dark */
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
}

Semantic Scales

:root {
  /* Success — green family */
  --color-success-100: #dcfce7;
  --color-success-700: #15803d;  /* AA-safe on white */
  --color-success-800: #166534;

  /* Warning — orange family */
  --color-warning-100: #ffedd5;
  --color-warning-700: #c2410c;  /* AA-safe on white */
  --color-warning-800: #9a3412;

  /* Error — red family */
  --color-error-100:   #fee2e2;
  --color-error-600:   #dc2626;  /* AA-safe on white */
  --color-error-800:   #991b1b;

  /* Info — blue family */
  --color-info-100:    #dbeafe;
  --color-info-600:    #2563eb;  /* AA-safe on white */
  --color-info-800:    #1e40af;
}

Typography Tokens

Font Families

:root {
  --font-primary: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

Font Weights

:root {
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;  /* All H1 through H6 */
  --font-weight-black:     900;  /* Logo wordmark only */
}

Font Sizes (strict 8px-divisible)

:root {
  --font-size-sm:      0.875rem;  /* 14px, metadata only */
  --font-size-base:    1rem;      /* 16px, body default */
  --font-size-h3:      1.5rem;    /* 24px, card heading */
  --font-size-h2:      2rem;      /* 32px, section heading */
  --font-size-h1:      2.5rem;    /* 40px, page title */
  --font-size-feature: 3rem;      /* 48px, feature heading */
  --font-size-marketing: 3.5rem;  /* 56px, marketing headline */
  --font-size-hero:    4rem;      /* 64px, hero headline */
  --font-size-display: 4.5rem;    /* 72px, logo wordmark */
}

Line Heights

:root {
  --line-height-display:  1.1;   /* 72, 64 */
  --line-height-heading:  1.2;   /* 48, 40 */
  --line-height-section:  1.25;  /* 32 */
  --line-height-card:     1.3;   /* 24 */
  --line-height-body:     1.6;   /* 16 */
}

Letter Spacing

:root {
  --letter-spacing-display:  -0.03em;   /* 72 */
  --letter-spacing-hero:     -0.02em;   /* 64, 56, 48 */
  --letter-spacing-heading:  -0.015em;  /* 40 */
  --letter-spacing-normal:   0;         /* 32 and below */
}

Spacing Tokens

Based on an 8px grid system for consistency.

:root {
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
}

Radius and Shadow

Border Radius

:root {
  --radius-sm:   0.25rem;   /* 4px, inline tags, fine details */
  --radius-md:   0.375rem;  /* 6px, small chips */
  --radius-lg:   0.5rem;    /* 8px, buttons, form fields, dropdowns */
  --radius-xl:   0.75rem;   /* 12px, cards, panels, modals */
  --radius-2xl:  1rem;      /* 16px, hero cards, marketing blocks */
  --radius-full: 9999px;    /* Pills, badges, avatars */
}

Shadows (Light Mode)

:root {
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

Shadows (Dark Mode)

.dark {
  --shadow-sm:  none;
  --shadow-md:  0 4px 6px -1px rgb(255 255 255 / 0.05);
  --shadow-lg:  0 10px 15px -3px rgb(255 255 255 / 0.05);
  --shadow-xl:  0 20px 25px -5px rgb(255 255 255 / 0.06);
  --shadow-2xl: 0 25px 50px -12px rgb(255 255 255 / 0.08);

  --ring-sm: 1px solid rgb(255 255 255 / 0.1);
}