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
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)
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
Spacing Scale
Effects
Glow Effect
box-shadow: 0 0 30px rgba(99, 102, 241, 0.6)
Hover Scale
hover:scale-105 transition-transform
