Colors

Assign Colors in a Template

Apply color roles to text, backgrounds, and borders in the template designer. Use color references to create reusable, adaptive templates.

How to Assign Colors to an Element

Go into your template library, find the template that you want to edit, open it in the template designer.

  1. Select the element you want to assign a color to (text, shape, container)
  2. In the element toolbar, find color controls: text color, background color, or border color buttons.
  3. Click the color button to open the menu and click "more colors" to open the color picker.

The Color Picker

Click any swatch to assign that color token to the selected element.

Assign a Color Based on Card Primary Color

The two most powerful swatches:

  • Primary Color (rainbow icon) - Uses each card's primary color. Depending on how the deck is setup, cards can show different colors with the same template.
  • High Contrast (black/white icon) - Auto-selects black or white based on the primary color for maximum readability.

For example, the following Task card from the AI Tinkerers Cards deck has a primary color of pink for the background and is using the high contrast token, which in this case resolves to black, for the text.

Category Colors & Brand Colors

Direct access to your palette's category and brand colors.

Neutrals & Pure Colors

Grays for structure: backgrounds, borders, subtle text.

High Contrast Colors

Readable variants of primary and brand colors, adjusted for light or dark backgrounds. Use these when you need a category or brand color as text on a colored background.