Color Guide: Creating Website Palette

Color usage and palettes

The color system helps you apply color to your UI in a meaningful way. In this syste, you select a primary and a secondary color to represent your brand, dark and light variants of each color and apply it to your UI in different ways. This is even easier to do in Figma once we create color styles that allows us to manage color across the whole project easily and effectively.

Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.

Color theme creation

Primary color

A primary color is the color displayed most frequently across your website’s pages and components. Your primary color can be used to make a color theme for your website, including light and dark variants.

‍

Secondary color

This color provides more ways to accent and distinguish your website. Having this color is optional and should be applied sparingly to accent selected parts of your UI.

‍

Secondary colors are best for:

• Buttons and links
• Highlighted text
• Headlines

‍

Background and error/warning colors

These types of colors don’t represent a brand, but needs to fit with overal UI. 

Background colors appears behind scrollable content and are often neutral. Error/warning colors indicates errors and warnings in forms, such as invalid text in text field. The baseline color used here is mostly red for error and orange for warning.

‍

Accessible colors

To ensure an accessible background behind light or dark text, your background can use light or dark variants of your primary and secondary colors.

Alternatively, these colors can be used for typography that appears in front of light and dark backgrounds.