---
version: alpha
name: Highscore Jolt
description: "Bold gaming UI: one electric teal action color on cool green-grey neutrals, large tight-tracked Atkinson display type and flat, legible surfaces."
colors:
  background: "#f4f8f7"
  foreground: "#0e1715"
  card: "#ffffff"
  card-foreground: "#0e1715"
  popover: "#ffffff"
  popover-foreground: "#0e1715"
  primary: "#0a7a8c"
  primary-foreground: "#ffffff"
  secondary: "#e6eeec"
  secondary-foreground: "#1b2623"
  muted: "#e6eeec"
  muted-foreground: "#43524e"
  accent: "#cff3f8"
  accent-foreground: "#05363f"
  destructive: "#c42552"
  destructive-foreground: "#ffffff"
  success: "#0f6a46"
  success-foreground: "#ffffff"
  warning: "#fbd98a"
  warning-foreground: "#432a00"
  border: "#d0dbd8"
  input: "#b2c2be"
  ring: "#0a7a8c"
  dark-background: "#0e1715"
  dark-foreground: "#f4f8f7"
  dark-card: "#1b2623"
  dark-card-foreground: "#f4f8f7"
  dark-popover: "#1b2623"
  dark-popover-foreground: "#f4f8f7"
  dark-primary: "#34c4d9"
  dark-primary-foreground: "#032228"
  dark-secondary: "#2b3835"
  dark-secondary-foreground: "#e6eeec"
  dark-muted: "#2b3835"
  dark-muted-foreground: "#b2c2be"
  dark-accent: "#05363f"
  dark-accent-foreground: "#cff3f8"
  dark-destructive: "#f2658a"
  dark-destructive-foreground: "#3a0617"
  dark-success: "#36bf86"
  dark-success-foreground: "#042418"
  dark-warning: "#d9a33a"
  dark-warning-foreground: "#2a1a00"
  dark-border: "#2b3835"
  dark-input: "#43524e"
  dark-ring: "#34c4d9"
typography:
  display-lg:
    fontFamily: Atkinson Hyperlegible
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.04
    letterSpacing: -0.025em
  display-md:
    fontFamily: Atkinson Hyperlegible
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Atkinson Hyperlegible
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Atkinson Hyperlegible
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Atkinson Hyperlegible
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
  body-lg:
    fontFamily: Atkinson Hyperlegible
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Atkinson Hyperlegible
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Atkinson Hyperlegible
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Atkinson Hyperlegible
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0.01em
  caption:
    fontFamily: Atkinson Hyperlegible
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  code:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 20px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Highscore Jolt

## Overview

Highscore Jolt is for gaming platforms, esports hubs and launchers where players need a clear next action fast. A single teal (brand, hue ~190) carries all interactive emphasis. Display type at 40–56px sets the voice. Neutrals, status colors and surfaces stay restrained so the UI does not compete with game art or live video.

Moods: bold, energetic, disciplined, confident. Built for: gaming, esports, consumer-tech. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

All scales share one chroma curve: low chroma at 50–100, a peak at 400–500, and a steady taper to 950. Neutrals are tinted green-grey at hue ~170 at every step, so no step drifts toward warm or pure grey. In light mode, primary is brand-600 #0a7a8c: white labels reach 5.0:1, and primary on background reaches 4.7:1. In dark mode, primary is brand-400 #34c4d9 with brand-950 labels at 8.0:1. Danger is a magenta-crimson at hue ~350, far from teal in both modes, so destructive actions never read as brand. Success is shifted cooler to an emerald at hue ~155 to sit beside teal. Warning stays amber for unambiguous caution. Foreground/background pairs are about 6.6:1 or higher, and muted-foreground is at least 6.6:1 on both background and muted in both modes.

- **Primary** `#0a7a8c` / dark `#34c4d9`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f4f8f7` / dark `#0e1715` on `#0e1715` / dark `#f4f8f7`: page surface and body text.
- **Card** `#ffffff` / dark `#1b2623`: raised surfaces.
- **Secondary** `#e6eeec` / dark `#2b3835`: secondary buttons and quiet controls.
- **Muted** `#e6eeec` / dark `#2b3835` with **muted-foreground** `#43524e` / dark `#b2c2be`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#cff3f8` / dark `#05363f`: highlights, selected rows, badges.
- **Destructive** `#c42552` / dark `#f2658a`, **Success** `#0f6a46` / dark `#36bf86`, **Warning** `#fbd98a` / dark `#d9a33a`: status only, always paired with an icon or label.
- **Border** `#d0dbd8` / dark `#2b3835`, **Input** `#b2c2be` / dark `#43524e`, **Ring** `#0a7a8c` / dark `#34c4d9`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

