Genesis™ Brand Guide
The Royal Abyss — Approved January 7, 2026
"This is absolutely beautiful and breathtaking. This is the kind of shit I'm talking about." — Carter Hill, CEO
Core Color Philosophy
Genesis doesn't use flat black. We use DEEP PURPLE that creates depth, richness, and infinite possibility.
Primary Backgrounds
#0a0a0f Darkest backgrounds, footer#1A0A2E PRIMARY - The signature look#12081f Card backgrounds, depth#2a1a4a Subtle highlightsAccent Colors — The Vibrancy
#FFD700 Power, excellence#F5A623 Energy, urgency#00D9FF Innovation, key moments#22C55E Growth, success#8B5CF6 Wisdom, creativity#F97316 Energy, competition#EC4899 AI Agents, Level 04#EF4444 ALWAYS for "Industry" comparisonsIntelligence Level Colors
Each AI sophistication level has its own color. The color carries through to all cards in that category.
AI & Machine Learning
#3B82F6Deep Learning
#8B5CF6Generative AI
#22C55EAI Agents
#EC4899Agentic AI
#FFD700Genesis vs Industry
When comparing Genesis to the industry, Genesis uses the LEVEL COLOR and Industry is ALWAYS RED.
Self-hosted, your data stays private, no limits
Cloud-dependent, data sent to third parties
Genesis box uses the category's level color (cyan shown). Industry is ALWAYS red.
The "Vision" Effect
This animated fire gradient is the signature for the word "Vision" and key branded moments.
Carter said "Vision" is "fucking amazing."
The Richness
Cards and elements should glow with radial gradients, not sit flat.
Card Glow
Radial purple gradient from center, creating depth.
Timeline Node
Cyan glow with shadow spread for connection points.
Key Moment
Gold border and glow for THE climax moments.
Color Progression
When showing progress, colors BUILD to a climax.
Do's and Don'ts
✅ DO
- Use deep purple
#1A0A2Einstead of pure black - Add radial glow to cards for depth
- Color-code numbers by meaning
- Use the fire effect for "Vision"
- Create visual hierarchy with color progression
- Add subtle animations that feel alive
❌ DON'T
- Never use flat black backgrounds
- Never make all numbers the same color
- Never skip the glow effects on cards
- Never remove the "Vision" fire animation
- Never use muted colors for key moments
- Never forget the depth and richness
Available Tools — NEVER FORGET
All of these are INSTALLED and ready to use. Use the BEST tool for each job.
🎬 ANIMATION (USE GSAP FIRST)
gsap ^3.14.2 INDUSTRY STANDARD - Most powerful, use for complex animationsmotion ^12.24.7 Framer Motion - Great for React-style declarative animationssvelte-motion ^0.12.2 Svelte-specific motion libraryanimejs ^4.2.2 Lightweight, good for simple animationslottie-web ^5.13.0 JSON-based animations from After Effects🎨 3D & VISUALIZATION
three ^0.182.0 3D GRAPHICS - Use for concentric circles, 3D diagrams, WebGLd3 ^7.9.0 Data visualization - charts, graphs, custom SVG✨ PARTICLES & EFFECTS
tsparticles ^3.9.1 BEST particle system - confetti, snow, stars, connectionsparticles.js ^2.0.0 Classic particle backgroundscanvas-confetti ^1.9.4 Celebration effects, achievement moments🖥️ UI EFFECTS
locomotive-scroll ^4.1.4 Smooth scrolling, parallax effectstyped.js ^2.1.0 Typewriter text effect@splidejs/svelte-splide ^0.2.9 Carousels and sliders