Color

Text

#3f3934
primary
Collection
ads-colors
#77706a
secondary
Collection
ads-colors
#a49d97
disabled
Collection
ads-colors
#ffffff
on-color
Collection
ads-colors
#006e8b
interactive
Collection
ads-colors
#002e40
interactive-hover
Collection
ads-colors
#005067
link
Collection
ads-colors
#742d32
destructive
Collection
ads-colors
#005747
success
Collection
ads-colors
#584600
warning
Collection
ads-colors
#623363
info
Collection
ads-colors

Icon

icon
#77706a
primary
Collection
ads-colors
#3f3934
primary-hover
Collection
ads-colors
#a49d97
subtle
Collection
ads-colors
#a49d97
disabled
Collection
ads-colors
#3f3934
emphasis
Collection
ads-colors
#ffffff
on-color
Collection
ads-colors
rgba(255,255,255,0.6)
on-color-subtle
Collection
ads-colors
#005067
interactive-strong
Collection
ads-colors
#006e8b
interactive
Collection
ads-colors
#409cbb
interactive-subtle
Collection
ads-colors
#b32038
destructive
Collection
ads-colors
#007562
success
Collection
ads-colors
#d0a600
warning
Collection
ads-colors
#7f4e81
info
Collection
ads-colors
#77706a
folder
Collection
ads-colors

Border

