Design System
Color Palette
| Token | Value | Usage |
|---|---|---|
| Background | #000000 → #0a0a0a gradient | Page background |
| Primary accent | #22d3ee (cyan-400) | Links, buttons, highlights |
| Secondary accent | #a855f7 (purple-500) | Secondary actions, gradients |
| Success/money | #10b981 (emerald-500) | Payouts, positive numbers |
| Text primary | #ffffff | Headings, important text |
| Text secondary | #a1a1aa (zinc-400) | Body text, descriptions |
| Borders | rgba(255,255,255,0.05) | Card borders, dividers |
| Card background | rgba(255,255,255,0.02) | Card surfaces |
Typography
| Element | Font | Weight | Size |
|---|---|---|---|
| Headlines | Inter | Bold (700) | 5xl-7xl |
| Subheadings | Inter | Semibold (600) | 2xl-4xl |
| Body | Inter | Regular (400) | Base |
| Code/terminal | JetBrains Mono | Regular (400) | sm |
| Key numbers | Inter (tabular nums) | Bold | Variable |
Design Principles
- Dark theme done RIGHT — not just "black background with white text"
- Subtle gradients, glass morphism on cards
- Grain texture overlay for depth
- Glow effects on interactive elements
- Vibe: Linear.app meets a sci-fi command center
- NOT another SaaS template
UI Rules
- NO emojis in the UI — custom SVG icons only
- Mobile-responsive from day one
- Data-rich, dark, scannable at a glance
- Parallax on scroll, cards that flip/reveal
- Stats count up when entering viewport
Reference Sites
- linear.app (clean dark, purposeful animation)
- vercel.com (developer-focused, dark, confident)
- cursor.com (AI-forward, shows the product working)
- pump.fun (crypto-native, live data, engagement)
- polymarket.com (betting/prediction market UI)