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
#dedfe3
hsla(228,8.2%,88.04%,1)
Spectre Colors
Full spectrum of color variations
red
#fe3537
hsla(359.4,99.01%,60.2%,1)
yellow
#e5bd20
hsla(47.82,79.12%,51.18%,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
#f3f3f4
hsla(240,4.35%,95.49%,1)
surface
#fcfcfc
hsla(0,0%,98.82%,1)
panel
#f7f7f8
hsla(240,6.67%,97.06%,1)
card
#ffffff
hsla(0,0%,100%,1)
overlay
#fcfcfc
hsla(0,0%,98.82%,1)
primary
#3d3d3f
hsla(240,1.61%,24.31%,1)
secondary
#5e5f61
hsla(220,1.57%,37.45%,1)
tertiary
#828285
hsla(240,1.21%,51.57%,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
#fcfcfc
hsla(0,0%,98.82%,1)
palette.neutrals.1
#f7f7f8
hsla(240,6.67%,97.06%,1)
palette.neutrals.2
#f3f3f4
hsla(240,4.35%,95.49%,1)
palette.neutrals.3
#eeeff1
hsla(220,9.68%,93.92%,1)
palette.neutrals.4
#eaeaed
hsla(240,7.69%,92.35%,1)
palette.neutrals.5
#e5e6e9
hsla(225,8.33%,90.59%,1)
palette.neutrals.6
#e1e2e5
hsla(225,7.14%,89.02%,1)
palette.neutrals.7
#cecfd3
hsla(228,5.38%,81.76%,1)
palette.neutrals.8
#a7a8ab
hsla(225,2.33%,66.27%,1)
palette.neutrals.9
#828285
hsla(240,1.21%,51.57%,1)
palette.neutrals.10
#5e5f61
hsla(220,1.57%,37.45%,1)
palette.neutrals.11
#3d3d3f
hsla(240,1.61%,24.31%,1)
Monochrome Palettes
Grayscale and neutral color variations
darks
palette.darks.0
#f1f5f6
hsla(192,21.74%,95.49%,1)
palette.darks.1
#eef1f3
hsla(204,17.24%,94.31%,1)
palette.darks.2
#ebeef0
hsla(204,14.29%,93.14%,1)
palette.darks.3
#e8eaed
hsla(216,12.2%,91.96%,1)
palette.darks.4
#e5e7ea
hsla(216,10.64%,90.78%,1)
palette.darks.5
#e2e4e7
hsla(216,9.43%,89.61%,1)
lights
palette.lights.0
#171f21
hsla(192,17.86%,10.98%,1)
palette.lights.1
#32393b
hsla(193.33,8.26%,21.37%,1)
palette.lights.2
#4f5558
hsla(200,5.39%,32.75%,1)
palette.lights.3
#6d7376
hsla(200,3.96%,44.51%,1)
palette.lights.4
#8e9295
hsla(205.71,3.2%,57.06%,1)
palette.lights.5
#afb2b6
hsla(214.29,4.58%,70%,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
#fcf9ed
hsla(48,71.43%,95.88%,1)
palette.yellows.1
#f9f0d4
hsla(45.41,75.51%,90.39%,1)
palette.yellows.2
#f5e7bb
hsla(45.52,74.36%,84.71%,1)
palette.yellows.3
#f2dea1
hsla(45.19,75.7%,79.02%,1)
palette.yellows.4
#eed586
hsla(45.58,75.36%,72.94%,1)
palette.yellows.5
#ebcc68
hsla(45.8,76.61%,66.47%,1)
palette.yellows.6
#e7c343
hsla(46.83,77.36%,58.43%,1)
palette.yellows.7
#d5af1d
hsla(47.61,76.03%,47.45%,1)
palette.yellows.8
#ac8e15
hsla(48.08,78.24%,37.84%,1)
palette.yellows.9
#866e0e
hsla(48,81.08%,29.02%,1)
palette.yellows.10
#624f07
hsla(47.47,86.67%,20.59%,1)
palette.yellows.11
#3f3303
hsla(48,90.91%,12.94%,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(222,223,227,0.0625)
hsla(228,8.2%,88.04%,0.0625)
transparent.neutral.1
rgba(222,223,227,0.1)
hsla(228,8.2%,88.04%,0.1)
transparent.neutral.2
rgba(222,223,227,0.15)
hsla(228,8.2%,88.04%,0.15)
transparent.neutral.3
rgba(222,223,227,0.2)
hsla(228,8.2%,88.04%,0.2)
transparent.neutral.4
rgba(222,223,227,0.3)
hsla(228,8.2%,88.04%,0.3)
transparent.neutral.5
rgba(222,223,227,0.4)
hsla(228,8.2%,88.04%,0.4)
transparent.neutral.6
rgba(222,223,227,0.5)
hsla(228,8.2%,88.04%,0.5)
transparent.neutral.7
rgba(222,223,227,0.6)
hsla(228,8.2%,88.04%,0.6)
transparent.neutral.8
rgba(222,223,227,0.7)
hsla(228,8.2%,88.04%,0.7)
transparent.neutral.9
rgba(222,223,227,0.8)
hsla(228,8.2%,88.04%,0.8)
transparent.neutral.10
rgba(222,223,227,0.9)
hsla(228,8.2%,88.04%,0.9)
transparent.neutral.11
rgba(222,223,227,0.95)
hsla(228,8.2%,88.04%,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.