V1.0

Foundations

Color Palette

A set of core colors that stay consistent across themes, alongside themeable colors that adapt seamlessly to the active theme.

gray
gray-0
var(--gray-0)
gray-50
var(--gray-50)
gray-100
var(--gray-100)
gray-200
var(--gray-200)
gray-300
var(--gray-300)
gray-400
var(--gray-400)
gray-500
var(--gray-500)
gray-600
var(--gray-600)
gray-700
var(--gray-700)
gray-800
var(--gray-800)
gray-900
var(--gray-900)
gray-950
var(--gray-950)
gray Alpha
gray-alpha-24
var(--gray-alpha-24)
gray-alpha-16
var(--gray-alpha-16)
gray-alpha-10
var(--gray-alpha-10)
slate
slate-0
var(--slate-0)
slate-50
var(--slate-50)
slate-100
var(--slate-100)
slate-200
var(--slate-200)
slate-300
var(--slate-300)
slate-400
var(--slate-400)
slate-500
var(--slate-500)
slate-600
var(--slate-600)
slate-700
var(--slate-700)
slate-800
var(--slate-800)
slate-900
var(--slate-900)
slate-950
var(--slate-950)
slate Alpha
slate-alpha-24
var(--slate-alpha-24)
slate-alpha-16
var(--slate-alpha-16)
slate-alpha-10
var(--slate-alpha-10)
blue
blue-50
var(--blue-50)
blue-100
var(--blue-100)
blue-200
var(--blue-200)
blue-300
var(--blue-300)
blue-400
var(--blue-400)
blue-500
var(--blue-500)
blue-600
var(--blue-600)
blue-700
var(--blue-700)
blue-800
var(--blue-800)
blue-900
var(--blue-900)
blue-950
var(--blue-950)
blue Alpha
blue-alpha-24
var(--blue-alpha-24)
blue-alpha-16
var(--blue-alpha-16)
blue-alpha-10
var(--blue-alpha-10)
orange
orange-50
var(--orange-50)
orange-100
var(--orange-100)
orange-200
var(--orange-200)
orange-300
var(--orange-300)
orange-400
var(--orange-400)
orange-500
var(--orange-500)
orange-600
var(--orange-600)
orange-700
var(--orange-700)
orange-800
var(--orange-800)
orange-900
var(--orange-900)
orange-950
var(--orange-950)
orange Alpha
orange-alpha-24
var(--orange-alpha-24)
orange-alpha-16
var(--orange-alpha-16)
orange-alpha-10
var(--orange-alpha-10)
red
red-50
var(--red-50)
red-100
var(--red-100)
red-200
var(--red-200)
red-300
var(--red-300)
red-400
var(--red-400)
red-500
var(--red-500)
red-600
var(--red-600)
red-700
var(--red-700)
red-800
var(--red-800)
red-900
var(--red-900)
red-950
var(--red-950)
red Alpha
red-alpha-24
var(--red-alpha-24)
red-alpha-16
var(--red-alpha-16)
red-alpha-10
var(--red-alpha-10)
green
green-50
var(--green-50)
green-100
var(--green-100)
green-200
var(--green-200)
green-300
var(--green-300)
green-400
var(--green-400)
green-500
var(--green-500)
green-600
var(--green-600)
green-700
var(--green-700)
green-800
var(--green-800)
green-900
var(--green-900)
green-950
var(--green-950)
green Alpha
green-alpha-24
var(--green-alpha-24)
green-alpha-16
var(--green-alpha-16)
green-alpha-10
var(--green-alpha-10)
yellow
yellow-50
var(--yellow-50)
yellow-100
var(--yellow-100)
yellow-200
var(--yellow-200)
yellow-300
var(--yellow-300)
yellow-400
var(--yellow-400)
yellow-500
var(--yellow-500)
yellow-600
var(--yellow-600)
yellow-700
var(--yellow-700)
yellow-800
var(--yellow-800)
yellow-900
var(--yellow-900)
yellow-950
var(--yellow-950)
yellow Alpha
yellow-alpha-24
var(--yellow-alpha-24)
yellow-alpha-16
var(--yellow-alpha-16)
yellow-alpha-10
var(--yellow-alpha-10)
purple
purple-50
var(--purple-50)
purple-100
var(--purple-100)
purple-200
var(--purple-200)
purple-300
var(--purple-300)
purple-400
var(--purple-400)
purple-500
var(--purple-500)
purple-600
var(--purple-600)
purple-700
var(--purple-700)
purple-800
var(--purple-800)
purple-900
var(--purple-900)
purple-950
var(--purple-950)
purple Alpha
purple-alpha-24
var(--purple-alpha-24)
purple-alpha-16
var(--purple-alpha-16)
purple-alpha-10
var(--purple-alpha-10)
sky
sky-50
var(--sky-50)
sky-100
var(--sky-100)
sky-200
var(--sky-200)
sky-300
var(--sky-300)
sky-400
var(--sky-400)
sky-500
var(--sky-500)
sky-600
var(--sky-600)
sky-700
var(--sky-700)
sky-800
var(--sky-800)
sky-900
var(--sky-900)
sky-950
var(--sky-950)
sky Alpha
sky-alpha-24
var(--sky-alpha-24)
sky-alpha-16
var(--sky-alpha-16)
sky-alpha-10
var(--sky-alpha-10)
pink
pink-50
var(--pink-50)
pink-100
var(--pink-100)
pink-200
var(--pink-200)
pink-300
var(--pink-300)
pink-400
var(--pink-400)
pink-500
var(--pink-500)
pink-600
var(--pink-600)
pink-700
var(--pink-700)
pink-800
var(--pink-800)
pink-900
var(--pink-900)
pink-950
var(--pink-950)
pink Alpha
pink-alpha-24
var(--pink-alpha-24)
pink-alpha-16
var(--pink-alpha-16)
pink-alpha-10
var(--pink-alpha-10)
teal
teal-50
var(--teal-50)
teal-100
var(--teal-100)
teal-200
var(--teal-200)
teal-300
var(--teal-300)
teal-400
var(--teal-400)
teal-500
var(--teal-500)
teal-600
var(--teal-600)
teal-700
var(--teal-700)
teal-800
var(--teal-800)
teal-900
var(--teal-900)
teal-950
var(--teal-950)
teal Alpha
teal-alpha-24
var(--teal-alpha-24)
teal-alpha-16
var(--teal-alpha-16)
teal-alpha-10
var(--teal-alpha-10)
static
static-black
var(--static-black)
static-white
var(--static-white)
neutral
neutral-0
var(--neutral-0)
neutral-50
var(--neutral-50)
neutral-100
var(--neutral-100)
neutral-200
var(--neutral-200)
neutral-300
var(--neutral-300)
neutral-400
var(--neutral-400)
neutral-500
var(--neutral-500)
neutral-600
var(--neutral-600)
neutral-700
var(--neutral-700)
neutral-800
var(--neutral-800)
neutral-900
var(--neutral-900)
neutral-950
var(--neutral-950)
neutral Alpha
neutral-alpha-24
var(--neutral-alpha-24)
neutral-alpha-16
var(--neutral-alpha-16)
neutral-alpha-10
var(--neutral-alpha-10)
text
text-strong-950
var(--text-strong-950)
text-sub-600
var(--text-sub-600)
text-soft-400
var(--text-soft-400)
text-disabled-300
var(--text-disabled-300)
text-white-0
var(--text-white-0)
bg
bg-strong-950
var(--bg-strong-950)
bg-surface-800
var(--bg-surface-800)
bg-sub-300
var(--bg-sub-300)
bg-soft-200
var(--bg-soft-200)
bg-weak-50
var(--bg-weak-50)
bg-white-0
var(--bg-white-0)
stroke
stroke-strong-950
var(--stroke-strong-950)
stroke-sub-300
var(--stroke-sub-300)
stroke-soft-200
var(--stroke-soft-200)
stroke-white-0
var(--stroke-white-0)
primary
primary-dark
var(--primary-dark)
primary-darker
var(--primary-darker)
primary-base
var(--primary-base)
primary Alpha
primary-alpha-24
var(--primary-alpha-24)
primary-alpha-16
var(--primary-alpha-16)
primary-alpha-10
var(--primary-alpha-10)
faded
faded-dark
var(--faded-dark)
faded-base
var(--faded-base)
faded-light
var(--faded-light)
faded-lighter
var(--faded-lighter)
information
information-dark
var(--information-dark)
information-base
var(--information-base)
information-light
var(--information-light)
information-lighter
var(--information-lighter)
warning
warning-dark
var(--warning-dark)
warning-base
var(--warning-base)
warning-light
var(--warning-light)
warning-lighter
var(--warning-lighter)
error
error-dark
var(--error-dark)
error-base
var(--error-base)
error-light
var(--error-light)
error-lighter
var(--error-lighter)
success
success-dark
var(--success-dark)
success-base
var(--success-base)
success-light
var(--success-light)
success-lighter
var(--success-lighter)
away
away-dark
var(--away-dark)
away-base
var(--away-base)
away-light
var(--away-light)
away-lighter
var(--away-lighter)
feature
feature-dark
var(--feature-dark)
feature-base
var(--feature-base)
feature-light
var(--feature-light)
feature-lighter
var(--feature-lighter)
verified
verified-dark
var(--verified-dark)
verified-base
var(--verified-base)
verified-light
var(--verified-light)
verified-lighter
var(--verified-lighter)
highlighted
highlighted-dark
var(--highlighted-dark)
highlighted-base
var(--highlighted-base)
highlighted-light
var(--highlighted-light)
highlighted-lighter
var(--highlighted-lighter)
stable
stable-dark
var(--stable-dark)
stable-base
var(--stable-base)
stable-light
var(--stable-light)
stable-lighter
var(--stable-lighter)
social
social-apple
var(--social-apple)
social-twitter
var(--social-twitter)
social-github
var(--social-github)
social-notion
var(--social-notion)
social-tidal
var(--social-tidal)
social-amazon
var(--social-amazon)
social-zendesk
var(--social-zendesk)
© 2024 AlignUI Design System. All rights reserved.