Color

At the cornerstone of ActiveCampaign’s color palette is Camp’s AC Blue. We support AC Blue with a palette that guides our users toward action and provides meaningful insights along the way.

Applying color

Semantic tokens apply color in a consistent and meaningful way across the ActiveCampaign platform.

Design tokens

Semantic tokens for color represent small, repeatable design decisions. Instead of using raw hex values, we refer to a token that describes how and where it should be used. This makes it easy to make centralized changes and continue to modernize the ActiveCampaign interface at a broad scale.

How tokens are grouped

Camp color tokens are grouped by category, property, role, intensity, and state. The further into the structure you go, the more specific the groupings become.

Category

Category represents a broad color grouping, such as SemanticColors. Camp also ships PrimitiveColors, but SemanticColors should be used wherever possible.

Property

Properties are sub-divisions within the SemanticColors category that describe what the color should be applied to. The following properties can be applied to designs:

• Background
• Border
• Text
• Icon

Role

Foundational colors

Neutral midnight is used as the base of the ActiveCampaign platform. Neutral colors, denoted in our tokens as having a role of default or supportive, can be used with any property to create the base of ActiveCampaign’s UI.

eg. bg-default, bg-supportive, border-default, border-supportive, text-default, text-supportive, icon-decorative, icon-interactive

Functional colors

Functional colors communicate role with a specific meaning, including status, alerts, and actions that request attention.

eg. success, warning, danger, AI, upgrade, educational

Intensity

Emphasis denotes that a particular element should hold more weight, or emphasis, within the UI. emphasis backgrounds should always be paired with on-emphasis text or foreground.

The most common use cases for emphasis are Camp’s primary and destructive buttons. They utilize bright, bold background colors to grab the user’s attention.

State

State represents the current state of the element. An element may retain its property, role, and intensity with varying states.

Semantic color tokens

Install

To get started using Camp’s new SemanticColors tokens in development, you’ll need to begin by installing the @camp/tokens package:yarn add @camp/tokens

Consumers are able to access the corresponding hex values via the object and can apply them to their styles directly. To access the SemanticColors object, you’ll need to import it like so:

import { SemanticColors } from "@camp/tokens"
 
const StyledButton = styled('button')({
  backgroundColor: SemanticColors['bg-success'],
  ...
})

Background

Text

Border

Icon

Primitive color tokens

Install

To use Camp’s new PrimitiveColors tokens in development, you’ll need to begin by installing the @camp/tokens package:yarn add @camp/tokens

Consumers are able to access the corresponding hex values via the object and can apply them to their styles directly. To access the PrimitiveColors object, you’ll need to import it like so:

import { PrimitiveColors } from "@camp/tokens"
 
const StyledButton = styled('button')({
  color: PrimitiveColors['dusk']['1000'],
  ...
})

PrimitiveColors['white']

PrimitiveColors['black']