v34.0.1
Tools
Color Usage
Use color systematically to reduce confusion, improve predictability, and make the product easier to use
General Guidelines
- Color should be used to differentiate elements and communicate meaning.
- Color must be selected carefully and used consistently across the product. People often remember how color is used and will look for intentional, or unintentional, patterns.
- Only use colors from the palette. The Usage section lists our standard color combinations/applications.
- Colors have traditional meanings which vary between cultures. When employing color in a new situation ensure that proper research has been done to understand cultural connotations of color in that situation.
- Never use color as the sole signifier of meaning. Perception and understanding of color varies considerably between all people.
- Contrast between adjacent colors (whether text or graphical elements) must be high to ensure that legibility. See Usage for combinations with suitable contrast.
- The size of a colored element and the color of adjacent elements will greatly change how easy it is to identify that color. For example, two small circles which are orange and red, respectively, will be harder to tell apart than two large rectangles in the same two colors.
- Use complimentary colors (e.g. blue, orange, purple) instead of similar hues or values (e.g. green, light green, blue, light blue) for color-coding elements in a chart, list, etc.
- Understand the Carta brand colors. Do not change the colors of graphical brand expressions, such as the Carta Logo and associated text. Do not use brand colors elsewhere in ways which are contradictory or confusing. The color palette and standard combinations already take this guideline into account.
- When referencing colors directly, use color tokens rather than hex values. This allows for easier maintenance and consistency across the product.
Accessibility Standards
- There are legal standards (such as Section 508 of the U.S. Rehabilitation Act) which apply to color.
- The WWW Consortium maintains the Web Content Accessibility Guidelines (WCAG) which provide a more web-specific guidance for ensuring products are accessible to more people.
- Some, but not all, of the WCAG sections related to color are:
Usage
There are standard color combinations for many common situations. Use these when possible:
white
#FFFFFFblack text
#000000Text
Page body content, titles, sub-titles, tables, data, vertical navigation items, drop-down menu items
white
#FFFFFFgray-70 text (was gray-dark-1)
#656B6BReduced
Drop-down menu section titles
blue-60 (was blue)
#2C67B5white text
#FFFFFFInformational
Informational messages, keyboard focus indications, inline text links
green-60 (was green)
#32B0A0white text
#FFFFFFPositive
Success messages, positive numbers
red-60 (was red-dark)
#DA1C3Cwhite text
#FFFFFFNegative
Error alerts, destructive action buttons, negative numbers
orange-60 (was orange-dark)
#E57B5Awhite text
#FFFFFFNotice
Warning about potential errors, cautionary states, call to action
yellow-60 (was yellow-dark)
#F8D648black text
#000000Pending
Generating export, waiting state, in-progress but not actionable
orange-60 (was orange-dark)
#E57B5Awhite text
#FFFFFFStaff
Staff-only tools or information
Do
Use standard color combinations when applicable.
Don't
Do not force users to figure out unexplained differences in color. The primary button here is a different color from other primary buttons in the product, which is likely to cause confusion.
Do
Use standard color combinations when applicable.
Don't
Do not force users to figure out unexplained differences in color. The primary button here is a different color from other primary buttons in the product, which is likely to cause confusion.
Do
Do use standard color combinations to distinguish between types of information.
Don't
Here, the required field marker and an error message use similar colors. Many users will assume that both items are related to the error, which is untrue.
Do
Do use standard color combinations to distinguish between types of information.
Don't
Here, the required field marker and an error message use similar colors. Many users will assume that both items are related to the error, which is untrue.
Color and State
- Specific changes in color can be one way to communicate that an element is in an alternate state.
- Do change the hue of an interactive element when it changes state.
- Opacity is used in a limited way to show differences in state for interactive elements (primarily buttons).
- The visual difference between the normal and hover state can be relatively subtle.
- It must be easy to tell whether an interactive element is enabled. If it is not enabled ("inactive" or "disabled") it must have a substantial, visual difference from the normal and hover states.
- For standard color combinations, use these matching hover and inactive state color:
Text
Vertical navigation items
white background
#FFFFFFblack text
#000000Enabled
gray-30 background (was gray-light-1)
#DEDFDFblack text
#000000Enabled with hover
Drop-down menu items
white background
#FFFFFFblack text
#000000Enabled
gray-20 background (was gray-lightest-3)
#EBECECblue-70 text (was blue-dark)
#285DA3Enabled with hover
Utility
Utility action buttons, secondary context menu trigger buttons
white background
#FFFFFFblack text
#000000Enabled
white
#FFFFFFblue-70 (was blue-dark)
#285DA3Enabled with hover
white
#FFFFFFgray-40 (was gray-light-2)
#C4C4C4Disabled
Primary
Primary buttons, primary action in Block and Modal
gray-90 background (was gray-dark-3)
#232B2Bwhite text
#FFFFFFEnabled
blue-70 (was blue-dark)
#285DA3white
#FFFFFFEnabled with hover
gray-30 (was gray-light-1)
#DEDFDFgray-50 (was gray-light-3)
#A7AAAADisabled
Danger
Error alerts, destructive action buttons
red-70 background (was red-darkest)
#C41936white text
#FFFFFFEnabled
red-60 (was red-dark)
#DA1C3Cwhite
#FFFFFFEnabled with hover
red-20
#F8D2D8red-40 (was red-light)
#E9778ADisabled
Full Palette
- The full palette is used in cases not described above.
- When making color decisions, be aware of both the hue and value of the colors under consideration. Solving problems, such as poor contrast, can often be easier when adjusting these independently. The palette is arranged by hue and saturation/value:
blue-10
#EAF0F8blue-20
#DFE8F4blue-30 (was blue-lightest)
#C0D1E9blue-40 (was blue-light)
#8BABD6blue-50
#4176BCblue-60 (was blue)
#2C67B5blue-70 (was blue-dark)
#285DA3blue-80 (was blue-darkest)
#235291blue-90
#1A3E6Dblue-100
#122948green-10
#EBF7F6green-20
#D6EFECgreen-30 (was green-lightest)
#ADDFD9green-40
#84D0C6green-50 (was green-light)
#5BC0B3green-60 (was green)
#32B0A0green-70 (was green-dark)
#2D9E90green-80 (was green-darkest)
#237C70green-90
#1E6A60green-100
#144640lime-10
#FAFDEElime-20
#F5FCD5lime-30
#EBFCAClime-40
#DDFB74lime-50
#C9EC56lime-60
#B1D636lime-70
#94B524lime-80
#738C12lime-90
#536507lime-100
#384202yellow-10
#FFFEF7yellow-20
#FFFCEDyellow-30 (was yellow-lightest)
#FEF8DAyellow-40 (was yellow-light)
#FCEFB6yellow-50 (was yellow)
#FBE284yellow-60 (was yellow-dark)
#F8D648yellow-70 (was yellow-darkest)
#DDB31Fyellow-80
#B48804yellow-90
#825A00yellow-100
#4D2F00orange-10
#FCF0EEorange-20
#FAE5DEorange-30 (was orange-lightest)
#F5CABDorange-40 (was orange-light)
#EFB09Corange-50 (was orange)
#EA957Borange-60 (was orange-dark)
#E57B5Aorange-70
#CE6F51orange-80 (was orange-darkest)
#B76248orange-90
#A0563Forange-100
#733E2Dred-10
#FBE8ECred-20
#F8D2D8red-30 (was red-lightest)
#F0A4B1red-40 (was red-light)
#E9778Ared-50 (was red)
#E14963red-60 (was red-dark)
#DA1C3Cred-70 (was red-darkest)
#C41936red-80
#AE1630red-90
#831124red-100
#570B18brown-10 (was key-pair)
#FBF8F7brown-20
#F0EAE1brown-30
#E2D5C2brown-40
#CCB695brown-50
#C5AB85brown-60
#B69667brown-70
#A4875Dbrown-80
#7F6948brown-90
#5B4B34brown-100
#493C29gray-10 (was gray-lightest-1)
#F4F4F4gray-20 (was gray-lightest-3)
#EBECECgray-30 (was gray-light-1)
#DEDFDFgray-40 (was gray-light-2)
#C4C4C4gray-50 (was gray-light-3)
#A7AAAAgray-60 (was gray)
#7B8080gray-70 (was gray-dark-1)
#656B6Bgray-80 (was gray-dark-2)
#394040gray-90 (was gray-dark-3)
#232B2Bgray-100
#1C2222black
#000000white
#FFFFFFblue-10
#EAF0F8blue-20
#DFE8F4blue-30 (was blue-lightest)
#C0D1E9blue-40 (was blue-light)
#8BABD6blue-50
#4176BCblue-60 (was blue)
#2C67B5blue-70 (was blue-dark)
#285DA3blue-80 (was blue-darkest)
#235291blue-90
#1A3E6Dblue-100
#122948green-10
#EBF7F6green-20
#D6EFECgreen-30 (was green-lightest)
#ADDFD9green-40
#84D0C6green-50 (was green-light)
#5BC0B3green-60 (was green)
#32B0A0green-70 (was green-dark)
#2D9E90green-80 (was green-darkest)
#237C70green-90
#1E6A60green-100
#144640lime-10
#FAFDEElime-20
#F5FCD5lime-30
#EBFCAClime-40
#DDFB74lime-50
#C9EC56lime-60
#B1D636lime-70
#94B524lime-80
#738C12lime-90
#536507lime-100
#384202yellow-10
#FFFEF7yellow-20
#FFFCEDyellow-30 (was yellow-lightest)
#FEF8DAyellow-40 (was yellow-light)
#FCEFB6yellow-50 (was yellow)
#FBE284yellow-60 (was yellow-dark)
#F8D648yellow-70 (was yellow-darkest)
#DDB31Fyellow-80
#B48804yellow-90
#825A00yellow-100
#4D2F00orange-10
#FCF0EEorange-20
#FAE5DEorange-30 (was orange-lightest)
#F5CABDorange-40 (was orange-light)
#EFB09Corange-50 (was orange)
#EA957Borange-60 (was orange-dark)
#E57B5Aorange-70
#CE6F51orange-80 (was orange-darkest)
#B76248orange-90
#A0563Forange-100
#733E2Dred-10
#FBE8ECred-20
#F8D2D8red-30 (was red-lightest)
#F0A4B1red-40 (was red-light)
#E9778Ared-50 (was red)
#E14963red-60 (was red-dark)
#DA1C3Cred-70 (was red-darkest)
#C41936red-80
#AE1630red-90
#831124red-100
#570B18brown-10 (was key-pair)
#FBF8F7brown-20
#F0EAE1brown-30
#E2D5C2brown-40
#CCB695brown-50
#C5AB85brown-60
#B69667brown-70
#A4875Dbrown-80
#7F6948brown-90
#5B4B34brown-100
#493C29gray-10 (was gray-lightest-1)
#F4F4F4gray-20 (was gray-lightest-3)
#EBECECgray-30 (was gray-light-1)
#DEDFDFgray-40 (was gray-light-2)
#C4C4C4gray-50 (was gray-light-3)
#A7AAAAgray-60 (was gray)
#7B8080gray-70 (was gray-dark-1)
#656B6Bgray-80 (was gray-dark-2)
#394040gray-90 (was gray-dark-3)
#232B2Bgray-100
#1C2222black
#000000white
#FFFFFFIs this page helpful?