Background Colors

Background colors in our design system are theme-aware and automatically adapt between light and dark modes. All colors use the bg-cn- prefix and are designed to work harmoniously together.

Primary Backgrounds

The foundation of the color system. Use these for main surfaces, cards, and layered interfaces.

// Primary background example
<div className="bg-cn-1 p-cn-md rounded-3">Primary background</div>

State Colors

Interactive state colors for hover and selection states. These colors indicate user interaction and should be used sparingly.

// Hover state example
<button className="bg-cn-1 hover:bg-cn-hover p-cn-md rounded-3">
  Hover me
</button>

// Selected state example
<div className="bg-cn-selected p-cn-md rounded-3">
  Selected item
</div>

Brand Colors

Brand colors represent application’s primary brand identity. Each variant (primary, secondary, outline) serves different emphasis levels.

Primary Brand Color

Adds strong emphasis.

<Button variant="primary">Primary Brand Button</Button>

// Custom brand highlight
<div className="bg-cn-brand-primary text-cn-1 p-cn-md rounded-3">
  Brand highlight
</div>

Secondary Brand Color

Adds average emphasis.

// Subtle brand container
<div className="bg-cn-brand-secondary text-cn-brand p-cn-md rounded-3">
  Secondary brand element
</div>

Outline Brand Color

Adds subtle emphasis.

<Button variant="outline">Outline Brand Button</Button>

// Custom outlined element
<div className="bg-cn-brand-outline text-cn-brand border border-cn-brand p-cn-md rounded-3">
  Outlined brand element
</div>

Brand Color States

Brand colors include hover and selected states (-hover, -selected suffixes). Use these for interactive brand elements to maintain consistent interaction feedback.

Semantic Colors

Semantic colors communicate meaning through color. Each color has three variants (primary, secondary, outline) for different emphasis levels.

Color Pairing

Always use matching text and background colors together. For example, use text-cn-success-primary with bg-cn-success-primary. See the Customization Overview for more details.

// Success alert
<div className="bg-cn-success-secondary text-cn-success-secondary p-cn-md rounded-3">
  Success message
</div>

// Danger button
<Button variant="primary" theme="danger">Delete</Button>

// Warning banner
<div className="bg-cn-warning-outline text-cn-warning-outline border border-cn-warning-outline p-cn-md rounded-3">
  Warning message
</div>

// Custom badge with any semantic color
<span className="bg-cn-purple-primary text-cn-purple-primary px-cn-sm py-cn-xs rounded-full">
  Category
</span>

Opacity Support

All background colors support Tailwind’s opacity modifier for creating variations:

// 50% opacity
<div className="bg-cn-1/50 p-cn-md rounded-3">
  Semi-transparent background
</div>

// 20% opacity
<div className="bg-cn-success-primary/20 p-cn-md rounded-3">
  Very subtle success background
</div>

Quick Reference

Color Group	Purpose	Example Classes
Primary	Main surfaces and layers	bg-cn-0, bg-cn-1, bg-cn-2, bg-cn-3
State	Interactive states	bg-cn-hover, bg-cn-selected
Brand	Brand identity	bg-cn-brand-primary, bg-cn-brand-secondary, bg-cn-brand-outline
Semantic	Meaningful colors	bg-cn-success-*, bg-cn-danger-*, bg-cn-warning-*, etc.