Colors

View Source

Using Colors

Colors are available to all components when using color specific properties. This includes backgroundColor, borderColor, borderBottomColor, borderLeftColor, borderRightColor,borderTopColor, color, fill, and stroke.

Primary

primary-lightest

primary-lighter

primary-light

primary

primary-dark

primary-darker

primary-darkest

Warning

warning-lighter

warning-light

warning

warning-dark

warning-darker

Error

error-lighter

error-light

error

error-dark

error-darker

Success

success-lighter

success-light

success

success-dark

success-darker

Red

red-0

red-1

red-2

red-3

red-4

red-5

red-6

red-7

red-8

red-9

Blue

blue-0

blue-1

blue-2

blue-3

blue-4

blue-5

blue-6

blue-7

blue-8

blue-9

Green

green-0

green-1

green-2

green-3

green-4

green-5

green-6

green-7

green-8

green-9

Yellow

yellow-0

yellow-1

yellow-2

yellow-3

yellow-4

yellow-5

yellow-6

yellow-7

yellow-8

yellow-9

Light

Light/Dark palettes only affect alpha channels and will absorb the color underneath it.

light-0

light-1

light-2

light-3

light-4

light-5

light-6

light-7

light-8

light-9

Dark

dark-0

dark-1

dark-2

dark-3

dark-4

dark-5

dark-6

dark-7

dark-8

dark-9

Grey

grey-0

grey-1

grey-2

grey-3

grey-4

grey-5

grey-6

grey-7

grey-8

grey-9

Foreground

foreground

foregroundSecondary

foregroundTertiary

Background

background

backgroundSecondary

backgroundTertiary

Surface

surface

surfaceSecondary

surfaceTertiary

Separator

separator

separatorSecondary

separatorTertiary

separatorHover

separatorFocus

separatorFocusSecondary

Highlight

highlight

highlightSecondary

Link

linkForeground

linkBackground

Days

sunday

monday

tuesday

wednesday

thursday

friday

saturday

Apps

check-ins

giving

groups

music-stand

pco

people

planning-center

projector

registrations

calendar

services

Copy

Edit

const { colors, eachPalette, isLightColor, palette } = designSystem
render(
  <StackView grow={1} shrink={1} spacing={6}>
    {eachPalette(palette, ({ colors, name }) => {
      const lightOrDark = ['Light', 'Dark'].indexOf(name) > -1
      return (
        <StackView key={name} grow={1} spacing={1}>
          <StackView axis="horizontal" alignment="center" spacing={2}>
            <Heading level={3}>{name}</Heading>
            {name === 'Light' && (
              <Text fontSize={4} color="grey-8">
                Light/Dark palettes only affect alpha channels and will absorb
                the color underneath it.
              </Text>
            )}
          </StackView>
          <StackView>
            <WrapView grow={1} marginHorizontal={-0.5}>
              {Object.keys(colors).map((color, index) => (
                <StackView key={color} width="20%">
                  <StackView padding={0.5} spacing={0.5}>
                    <Box
                      radius={2}
                      backgroundColor={lightOrDark ? 'coral' : undefined}
                    >
                      <Box
                        width="100%"
                        height={5}
                        radius={2}
                        backgroundColor={color}
                        color={isLightColor(color) ? 'dark-8' : 'light-8'}
                      />
                    </Box>
                    <Text fontSize={4} color="grey-9">
                      {color}
                    </Text>
                  </StackView>
                </StackView>
              ))}
            </WrapView>
          </StackView>
        </StackView>
      )
    })}
  </StackView>
)

const { colors, eachPalette, isLightColor, palette } = designSystem
render(
  <StackView grow={1} shrink={1} spacing={6}>
    {eachPalette(palette, ({ colors, name }) => {
      const lightOrDark = ['Light', 'Dark'].indexOf(name) > -1
      return (
        <StackView key={name} grow={1} spacing={1}>
          <StackView axis="horizontal" alignment="center" spacing={2}>
            <Heading level={3}>{name}</Heading>
            {name === 'Light' && (
              <Text fontSize={4} color="grey-8">
                Light/Dark palettes only affect alpha channels and will absorb
                the color underneath it.
              </Text>
            )}
          </StackView>
          <StackView>
            <WrapView grow={1} marginHorizontal={-0.5}>
              {Object.keys(colors).map((color, index) => (
                <StackView key={color} width="20%">
                  <StackView padding={0.5} spacing={0.5}>
                    <Box
                      radius={2}
                      backgroundColor={lightOrDark ? 'coral' : undefined}
                    >
                      <Box
                        width="100%"
                        height={5}
                        radius={2}
                        backgroundColor={color}
                        color={isLightColor(color) ? 'dark-8' : 'light-8'}
                      />
                    </Box>
                    <Text fontSize={4} color="grey-9">
                      {color}
                    </Text>
                  </StackView>
                </StackView>
              ))}
            </WrapView>
          </StackView>
        </StackView>
      )
    })}
  </StackView>
)

Palette

In UI kit, colors are described as a palette. A palette is an object that contains all of the colors that you want to be available in the design system. By default UI kit ships with a predefined set of colors that can be overridden where necessary.

We can categorize colors in three different ways:

Named Scales
Numeric Scales
Name

Named scales

Any color set that contains a base key will use the name of the color and append each variant to its name. The example below would produce a colors object that contained primary-lighter, primary-light, primary, primary-dark, and primary-darker. It is recommended to use this approach for semantic color names like primary, secondary, success, error, etc.

const primary = {
  lighter: 'hsl(88, 32%, 72%)',
  light: 'hsl(88, 40%, 54%)',
  base: 'hsl(88, 44%, 40%)',
  dark: 'hsl(88, 64%, 32%)',
  darker: 'hsl(88, 72%, 20%)',
}
const palette = {
  primary,
}

Numeric scales

Any color set that contains an array will be keyed by its name and index position in the array. The example below would produce a colors object that contained grey-0, grey-1, grey-2, etc. It is recommended to use this approach for literal color names like red, green, blue, etc.

const grey = [
  'hsl(0,0%,98%)',
  'hsl(0,0%,96%)',
  'hsl(0,0%,94%)',
  'hsl(0,0%,92%)',
  'hsl(0,0%,90%)',
  'hsl(0,0%,86%)',
  'hsl(0,0%,72%)',
  'hsl(0,0%,48%)',
  'hsl(0,0%,36%)',
  'hsl(0,0%,24%)',
]
const palette = {
  primary,
  grey,
}

Name

Color sets that use objects and do not contain a base key will be resolved by their individual key name. The example below would produce a colors object that contained sunday, monday, tuesday, wednesday, etc. Rather than specifying these directly in the palette, by using a key to group our colors we can provide extra information for documentation and tooling purposes.

const days = {
  sunday: '#7DC156',
  monday: '#789FF8',
  tuesday: '#A193FD',
  wednesday: '#D18CF6',
  thursday: '#FA7EA4',
  friday: '#F69688',
  saturday: '#66BEEB',
}
const palette = {
  primary,
  grey,
  days,
}

Using Colors
Palette
Named scales
Numeric scales
Name

PreviousVariants NextBox