These colors are used throughout the system as the main color palette. Together they create the visual hierarchy and ensure consistency across the application.
Brand Colors
Primary brand identity colors
brand
#33a3cc
hsla(196.08,60%,50%,1)
accent
#845af6
hsla(256.15,89.66%,65.88%,1)
neutral
#dbdff0
hsla(228.57,41.18%,90%,1)
Spectre Colors
Full spectrum of color variations
red
#fe3537
hsla(359.4,99.01%,60.2%,1)
yellow
#ecbb35
hsla(43.93,82.81%,56.67%,1)
orange
#fea037
hsla(31.66,99%,60.59%,1)
green
#66cc76
hsla(129.41,50%,60%,1)
teal
#56efeb
hsla(178.43,82.7%,63.73%,1)
blue
#6179f5
hsla(230.27,88.1%,67.06%,1)
purple
#7349eb
hsla(255.56,80.2%,60.39%,1)
pink
#f353d9
hsla(309.75,86.96%,63.92%,1)
white
#ffffff
hsla(0,0%,100%,1)
gray
#7f8081
hsla(210,0.79%,50.2%,1)
black
#000000
hsla(0,0%,0%,1)
Interface Colors
Colors used for UI structure and hierarchy
base
#f1f3f9
hsla(225,40%,96.08%,1)
surface
#fbfcfe
hsla(220,60%,99.02%,1)
panel
#f6f7fc
hsla(230,50%,97.65%,1)
card
#ffffff
hsla(0,0%,100%,1)
overlay
#fbfcfe
hsla(220,60%,99.02%,1)
primary
#3c3d43
hsla(231.43,5.51%,24.9%,1)
secondary
#5d5f67
hsla(228,5.1%,38.43%,1)
tertiary
#80828d
hsla(230.77,5.39%,52.75%,1)
Feedback Colors
Colors used for system feedback and alerts
success
#4b9957
hsla(129.23,34.21%,44.71%,1)
info
#5970e3
hsla(230,71.13%,61.96%,1)
warning
#c07827
hsla(31.76,66.23%,45.29%,1)
error
#ec3032
hsla(359.36,83.19%,55.69%,1)
Contrast Colors
Colors used for text and background contrast
dark
#f2f6f7
hsla(192,23.81%,95.88%,1)
light
#0f1719
hsla(192,25%,7.84%,1)
Palette Colors
Complete color palettes with all available shades and variations.
Base Palettes
Foundation color palettes for the system
brands
palette.brands.0
#edf6fa
hsla(198.46,56.52%,95.49%,1)
palette.brands.1
#d4e9f4
hsla(200.63,59.26%,89.41%,1)
palette.brands.2
#badded
hsla(198.82,58.62%,82.94%,1)
palette.brands.3
#a1d0e6
hsla(199.13,57.98%,76.67%,1)
palette.brands.4
#86c4df
hsla(198.2,58.17%,70%,1)
palette.brands.5
#6ab7d8
hsla(198,58.51%,63.14%,1)
palette.brands.6
#4babd0
hsla(196.69,58.59%,55.49%,1)
palette.brands.7
#2f97bd
hsla(196.06,60.17%,46.27%,1)
palette.brands.8
#247a99
hsla(195.9,61.9%,37.06%,1)
palette.brands.9
#1a5e77
hsla(196.13,64.14%,28.43%,1)
palette.brands.10
#104356
hsla(196.29,68.63%,20%,1)
palette.brands.11
#072a37
hsla(196.25,77.42%,12.16%,1)
accents
palette.accents.0
#f1efff
hsla(247.5,100%,96.86%,1)
palette.accents.1
#dfdaff
hsla(248.11,100%,92.75%,1)
palette.accents.2
#cdc5ff
hsla(248.28,100%,88.63%,1)
palette.accents.3
#bbafff
hsla(249,100%,84.31%,1)
palette.accents.4
#ab99fe
hsla(250.69,98.06%,79.8%,1)
palette.accents.5
#9b82fb
hsla(252.4,93.8%,74.71%,1)
palette.accents.6
#8c6af8
hsla(254.37,91.03%,69.41%,1)
palette.accents.7
#7a53e4
hsla(256.14,72.86%,60.98%,1)
palette.accents.8
#6242ba
hsla(256,47.62%,49.41%,1)
palette.accents.9
#4b3190
hsla(256.42,49.22%,37.84%,1)
palette.accents.10
#352269
hsla(256.06,51.08%,27.25%,1)
palette.accents.11
#201345
hsla(255.6,56.82%,17.25%,1)
neutrals
palette.neutrals.0
#fbfcfe
hsla(220,60%,99.02%,1)
palette.neutrals.1
#f6f7fc
hsla(230,50%,97.65%,1)
palette.neutrals.2
#f1f3f9
hsla(225,40%,96.08%,1)
palette.neutrals.3
#edeff7
hsla(228,38.46%,94.9%,1)
palette.neutrals.4
#e8eaf5
hsla(230.77,39.39%,93.53%,1)
palette.neutrals.5
#e3e6f3
hsla(228.75,40%,92.16%,1)
palette.neutrals.6
#dee2f1
hsla(227.37,40.43%,90.78%,1)
palette.neutrals.7
#cbcfdf
hsla(228,23.81%,83.53%,1)
palette.neutrals.8
#a5a8b5
hsla(228.75,9.76%,67.84%,1)
palette.neutrals.9
#80828d
hsla(230.77,5.39%,52.75%,1)
palette.neutrals.10
#5d5f67
hsla(228,5.1%,38.43%,1)
palette.neutrals.11
#3c3d43
hsla(231.43,5.51%,24.9%,1)
Monochrome Palettes
Grayscale and neutral color variations
darks
palette.darks.0
#f1f5f7
hsla(200,27.27%,95.69%,1)
palette.darks.1
#edf1f6
hsla(213.33,33.33%,94.71%,1)
palette.darks.2
#eaeef5
hsla(218.18,35.48%,93.92%,1)
palette.darks.3
#e6eaf4
hsla(222.86,38.89%,92.94%,1)
palette.darks.4
#e3e7f3
hsla(225,40%,92.16%,1)
palette.darks.5
#e0e4f1
hsla(225.88,37.78%,91.18%,1)
lights
palette.lights.0
#171f22
hsla(196.36,19.3%,11.18%,1)
palette.lights.1
#31393d
hsla(200,10.91%,21.57%,1)
palette.lights.2
#4e555c
hsla(210,8.24%,33.33%,1)
palette.lights.3
#6c737b
hsla(212,6.49%,45.29%,1)
palette.lights.4
#8c929d
hsla(218.82,7.98%,58.24%,1)
palette.lights.5
#adb2c0
hsla(224.21,13.1%,71.57%,1)
Spectral Palettes
Full spectrum of color variations
reds
palette.reds.0
#ffeeeb
hsla(9,100%,96.08%,1)
palette.reds.1
#ffd6d0
hsla(7.66,100%,90.78%,1)
palette.reds.2
#ffbeb6
hsla(6.58,100%,85.69%,1)
palette.reds.3
#ffa69b
hsla(6.6,100%,80.39%,1)
palette.reds.4
#ff8c81
hsla(5.24,100%,75.29%,1)
palette.reds.5
#ff7066
hsla(3.92,100%,70%,1)
palette.reds.6
#ff4f4a
hsla(1.66,100%,64.51%,1)
palette.reds.7
#ec3032
hsla(359.36,83.19%,55.69%,1)
palette.reds.8
#c02527
hsla(359.23,67.69%,44.9%,1)
palette.reds.9
#951b1c
hsla(359.51,69.32%,34.51%,1)
palette.reds.10
#6d1112
hsla(359.35,73.02%,24.71%,1)
palette.reds.11
#470808
hsla(0,79.75%,15.49%,1)
yellows
palette.yellows.0
#fdf9ee
hsla(44,78.95%,96.27%,1)
palette.yellows.1
#fbf0d6
hsla(42.16,82.22%,91.18%,1)
palette.yellows.2
#f8e7be
hsla(42.41,80.56%,85.88%,1)
palette.yellows.3
#f6dda5
hsla(41.48,81.82%,80.59%,1)
palette.yellows.4
#f3d48b
hsla(42.12,81.25%,74.9%,1)
palette.yellows.5
#f0cb6f
hsla(42.79,81.13%,68.82%,1)
palette.yellows.6
#eec14f
hsla(43.02,82.38%,62.16%,1)
palette.yellows.7
#dbad30
hsla(43.86,70.37%,52.35%,1)
palette.yellows.8
#b28c25
hsla(43.83,65.58%,42.16%,1)
palette.yellows.9
#8a6c1b
hsla(43.78,67.27%,32.35%,1)
palette.yellows.10
#654e11
hsla(43.57,71.19%,23.14%,1)
palette.yellows.11
#423208
hsla(43.45,78.38%,14.51%,1)
oranges
palette.oranges.0
#fff6ed
hsla(30,100%,96.47%,1)
palette.oranges.1
#ffead5
hsla(30,100%,91.76%,1)
palette.oranges.2
#ffddbc
hsla(29.55,100%,86.86%,1)
palette.oranges.3
#ffd0a3
hsla(29.35,100%,81.96%,1)
palette.oranges.4
#ffc38a
hsla(29.23,100%,77.06%,1)
palette.oranges.5
#ffb66e
hsla(29.79,100%,71.57%,1)
palette.oranges.6
#ffa84f
hsla(30.34,100%,65.49%,1)
palette.oranges.7
#ec9432
hsla(31.61,83.04%,56.08%,1)
palette.oranges.8
#c07827
hsla(31.76,66.23%,45.29%,1)
palette.oranges.9
#955c1c
hsla(31.74,68.36%,34.71%,1)
palette.oranges.10
#6d4212
hsla(31.65,71.65%,24.9%,1)
palette.oranges.11
#472908
hsla(31.43,79.75%,15.49%,1)
greens
palette.greens.0
#f1faf1
hsla(120,47.37%,96.27%,1)
palette.greens.1
#ddf4df
hsla(125.22,51.11%,91.18%,1)
palette.greens.2
#c9edcc
hsla(125,50%,85.88%,1)
palette.greens.3
#b5e6ba
hsla(126.12,49.49%,80.59%,1)
palette.greens.4
#a1dfa7
hsla(125.81,49.21%,75.29%,1)
palette.greens.5
#8bd894
hsla(127.01,49.68%,69.61%,1)
palette.greens.6
#75d082
hsla(128.57,49.19%,63.73%,1)
palette.greens.7
#5ebd6d
hsla(129.47,41.85%,55.49%,1)
palette.greens.8
#4b9957
hsla(129.23,34.21%,44.71%,1)
palette.greens.9
#397742
hsla(128.71,35.23%,34.51%,1)
palette.greens.10
#27562f
hsla(130.21,37.6%,24.51%,1)
palette.greens.11
#17371c
hsla(129.38,41.03%,15.29%,1)
teals
palette.teals.0
#f2fefd
hsla(175,85.71%,97.25%,1)
palette.teals.1
#dffcfa
hsla(175.86,82.86%,93.14%,1)
palette.teals.2
#ccfaf8
hsla(177.39,82.14%,89.02%,1)
palette.teals.3
#b7f8f5
hsla(177.23,82.28%,84.51%,1)
palette.teals.4
#a1f6f2
hsla(177.18,82.52%,79.8%,1)
palette.teals.5
#88f3ef
hsla(177.76,81.68%,74.31%,1)
palette.teals.6
#6cf1ed
hsla(178.2,82.61%,68.43%,1)
palette.teals.7
#4fdeda
hsla(178.32,68.42%,59.02%,1)
palette.teals.8
#3fb4b1
hsla(178.46,48.15%,47.65%,1)
palette.teals.9
#2f8c8a
hsla(178.71,49.73%,36.67%,1)
palette.teals.10
#206664
hsla(178.29,52.24%,26.27%,1)
palette.teals.11
#124241
hsla(178.75,57.14%,16.47%,1)
blues
palette.blues.0
#eef2ff
hsla(225.88,100%,96.67%,1)
palette.blues.1
#d7e1ff
hsla(225,100%,92.16%,1)
palette.blues.2
#c0cfff
hsla(225.71,100%,87.65%,1)
palette.blues.3
#aabdfe
hsla(226.43,97.67%,83.14%,1)
palette.blues.4
#95abfc
hsla(227.18,94.5%,78.63%,1)
palette.blues.5
#8098fa
hsla(228.2,92.42%,74.12%,1)
palette.blues.6
#6c85f7
hsla(229.21,89.68%,69.61%,1)
palette.blues.7
#5970e3
hsla(230,71.13%,61.96%,1)
palette.blues.8
#475ab9
hsla(230,44.88%,50.2%,1)
palette.blues.9
#364490
hsla(230.67,45.45%,38.82%,1)
palette.blues.10
#253069
hsla(230.29,47.89%,27.84%,1)
palette.blues.11
#151d44
hsla(229.79,52.81%,17.45%,1)
purples
palette.purples.0
#efeeff
hsla(243.53,100%,96.67%,1)
palette.purples.1
#dad7fe
hsla(244.62,95.12%,91.96%,1)
palette.purples.2
#c5c0fd
hsla(244.92,93.85%,87.25%,1)
palette.purples.3
#b1a8fa
hsla(246.59,89.13%,81.96%,1)
palette.purples.4
#9e90f7
hsla(248.16,86.55%,76.67%,1)
palette.purples.5
#8c77f3
hsla(250.16,83.78%,70.98%,1)
palette.purples.6
#7c5cee
hsla(253.15,81.11%,64.71%,1)
palette.purples.7
#6a43da
hsla(255.5,67.11%,55.88%,1)
palette.purples.8
#5535b1
hsla(255.48,53.91%,45.1%,1)
palette.purples.9
#41278a
hsla(255.76,55.93%,34.71%,1)
palette.purples.10
#2d1a64
hsla(255.41,58.73%,24.71%,1)
palette.purples.11
#1b0e41
hsla(255.29,64.56%,15.49%,1)
pinks
palette.pinks.0
#ffeffc
hsla(311.25,100%,96.86%,1)
palette.pinks.1
#ffdaf7
hsla(312.97,100%,92.75%,1)
palette.pinks.2
#ffc5f2
hsla(313.45,100%,88.63%,1)
palette.pinks.3
#ffafed
hsla(313.5,100%,84.31%,1)
palette.pinks.4
#fd98e8
hsla(312.48,96.19%,79.41%,1)
palette.pinks.5
#fa80e2
hsla(311.8,92.42%,74.12%,1)
palette.pinks.6
#f665dd
hsla(310.34,88.96%,68.04%,1)
palette.pinks.7
#e24cc9
hsla(310,72.12%,59.22%,1)
palette.pinks.8
#b73ca3
hsla(309.76,50.62%,47.65%,1)
palette.pinks.9
#8f2d7f
hsla(309.8,52.13%,36.86%,1)
palette.pinks.10
#681f5c
hsla(309.86,54.07%,26.47%,1)
palette.pinks.11
#44113b
hsla(310.59,60%,16.67%,1)
grays
palette.grays.0
#f2f2f2
hsla(0,0%,94.9%,1)
palette.grays.1
#dfe0e0
hsla(180,1.59%,87.65%,1)
palette.grays.2
#cdcece
hsla(180,1.01%,80.59%,1)
palette.grays.3
#bcbcbd
hsla(240,0.75%,73.92%,1)
palette.grays.4
#aaabac
hsla(210,1.19%,67.06%,1)
palette.grays.5
#999a9b
hsla(210,0.99%,60.39%,1)
palette.grays.6
#898a8b
hsla(210,0.85%,54.12%,1)
palette.grays.7
#757677
hsla(210,0.85%,46.27%,1)
palette.grays.8
#5e5f60
hsla(210,1.05%,37.25%,1)
palette.grays.9
#484949
hsla(180,0.69%,28.43%,1)
palette.grays.10
#333334
hsla(240,0.97%,20.2%,1)
palette.grays.11
#1f1f1f
hsla(0,0%,12.16%,1)
Transparent Colors
Color variations with different opacity levels for creating depth and overlay effects.
brand
transparent.brand.0
rgba(51,163,204,0.0625)
hsla(196.08,60%,50%,0.0625)
transparent.brand.1
rgba(51,163,204,0.1)
hsla(196.08,60%,50%,0.1)
transparent.brand.2
rgba(51,163,204,0.15)
hsla(196.08,60%,50%,0.15)
transparent.brand.3
rgba(51,163,204,0.2)
hsla(196.08,60%,50%,0.2)
transparent.brand.4
rgba(51,163,204,0.3)
hsla(196.08,60%,50%,0.3)
transparent.brand.5
rgba(51,163,204,0.4)
hsla(196.08,60%,50%,0.4)
transparent.brand.6
rgba(51,163,204,0.5)
hsla(196.08,60%,50%,0.5)
transparent.brand.7
rgba(51,163,204,0.6)
hsla(196.08,60%,50%,0.6)
transparent.brand.8
rgba(51,163,204,0.7)
hsla(196.08,60%,50%,0.7)
transparent.brand.9
rgba(51,163,204,0.8)
hsla(196.08,60%,50%,0.8)
transparent.brand.10
rgba(51,163,204,0.9)
hsla(196.08,60%,50%,0.9)
transparent.brand.11
rgba(51,163,204,0.95)
hsla(196.08,60%,50%,0.95)
neutral
transparent.neutral.0
rgba(219,223,240,0.0625)
hsla(228.57,41.18%,90%,0.0625)
transparent.neutral.1
rgba(219,223,240,0.1)
hsla(228.57,41.18%,90%,0.1)
transparent.neutral.2
rgba(219,223,240,0.15)
hsla(228.57,41.18%,90%,0.15)
transparent.neutral.3
rgba(219,223,240,0.2)
hsla(228.57,41.18%,90%,0.2)
transparent.neutral.4
rgba(219,223,240,0.3)
hsla(228.57,41.18%,90%,0.3)
transparent.neutral.5
rgba(219,223,240,0.4)
hsla(228.57,41.18%,90%,0.4)
transparent.neutral.6
rgba(219,223,240,0.5)
hsla(228.57,41.18%,90%,0.5)
transparent.neutral.7
rgba(219,223,240,0.6)
hsla(228.57,41.18%,90%,0.6)
transparent.neutral.8
rgba(219,223,240,0.7)
hsla(228.57,41.18%,90%,0.7)
transparent.neutral.9
rgba(219,223,240,0.8)
hsla(228.57,41.18%,90%,0.8)
transparent.neutral.10
rgba(219,223,240,0.9)
hsla(228.57,41.18%,90%,0.9)
transparent.neutral.11
rgba(219,223,240,0.95)
hsla(228.57,41.18%,90%,0.95)
accent
transparent.accent.0
rgba(132,90,246,0.0625)
hsla(256.15,89.66%,65.88%,0.0625)
transparent.accent.1
rgba(132,90,246,0.1)
hsla(256.15,89.66%,65.88%,0.1)
transparent.accent.2
rgba(132,90,246,0.15)
hsla(256.15,89.66%,65.88%,0.15)
transparent.accent.3
rgba(132,90,246,0.2)
hsla(256.15,89.66%,65.88%,0.2)
transparent.accent.4
rgba(132,90,246,0.3)
hsla(256.15,89.66%,65.88%,0.3)
transparent.accent.5
rgba(132,90,246,0.4)
hsla(256.15,89.66%,65.88%,0.4)
transparent.accent.6
rgba(132,90,246,0.5)
hsla(256.15,89.66%,65.88%,0.5)
transparent.accent.7
rgba(132,90,246,0.6)
hsla(256.15,89.66%,65.88%,0.6)
transparent.accent.8
rgba(132,90,246,0.7)
hsla(256.15,89.66%,65.88%,0.7)
transparent.accent.9
rgba(132,90,246,0.8)
hsla(256.15,89.66%,65.88%,0.8)
transparent.accent.10
rgba(132,90,246,0.9)
hsla(256.15,89.66%,65.88%,0.9)
transparent.accent.11
rgba(132,90,246,0.95)
hsla(256.15,89.66%,65.88%,0.95)
light
transparent.light.0
rgba(0,0,0,0.0625)
hsla(0,0%,0%,0.0625)
transparent.light.1
rgba(0,0,0,0.1)
hsla(0,0%,0%,0.1)
transparent.light.2
rgba(0,0,0,0.15)
hsla(0,0%,0%,0.15)
transparent.light.3
rgba(0,0,0,0.2)
hsla(0,0%,0%,0.2)
transparent.light.4
rgba(0,0,0,0.3)
hsla(0,0%,0%,0.3)
transparent.light.5
rgba(0,0,0,0.4)
hsla(0,0%,0%,0.4)
transparent.light.6
rgba(0,0,0,0.5)
hsla(0,0%,0%,0.5)
transparent.light.7
rgba(0,0,0,0.6)
hsla(0,0%,0%,0.6)
transparent.light.8
rgba(0,0,0,0.7)
hsla(0,0%,0%,0.7)
transparent.light.9
rgba(0,0,0,0.8)
hsla(0,0%,0%,0.8)
transparent.light.10
rgba(0,0,0,0.9)
hsla(0,0%,0%,0.9)
transparent.light.11
rgba(0,0,0,0.95)
hsla(0,0%,0%,0.95)
dark
transparent.dark.0
rgba(255,255,255,0.0625)
hsla(0,0%,100%,0.0625)
transparent.dark.1
rgba(255,255,255,0.1)
hsla(0,0%,100%,0.1)
transparent.dark.2
rgba(255,255,255,0.15)
hsla(0,0%,100%,0.15)
transparent.dark.3
rgba(255,255,255,0.2)
hsla(0,0%,100%,0.2)
transparent.dark.4
rgba(255,255,255,0.3)
hsla(0,0%,100%,0.3)
transparent.dark.5
rgba(255,255,255,0.4)
hsla(0,0%,100%,0.4)
transparent.dark.6
rgba(255,255,255,0.5)
hsla(0,0%,100%,0.5)
transparent.dark.7
rgba(255,255,255,0.6)
hsla(0,0%,100%,0.6)
transparent.dark.8
rgba(255,255,255,0.7)
hsla(0,0%,100%,0.7)
transparent.dark.9
rgba(255,255,255,0.8)
hsla(0,0%,100%,0.8)
transparent.dark.10
rgba(255,255,255,0.9)
hsla(0,0%,100%,0.9)
transparent.dark.11
rgba(255,255,255,0.95)
hsla(0,0%,100%,0.95)
Skin Combinations
Skin combinations are used to create a visual hierarchy and ensure a consistent look and feel across the application. Each skin combination is made up of a color pair that is used for text and background.