Color Concepts in I Love Cards

The Color System

I Love Cards uses a color system built on three concepts:

• Color tokens - Semantic names for colors like "Brand color 1" or "Category color 3"
• Color palettes - used by decks, define the colors associated with each color token
• Primary color - The main dominant color of a card

Colors Tokens

When you assign a color to a text or a background, you're actually assigning a color token. Instead of storing #FF0000 (red), the system stores "Category color 1".

Common color tokens:

• Brand color 1, 2, 3... - Identity colors
• Category color 1, 2, 3... - Differentiation colors
• Neutral 50, 100... 900 - Grays and structure
• Primary color - One of the category colors but determined dynamically for each card

The Color Palette

Each deck has one palette that defines the colors associated with each color token.

See Create a Color Palette.

Templates Use Tokens

Templates use color tokens to reference colors, not specific colors.

Traditional design: "Background is #FF5733"
I Love Cards: "Background uses brand color 1"

See Assign Colors in a Template.

Primary Color

Each card has a primary color. Most of the time, you'll want it to be the same as the category color. But it can also fall back to the default deck color or set to a specific color token.

Inheritance order:

Custom color for this card
    ↓ (if not set)
Category default color
    ↓ (if not set)
Deck default color

See Define the Card Primary Color.