Color System

CF2 uses 8 base colors with 5 paint-color themes for consistent color management across sections.

Base Colors (8 total)

Color ID CSS Variable Purpose
342 --color-6Z-OmQDb-342 Background: Lightest
343 --color-6Z-OmQDb-343 Background: Light
344 --color-6Z-OmQDb-344 Background: Dark
345 --color-6Z-OmQDb-345 Background: Darkest
346 --color-6Z-OmQDb-346 Background: Colored (accent)
347 --color-6Z-OmQDb-347 Content: Text
348 --color-6Z-OmQDb-348 Content: Primary
349 --color-6Z-OmQDb-349 Content: Secondary

Paint-Color Themes

Each theme defines which colors to use for content on that background:

Theme Background Use Case
lightest Lightest (342) Light backgrounds (white/cream)
light Light (343) Slightly tinted backgrounds
colored Colored (346) Brand/accent colored sections
dark Dark (344) Dark backgrounds
darkest Darkest (345) Very dark/black backgrounds

Usage

Apply a paint-color theme to a SectionContainer:

JSON 
{
  "type": "SectionContainer/V1",
  "attrs": {
    "data-paint-colors": "lightest"
  }
}

No data-paint-colors means no theme applied (use "none" explicitly if needed).

Theme Content Colors

Each paint-color theme can configure colors for:

  • Headline color
  • Subheadline color
  • Content/body text color
  • Link color
  • Icon color
  • Bullet list icon color
i
Tip: Use contrasting text colors for dark vs light backgrounds. The styleguide automatically handles this based on the theme.

Full Example

JSON 
{
  "type": "SectionContainer/V1",
  "attrs": {
    "data-paint-colors": "dark",
    "className": "fullContainer"
  },
  "params": {
    "--style-background-color": "var(--color-6Z-OmQDb-344)"
  },
  "children": [
    {
      "type": "Headline/V1",
      "selectors": {
        ".elHeadline": {
          "attrs": {
            "data-style-guide-headline": "l",
            "style": {
              "color": "var(--color-6Z-OmQDb-342)"
            }
          }
        }
      }
    }
  ]
}