A prismatic highway through deep space — luminous glass, spectral bands, and cosmic depth
01
Color Palette
Eight spectral hues form the luminous road, set against the infinite depth of space. Each color carries its own glow, and together they create the unmistakable prismatic highway.
Rainbow Spectrum
Red
#FF3860
Orange
#FF8C42
Yellow
#FFD166
Green
#06D6A0
Cyan
#00E5FF
Blue
#118AB2
Indigo
#6C5CE7
Violet
#A855F7
Space Backgrounds
Void
#030011
Deep
#0A0020
Surface
#12003A
Elevated
#1C0050
Rainbow Gradient
--rainbow-gradient
02
Typography
Three typefaces navigate the cosmic highway: Fredoka for warm, friendly display text; Nunito for smooth body copy; and Orbitron for futuristic accents and data labels.
The road stretches forward into the void, a ribbon of pure color suspended against the darkness. Each band glows with its own inner light, casting prismatic reflections across the translucent surface beneath your wheels. Stars drift past like slow-falling snow.
Caption text for metadata, timestamps, and secondary information. Uses the same Nunito typeface at a reduced size with muted color for visual hierarchy.
font-family: Nunito | weight: 400 | 0.9rem / 1.7
Type Scale
4remDisplay
2.75remHeading 1
2remHeading 2
1.5remHeading 3
1.25remHeading 4
1.05remBody
0.9remSmall
0.85remAccent
03
Spacing
A 4px base unit scales through 9 steps, from the tightest micro-gaps to generous cosmic breathing room. Every distance on the road is deliberate.
--space-14px
--space-28px
--space-312px
--space-416px
--space-524px
--space-632px
--space-748px
--space-864px
--space-996px
04
Buttons
Three button styles for every context: a bold primary with the full rainbow, an outlined secondary with spectral borders, and a subtle ghost for quiet actions.
Primary Buttons
Secondary Buttons
Ghost Buttons
Button Group
Mixed Row
05
Forms
Inputs glow with spectral focus rings and float on translucent glass. Every field is a window into the void, waiting for starlight data.
Your display name on the cosmic leaderboard
Checkboxes
Radio Buttons
Complete Form
06
Cards
Glass containers for cosmic content — hovering over the void, each card catches and refracts the spectral light of the rainbow highway.
Stellar Cartography
Map the uncharted regions beyond the prismatic highway. New star clusters are discovered every lap, each with unique gravitational signatures that bend the road itself.
Spectral Engine Core
The heart of every racer: a prismatic fusion reactor that converts starlight into pure velocity. Tuning the spectral balance shifts your top speed across different color bands.
Nebula Drift Event
A cosmic storm is approaching the outer lanes. Pilots who ride the chromatic winds can gain unprecedented boost — but one wrong turn sends you into the void.
EventSeason 7Cosmic
07
Alerts
Spectral notifications for every scenario — from calm informational beacons to urgent danger signals pulsing across the void.
ⓘ
Course Update
The prismatic highway has been extended by 2 sectors. New checkpoints are now active in the Cyan Nebula region.
✓
Lap Complete
Personal best achieved! Your spectral trail has been recorded to the cosmic leaderboard.
⚠
Gravitational Anomaly
Unusual curvature detected in sectors 4 through 7. Adjust your drift angle to compensate for the shifted spectrum.
✗
Road Collapse
Critical segment failure in the Violet Strait. All pilots must reroute immediately through the emergency Indigo bypass.
★
Rainbow Star Power
You have collected all seven spectral fragments. Full prismatic invincibility is now active for the next 30 seconds.
08
Navigation & Extras
Tabs, badges, tooltips, progress indicators, and toggle switches — the utility components that keep the cosmic interface running smoothly.
Tab Navigation
Badges
Star CupOnlineLegendaryDraftNew Record
Tooltip
Hover over the Rainbow Road to see a tooltip appear. These are useful for showing extra context about design tokens or interface elements.