Color

Color plays a vital role in our design system, shaping the visual identity of our brand and enhancing user experience. Our color documentation outlines the principles, palette, and guidelines for using color consistently across all digital products and platforms. We use design tokens to define our color palette, which translates into Tailwind classes for easy implementation. Our colors are created with Figma variables and then exported into a JSON format.

Storybook

Storybook - Color Documentation

Figma Demo

Guidelines

Color Palette

Our color palette is divided into several categories: brand, accent, neutral, success, critical, warning, and info. Each category includes a range of shades, from light to dark, to provide flexibility for various design needs.

Usage Guidelines

  • Code: Our color tokens translate into Tailwind classes for easy implementation. For example, text-brand applies the primary brand color to text, and bg-accent applies the accent color to backgrounds.

  • Design: In Figma, only contextual tokens are accessible. Each contextual token points to a core token, and the usage of these tokens is strictly defined to maintain consistency and clarity in design.

    • Backgrounds: Use only bg tokens for backgrounds. Example: bg-brand-default, bg-accent-hover.
    • Text: Use only text tokens for text elements. Example: text-brand, text-neutral.
    • Borders: Use only border tokens for borders. Example: border-brand, border-neutral.

Accessibility Considerations

  • Color Contrast: Maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text or UI components.
  • Color Blindness: Avoid relying solely on color to convey information. Use text labels, patterns, or icons in combination with color.
  • Testing: Regularly test color combinations with accessibility tools to ensure compliance with accessibility standards (WCAG 2.1).