Color

Soundstripe's color system is designed to be purposeful and minimal. The color combinations we use have been carefully picked to maintain contrast and readability for all types of people.

Core UI Color Palette

Soundstripe's UI can be rendered in both light and dark modes. To make switching between modes easy, we have created a series of usage alises that map to colors across two distinct palettes.

Background/Canvas Colors

Example

Theme Token

Role

colors.background.default

Main UI backgrounds. It's used in most components and surfaces.

colors.background.secondary

Used for elements that need separation from the main canvas.

colors.background.layered

Background for elements that display over content (i.e. tooltips and dropdowns).

colors.background.elevatedLow

General low-opacity elevation layer. Good for hover states.

colors.background.elevatedMid

General mid-opacity elevation layer. Good for active states.

colors.background.inverted

High contrast background used for high emphasis needs.

Text/Foreground Colors

Example

Theme Token

Role

colors.text.primary

Default text & icon color.

colors.text.secondary

Lower-importance content. Used to create hierarchy with primary text color.

colors.text.inverted

Used for text and icons on inverted backgrounds.

Border Colors

Example

Theme Token

Role

colors.border.default

Default value for component borders and dividers.

colors.border.subtle

Secondary border to emphasize separation between elements.

Text Color Utilities

Use text color utilities when using text to indicate meaning.

<>
  <Box color="text.action">colors.text.action</Box>
  <Box color="text.alert">colors.text.alert</Box>
  <Box color="text.info">colors.text.info</Box>
  <Box color="text.highlight">colors.text.highlight</Box>
  <Box color="text.success">colors.text.success</Box>
  <Box color="text.warning">colors.text.warning</Box>
</>

<>
  <Box color="text.action">colors.text.action</Box>
  <Box color="text.alert">colors.text.alert</Box>
  <Box color="text.info">colors.text.info</Box>
  <Box color="text.highlight">colors.text.highlight</Box>
  <Box color="text.success">colors.text.success</Box>
  <Box color="text.warning">colors.text.warning</Box>
</>

Background Color Utilities

Background colors are most commonly used for filling large blocks of content or areas with a color.

<>
  <Box color="text.onColor" mb={2} p={2} bg="background.action">
    colors.background.action
  </Box>
  <Box mb={2} p={2} bg="background.actionSubtle">
    colors.background.actionSubtle
  </Box>
  <Box color="text.onColor" mb={2} p={2} bg="background.alert">
    colors.background.alert
  </Box>
  <Box mb={2} p={2} bg="background.alertSubtle">
    colors.background.alertSubtle
  </Box>
  <Box color="text.onColor" mb={2} p={2} bg="background.info">
    colors.background.info
  </Box>
  <Box mb={2} p={2} bg="background.infoSubtle">
    colors.background.infoSubtle
  </Box>
  <Box color="text.onColor" mb={2} p={2} bg="background.highlight">
    colors.background.highlight
  </Box>
  <Box mb={2} p={2} bg="background.highlightSubtle">
    colors.background.highlightSubtle
  </Box>
  <Box color="text.onColor" mb={2} p={2} bg="background.success">
    colors.background.success
  </Box>
  <Box mb={2} p={2} bg="background.successSubtle">
    colors.background.successSubtle
  </Box>
  <Box color="black" mb={2} p={2} bg="background.warning">
    colors.background.warning
  </Box>
  <Box mb={2} p={2} bg="background.warningSubtle">
    colors.background.warningSubtle
  </Box>
</>

