Principles
Our color system is built on a foundation of clarity, purpose, and stadium energy. These principles guide every color choice.
Neutral-first: Ink and Surface carry every background; Stadli White handles contrast
Every accent use must have a clear reason — otherwise drop it
Deep neutrals as canvas, vibrant accents drive attention
Block-based layouts pair color fields with stark typography
High contrast readability across text, data, and UI
Photography and anchor content modules
Neutrals
The neutral palette forms the backbone of our UI, ensuring a clean, focused, and high-contrast experience. They should comprise at least 85% of any design.
Ink
#0B0B0EPrimary backgrounds and keylines
Surface
#121418Cards, panels, and contrast layers
Stadli White
#FFFFFFPrimary text, logos, icons
Surface Contrast
#171A1FSurface contrasts like borders and small neutral highlights
Text Secondary
#B7BEC7Secondary text and labels
Text Muted
#8B92A1Muted text, hints, and disabled states
Border
rgba(255,255,255,0.1)Standard component border
Accents
Accent colors are used sparingly (≤15%) to draw attention, convey meaning, and inject brand personality. Each family has a specific semantic purpose.
Magenta Blaze
Use for: Campaigns • Emotion: Excitement
light
#FF87C8
base
#FF2E9A
dark
#D40076
Aqua Teal
Use for: Engagement • Emotion: Freshness
light
#A3F9E8
base
#4CF3D1
dark
#00D1A7
Electric Orange
Use for: Revenue • Emotion: Urgency
light
#FF996F
base
#FF5A1F
dark
#D13A00
Sky Cyan
Use for: CRM • Emotion: Transparency
light
#98E5FF
base
#45D7FF
dark
#00B6E6
Radiant Yellow
Use for: Growth • Emotion: Optimism
light
#FFE992
base
#FFD93B
dark
#E6B800
Pulse Green
Use for: Loyalty • Emotion: Trust
light
#C2E0A6
base
#99CD64
dark
#72A93A
Stadium Purple
Use for: Innovation • Emotion: Creativity
light
#C59EFF
base
#9B5CFF
dark
#7426F2
Ember Red
Use for: Alerts • Emotion: Intensity
light
#FF9D9D
base
#FF4B4B
dark
#E01C1C
In Practice: Components & Usage
Here’s how our color system translates into real UI components and specific use-cases.
Feature Color Assignments
Key product areas are assigned a primary accent to create a consistent visual language.
Component States
Colors define the appearance and state of interactive elements across the platform.
Buttons
Note: Buttons are always neutral. Accents are reserved for focus rings.
Chips & Tags
Notifications
Success! Your campaign has been published.
Error: Payment failed. Please try again.
Photography & Application
Our brand prioritizes authentic, human moments. Colors and typography must complement photography without overpowering it, maintaining clarity and emotional impact.
Engagement
Turn cheers into
measurable revenue.
Text on Photography
When placing text over images, ensure readability by using a subtle gradient or scrim. Text should always be Stadli White. An optional "eyebrow" label can use an accent color to add semantic context, connecting the visual to a specific brand pillar like Engagement.
Accent for Emphasis
The brand voice is declarative and confident. A single word in a headline can be highlighted with an accent color to draw focus to a key concept. Use this technique sparingly for maximum impact.
Know every fan. Act on it.