Color
Our blue is iconic. Visible for blocks. It's our most identifiable asset, from the color of our brand to our logo.
We're leaning into a family of blues to leverage brand recognition. Fresh and inviting, this expanded palette nods subtly to our heritage and propels us into a global future. We always ensure a presence of brand blues, either within the composition or through the presence of a logo.
Color System
Primary Colors
Our core identity palette
Sky Mist
HEX: #E7F2FD
Sky Mist (100)
Light Azure
HEX: #B0D7FA
Light Azure (200)
Clear Blue
HEX: #509EE3
Clear Blue (400)
Core Blue
HEX: #227FD2
Core Blue (500)
Ocean Blue
HEX: #0E66B5
Ocean Blue (600)
Deep Sea
HEX: #033868
Deep Sea (800)
Midnight Blue
HEX: #03223D
Midnight Blue (900)
Secondary Colors
Supporting accent palette
Frost Mint
HEX: #DAEAEA
Frost Mint (100)
Cool Aqua
HEX: #B5E7E7
Cool Aqua (300)
Teal Breeze
HEX: #69C8C8
Teal Breeze (500)
Emerald Depth
HEX: #186060
Emerald Depth (800)
Forest Night
HEX: #103D3D
Forest Night (900)
Neutral Colors
Foundation for layouts and typography
White
HEX: #FFFFFF
White (0)
Ghost White
HEX: #F0F2F4
Ghost White (100)
Whisper Gray
HEX: #E3E6E9
Whisper Gray (200)
Platinum
HEX: #C8CCD0
Platinum (300)
Silver
HEX: #AEB3B8
Silver (400)
Pewter
HEX: #93999F
Pewter (500)
Slate
HEX: #6E7377
Slate (600)
Charcoal
HEX: #56595D
Charcoal (700)
Onyx
HEX: #303336
Onyx (800)
Midnight
HEX: #181A1B
Midnight (900)
Black
HEX: #000000
Black (1000)
Success Colors
Positive feedback and confirmation
Lime Frost
HEX: #EBFADB
Success states (100)
Fresh Meadow
HEX: #88BF4D
Success states (400)
Leaf Green
HEX: #689636
Success states (500)
Moss Grove
HEX: #24380D
Success states (800)
Pine Forest
HEX: #162307
Success states (900)
Danger Colors
Error states and critical alerts
Rose Mist
HEX: #FFDFDF
Error states (100)
Coral Blush
HEX: #F67777
Error states (400)
Crimson Flame
HEX: #E75454
Error states (500)
Dark Ruby
HEX: #610D0D
Error states (800)
Bloodstone
HEX: #3C0808
Error states (900)
Warning Colors
Cautionary notifications
Sunbeam Cream
HEX: #FFF6DB
Warning states (100)
Golden Maize
HEX: #F9D45C
Warning states (400)
Amber Flame
HEX: #F7C41F
Warning states (500)
Burnished Bronze
HEX: #765B04
Warning states (800)
Dark Amber
HEX: #4E3C01
Warning states (900)
Color Combinations
Primary Combinations
Core brand pairings
Used for: Button
Contrast: 4.5:1
Background: #227FD2
Text: #FFFFFF
Used for: Alert
Contrast: 4.6:1
Background: #509EE3
Text: #000000
Used for: Card
Contrast: 12:1
Background: #E7F2FD
Text: #03223D
Secondary Combinations
Supporting accent pairings
Used for: Secondary Button
Contrast: 4.8:1
Background: #69C8C8
Text: #000000
Used for: Panel
Contrast: 12:1
Background: #DAEAEA
Text: #103D3D
Used for: Footer
Contrast: 8:1
Background: #186060
Text: #FFFFFF
Feedback Combinations
Status and notification pairings
Used for: Success Alert
Contrast: 10:1
Background: #EBFADB
Text: #24380D
Used for: Error Alert
Contrast: 10:1
Background: #FFDFDF
Text: #610D0D
Used for: Warning Alert
Contrast: 10:1
Background: #FFF6DB
Text: #765B04
Signature Gradients
Dynamic brand transitions
Used for: Core UI surfaces
Like Scandinavian twilight meeting fresh glacier water
Contrast: 4.5:1
Gradient: #0E66B5 → #69C8C8
Text: #FFFFFF
Used for: Creative cards, inspirational quotes, team highlights, or UX moments that need emotional depth.
A vibrant, sophisticated combo of cool and warm — your expressive branding moment.
Contrast: 5:1
Gradient: #509ee3 → #F67777
Text: #FFFFFF
Used for: Celebration moments
Golden morning sun meets fiery ambition
Contrast: 4.5:1
Gradient: #F7C41F → #E75454
Text: #000000
Functional Gradients
Purpose-driven transitions
Used for: Success Banner
Growth and achievement
Contrast: 7:1
Gradient: #88BF4D → #24380D
Text: #FFFFFF
Used for: Warning Banner
Caution and attention
Contrast: 5:1
Gradient: #F9D45C → #765B04
Text: #FFFFFF
Used for: Information Banner
Balanced and professional
Contrast: 7:1
Gradient: #E3E6E9 → #6E7377
Text: #000000
Magazine Showcase