Atkinson Hyperlegible covers display and UI text. Its distinct letterforms keep usernames, scores and controller labels unambiguous. The scale steps 12 / 14 / 16 / 18 / 20, then rises on a 1.4 ratio: 20 → 28 → 40 → 56. Tracking tightens as size grows: -0.025em at 56px, -0.02em at 40px, -0.015em at 28px. Body sizes stay at 0 tracking with 1.5–1.6 line height. Atkinson ships only weights 400 and 700, and the system uses only those two. JetBrains Mono (400/500) is reserved for match IDs, build numbers, key bindings and code.

- Display: **Atkinson Hyperlegible** (fallback system-ui, sans-serif)
- Interface: **Atkinson Hyperlegible** (fallback system-ui, sans-serif)
- Mono: **JetBrains Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Atkinson Hyperlegible | 56px | 1.04 | 700 |
| display-md | Atkinson Hyperlegible | 40px | 1.1 | 700 |
| heading-lg | Atkinson Hyperlegible | 28px | 1.2 | 700 |
| heading-md | Atkinson Hyperlegible | 20px | 1.3 | 700 |
| heading-sm | Atkinson Hyperlegible | 16px | 1.4 | 700 |
| body-lg | Atkinson Hyperlegible | 18px | 1.6 | 400 |
| body-md | Atkinson Hyperlegible | 16px | 1.6 | 400 |
| body-sm | Atkinson Hyperlegible | 14px | 1.5 | 400 |
| label | Atkinson Hyperlegible | 14px | 1.25 | 700 |
| caption | Atkinson Hyperlegible | 12px | 1.4 | 700 |
| code | JetBrains Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px grid. Buttons and inputs are 44px tall for touch and controller focus. Content columns cap at 1280px. Leaderboard rows are 48px with right-aligned tabular numbers.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Surfaces are flat and separated by 1px border and tonal shifts. In dark mode, background is neutral-950 and card is neutral-900, so cards read as lifted without shadow. Cards use only shadow.sm. Menus, popovers and dialogs use shadow.md and shadow.lg to mark temporary layers.

- sm: `0 1px 2px rgba(14, 23, 21, 0.08)`
- md: `0 6px 16px -4px rgba(14, 23, 21, 0.16)`
- lg: `0 20px 44px -10px rgba(14, 23, 21, 0.28)`

## Shapes

Buttons and inputs use radius.md (8px). Cards use radius.lg (12px). Badges use radius.full. Primary buttons are never pill-shaped, which keeps the engineered edge.

Radius scale: sm 4px, md 8px, lg 12px, xl 20px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 44px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use one primary button (brand-600 light, brand-400 dark) per view; render other actions as secondary or ghost buttons at the same 44px height.
- **Do:** Set page and hero headlines in display-lg (56px, -0.025em) or display-md (40px, -0.02em), weight 700, and keep them to two lines or fewer.
- **Do:** Use only weights 400 and 700 for Atkinson Hyperlegible; reserve 500 for JetBrains Mono key bindings.
- **Do:** Pair every success, warning and destructive badge or alert with an icon or text label so status never depends on color alone.
- **Do:** Set scores, ranks and timers with font-feature-settings 'tnum', right-aligned, in 48px leaderboard rows.
- **Do:** Show a 2px ring-token outline with 2px offset on :focus-visible for every button, input, tab and leaderboard row.
- **Don't:** Don't use primary or accent teal for errors, destructive confirmations or negative stat deltas; use destructive (danger-600 light, danger-400 dark).
- **Don't:** Don't set display-lg, display-md or heading-lg in all caps or with positive letterSpacing.
- **Don't:** Don't place body-md paragraphs longer than two lines on the accent surface; limit accent to selected rows, active tabs and highlights.
- **Don't:** Don't introduce #000000 or untinted greys; take every surface, border and text color from the neutral ramp.
- **Don't:** Don't apply shadow.md or shadow.lg to cards; cards get a 1px border plus shadow.sm, and larger shadows are for menus, popovers and dialogs.
- **Don't:** Don't set body text or headings in JetBrains Mono; limit it to the code style for IDs, build numbers and key bindings.