The Brand kit in Acquia Source CMS is a central repository for the design values of your brand. Brand kit colors enable you to define a color palette a single time and reuse it across every component on your site. After you update a color in the Brand kit, every component that references it updates. This process eliminates the need to edit colors page by page.

This document provides instructions to add, organize, apply, and manage Brand kit colors in Drupal Canvas.

Understanding Brand kit colors

The Brand kit stores the color palette of your brand as a set of named colors. Each Brand kit color consists of three parts:

• Color value: The actual color, defined in HEX, RGB, or HSL format, with optional opacity.
• Name: A descriptive label your team recognizes, such as Brand Primary or Accent Blue.
• Color variable: A unique Cascading Style Sheets (CSS) custom property, such as --brand-primary, that components use to reference the color. Because components point to the variable rather than a fixed value, a change to the color in the Brand kit updates it everywhere.

To keep a growing palette easy to manage, organize colors into folders, such as Primary, Neutrals, or Accents. Colors that are not placed in a folder display under Uncategorised.

A color prop is a color-type setting that a component exposes. After a component has a color prop, select a Brand kit color for it instead of entering a HEX code manually.

Accessing the Brand kit

1. Access your site.
2. On the top right, click Edit to open Drupal Canvas.
3. In the Canvas sidebar, click the Brand kit tab.
4. Click Colors to access your color palette, grouped by folder.

Adding a Brand kit color

1. In Brand kit > Colors, click + New.
2. Select a color value using any of the supported input formats:
   • HEX: Hexadecimal color code, such as #1A73E8.
   • RGB: Red, green, and blue channel values.
   • HSL: Hue, saturation, and lightness values.
   • Opacity: Transparency level of the color.
3. Enter a Name for the color, for example, Brand Primary.

4. Set the Variable for the color, for example, --brand-primary. 

   Note

   Each variable must be unique across the palette. If you enter a variable that is already in use, Drupal Canvas prevents the save action and displays an error.

5. Click Save.

The color displays in your palette. Point to a saved color swatch to access its HEX value for quick reference.

Organizing colors into folders

To keep a large palette manageable and easy to scan, organize colors into folders.

1. In Brand kit > Colors.
2. Click + New.
3. Select Folder.
4. Enter a name for the new folder, for example, Primary, Neutrals, or Accents.
5. Drag a color from the list to move it into the folder.

Editing or renaming a color

1. In the color palette, open the contextual menu for the color.
2. Click Edit color.
3. Update the color value, opacity, name, or variable as needed.
4. Click Save.

Every component that references the variable of the color reflects the change immediately. 

Applying a brand kit color to a component

Components that expose a color prop enable you to select a Brand kit color directly from the palette.

1. On a page, select the component that you want to style, for example, a button or a card.
2. In the settings panel of the component, locate the color prop. Required color props are marked with an asterisk (*).
3. Select a color from your Brand kit.

The component uses the selected Brand kit color through its variable. If you update that color in the Brand kit later, the component updates.

Finding where a color is used

Before you edit or remove a color, verify which components and pages depend on the color.

1. Open the contextual menu for the color.
2. Click Find instances.

Drupal Canvas displays a list of the content and configuration that reference the color, including pages, templates, and components.

Deleting a color

Drupal Canvas protects colors that are in use to prevent broken references.

• If any current version of your content or configuration uses the color, Drupal Canvas prevents deletion. Use Find instances to locate and remove the references first. 

• If the color is referenced only by older revisions and no current content uses it, Drupal Canvas enables deletion, but displays a warning that past revisions can no longer render correctly.

1. Open the contextual menu for the color and click Delete.

Updating colors across your site

Because components reference the variable of a color rather than a fixed HEX value, an update to your brand colors across the entire site is a single-step process.

1. In Brand kit > Colors, open the color that you want to change.
2. Update the color value and click Save.

Every page and component that references the variable of the color updates.

Repeat this procedure for each color that you want to change. An update to the shared color value simplifies site-wide rebrands and seasonal palette changes by applying the update across every component.

How Brand kit colors work for developers

Each Brand kit color is stored as Drupal Canvas configuration and exposed as a CSS custom property (variable), such as --brand-primary. Components, including Code Components, reference the variable with standard CSS:

color: var(--brand-primary);

Because components reference the variable, an update to the color value in the Brand kit updates every use. Each variable name for a color is unique across the palette. Colors and their folder structure are managed through Drupal Canvas configuration APIs.

Brand kit values can also be managed through a code workflow using the Drupal Canvas Command Line Interface (CLI). Use canvas pull --include-brand-kit to download the Brand kit configuration to your local codebase and canvas push --include-brand-kit to synchronize local changes back to the site. This workflow keeps your local and deployed environments in synchronization and enables you to store Brand kit values in source control alongside your Code Components.

Brand kit color

color: var(--brand-primary);