Foundations
Patterns
Color
Use colors to express emotions, reflect your brand identity, and create visual continuity across components and products.
Color
Use colors to express emotions, reflect your brand identity, and create visual continuity across components and products.
Color
Use colors to express emotions, reflect your brand identity, and create visual continuity across components and products.
Key color principles
The Everything Framer design system endorses several basic principles related to color.
Visual hierarchy and communication—Color supports the purpose of the content and indicates how elements relate to each other.
Color for emphasis—Color attracts attention and highlights primary actions.
Simple minimal palette—To avoid confusion and cognitive load, color is used sparingly.
Colors have meaning—Colors carry a specific meaning based on how they function within the interface.
Legibility and Readability—Text, icons, and other elements must meet the contrast minimums specified by the accessibility standards.
Color and accessibility
While colors can bring a specific mood and set the conversational tone, you must also consider two other qualities of color, especially when creating an accessible design—contrast ratio and the ability to convey information accessibly.
Color contrast
Color contrast is the difference between the brightness of the text or graphic and the brightness of the background color behind them. This difference is expressed as a ratio ranging from 1:1 (white on white) to 21:1 (black on white). In the context of accessibility, the higher the contrast ratio, the more readable your content is for color-blind or visually impaired users.
Conveying information with color
To convey information in an accessible manner, never use color as the only visual means to indicate status, prompt a response, or distinguish a visual element. Many people see color differently and you risk that they don't recognize the specific function and meaning of a given color. To be accessible to everyone, your designs must be color-agnostic and always feature a backup communication mechanism:
To deliver an error message, use symbols or icons along with colors.
Add text labels to the messages.
Choose the colors wisely and test them to verify that people with vision deficiencies can differentiate them.
Usage
To help users navigate the experiences you create, it is recommended that you use consistent design and color patterns across surfaces.
The application of color is a vital part of every digital product and interface. When used in a meaningful and consistent way, color reinforces the content hierarchy and keeps the cognitive load low.
This article describes several basic principles that will allow you to improve the user experience.
Primary color
Your app’s primary color (also known as the accent color) is a single hex value that best represents your brand and should be used purposefully. This color is used sparingly for orientation, selected states, and live activity.
Use your brand color to create hierarchy on surfaces and components such as cards, dialogs, headers, inputs, and buttons. When applying colors to informational components such as button text or icons, aim for the minimum contrast ratio of 4.5:1.
60%
30%
10%
Leverage the 60-30-10 rule
Emphasizing primary actions
Color, as one of the most powerful tools, allows you to draw the user's attention and increase usability. The use of accent or primary color serves to emphasize the main call to action.
Do
Use color to emphasize primary actions.
Don't
Avoid using secondary colors on primary action buttons.
Providing sufficient contrast
Contrast is the difference in lightness between two color values. Provide sufficient contrast to improve readability and to ensure that meaning is not lost for color-blind users. According to WCAG AA contrast minimums, the contrast ratio between the text and the background layer colors must be:
At least 4.5:1 for normal text (less than 18 pts; less than 14 pts bold).
At least 3:1 for large text (more than 18 pts; more than 14 pts bold).
Do
For text, icons, illustrations, and backgrounds use color tones that provide sufficient contrast.
Don't
For text, icons, illustrations, and backgrounds, avoid using color tones that do not provide sufficient contrast.
Conveying Meaning
Color can never be the only way to identify statuses or convey meaning. Some color-blind people, for example, cannot tell the difference between certain color combinations. Along with color, always utilize additional means of identification, such as visible text, underlines, borders for visible focus styles, and icons that correspond to the content.
Do
Use semantic colors accompanied by text and icons to convey meaning more effectively.
Don't
Avoid using colors as the only way to convey information.
Key color principles
The Everything Framer design system endorses several basic principles related to color.
Visual hierarchy and communication—Color supports the purpose of the content and indicates how elements relate to each other.
Color for emphasis—Color attracts attention and highlights primary actions.
Simple minimal palette—To avoid confusion and cognitive load, color is used sparingly.
Colors have meaning—Colors carry a specific meaning based on how they function within the interface.
Legibility and Readability—Text, icons, and other elements must meet the contrast minimums specified by the accessibility standards.
Color and accessibility
While colors can bring a specific mood and set the conversational tone, you must also consider two other qualities of color, especially when creating an accessible design—contrast ratio and the ability to convey information accessibly.
Color contrast
Color contrast is the difference between the brightness of the text or graphic and the brightness of the background color behind them. This difference is expressed as a ratio ranging from 1:1 (white on white) to 21:1 (black on white). In the context of accessibility, the higher the contrast ratio, the more readable your content is for color-blind or visually impaired users.
Conveying information with color
To convey information in an accessible manner, never use color as the only visual means to indicate status, prompt a response, or distinguish a visual element. Many people see color differently and you risk that they don't recognize the specific function and meaning of a given color. To be accessible to everyone, your designs must be color-agnostic and always feature a backup communication mechanism:
To deliver an error message, use symbols or icons along with colors.
Add text labels to the messages.
Choose the colors wisely and test them to verify that people with vision deficiencies can differentiate them.
Usage
To help users navigate the experiences you create, it is recommended that you use consistent design and color patterns across surfaces.
The application of color is a vital part of every digital product and interface. When used in a meaningful and consistent way, color reinforces the content hierarchy and keeps the cognitive load low.
This article describes several basic principles that will allow you to improve the user experience.
Primary color
Your app’s primary color (also known as the accent color) is a single hex value that best represents your brand and should be used purposefully. This color is used sparingly for orientation, selected states, and live activity.
Use your brand color to create hierarchy on surfaces and components such as cards, dialogs, headers, inputs, and buttons. When applying colors to informational components such as button text or icons, aim for the minimum contrast ratio of 4.5:1.
60%
30%
10%
Leverage the 60-30-10 rule
Emphasizing primary actions
Color, as one of the most powerful tools, allows you to draw the user's attention and increase usability. The use of accent or primary color serves to emphasize the main call to action.
Do
Use color to emphasize primary actions.
Don't
Avoid using secondary colors on primary action buttons.
Providing sufficient contrast
Contrast is the difference in lightness between two color values. Provide sufficient contrast to improve readability and to ensure that meaning is not lost for color-blind users. According to WCAG AA contrast minimums, the contrast ratio between the text and the background layer colors must be:
At least 4.5:1 for normal text (less than 18 pts; less than 14 pts bold).
At least 3:1 for large text (more than 18 pts; more than 14 pts bold).
Do
For text, icons, illustrations, and backgrounds use color tones that provide sufficient contrast.
Don't
For text, icons, illustrations, and backgrounds, avoid using color tones that do not provide sufficient contrast.
Conveying Meaning
Color can never be the only way to identify statuses or convey meaning. Some color-blind people, for example, cannot tell the difference between certain color combinations. Along with color, always utilize additional means of identification, such as visible text, underlines, borders for visible focus styles, and icons that correspond to the content.
Do
Use semantic colors accompanied by text and icons to convey meaning more effectively.
Don't
Avoid using colors as the only way to convey information.
Key color principles
The Everything Framer design system endorses several basic principles related to color.
Visual hierarchy and communication—Color supports the purpose of the content and indicates how elements relate to each other.
Color for emphasis—Color attracts attention and highlights primary actions.
Simple minimal palette—To avoid confusion and cognitive load, color is used sparingly.
Colors have meaning—Colors carry a specific meaning based on how they function within the interface.
Legibility and Readability—Text, icons, and other elements must meet the contrast minimums specified by the accessibility standards.
Color and accessibility
While colors can bring a specific mood and set the conversational tone, you must also consider two other qualities of color, especially when creating an accessible design—contrast ratio and the ability to convey information accessibly.
Color contrast
Color contrast is the difference between the brightness of the text or graphic and the brightness of the background color behind them. This difference is expressed as a ratio ranging from 1:1 (white on white) to 21:1 (black on white). In the context of accessibility, the higher the contrast ratio, the more readable your content is for color-blind or visually impaired users.
Conveying information with color
To convey information in an accessible manner, never use color as the only visual means to indicate status, prompt a response, or distinguish a visual element. Many people see color differently and you risk that they don't recognize the specific function and meaning of a given color. To be accessible to everyone, your designs must be color-agnostic and always feature a backup communication mechanism:
To deliver an error message, use symbols or icons along with colors.
Add text labels to the messages.
Choose the colors wisely and test them to verify that people with vision deficiencies can differentiate them.
Usage
To help users navigate the experiences you create, it is recommended that you use consistent design and color patterns across surfaces.
The application of color is a vital part of every digital product and interface. When used in a meaningful and consistent way, color reinforces the content hierarchy and keeps the cognitive load low.
This article describes several basic principles that will allow you to improve the user experience.
Primary color
Your app’s primary color (also known as the accent color) is a single hex value that best represents your brand and should be used purposefully. This color is used sparingly for orientation, selected states, and live activity.
Use your brand color to create hierarchy on surfaces and components such as cards, dialogs, headers, inputs, and buttons. When applying colors to informational components such as button text or icons, aim for the minimum contrast ratio of 4.5:1.
60%
30%
10%
Leverage the 60-30-10 rule
Emphasizing primary actions
Color, as one of the most powerful tools, allows you to draw the user's attention and increase usability. The use of accent or primary color serves to emphasize the main call to action.
Do
Use color to emphasize primary actions.
Don't
Avoid using secondary colors on primary action buttons.
Providing sufficient contrast
Contrast is the difference in lightness between two color values. Provide sufficient contrast to improve readability and to ensure that meaning is not lost for color-blind users. According to WCAG AA contrast minimums, the contrast ratio between the text and the background layer colors must be:
At least 4.5:1 for normal text (less than 18 pts; less than 14 pts bold).
At least 3:1 for large text (more than 18 pts; more than 14 pts bold).
Do
For text, icons, illustrations, and backgrounds use color tones that provide sufficient contrast.
Don't
For text, icons, illustrations, and backgrounds, avoid using color tones that do not provide sufficient contrast.
Conveying Meaning
Color can never be the only way to identify statuses or convey meaning. Some color-blind people, for example, cannot tell the difference between certain color combinations. Along with color, always utilize additional means of identification, such as visible text, underlines, borders for visible focus styles, and icons that correspond to the content.
Do
Use semantic colors accompanied by text and icons to convey meaning more effectively.
Don't
Avoid using colors as the only way to convey information.