Highscore Jolt

About 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.

Color

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.

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.

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.

Elevation

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.

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.

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.
• 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.
• Use only weights 400 and 700 for Atkinson Hyperlegible; reserve 500 for JetBrains Mono key bindings.
• Pair every success, warning and destructive badge or alert with an icon or text label so status never depends on color alone.
• Set scores, ranks and timers with font-feature-settings 'tnum', right-aligned, in 48px leaderboard rows.
• 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 set display-lg, display-md or heading-lg in all caps or with positive letterSpacing.
• 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 introduce #000000 or untinted greys; take every surface, border and text color from the neutral ramp.
• 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 set body text or headings in JetBrains Mono; limit it to the code style for IDs, build numbers and key bindings.