Palette

BCCAbout 1 min

Palette

Primitive color values. Use Tokens for UI—primitives don't adapt to dark mode.

Neutral

Token	Hex
`color.neutral.0`	`#ffffff`
`color.neutral.100`	`#f8f8f8`
`color.neutral.200`	`#f0f1f2`
`color.neutral.300`	`#dddee1`
`color.neutral.400`	`#b7b9be`
`color.neutral.500`	`#8c8f97`
`color.neutral.600`	`#7d818a`
`color.neutral.700`	`#6b6e76`
`color.neutral.800`	`#505258`
`color.neutral.900`	`#3b3d42`
`color.neutral.1000`	`#292a2e`
`color.neutral.1100`	`#1e1f21`

Dark Neutral

Used as the neutral scale in dark mode.

Token	Hex
`color.dark-neutral.0`	`#18191a`
`color.dark-neutral.100`	`#1f1f21`
`color.dark-neutral.200`	`#242528`
`color.dark-neutral.300`	`#303134`
`color.dark-neutral.400`	`#4b4d51`
`color.dark-neutral.500`	`#63666b`
`color.dark-neutral.600`	`#7e8188`
`color.dark-neutral.700`	`#96999e`
`color.dark-neutral.800`	`#a9abaf`
`color.dark-neutral.900`	`#bfc1c4`
`color.dark-neutral.1000`	`#cecfd2`
`color.dark-neutral.1100`	`#e2e3e4`

Neutral Alpha

Semi-transparent neutrals for overlays and layered surfaces.

Token	Hex
`color.neutral-alpha.100A`	`#17171708`
`color.neutral-alpha.200A`	`#0515240f`
`color.neutral-alpha.300A`	`#0b120e24`
`color.neutral-alpha.400A`	`#080f214a`
`color.neutral-alpha.500A`	`#050c1f75`

Dark Neutral Alpha

Token	Hex
`color.dark-neutral-alpha.100A`	`#bdbdbd0a`
`color.dark-neutral-alpha.200A`	`#ceced912`
`color.dark-neutral-alpha.300A`	`#e3e4f21f`
`color.dark-neutral-alpha.400A`	`#e5e9f640`
`color.dark-neutral-alpha.500A`	`#e9f0fb5c`

BCC (Brand)

Token	Hex
`color.bcc.100`	`#f0fcfa`
`color.bcc.200`	`#d2eeeb`
`color.bcc.300`	`#a0cec8`
`color.bcc.400`	`#6fb5ad`
`color.bcc.500`	`#3e9f97`
`color.bcc.600`	`#1d7f78`
`color.bcc.700`	`#0c625c`
`color.bcc.800`	`#014d49`
`color.bcc.900`	`#0b3633`
`color.bcc.1000`	`#012320`

Green

Token	Hex
`color.green.100`	`#efffed`
`color.green.200`	`#cbf3c9`
`color.green.300`	`#83d895`
`color.green.400`	`#32c180`
`color.green.500`	`#1ca673`
`color.green.600`	`#09825d`
`color.green.700`	`#0c6241`
`color.green.800`	`#094c3b`
`color.green.900`	`#073734`
`color.green.1000`	`#032429`

Blue

Token	Hex
`color.blue.100`	`#f6fbff`
`color.blue.200`	`#d9ecff`
`color.blue.300`	`#a6cdfd`
`color.blue.400`	`#7cabf9`
`color.blue.500`	`#608ef6`
`color.blue.600`	`#446add`
`color.blue.700`	`#274eb5`
`color.blue.800`	`#273c8f`
`color.blue.900`	`#212c64`
`color.blue.1000`	`#091e47`

Yellow

Token	Hex
`color.yellow.100`	`#fdf8e9`
`color.yellow.200`	`#f8e6a0`
`color.yellow.300`	`#e9c348`
`color.yellow.400`	`#d5a406`
`color.yellow.500`	`#bc870d`
`color.yellow.600`	`#a4670b`
`color.yellow.700`	`#854901`
`color.yellow.800`	`#653805`
`color.yellow.900`	`#4b2c04`
`color.yellow.1000`	`#2d1f00`

Red

Token	Hex
`color.red.100`	`#fff8f3`
`color.red.200`	`#fee2dd`
`color.red.300`	`#fab6ad`
`color.red.400`	`#fa877e`
`color.red.500`	`#ed6362`
`color.red.600`	`#ca414e`
`color.red.700`	`#a42237`
`color.red.800`	`#811436`
`color.red.900`	`#630d2e`
`color.red.1000`	`#440223`

Teal

Token	Hex
`color.teal.100`	`#f6fbff`
`color.teal.200`	`#c3f2f8`
`color.teal.300`	`#82d3e3`
`color.teal.400`	`#51b9cf`
`color.teal.500`	`#1a9eb7`
`color.teal.600`	`#0b7da1`
`color.teal.700`	`#005b81`
`color.teal.800`	`#09486b`
`color.teal.900`	`#0d324d`
`color.teal.1000`	`#0c2132`

Orange

Token	Hex
`color.orange.100`	`#fffaed`
`color.orange.200`	`#fee3c1`
`color.orange.300`	`#f6b981`
`color.orange.400`	`#f19457`
`color.orange.500`	`#da772e`
`color.orange.600`	`#b55919`
`color.orange.700`	`#943a14`
`color.orange.800`	`#782612`
`color.orange.900`	`#5d1712`
`color.orange.1000`	`#420e0d`

Magenta

Token	Hex
`color.magenta.100`	`#fff8ff`
`color.magenta.200`	`#fce0f8`
`color.magenta.300`	`#f3b4e2`
`color.magenta.400`	`#eb8acf`
`color.magenta.500`	`#de66b0`
`color.magenta.600`	`#be428f`
`color.magenta.700`	`#952e70`
`color.magenta.800`	`#751f57`
`color.magenta.900`	`#5b1043`
`color.magenta.1000`	`#3f0534`

Purple

Token	Hex
`color.purple.100`	`#f6f9ff`
`color.purple.200`	`#e3e3fe`
`color.purple.300`	`#c9c3ec`
`color.purple.400`	`#afa0e0`
`color.purple.500`	`#9a82da`
`color.purple.600`	`#8360c3`
`color.purple.700`	`#61479c`
`color.purple.800`	`#493481`
`color.purple.900`	`#352465`
`color.purple.1000`	`#1d154d`

Brown

Token	Hex
`color.brown.100`	`#f9faf4`
`color.brown.200`	`#ece8dc`
`color.brown.300`	`#d1c5b0`
`color.brown.400`	`#bea889`
`color.brown.500`	`#a98c66`
`color.brown.600`	`#8b6d45`
`color.brown.700`	`#6e5232`
`color.brown.800`	`#553d28`
`color.brown.900`	`#3f2c1e`
`color.brown.1000`	`#2e1b0f`

Figma

See the design specs in Figma (link coming soon).