Brand Guidelines
Design system and visual identity for Made
Logo
Agent Colors
Each agent has a unique color identity for instant recognition.
Milo
Creative Director
Zara
Community Manager
Remi
Content Producer
Lila
Distribution Manager
Amie
Relationship Manager
Enzo
Strategist
Agent Gradients
Gradient backgrounds used on each agent’s showcase page.
Milo
linear-gradient(to bottom right, #1e3a8a, #1e40af, #000000)
Zara
linear-gradient(to top left, #F29B28, #FEDB4D)
Remi
linear-gradient(to bottom right, #581c87, #6b21a8, #000000)
Lila
linear-gradient(to bottom right, #7f1d1d, #991b1b, #000000)
Amie
linear-gradient(to bottom right, #F5962D, #F1762F, #E7601E)
Enzo
linear-gradient(to bottom right, #14532d, #166534, #000000)
Brand Colors
Core colors used throughout the interface.
Made Dark
Primary background
#0A0A0FMade Dark Secondary
Secondary background
#1A1A2EMade Dark Accent
Accent background
#16162AGradient Start
Primary gradient
#6366F1Gradient End
Primary gradient
#EC4899White
Text & borders
#FFFFFFTypography
Fonts
Primary Font
System UI
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Monospace Font
Space Mono
Used for technical elements, data displays, and code
Type Scale
Components
Buttons
Cards & Glass Effects
Standard Card
bg-[#1A1A2E] with border
Glass Card
bg-white/5 backdrop-blur-lg
Dark Glass
bg-black/20 backdrop-blur-lg
Border Radius
Agent Avatars
Visual representations of each AI agent.
Milo
Zara
Remi
Lila
Amie
Enzo
Spacing Scale
Effects
Glow Effect
box-shadow: 0 0 30px rgba(99, 102, 241, 0.6)
Hover Scale
hover:scale-105 transition-transform
