foundations
Colors ()
Color makes the visual design more consistent, provides meaning & adds brand identity to the interface. We have two types of colors: platform colors and brand specifc colors.
Naming
Chameleon's color system is designed to be unambigous and accessible. It comes in different themes per brand. Each brand is compromised of of brand specific colors (e.g., primary, secondary) and shared platform colors (e.g., greys, supportive blue).
Brand colors
Primary
Token
colorPrimaryBase
#D23E3E
Text Token
colorTextPrimaryBase
#ffffff
Secondary
Token
colorSecondaryBase
#2074C2
Text Token
colorTextSecondaryBase
#ffffff
Tertiary
Token
colorTertiaryBase
#37D89B
Text Token
colorTextTertiaryBase
#000000
Marketing color
Marketing
Token
colorMarketingBase
#CCB534
Text Token
colorTextMarketingBase
#000000
Platform colors
Feedback
Supportive Blue
Usage: Link actions
Token
colorBlueBase
#0280c6
Text Token
colorTextBlueBase
#000000
Supportive Green
Usage: Positive feedback messages
Token
colorGreenBase
#1ab11d
Text Token
colorTextGreenBase
#000000
Supportive Red
Usage: Negative feedback messages
Token
colorRedBase
#e92326
Text Token
colorTextRedBase
#000000
UI colors
Grey Base
Usage: Borders
Token
colorGreyBase
#999999
Text Token
colorTextGreyBase
#000000
Extended palettes
Every color, whether it's a brand or platform color, has an extended palette which consists of shades and tints. They come in handy for interactions and illustrations for our products.
Corresponding accessible text colors
Color lightness-to-darkness is consistent across color hues, so that every color 10–50 is accessible (4.5:1) on black, and every color 60–100 is accessible (4.5:1) on white.
Primary colors
colorPrimary10
colorTextPrimary10
colorPrimary100
colorTextPrimary100
colorPrimary20
colorTextPrimary20
colorPrimary30
colorTextPrimary30
colorPrimary40
colorTextPrimary40
colorPrimary50
colorTextPrimary50
colorPrimary60
colorTextPrimary60
colorPrimary70
colorTextPrimary70
colorPrimary80
colorTextPrimary80
colorPrimary90
colorTextPrimary90
colorPrimaryBase
colorTextPrimaryBase
colorPrimaryDark
colorTextPrimaryDark
colorPrimaryLight
colorTextPrimaryLight
Secondary colors
colorSecondary10
colorTextSecondary10
colorSecondary100
colorTextSecondary100
colorSecondary20
colorTextSecondary20
colorSecondary30
colorTextSecondary30
colorSecondary40
colorTextSecondary40
colorSecondary50
colorTextSecondary50
colorSecondary60
colorTextSecondary60
colorSecondary70
colorTextSecondary70
colorSecondary80
colorTextSecondary80
colorSecondary90
colorTextSecondary90
colorSecondaryBase
colorTextSecondaryBase
colorSecondaryDark
colorTextSecondaryDark
colorSecondaryLight
colorTextSecondaryLight
Tertiary colors
colorTertiary10
colorTextTertiary10
colorTertiary100
colorTextTertiary100
colorTertiary20
colorTextTertiary20
colorTertiary30
colorTextTertiary30
colorTertiary40
colorTextTertiary40
colorTertiary50
colorTextTertiary50
colorTertiary60
colorTextTertiary60
colorTertiary70
colorTextTertiary70
colorTertiary80
colorTextTertiary80
colorTertiary90
colorTextTertiary90
colorTertiaryBase
colorTextTertiaryBase
colorTertiaryDark
colorTextTertiaryDark
colorTertiaryLight
colorTextTertiaryLight
Marketing colors
colorMarketing10
colorTextMarketing10
colorMarketing100
colorTextMarketing100
colorMarketing20
colorTextMarketing20
colorMarketing30
colorTextMarketing30
colorMarketing40
colorTextMarketing40
colorMarketing50
colorTextMarketing50
colorMarketing60
colorTextMarketing60
colorMarketing70
colorTextMarketing70
colorMarketing80
colorTextMarketing80
colorMarketing90
colorTextMarketing90
colorMarketingBase
colorTextMarketingBase
colorMarketingDark
colorTextMarketingDark
colorMarketingLight
colorTextMarketingLight
Grey colors
The grey color palette is used to indicate status of an object, text, background, …
colorGrey10
colorTextGrey10
colorGrey100
colorTextGrey100
colorGrey20
colorTextGrey20
colorGrey30
colorTextGrey30
colorGrey40
colorTextGrey40
colorGrey50
colorTextGrey50
colorGrey60
colorTextGrey60
colorGrey70
colorTextGrey70
colorGrey80
colorTextGrey80
colorGrey90
colorTextGrey90
colorGreyBase
colorTextGreyBase
colorGreyDark
colorTextGreyDark
colorGreyLight
colorTextGreyLight
Supportive Blues
The supportive blue is used to initiate an action or a neutral outcome.
colorBlue10
colorTextBlue10
colorBlue100
colorTextBlue100
colorBlue20
colorTextBlue20
colorBlue30
colorTextBlue30
colorBlue40
colorTextBlue40
colorBlue50
colorTextBlue50
colorBlue60
colorTextBlue60
colorBlue70
colorTextBlue70
colorBlue80
colorTextBlue80
colorBlue90
colorTextBlue90
colorBlueBase
colorTextBlueBase
colorBlueDark
colorTextBlueDark
colorBlueLight
colorTextBlueLight
Supportive Greens
We use the supportive green to indicate a succesfull action or to show a postive message.
colorGreen10
colorTextGreen10
colorGreen100
colorTextGreen100
colorGreen20
colorTextGreen20
colorGreen30
colorTextGreen30
colorGreen40
colorTextGreen40
colorGreen50
colorTextGreen50
colorGreen60
colorTextGreen60
colorGreen70
colorTextGreen70
colorGreen80
colorTextGreen80
colorGreen90
colorTextGreen90
colorGreenBase
colorTextGreenBase
colorGreenDark
colorTextGreenDark
colorGreenLight
colorTextGreenLight
Supportive Reds
We use the supportive red to indicate when an actions has failed or to show a negative message.
colorRed10
colorTextRed10
colorRed100
colorTextRed100
colorRed20
colorTextRed20
colorRed30
colorTextRed30
colorRed40
colorTextRed40
colorRed50
colorTextRed50
colorRed60
colorTextRed60
colorRed70
colorTextRed70
colorRed80
colorTextRed80
colorRed90
colorTextRed90
colorRedBase
colorTextRedBase
colorRedDark
colorTextRedDark
colorRedLight
colorTextRedLight