Skip to main content

Color Palettes

Color palettes are predefined color schemes that can be applied to templates and designs. They provide a consistent way to manage brand colors and ensure visual consistency across all exports.

What color palettes enable:

  • Brand consistency: Maintain consistent colors across all designs and exports
  • Quick customization: Switch between different color schemes without manually changing individual colors
  • Template flexibility: Templates can support multiple color palettes, allowing users to choose their preferred scheme
  • System and custom palettes: Use built-in system palettes or create organization-specific custom palettes

How it works: Color palettes define a set of color tokens (primary, secondary, accent, neutral, background, text, border) that can be referenced in templates using the token: prefix (e.g., token:primary). When a design selects a color palette, all color tokens in the template are replaced with the corresponding colors from that palette. Templates can enable color palette support, and designs can then select from available palettes.

Color Palette Structure​

A color palette contains a set of predefined colors organized into semantic tokens. These tokens can be referenced in template elements, and the platform automatically replaces them with the actual color values from the selected palette.

The Color Palette Object​

The color palette object structure:

interface ColorPalette {
  id: string;                    // UUID or system palette ID (e.g., "warm-orange")
  name: string;                  // Palette name
  description?: string;          // Palette description
  isSystemDefault: boolean;       // System-wide default palette
  organizationId?: string;        // null = system-wide, set = organization-specific
  
  colors: {
    primary: string;              // Primary brand color (hex)
    secondary: string;            // Secondary brand color (hex)
    accent: string;               // Accent color (hex)
    neutral: string;             // Neutral color (hex)
    background: string;           // Background color (hex)
    text: string;                 // Text color (hex)
    border?: string;              // Border color (hex, optional)
  };
  
  createdAt: Date;
  updatedAt: Date;
}

Color Tokens​

Color palettes define semantic color tokens that can be referenced in templates:

  • primary: Main brand color, typically used for headlines, buttons, and key elements
  • secondary: Secondary brand color, used for supporting elements
  • accent: Accent color for highlights and call-to-action elements
  • neutral: Neutral color for subtle elements and backgrounds
  • background: Background color for the design
  • text: Primary text color
  • border: Border color (optional)

Using Color Tokens in Templates​

In template elements, colors can be referenced using the token: prefix:

{
  "style": {
    "color": "token:primary",
    "backgroundColor": "token:background",
    "borderColor": "token:border"
  }
}

When a design selects a color palette, the platform automatically replaces these tokens with the actual color values from the palette.

System Palettes​

The platform provides built-in system palettes that are available to all organizations:

  • corporate-blue: Professional blue palette for business applications
  • warm-orange: Warm orange palette for creative and energetic brands
  • elegant-purple: Elegant purple palette for luxury and innovative brands
  • minimal-gray: Minimalist gray palette for modern and clean designs
  • nature-green: Natural green palette for sustainable and ecological brands
  • passionate-red: Passionate red palette for bold and energetic brands

System palettes use predefined IDs (e.g., "warm-orange") instead of UUIDs.

Custom Palettes​

Organizations can create custom color palettes that are specific to their brand. Custom palettes are stored with UUIDs and are only available to the organization that created them. This allows organizations to maintain their exact brand colors while still benefiting from the color token system.

Template Support​

Color palette support is always on for every template. A template defines its default palette via defaultColorPaletteId, and designs can override this by selecting a different palette. Element colors that reference a palette role (e.g. token:primary) resolve against the active palette at render time; if no default palette is set, the default system palette applies.

Design Configuration​

Designs can select a color palette by setting colorPaletteId. This can be either:

  • A system palette ID (e.g., "warm-orange")
  • A custom palette UUID

If no palette is selected, the template's default palette is used (if defined), or colors are used as-is if the template doesn't support color palettes.

See also​