A cohesive collection of tokens, patterns, and components crafted for immersive experiences. Explore the primitives below and switch between themes to validate contrast and motion.
Theme toggle
Powered by next-themes
Use Tailwind utilities that reference CSS variables to ensure consistent theming.
Foundations
Backgrounds, text, and borders inherit from --pv-* tokens.
Components
Buttons, cards, inputs, overlays, and layout primitives adapt to light and dark themes.
Accessibility
Focus visibility, keyboard support, and reduced-motion fallbacks included by default.
CSS variables drive shared theming across surfaces, typography, and interactive states.
#3f00e9
--pv-primary
#c947ff
--pv-primary-2
Gradient
--pv-gradient
#ffffff / #04031a
--pv-bg
#f7f7fb / #111539
--pv-surface
#111111 / #f4f6ff
--pv-text
#666666 / #9fa6dd
--pv-text-muted
#e6e6ef / #262d62
--pv-border
rgba(255,255,255,0.82) / rgba(6,7,30,0.88)
--pv-overlay-strong
rgba(255,255,255,0.65) / rgba(24,26,72,0.68)
--pv-overlay-soft
rgba(169,173,255,0.45) / rgba(34,36,108,0.5)
--pv-overlay-glow
var(--pv-primary)
--pv-ring
#10b981
--pv-success
#f59e0b
--pv-warning
#ef4444
--pv-danger
Headings and body copy align to a clear rhythm for immersive storytelling.
Scene-setting hero statements that introduce new worlds and experiences.
Section headers guiding players through lore, releases, and creator updates.
Supporting copy for feature callouts, metrics, and testimonials.
Body copy sits at 16 / 26 for comfortable reading across devices. Use muted variants to balance contrast and highlight key actions with the primary gradient.
Primary CTAs use the PixelVerse gradient. Secondary and ghost variants complement content on all surfaces.
Primary
Secondary
Ghost
Clear focus states, generous radius, and balanced density support complex creator workflows.
Inputs sit on the surface token with clear focus rings in both themes.
Leverage rounded-pv-sm for compact fields and rounded-pv for modals and cards.
Use helper text to communicate validation states alongside success, warning, or danger badges.
Modular cards with generous spacing, clear hierarchy, and gradient-backed actions.
Open-world raid — live
Assemble up to 6 explorers to defend the Prism Gate. Rewards include plasma cores and limited skins.
Players queued
2,184
Wavelength Collective
Weekly builds from the Wavelength community showcasing new biome shaders and interactive lore drops.
Engagement snapshot
Overlays respect focus, escape key behavior, and reduced motion for accessible interactions.