Global (Token) Colors

Remember, global tokens are design-wide settings that are consistent across the entire system, such as typography, color, and spacing. These tokens are usually defined in a central location and can be used throughout the design.

I started with GoFundMe’s global colors, these important categories consist of:

• Primary: for primary actions like buttons, icons, and text on navigation and tabs, and for the background in navigation and tab interactive states.
• Neutral: use neutral colors to set the background, borders, and text for our product.
• Success: success colors indicate something positive, like the success of a user action or illustrating growth.
• Error: for destructive interactive elements, errors, and critical events that require immediate action.
• Informational: important elements that don’t require immediate action. They’re used with informational banners and badges, drawing attention to new information, loading or progress bars, and data visualization.
• Warning: warning colors let the user know they need to take action and are applied to badges, banners, and exception lists.

There are a few things to consider when selecting the color for a design system:

• Brand identity: Color should align with and reinforce your brand identity.
• Accessibility: Color choices should have sufficient contrast to meet accessibility guidelines and be usable by people with color blindness or other visual impairments.
• Emotion: Color should evoke the desired emotional response, such as conveying professionalism, excitement, or calmness.
• Context: Color should be appropriate for the type of content or context it will be used in, such as conveying different meanings for error or success messages.
• Consistency: Color should be used consistently throughout the design system to promote unity and recognition.
• Scalability: Color should be easily scalable and adaptable to different platforms and devices.
• Readability: Color should not interfere with the readability of text or other content.