Colors

Colors are defined in the Figma library and exposed through CSS variables. All CSS variables are prefixed with cim, so for example fg-base becomes --cim-fg-base. These variables can be used directly in your CSS:

.title {
  color: var(--cim-fg-base);
}

Or through components like Text, which exposes all foreground colors via the tone prop (without the fg- prefix, so fg-base becomes base):

<Text variant="title-1" as="h1" tone="base">
  Some text
</Text>

See our Colors guide in Figma for a more thorough deep dive.

Foreground

Used for text and icons.

Color name: fg-base

Color code:

Used as the default text color for body content and headings

Color name: fg-subtle

Color code:

Used for secondary and less prominent text

Color name: fg-muted

Color code:

Used for disabled and tertiary text

Color name: fg-inverse

Color code:

Used for text that appears on dark backgrounds

Color name: fg-accent

Color code:

Used for important actions, interactive elements, or key information

Color name: fg-accent-hover

Color code:

Used for the hover state of interactive elements

Color name: fg-accent-active

Color code:

Used for the active state when interactive elements are pressed

Color name: fg-info

Color code:

Used for the informational state for actions and text

Color name: fg-success

Color code:

Used for the success state for actions and text

Color name: fg-warning

Color code:

Used for the warning state for actions and text

Color name: fg-critical

Color code:

Used for critical interactive elements and for the error state for actions and text

Color name: fg-critical-hover

Color code:

Used for the hover state for critical interactive elements

Color name: fg-critical-active

Color code:

Used for the active state for critical interactive elements

Border

Used for borders and dividers.

Color name: border-base

Color code:

Used as the default border color

Color name: border-subtle

Color code:

Used for lighter borders for subtle separation

Color name: border-hover

Color code:

Used for the hover state for borders

Color name: border-accent

Color code:

Used to highlight active or selected elements

Color name: border-accent-hover

Color code:

Used for the hover state for borders of interactive elements

Color name: border-info

Color code:

Used for the border of informational elements

Color name: border-success

Color code:

Used for the border of success elements

Color name: border-warning

Color code:

Used for the border of warning elements

Color name: border-critical

Color code:

Used for the border of critical and error elements

Color name: border-focus

Color code:

Used for focus state borders

Backgrounds

Used for surfaces and backgrounds.

Color name: bg-base

Color code:

Used as the default background color

Color name: bg-subtle

Color code:

Used as a subtle background for read-only and secondary surfaces

Color name: bg-muted

Color code:

Used as a muted background for disabled and tertiary surfaces

Color name: bg-accent

Color code:

Used as the background for interactive elements

Color name: bg-accent-hover

Color code:

Used as the background for hover states for interactive elements

Color name: bg-accent-active

Color code:

Used as the background for active states when interactive elements are pressed

Color name: bg-accent-subtle

Color code:

Used for highlighted or selected elements

Color name: bg-accent-subtle-hover

Color code:

Used as the background for hover states for highlighted or selected elements

Color name: bg-accent-subtle-active

Color code:

Used as the background for active states when highlighted or selected elements are pressed

Color name: bg-info

Color code:

Used as the background for informational elements

Color name: bg-info-subtle

Color code:

Used as the background for informational elements

Color name: bg-success

Color code:

Used as the background for success elements

Color name: bg-success-subtle

Color code:

Used as the background for success elements

Color name: bg-warning

Color code:

Used as the background for warning elements

Color name: bg-warning-subtle

Color code:

Used as the background for warning elements

Color name: bg-critical

Color code:

Used as the background for critical or error elements

Color name: bg-critical-hover

Color code:

Used as the background for hover states for critical elements

Color name: bg-critical-active

Color code:

Used as the background for active states when critical elements are pressed

Color name: bg-critical-subtle

Color code:

Used as the background for critical or error elements

Color name: bg-critical-subtle-hover

Color code:

Used as the background for hover states for critical elements

Color name: bg-critical-subtle-active

Color code:

Used as the background for active states when critical elements are pressed