Back to Playbook

Primary Palette

The core brand colors used for primary actions, active states, and key visual elements to ensure brand recognition.

Why it matters

Color is the most immediate way to convey brand personality and guide user attention. A defined primary palette ensures that the most important actions are instantly recognizable and that the product feels cohesive.

Core Colors

Edit 4.5:1

The main brand color. Used for primary buttons, links, and active states. Defines the overall look and feel.

Edit 4.5:1

A supporting color. Used for illustrations, variety, and secondary states. Complements the primary color.

Edit 4.5:1

A high-contrast accent. Used for priority alerts and calls to action that need to stand out.

Live Preview

See how your selected colors apply to standard UI components in real-time.


Primary Badge Secondary Badge Action Badge Text Link

Toggle
Checkbox
Radio

Card Title

This sample card demonstrates how your selected colors work together in a layout context.

Tag

Usage Checklist

  1. Contrast Compliance

    Ensure all text on primary colors meets WCAG AA standards (4.5:1).

  2. State Variations

    Define hover, active, and disabled states for each primary color.

  3. 60-30-10 Rule

    Use the primary color sparingly (approx 10-30%) to draw attention, not overwhelm.

Previous Section: Aesthetics Next: Neutrals