Brand & Design System
Quick reference for colors, typography, and components.
Logo
Supervity logomark and usage
Light on dark
Dark on light
On gradient
Brand Colors
Primary palette - click to copy hex value
Navy (Primary)
#141A42
Headings, buttons, dark backgrounds
Cornflower
#8AA2DF
Accents, highlights, links
Purple
#535EA4
Gradients, secondary accents
Muted
#848EAA
Secondary text, labels
Light Grey
#E7E7E7
Backgrounds, borders
Black
#04060A
Dark mode backgrounds
UI Colors
Interface colors for backgrounds, cards, and states
Background
#F5F7FF
Card
#FFFFFF
Border
#E8EBF2
Destructive
#EF4444
Typography
Font families and scale
Funnel Display
Headings, titles, display text
Weights: 500, 600, 700
Geologica
Body text, UI elements, labels
Weights: 400, 500, 600
Type Scale
Display 1
Display 2
Display 3
Heading Large
Heading Medium
Heading Small
Body text - The quick brown fox jumps over the lazy dog.
Small text - Secondary information and labels
Extra small - Captions and metadata
Micro Label
Shadows
Elevation and depth system
Glass
shadow-glass
Glass Hover
shadow-glass-hover
Accent
shadow-accent
Float
shadow-float
Float Large
shadow-float-lg
Components
Button variants and states
Buttons
Sizes
Gradients
Brand gradients for backgrounds and accents
CSS Variables
Quick reference for Tailwind classes and CSS variables
| Tailwind Class | CSS Variable | Usage |
|---|---|---|
| bg-background | --background | Page background |
| text-foreground | --foreground | Primary text color |
| bg-brand-navy | #141A42 | Brand navy color |
| bg-brand-cornflower | #8AA2DF | Brand cornflower color |
| text-brand-muted | #848EAA | Muted text color |
| font-display | --font-funnel | Display/heading font |
| font-sans | --font-geologica | Body text font |