Zum Hauptinhalt springen

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
  • Organization palettes: Create and manage organization-specific brand palettes (own or inherited from parent workspaces)

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.

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;                    // Organization palette UUID
  name: string;                  // Palette name
  description?: string;          // Palette description
  organizationId?: string;        // Owning organization
  
  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.

Organization Palettes​

Organizations create color palettes that match their brand. Palettes may also be inherited from parent workspaces when propagation is enabled. Available palettes are organization-scoped only — there are no built-in platform system palettes.

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 palette is set, token colors are left unresolved (hex colors still render as-is).

Design Configuration​

Designs can select a color palette by setting colorPaletteId to an organization palette UUID.

If no palette is selected, the template's default palette is used (if defined).

See also​