border
#e0dddb
primary
Collection
ads-colors
#eeeae8
primary-subtle
Collection
ads-colors
#c0bdba
strong
Collection
ads-colors
#a49d97
emphasis
Collection
ads-colors
#3f3934
dark
Collection
ads-colors
#ffffff
on-color
Collection
ads-colors
#006e8b
interactive
Collection
ads-colors
#cae3ed
interactive-subtle
Collection
ads-colors
#002e40
interactive-strong
Collection
ads-colors
#b32038
destructive
Collection
ads-colors
#fed2d1
destructive-subtle
Collection
ads-colors
#005747
success
Collection
ads-colors
#cae5dd
success-subtle
Collection
ads-colors
#584600
warning
Collection
ads-colors
#efdea5
warning-subtle
Collection
ads-colors
#623363
info
Collection
ads-colors
#e4d9ed
info-subtle
Collection
ads-colors
rgba(0,0,0,0.08)
outlineDark
Used to add a subtle outline by by layering a dark overlay (#000 8%)
Collection
ads-colors
rgba(255,255,255,0.08)
outlineLight
Used to add a subtle outline by by layering a light overlay (#FFFFFF 8%)
Collection
ads-colors

Background

bg
#ffffff
primary
Collection
ads-colors
#f4f1ef
primary-hover
Collection
ads-colors
#faf8f6
secondary
Collection
ads-colors
#eeeae8
secondary-hover
Collection
ads-colors
#f4f1ef
tertiary
Collection
ads-colors
#e0dddb
tertiary-hover
Collection
ads-colors
#e0dddb
emphasis
Collection
ads-colors
#f4f1ef
disabled
Collection
ads-colors
#c0bdba
disabled-strong
Collection
ads-colors
#c0bdba
strong
Collection
ads-colors
#a49d97
strong-hover
Collection
ads-colors
#d7f0fa
interactive-subtle
Collection
ads-colors
#006e8b
interactive
Collection
ads-colors
#005067
interactive-strong
Collection
ads-colors
#150e28
header
Collection
ads-colors
#b32038
destructive
Collection
ads-colors
#ffe5de
destructive-subtle
Collection
ads-colors
#742d32
destructive-strong
Collection
ads-colors
#007562
success
Collection
ads-colors
#daf6ee
success-subtle
Collection
ads-colors
#776107
warning
Collection
ads-colors
#f6ebc6
warning-subtle
Collection
ads-colors
#623363
info
Collection
ads-colors
#f4eaff
info-subtle
Collection
ads-colors
#3f3934
dark
Collection
ads-colors
#d5ff9f
highlight
Collection
ads-colors
#eeeae8
selectedControl
Collection
ads-colors
#e0dddb
selectedControlHover
Collection
ads-colors
bg / overlay
rgba(0,46,64,0.33)
overlay-modal
Collection
ads-colors
rgba(0,46,64,0.6)
overlay-lightbox
Collection
ads-colors
rgba(0,46,64,0.33)
overlay-takeover
Collection
ads-colors
rgba(0,0,0,0.72)
darkOverlay
Collection
ads-colors

Utility

utility / interactive
#005067
100
Collection
ads-colors
#006e8b
50
Collection
ads-colors
#d7f0fa
10
Collection
ads-colors
utility / warning
#584600
100
Collection
ads-colors
#776107
50
Collection
ads-colors
#f6ebc6
10
Collection
ads-colors
utility / info
#623363
100
Collection
ads-colors
#7f4e81
50
Collection
ads-colors
#f4eaff
10
Collection
ads-colors
utility / negative
#742d32
100
Collection
ads-colors
#b32038
50
Collection
ads-colors
#ffe4e3
10
Collection
ads-colors
utility / positive
#005747
100
Collection
ads-colors
#007562
50
Collection
ads-colors
#daf6ee
10
Collection
ads-colors

Data visualization colors

data-viz
#623363
purple-80
Collection
ads-colors
#9c3bb8
purple-60
Collection
ads-colors
#5056b6
violet-80
Collection
ads-colors
#00593d
green-80
Collection
ads-colors
#13a07f
green-55
Collection
ads-colors
#0c3d63
midnight-80
Collection
ads-colors
#15707a
ocean-80
Collection
ads-colors
#32a0c5
cyan-40
Collection
ads-colors
#c13043
red-70
Collection
ads-colors
#e23d51
red-55
Collection
ads-colors
#ee6b47
salmon-55
Collection
ads-colors
#cf7604
cognac-80
Collection
ads-colors
#ff4c81
flamingo-100
Collection
ads-colors
#a49d97
gray-50
Collection
ads-colors

Base palette

base / secondary / mustard
#584600
80
Collection
ads-colors
#776107
60
Collection
ads-colors
#d0a600
50
Collection
ads-colors
#efdea5
20
Collection
ads-colors
#f6ebc6
10
Collection
ads-colors
base / secondary / salmon
#703324
80
Collection
ads-colors
#932e14
60
Collection
ads-colors
#ff8162
50
Collection
ads-colors
#ffd1c4
20
Collection
ads-colors
#ffe5de
10
Collection
ads-colors
base / primary / red
#742d32
80
Collection
ads-colors
#b32038
60
Collection
ads-colors
#ec515f
50
Collection
ads-colors
#fed2d1
20
Collection
ads-colors
#ffe4e3
10
Collection
ads-colors
base / primary / cyan
#002e40
90
Collection
ads-colors
#005067
80
Collection
ads-colors
#006e8b
60
Collection
ads-colors
#409cbb
50
Collection
ads-colors
#cae3ed
20
Collection
ads-colors
#d7f0fa
10
Collection
ads-colors
#e8f8ff
5
Collection
ads-colors
base / primary / gray
#1a1510
90
Collection
ads-colors
#3f3934
80
Collection
ads-colors
#77706a
60
Collection
ads-colors
#a49d97
50
Collection
ads-colors
#c0bdba
20
Collection
ads-colors
#e0dddb
15
Collection
ads-colors
#eeeae8
10
Collection
ads-colors
#f4f1ef
5
Collection
ads-colors
#faf8f6
1
Collection
ads-colors
#ffffff
white
Collection
ads-colors
#000000
black
Collection
ads-colors
rgba(0,0,0,0)
transparent
Collection
ads-colors
base / primary / purple
#623363
80
Collection
ads-colors
#6a266d
100
Collection
ads-colors
#7f4e81
60
Collection
ads-colors
#a57db9
50
Collection
ads-colors
#e4d9ed
20
Collection
ads-colors
#f4eaff
10
Collection
ads-colors
base / primary / green
#005747
80
Collection
ads-colors
#007562
60
Collection
ads-colors
#40a28e
50
Collection
ads-colors
#cae5dd
20
Collection
ads-colors
#daf6ee
10
Collection
ads-colors
base / primary / grey
#b8b1b4
35
Collection
ads-colors
base / tertiary
#10594b
forest-100
Collection
ads-colors
#bd5b00
warning-100
Collection
ads-colors
#dfcfeb
lavenderLighten-40
Collection
ads-colors
#f8f5fb
lavenderLighten-100
Collection
ads-colors
#5156ba
violet-80
Collection
ads-colors
base / tertiary / brand
#150e28
dark-100
Collection
ads-colors
#fffbf7
light-100
Collection
ads-colors
#d5ff9f
neon-100
Collection
ads-colors
#fdbca7
coral-100
Collection
ads-colors
#399c88
green-100
Collection
ads-colors
#94cdac
green-50
Collection
ads-colors
#085b73
teal-100
Collection
ads-colors
#348e9f
teal-50
Collection
ads-colors
#d1c9c0
neutral-1
Collection
ads-colors
#e4dcd6
neutral-2
Collection
ads-colors
#f4f1ed
neutral-3
Collection
ads-colors
base / tertiary / accent
#08304f
midnight-100
Collection
ads-colors
#0f4d53
ocean-100
Collection
ads-colors
#32c9c7
seabreeze-100
Collection
ads-colors
#c8f071
lime-100
Collection
ads-colors
#f2ec48
lemon-100
Collection
ads-colors
#f8910e
tangerine-100
Collection
ads-colors
#ff4c81
flamingo-100
Collection
ads-colors
#ffa7d2
cottoncandy-100
Collection
ads-colors
Color
Contrast
Borders
Overview
Aurora Design System

Made with love by Iterable Design ♥

Resources
Storybook Figma Slack channel

© 2026 Aurora Design System. Page last updated on Jul 1, 2024, 22:37