<>
  <Box color="text.onColor" mb={2} p={2} bg="background.action">
    colors.background.action
  </Box>
  <Box mb={2} p={2} bg="background.actionSubtle">
    colors.background.actionSubtle
  </Box>
  <Box color="text.onColor" mb={2} p={2} bg="background.alert">
    colors.background.alert
  </Box>
  <Box mb={2} p={2} bg="background.alertSubtle">
    colors.background.alertSubtle
  </Box>
  <Box color="text.onColor" mb={2} p={2} bg="background.info">
    colors.background.info
  </Box>
  <Box mb={2} p={2} bg="background.infoSubtle">
    colors.background.infoSubtle
  </Box>
  <Box color="text.onColor" mb={2} p={2} bg="background.highlight">
    colors.background.highlight
  </Box>
  <Box mb={2} p={2} bg="background.highlightSubtle">
    colors.background.highlightSubtle
  </Box>
  <Box color="text.onColor" mb={2} p={2} bg="background.success">
    colors.background.success
  </Box>
  <Box mb={2} p={2} bg="background.successSubtle">
    colors.background.successSubtle
  </Box>
  <Box color="black" mb={2} p={2} bg="background.warning">
    colors.background.warning
  </Box>
  <Box mb={2} p={2} bg="background.warningSubtle">
    colors.background.warningSubtle
  </Box>
</>

Border Color Utilities

Utilities for overriding default border colors.

<>
  <Box mb={2} p={2} border={0} borderColor="border.default">
    colors.border.default
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.subtle">
    colors.border.subtle
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.dark">
    colors.border.dark
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.action">
    colors.border.action
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.alert">
    colors.border.alert
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.info">
    colors.border.info
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.highlight">
    colors.border.highlight
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.success">
    colors.border.success
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.warning">
    colors.border.warning
  </Box>
</>

<>
  <Box mb={2} p={2} border={0} borderColor="border.default">
    colors.border.default
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.subtle">
    colors.border.subtle
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.dark">
    colors.border.dark
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.action">
    colors.border.action
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.alert">
    colors.border.alert
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.info">
    colors.border.info
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.highlight">
    colors.border.highlight
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.success">
    colors.border.success
  </Box>
  <Box mb={2} p={2} border={0} borderColor="border.warning">
    colors.border.warning
  </Box>
</>

Full Color Palette

Swatch

Name

CSS Value

Theme Token

white

#FFF

colors.white

black

#000

colors.black

gray000

#F5F7FA

colors.gray000

gray100

#E3E6ED

colors.gray100

gray200

#D0D6E1

colors.gray200

gray300

#A2A9B8

colors.gray300

gray400

#8D95A5

colors.gray400

gray500

#676F7E

colors.gray500

gray600

#3E4451

colors.gray600

gray700

#272A34

colors.gray700

gray800

#1E2229

colors.gray800

gray900

#15181E

colors.gray900

red000

#FEE7E8

colors.red000

red100

#F8878B

colors.red100

red200

#D0252A

colors.red200

red300

#AE2428

colors.red300

red400

#751518

colors.red400

orange000

#FFEBE1

colors.orange000

orange100

#FB9B65

colors.orange100

orange200

#FA7A33

colors.orange200

orange300

#C24C0A

colors.orange300

orange400

#89380B

colors.orange400

yellow000

#FFFAE6

colors.yellow000

yellow100

#FFEFB8

colors.yellow100

yellow200

#FFC90A

colors.yellow200

yellow300

#E5B300

colors.yellow300

yellow400

#7A6000

colors.yellow400

green000

#E5FFF9

colors.green000

green100

#3CDDBA

colors.green100

green200

#20B696

colors.green200

green300

#167E64

colors.green300

green400

#0D634E

colors.green400

blue000

#E5F2FF

colors.blue000

blue100

#5186F0

colors.blue100

blue200

#2767E7

colors.blue200

blue300

#144BB8

colors.blue300

blue400

#133881

colors.blue400

purple000

#ECE5FF

colors.purple000

purple100

#845EED

colors.purple100

purple200

#603CC3

colors.purple200

purple300

#492E94

colors.purple300

purple400

#372173

colors.purple400

pink000

#FFE5F0

colors.pink000

pink100

#FB5397

colors.pink100

pink200

#E41469

colors.pink200

pink300

#C20F58

colors.pink300

pink400

#950942

colors.pink400