Padel Championship - Neon Athletic Dark
A bold, dark-first design system purpose-built for sports championship and tournament websites. It combines the raw energy of competitive athletics with a futuristic, premium aesthetic. Electric cyan (#00F0FF) and neon green (#39FF14) accents blaze against a deep black canvas (#0A0A0F), creating an atmosphere that feels like walking into a world-class arena at night — electric, immersive, and unforgettable. The system features glassmorphism panels, particle backgrounds, magnetic button effects, tilt cards, and staggered scroll animations.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxA bold, dark-first design system purpose-built for sports championship and tournament websites. It combines the raw energy of competitive athletics with a futuristic, premium aesthetic. Electric cyan (#00F0FF) and neon green (#39FF14) accents blaze against a deep black canvas (#0A0A0F), creating an atmosphere that feels like walking into a world-class arena at night — electric, immersive, and unforgettable. The system features glassmorphism panels, particle backgrounds, magnetic button effects, tilt cards, and staggered scroll animations.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Elevation & Depth
Do's & Don'ts
Do
Don't
Animation System
### Scroll Reveals
• .reveal: fade up 40px, 0.8s cubic-bezier(0.16,1,0.3,1)
• .reveal-left / .reveal-right: slide 60px horizontal
• .reveal-scale: scale from 0.9
• Staggered delays: .delay-1 through .delay-6 (100ms increments)
### Particle Background
Canvas-based particle system with 80 particles. Colors alternate cyan/green. Particles connect with lines when within 150px. Respects prefers-reduced-motion.
### Micro-interactions
• Magnetic buttons: follow cursor within bounds
• Tilt cards: 3D rotation following cursor (±8deg perspective 1000px)
• Counter animation: count-up with easeOutCubic on intersection
• Marquee ticker: infinite horizontal scroll, duplicated content
• Parallax: background images translate on scroll via data attribute
• Preloader: gradient bar fill animation, fade out on load
### Transition Defaults
• Fast: 200ms ease — hover states, toggles
• Smooth: 400ms cubic-bezier(0.16,1,0.3,1) — layouts, reveals
• Spring: 600ms cubic-bezier(0.34,1.56,0.64,1) — playful bounces
---
Use with MCP
Don't have the MCP? Install it here