Foundations

Color Palette

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

Preview-Figma

Primary

primary-50

var(--primary-50)

#F2F0FF

primary-100

var(--primary-100)

#D6D2FF

primary-200

var(--primary-200)

#C2BCFF

primary-300

var(--primary-300)

#A79DFF

primary-400

var(--primary-400)

#958AFF

primary-500

var(--primary-500)

#7B6DFF

primary-600

var(--primary-600)

#7063E8

primary-700

var(--primary-700)

#574DB5

primary-800

var(--primary-800)

#443C8C

primary-900

var(--primary-900)

#342E6B

Neutral

neutral-1

var(--neutral-1)

#FDFDFD

neutral-2

var(--neutral-2)

#F6F6F7

neutral-3

var(--neutral-3)

#F1F1F2

neutral-4

var(--neutral-4)

#DDDCDF

neutral-5

var(--neutral-5)

#C6C5CA

neutral-6

var(--neutral-6)

#9897A0

neutral-7

var(--neutral-7)

#6A6876

neutral-8

var(--neutral-8)

#575665

neutral-9

var(--neutral-9)

#3C3A4C

neutral-10

var(--neutral-10)

#353345

neutral-11

var(--neutral-11)

#2B2A3D

neutral-12

var(--neutral-12)

#19172C

Teal

teal-50

var(--teal-50)

#E4FBF8

teal-100

var(--teal-100)

#D0FBF5

teal-200

var(--teal-200)

#C2F5EE

teal-300

var(--teal-300)

#84EBDD

teal-400

var(--teal-400)

#3FDEC9

teal-500

var(--teal-500)

#22D3BB

teal-600

var(--teal-600)

#1DAF9C

teal-700

var(--teal-700)

#178C7D

teal-800

var(--teal-800)

#1A7569

teal-900

var(--teal-900)

#16645A

teal-950

var(--teal-950)

#0B463E

Base Colors

white

var(--white)

#FFFFFF

black

var(--black)

#000000