ATLAS Meridia Style Guide

Colors

Click any swatch to copy its value. Click the variable name to copy the CSS custom property.

Navy Scale

300
#7d8690
Subtle text
400
#5c6672
Placeholder text
500
#3d4754
Muted elements
600
#2a3440
Tertiary elements
700
#1e2630
Secondary elements
800
#161c24
Elevated surfaces
900
#0e1318
Primary dark background
950
#08090c
Deepest navy, near-black

Cream Scale

50
#f8f6f1
Purest cream
100
#f3f0ea
Primary light background
200
#eae6de
Secondary light
300
#dfd9ce
Tertiary light
400
#d0c8bb
Borders
500
#b8b0a2
Muted cream

Accent Colors

Light
#ddb878
Light amber
Default
#c9924a
Primary amber-gold
Dark
#a87a3a
Dark amber
Deep
#8a6530
Deepest amber

Semantic Colors

Success
#6a9a70
Muted green
Error
#b05454
Muted red
Warning
#c9924a
Uses accent

Theme Variables

Dark Mode

--bg-primaryvar(--navy-900)
--text-primary#d5cab8
--text-muted#9a8f80

Light Mode

--bg-primaryvar(--cream-100)
--text-primaryvar(--navy-700)
--text-mutedvar(--navy-400)