Color
Colors when accurately applied can be a potent tool that enables designers and developers to implement solutions with speed and efficiency. Here are a couple of things to keep in mind.
These colors have been structured into tokens that represent specific values. These tokens will be arranged in a package to enable referencing and importing it into editor files for use. The tokens are grouped into categories to represent the ones that are directly usable in designs and those that are to be aliased by tokens used in designs. This makes for proper structure and consistent usage of color across all proposed and implemented designs. The only exception for usage of primitive tokens might be when applying color to illustrations.
Primitive Category
Since this category will not be used directly in designs, it does not have any role descriptions.
Brand Colors
| Token Name | Name | Hex Code | Sistent Token | Preview |
|---|---|---|---|---|
| keppel-70 | Keppel | #DAf3EB | theme.palette.brand.default | |
| keppel-60 | Keppel | #93E5D1 | theme.palette.brand.hover | |
| keppel-50 | Keppel | #41CCB3 | theme.palette.brand.pressed | |
| keppel-40 | Keppel | #00B39F | theme.palette.brand.secondary | |
| keppel-30 | Keppel | #007763 | theme.palette.brand.tertiary | |
| keppel-20 | Keppel | #006651 | theme.palette.keppel[20] | |
| keppel-10 | Keppel | #00403F | theme.palette.keppel[10] | |
| caribbean-70 | Caribbean | #E6FFF6 | theme.palette.caribbean[70] | |
| caribbean-50 | Caribbean | #78FAD3 | theme.palette.caribbean[50] | |
| caribbean-60 | Caribbean | #A3FFE0 | theme.palette.caribbean[60] | |
| caribbean-40 | Caribbean | #00D3A9 | theme.palette.caribbean[40] | |
| caribbean-30 | Caribbean | #00AD90 | theme.palette.caribbean[30] | |
| caribbean-20 | Caribbean | #006157 | theme.palette.caribbean[20] | |
| caribbean-10 | Caribbean | #003B37 | theme.palette.caribbean[10] | |
| saffron-70 | Saffron | #FFFEE6 | theme.palette.saffron[70] | |
| saffron-60 | Saffron | #FFFBBD | theme.palette.saffron[60] | |
| saffron-50 | Saffron | #FFEB6B | theme.palette.saffron[50] | |
| saffron-40 | Saffron | #EBC017 | theme.palette.saffron[40] | |
| saffron-30 | Saffron | #C4990A | theme.palette.saffron[30] | |
| saffron-20 | Saffron | #785400 | theme.palette.saffron[20] | |
| saffron-10 | Saffron | #523600 | theme.palette.saffron[10] |
Greyscale Colors
| Token Name | Name | Hex Code | Sistent Token | Preview |
|---|---|---|---|---|
| charcoal-110 | Charcoal | #525252 | theme.palette.charcoal[110] | |
| charcoal-100 | Charcoal | #FDFDFD | theme.palette.charcoal[100] | |
| charcoal-90 | Charcoal | #EAEDEE | theme.palette.charcoal[90] | |
| charcoal-80 | Charcoal | #D2D8DA | theme.palette.charcoal[80] | |
| charcoal-70 | Charcoal | #B1B9BC | theme.palette.charcoal[70] | |
| charcoal-60 | Charcoal | #8C999E | theme.palette.charcoal[60] | |
| charcoal-50 | Charcoal | #647176 | theme.palette.charcoal[50] | |
| charcoal-40 | Charcoal | #3C494F | theme.palette.charcoal[40] | |
| charcoal-30 | Charcoal | #28353A | theme.palette.charcoal[30] | |
| charcoal-20 | Charcoal | #142126 | theme.palette.charcoal[20] | |
| charcoal-10 | Charcoal | #000D12 | theme.palette.charcoal[10] | |
| accent_grey-90 | Accent Grey | #E8EFF3 | theme.palette.accentGrey[90] | |
| accent_grey-80 | Accent Grey | #C9DBE3 | theme.palette.accentGrey[80] | |
| accent_grey-70 | Accent Grey | #ABBDC5 | theme.palette.accentGrey[70] | |
| accent_grey-60 | Accent Grey | #8D9FA7 | theme.palette.accentGrey[60] | |
| accent_grey-50 | Accent Grey | #6F8189 | theme.palette.accentGrey[50] | |
| accent_grey-40 | Accent Grey | #51636B | theme.palette.accentGrey[40] | |
| accent_grey-30 | Accent Grey | #3D4F57 | theme.palette.accentGrey[30] | |
| accent_grey-20 | Accent Grey | #293B43 | theme.palette.accentGrey[20] | |
| accent_grey-10 | Accent Grey | #15272F | theme.palette.accentGrey[10] |
Function Colors
| Token Name | Name | Hex Code | Sistent Token | Preview |
|---|---|---|---|---|
| blue-70 | Blue | #F0FBFF | theme.palette.blue[70] | |
| blue-60 | Blue | #9EDDFF | theme.palette.blue[60] | |
| blue-50 | Blue | #75CAFF | theme.palette.blue[50] | |
| blue-40 | Blue | #2196F3 | theme.palette.blue[40] | |
| blue-30 | Blue | #1272CC | theme.palette.blue[30] | |
| blue-20 | Blue | #0754A6 | theme.palette.blue[20] | |
| blue-10 | Blue | #003980 | theme.palette.blue[10] | |
| green-70 | Green | #EFFCED | theme.palette.green[70] | |
| green-60 | Green | #B2E3AF | theme.palette.green[60] | |
| green-50 | Green | #5BC95B | theme.palette.green[50] | |
| green-40 | Green | #36BC3B | theme.palette.green[40] | |
| green-30 | Green | #15701E | theme.palette.green[30] | |
| green-20 | Green | #0A4A13 | theme.palette.green[20] | |
| green-10 | Green | #05340A | theme.palette.green[10] | |
| yellow-70 | Yellow | #FFFCE6 | theme.palette.yellow[70] | |
| yellow-60 | Yellow | #FFE57D | theme.palette.yellow[60] | |
| yellow-50 | Yellow | #FFC72B | theme.palette.yellow[50] | |
| yellow-40 | Yellow | #FFB302 | theme.palette.yellow[40] | |
| yellow-30 | Yellow | #D99100 | theme.palette.yellow[30] | |
| yellow-20 | Yellow | #8C5400 | theme.palette.yellow[20] | |
| yellow-10 | Yellow | #663A00 | theme.palette.yellow[10] | |
| red-70 | Red | #F2E3DA | theme.palette.red[70] | |
| red-60 | Red | #E6B093 | theme.palette.red[60] | |
| red-50 | Red | #BF471F | theme.palette.red[50] | |
| red-40 | Red | #F91313 | theme.palette.red[40] | |
| red-30 | Red | #B32700 | theme.palette.red[30] | |
| red-20 | Red | #8C1A00 | theme.palette.red[20] | |
| red-10 | Red | #660F00 | theme.palette.red[10] |
Semantic Category
The semantic category has been sub-categorized into background, text, brand, border, and functions. Possibility for a few more categories exists as the need arises.
Background Colors
| Token Name | Alias Of | Hex Code | Sistent Token | Preview | Role |
|---|---|---|---|---|---|
| background-default | charcoal-10 | #000D12 | theme.palette.background.default | This is the default background color for any desired page. | |
| background-secondary | accent_grey-10 | #15272F | theme.palette.background.secondary | First level surface color which is used to establish prominence and layer hierarchy. | |
| background-tertiary | accent_grey-30 | #3D4F57 | theme.palette.background.tertiary | Second level surface color which is used to establish prominence and layer hierarchy. | |
| background-hover | charcoal-20 | #142126 | theme.palette.background.hover | Color for surface hover interactions. | |
| background-supplementary | accent_grey-40 | #51636B | theme.palette.background.supplementary | Alternative color for both themes. Sample use case in tooltip component. | |
| background-blur-heavy | accent_grey-10, 80% | #15272F | theme.palette.background.blur.heavy | Low opacity colors used to estabish prominence and layer hierarchy. Use for modals and overlays and along with blur shadow | |
| background-blur-light | accent_grey-10, 50% | #15272F | theme.palette.background.blur.light | A variation of the low opacity colors used for modals and overlays. | |
| background-inverse | accent_grey-90 | #E7EFF3 | theme.palette.background.inverse | Background color for areas that will include each theme experience. | |
| background-brand-default | keppel-40 | #00B39F | theme.palette.background.brand.default | Color for interface elements relating to the brand. | |
| background-brand-hover | keppel-50 | #41CCB3 | theme.palette.background.brand.hover | Color for surface hover interactions relating to the brand. | |
| background-brand-disabled | charcoal-20 | #00B39F | theme.palette.background.brand.disabled | Color for disabled interface elements relating to the brand. | |
| background-brand-pressed | keppel-60 | #93E6D1 | theme.palette.background.brand.pressed | Color for pressed surface interactions relating to the brand. | |
| background-brand-secondary | keppel-20 | #006661 | theme.palette.background.brand.secondary | First level brand surface color which is used to establish prominence and layer hierarchy. | |
| background-brand-tertiary | keppel-10 | #00403F | theme.palette.background.brand.tertiary | Second level brand surface color which is used to establish prominence and layer hierarchy. | |
| background-graphics-default | carbon-40 | #00D3A9 | theme.palette.background.graphics.default | Color for interface elements like visuals and illustrations. | |
| background-cta-default | saffron-40 | #EBC017 | theme.palette.background.cta.default | Color for interface elements relating to calls to action. | |
| background-cta-hover | saffron-50 | #FFEB6B | theme.palette.background.cta.hover | Color for surface hover interactions relating to calls to action. | |
| background-cta-pressed | saffron-60 | #FFFBBD | theme.palette.background.cta.pressed | Color for pressed surface interactions relating to calls to action. | |
| background-cta-secondary | saffron-20 | #785400 | theme.palette.background.cta.secondary | First level cta surface color which is used to establish prominence and layer hierarchy. | |
| background-cta-tertiary | saffron-10 | #523600 | theme.palette.background.cta.tertiary | Second level cta surface color which is used to establish prominence and layer hierarchy. | |
| background-info-default | blue-40 | #1E77FC | theme.palette.background.info.default | Color for interface elements relating to notifications and information. | |
| background-info-hover | blue-50 | #4797FF | theme.palette.background.info.hover | Color for surface hover interactions relating to notifications and information. | |
| background-info-pressed | blue-60 | #99CCFF | theme.palette.background.info.pressed | Color for pressed surface interactions relating to notifications and information. | |
| background-info-secondary | blue-20 | #043DB0 | theme.palette.background.info.secondary | First level information surface color which is used to establish prominence and layer hierarchy. | |
| background-info-tertiary | blue-10 | #001B63 | theme.palette.background.info.tertiary | Second level information surface color which is used to establish prominence and layer hierarchy. | |
| background-success-default | green-40 | #36BC3B | theme.palette.background.success.default | Color for interface elements relating to success. | |
| background-success-hover | green-50 | #5BC95B | theme.palette.background.success.hover | Color for surface hover interactions relating to success. | |
| background-success-pressed | green-60 | #B2E3AF | theme.palette.background.success.pressed | Color for pressed surface interactions relating to success. | |
| background-success-secondary | green-20 | #0A4A13 | theme.palette.background.success.secondary | First level success surface color which is used to establish prominence and layer hierarchy. | |
| background-success-tertiary | green-10 | #05240A | theme.palette.background.success.tertiary | Second level success surface color which is used to establish prominence and layer hierarchy. | |
| background-warning-default | yellow-40 | #FFB302 | theme.palette.background.warning.default | Color for interface elements relating to warnings. | |
| background-warning-hover | yellow-50 | #FFC72B | theme.palette.background.warning.hover | Color for surface hover interactions relating to warnings. | |
| background-warning-pressed | yellow-60 | #FFE7D | theme.palette.background.warning.pressed | Color for pressed surface interactions relating to warnings. | |
| background-warning-secondary | yellow-20 | #8C5400 | theme.palette.background.warning.secondary | First level warning surface color which is used to establish prominence and layer hierarchy. | |
| background-warning-tertiary | yellow-10 | #663A00 | theme.palette.background.warning.tertiary | Second level warning surface color which is used to establish prominence and layer hierarchy. | |
| background-error-default | red-40 | #FF385C | theme.palette.background.error.default | Color for interface elements relating to errors and destructive actions. | |
| background-error-hover | red-50 | #FF6179 | theme.palette.background.error.hover | Color for surface hover interactions relating to errors. | |
| background-error-pressed | red-60 | #FFB3B9 | theme.palette.background.error.pressed | Color for pressed surface interactions relating to errors. | |
| background-error-secondary | red-20 | #8C0A2F | theme.palette.background.error.secondary | First level error surface color which is used to establish prominence and layer hierarchy. | |
| background-error-tertiary | red-10 | #660624 | theme.palette.background.error.tertiary | Second level error surface color which is used to establish prominence and layer hierarchy. |
Text Colors
| Token Name | Alias Of | Hex Code | Sistent Token | Preview | Role |
|---|---|---|---|---|---|
| text-default | charcoal-100 | #fdfdfd | theme.palette.text.default | Aa | Default text color. |
| text-secondary | charcoal-80 | #d2d8da | theme.palette.text.secondary | Aa | First level text color to indicate lower prominence and establish visual hierarchy. |
| text-tertiary | charcoal-60 | #8c999e | theme.palette.text.tertiary | Aa | Second level text color to indicate lower prominence and establish visual hierarchy. |
| text-inverse | charcoal-10 | #000d12 | theme.palette.text.inverse | Aa | This text color is the polar opposite of the default text color in any theme. |
| text-disabled | charcoal-50 | #647176 | theme.palette.text.disabled | Aa | This text color is the polar opposite of the default text color in any theme. |
| text-constant-white | charcoal-100 | #fdfdfd | theme.palette.text.constant.white | Aa | This text color remains constant across both themes and is used on surfaces that don’t change as themes change. |
| text-brand | keppel-40 | #00b39f | theme.palette.text.brand | Aa | Color for text relating to the brand. |
| text-info | blue-40 | #2196f3 | theme.palette.text.info | Aa | Color for text relating to notifications and information. |
| text-success | green-40 | #36bc3b | theme.palette.text.success | Aa | Color for text relating to success. |
| text-warning | yellow-40 | #f0d053 | theme.palette.text.warning | Aa | Color for text relating to warnings. |
| text-error | red-40 | #f91313 | theme.palette.text.error | Aa | Color for text relating to errors and destructive actions. |
Border Colors
| Token Name | Alias Of | Hex Code | Sistent Token | Preview | Role |
|---|---|---|---|---|---|
| border-default | accent_grey-10 | #15272f | theme.palette.border.default | Default border color for interface elements. | |
| border-brand | keppel-40 | #00b39f | theme.palette.border.brand | Border color for elements relating to the brand. | |
| border-normal | accent_grey-30 | #3d4f57 | theme.palette.border.normal | First level border color to establish prominence and visual hierarchy. | |
| border-strong | accent_grey-60 | #8d9fa7 | theme.palette.border.strong | Second level border color to establish prominence and visual hierarchy. |
Component Colors
Tokens here are component specific and must be used only for the component that they are referencing.
| Token Name | Alias Of | Hex Code | Sistent Token | Preview | Role |
|---|---|---|---|---|---|
| icon-default | accent_grey-10 | #15272f | theme.palette.icon.default | Default color for icon component in a design. | |
| icon-secondary | charcoal-80 | #d2d8da | theme.palette.icon.secondary | Default color for icon component in a design. | |
| icon-brand | keppel-40 | #00b39f | theme.palette.icon.secondary | Default color for any icon relating to the brand. | |
| icon-inverse | charcoal-10 | #00012 | theme.palette.icon.inverse | This icon color is the polar opposite of the default icon color in any theme. | |
| icon-weather | saffron-40 | #3d4f57 | theme.palette.icon.weather | Deafult color for any icon representing theme switching. | |
| icon-disabled | charcoal-50 | #647176 | theme.palette.icon.disabled | Color for icon components. |
