ICPWorldMemepad Design Blueprint
Quantum-inspired design system — tokens, typography, architecture, and AI patterns
Color Tokens
Background
Obsidian Black
Card
Deep Space
Primary (Gold)
Quantum Gold
Secondary (Red)
Crimson Pulse
Accent (Purple)
Void Purple
Muted
Shadow Dark
Typography System
Display Font
Space Grotesk
Usage: Headlines, section titles, feature names
Weight: 700-900
Aa Bb 123
Body Font
DM Sans
Usage: Paragraphs, descriptions, UI labels
Weight: 400-600
Aa Bb 123
Mono Font
Geist Mono
Usage: Addresses, amounts, code, symbols
Weight: 400-700
Aa Bb 123
Layout Zone System
Page Background
bg-background
Obsidian base layer
Cards & Panels
bg-card
Elevated surfaces
Subtle Areas
bg-muted/40
Input fields, dividers
Interactive
bg-primary
Buttons, highlights
Danger / Red
bg-secondary
Warnings, battles
Mystical
bg-accent
Holographic effects
AI Module Architecture
| Module | Technology | Status | Description |
|---|---|---|---|
| Token Generator | Simulated AI pipeline | Live | Randomized AI-pattern outputs with variety engine |
| Trend Predictor | Real-time signal simulation | Live | Animated live-updating viral score system |
| Hype Weather | 30s cycle state machine | Live | Weather transitions with animated backgrounds |
| Meme War Arena | Vote accumulation engine | Live | Real-time vote counting with progress bars |
| Soul-Bound Generation | Decision tree mapping | Live | Personality quiz → coin archetype mapping |
| Living NFTs | Evolution stage system | Live | Level-based progression and trait display |
| Voice Interface | Browser MediaStream API | Live | Mic access with waveform visualization |
Design Principles
Quantum Obsidian Aesthetic
Deep black backgrounds with gold, crimson, and purple accents create a premium crypto-quantum visual language.
FOMO-First UX
Every interaction is designed to trigger excitement, urgency, and desire. Live counters, animated scores, and real-time data dominate.
AI-Native Interactions
Every feature appears to use live AI — simulated real-time data, animated outputs, and confidence-inducing loading states.
Accessibility + Immersion
Full keyboard navigation, reduced-motion support, and high-contrast tokens alongside cinematic visual effects.