Skip to content
Cloaked Design SystemFoundations

Color

A calm foundation, a clear hierarchy, and color that means something. The same roles work in light and dark.

Implementation preview
WARM NEUTRALS. PURPOSEFUL COLOR.

Start with the role, then let the theme choose the value.

01

Build depth without noise

Use page and surface roles to establish structure. Reserve stronger contrast for the content that needs attention.

Page

The quiet foundation beneath the experience.

Light
#f3f1ed
Dark
#141410

Surface

A raised space for related content.

Light
#ffffff
Dark
#1b1b18

Bold

A deliberate moment of stronger emphasis.

Light
#0b0b0a
Dark
#ffffff
02

Separate brand from action

The primary action uses a dark container in the light theme. Orange is the brand accent; it is not a substitute for the primary-action token.

Primary action

Light
#0b0b0a
Dark
#ffffff

On primary

Light
#ffffff
Dark
#141410

Brand accent

Light
#ff550c
Dark
#ff550c
Use the semantic pair.

--cds-button-primary-container and --cds-button-primary-text change together. Preserve that relationship when the theme changes.

See it on a Button
Live exampleReact · shared implementation
Try the controls. Your changes stay in this example.Open example
COMPLETE STORYBOOK REFERENCE

Every example. In one place.

Explore every named example, including states, compositions, and theme variants.

3 stories
SELECTED EXAMPLE

Color

Open controls
Color selectedOpen canvas
Example sourcepackages/design-system/src/foundations/Foundations.stories.tsxExport Color

Implementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.

Full story catalog JSON ↗
03

Give feedback more than a color

Pair a status color with specific text and an appropriate icon. Color alone cannot explain an error or confirm an outcome.

Success

Light
#008924
Dark
#008924

Danger

Light
#b83100
Dark
#b83100

Warning

Light
#d07d00
Dark
#d07d00

Information

Light
#3498db
Dark
#3498db
IN CONTEXT

Check the complete pairing.

Contrast depends on both colors, text size, and the actual surface. A token name is not an accessibility guarantee.

IN CODE

Let the role travel.

Use public --cds-* roles in product code. Keep primitive --cds-color-* values inside the design system.

04

Inspect the exact definitions

Both theme selectors are retained. Copy a semantic token above, or inspect the full versioned source.

All semantic color definitions 158 definitions
TokenSource valueTheme selector
--cds-brandvar(--cds-color-brand)[data-theme='light']
--cds-bg-pagevar(--cds-color-grey-01)[data-theme='light']
--cds-bg-dashboardvar(--cds-color-grey-01)[data-theme='light']
--cds-bg-surfacevar(--cds-color-white)[data-theme='light']
--cds-bg-ai-inputvar(--cds-color-black)[data-theme='light']
--cds-text-primaryvar(--cds-color-grey-07)[data-theme='light']
--cds-text-secondaryvar(--cds-color-grey-04-strong)[data-theme='light']
--cds-text-dangervar(--cds-color-red-01)[data-theme='light']
--cds-text-ai-primaryvar(--cds-color-grey-01)[data-theme='light']
--cds-text-ai-secondaryvar(--cds-color-grey-04)[data-theme='light']
--cds-dividervar(--cds-color-grey-02)[data-theme='light']
--cds-input-containervar(--cds-color-grey-01)[data-theme='light']
--cds-banner-text-primaryvar(--cds-color-grey-07)[data-theme='light']
--cds-banner-text-secondaryvar(--cds-color-grey-04)[data-theme='light']
--cds-banner-containervar(--cds-color-grey-01)[data-theme='light']
--cds-button-primary-textvar(--cds-color-white)[data-theme='light']
--cds-button-primary-containervar(--cds-color-black)[data-theme='light']
--cds-button-secondary-textvar(--cds-color-grey-07)[data-theme='light']
--cds-button-secondary-containervar(--cds-color-grey-01)[data-theme='light']
--cds-button-danger-textvar(--cds-color-white)[data-theme='light']
--cds-button-danger-containervar(--cds-color-red-01)[data-theme='light']
--cds-fab-containervar(--cds-color-white-60)[data-theme='light']
--cds-bg-boldvar(--cds-color-black)[data-theme='light']
--cds-text-on-boldvar(--cds-color-white)[data-theme='light']
--cds-surface-subtlevar(--cds-color-grey-02)[data-theme='light']
--cds-selection-off-containervar(--cds-color-grey-02)[data-theme='light']
--cds-toggle-off-containervar(--cds-color-grey-03)[data-theme='light']
--cds-status-success-solidvar(--cds-color-green-01)[data-theme='light']
--cds-status-success-subtlevar(--cds-color-green-02)[data-theme='light']
--cds-status-danger-solidvar(--cds-color-red-01)[data-theme='light']
--cds-status-danger-subtlevar(--cds-color-red-02)[data-theme='light']
--cds-status-warning-solidvar(--cds-color-orange-01)[data-theme='light']
--cds-status-warning-subtlevar(--cds-color-orange-02)[data-theme='light']
--cds-status-info-solidvar(--cds-color-risk-excellent)[data-theme='light']
--cds-status-info-subtlergba(52, 152, 219, 0.1)[data-theme='light']
--cds-status-neutral-solidvar(--cds-color-grey-04)[data-theme='light']
--cds-status-neutral-subtlergba(132, 130, 126, 0.1)[data-theme='light']
--cds-bg-status-successvar(--cds-status-success-subtle)[data-theme='light']
--cds-text-on-status-successvar(--cds-status-success-solid)[data-theme='light']
--cds-bg-status-warningvar(--cds-status-warning-subtle)[data-theme='light']
--cds-text-on-status-warningvar(--cds-status-warning-solid)[data-theme='light']
--cds-bg-status-dangervar(--cds-status-danger-subtle)[data-theme='light']
--cds-text-on-status-dangervar(--cds-status-danger-solid)[data-theme='light']
--cds-bg-status-infovar(--cds-status-info-subtle)[data-theme='light']
--cds-text-on-status-infovar(--cds-status-info-solid)[data-theme='light']
--cds-bg-status-neutralvar(--cds-color-grey-01)[data-theme='light']
--cds-text-on-status-neutralvar(--cds-color-black)[data-theme='light']
--cds-graph-bgvar(--cds-color-black-05)[data-theme='light']
--cds-brand-subtlergba(255, 85, 12, 0.15)[data-theme='light']
--cds-skeleton-basevar(--cds-color-black-05)[data-theme='light']
--cds-skeleton-highlightvar(--cds-color-black-15)[data-theme='light']
--cds-bg-inversevar(--cds-color-black)[data-theme='light']
--cds-bg-inverse-elevatedvar(--cds-color-grey-06)[data-theme='light']
--cds-text-inversevar(--cds-color-white)[data-theme='light']
--cds-text-on-lightvar(--cds-color-black)[data-theme='light']
--cds-scrimvar(--cds-color-black)[data-theme='light']
--cds-bg-subtlevar(--cds-color-grey-01)[data-theme='light']
--cds-bg-subtle-inversevar(--cds-color-white-15)[data-theme='light']
--cds-skeleton-base-inversevar(--cds-color-white-05)[data-theme='light']
--cds-skeleton-highlight-inversevar(--cds-color-white-15)[data-theme='light']
--cds-feature-monitoringvar(--cds-color-feature-monitoring)[data-theme='light']
--cds-feature-guardvar(--cds-color-feature-guard)[data-theme='light']
--cds-feature-identityvar(--cds-color-feature-identity)[data-theme='light']
--cds-feature-monitoring-containervar(--cds-color-feature-monitoring-container-01)[data-theme='light']
--cds-feature-guard-containervar(--cds-color-feature-guard-container-01)[data-theme='light']
--cds-feature-identity-containervar(--cds-color-feature-identity-container-01)[data-theme='light']
--cds-feature-monitoring-backdropvar(--cds-color-feature-monitoring-container-02)[data-theme='light']
--cds-feature-guard-backdropvar(--cds-color-feature-guard-container-02)[data-theme='light']
--cds-feature-identity-backdropvar(--cds-color-feature-identity-container-02)[data-theme='light']
--cds-risk-excellentvar(--cds-color-risk-excellent)[data-theme='light']
--cds-risk-goodvar(--cds-color-risk-good)[data-theme='light']
--cds-risk-fairvar(--cds-color-risk-fair)[data-theme='light']
--cds-risk-highvar(--cds-color-red-01)[data-theme='light']
--cds-risk-criticalvar(--cds-color-risk-critical)[data-theme='light']
--cds-pii-category-name#00c876[data-theme='light']
--cds-pii-category-email#ffd447[data-theme='light']
--cds-pii-category-phone#e172eb[data-theme='light']
--cds-pii-category-address#0067ff[data-theme='light']
--cds-pii-category-family#003677[data-theme='light']
--cds-brandvar(--cds-color-brand)[data-theme='dark']
--cds-bg-pagevar(--cds-color-grey-07)[data-theme='dark']
--cds-bg-dashboardvar(--cds-color-black)[data-theme='dark']
--cds-bg-surfacevar(--cds-color-grey-06)[data-theme='dark']
--cds-bg-ai-inputvar(--cds-color-black)[data-theme='dark']
--cds-text-primaryvar(--cds-color-grey-01)[data-theme='dark']
--cds-text-secondaryvar(--cds-color-white-60)[data-theme='dark']
--cds-text-dangercolor-mix(in srgb, var(--cds-color-red-01) 60%, var(--cds-color-white))[data-theme='dark']
--cds-text-ai-primaryvar(--cds-color-grey-01)[data-theme='dark']
--cds-text-ai-secondaryvar(--cds-color-grey-04)[data-theme='dark']
--cds-dividervar(--cds-color-white-10)[data-theme='dark']
--cds-input-containervar(--cds-color-grey-05)[data-theme='dark']
--cds-banner-text-primaryvar(--cds-color-grey-01)[data-theme='dark']
--cds-banner-text-secondaryvar(--cds-color-grey-02)[data-theme='dark']
--cds-banner-containervar(--cds-color-grey-07)[data-theme='dark']
--cds-button-primary-textvar(--cds-color-grey-07)[data-theme='dark']
--cds-button-primary-containervar(--cds-color-white)[data-theme='dark']
--cds-button-secondary-textvar(--cds-color-grey-01)[data-theme='dark']
--cds-button-secondary-containervar(--cds-color-white-05)[data-theme='dark']
--cds-button-danger-textvar(--cds-color-white)[data-theme='dark']
--cds-button-danger-containervar(--cds-color-red-01)[data-theme='dark']
--cds-fab-containervar(--cds-color-white-10)[data-theme='dark']
--cds-bg-boldvar(--cds-color-white)[data-theme='dark']
--cds-text-on-boldvar(--cds-color-grey-07)[data-theme='dark']
--cds-surface-subtlevar(--cds-color-white-15)[data-theme='dark']
--cds-selection-off-containervar(--cds-color-white-15)[data-theme='dark']
--cds-toggle-off-containervar(--cds-color-white-15)[data-theme='dark']
--cds-status-success-solidvar(--cds-color-green-01)[data-theme='dark']
--cds-status-success-subtlevar(--cds-color-green-02)[data-theme='dark']
--cds-status-danger-solidvar(--cds-color-red-01)[data-theme='dark']
--cds-status-danger-subtlevar(--cds-color-red-02)[data-theme='dark']
--cds-status-warning-solidvar(--cds-color-orange-01)[data-theme='dark']
--cds-status-warning-subtlevar(--cds-color-orange-02)[data-theme='dark']
--cds-status-info-solidvar(--cds-color-risk-excellent)[data-theme='dark']
--cds-status-info-subtlergba(52, 152, 219, 0.1)[data-theme='dark']
--cds-status-neutral-solidvar(--cds-color-grey-04)[data-theme='dark']
--cds-status-neutral-subtlergba(132, 130, 126, 0.1)[data-theme='dark']
--cds-bg-status-successvar(--cds-status-success-solid)[data-theme='dark']
--cds-text-on-status-successvar(--cds-color-white)[data-theme='dark']
--cds-bg-status-warningvar(--cds-status-warning-solid)[data-theme='dark']
--cds-text-on-status-warningvar(--cds-color-white)[data-theme='dark']
--cds-bg-status-dangervar(--cds-status-danger-solid)[data-theme='dark']
--cds-text-on-status-dangervar(--cds-color-white)[data-theme='dark']
--cds-bg-status-infovar(--cds-status-info-solid)[data-theme='dark']
--cds-text-on-status-infovar(--cds-color-white)[data-theme='dark']
--cds-bg-status-neutralvar(--cds-color-grey-05)[data-theme='dark']
--cds-text-on-status-neutralvar(--cds-color-white)[data-theme='dark']
--cds-graph-bgvar(--cds-color-white-05)[data-theme='dark']
--cds-brand-subtlergba(255, 85, 12, 0.15)[data-theme='dark']
--cds-skeleton-basevar(--cds-color-white-05)[data-theme='dark']
--cds-skeleton-highlightvar(--cds-color-white-15)[data-theme='dark']
--cds-bg-inversevar(--cds-color-black)[data-theme='dark']
--cds-bg-inverse-elevatedvar(--cds-color-grey-06)[data-theme='dark']
--cds-text-inversevar(--cds-color-white)[data-theme='dark']
--cds-text-on-lightvar(--cds-color-black)[data-theme='dark']
--cds-scrimvar(--cds-color-black)[data-theme='dark']
--cds-bg-subtlevar(--cds-color-white-05)[data-theme='dark']
--cds-bg-subtle-inversevar(--cds-color-white-15)[data-theme='dark']
--cds-skeleton-base-inversevar(--cds-color-white-05)[data-theme='dark']
--cds-skeleton-highlight-inversevar(--cds-color-white-15)[data-theme='dark']
--cds-feature-monitoringvar(--cds-color-feature-monitoring)[data-theme='dark']
--cds-feature-guardvar(--cds-color-feature-guard)[data-theme='dark']
--cds-feature-identityvar(--cds-color-feature-identity)[data-theme='dark']
--cds-feature-monitoring-containervar(--cds-color-feature-monitoring-container-01)[data-theme='dark']
--cds-feature-guard-containervar(--cds-color-feature-guard-container-01)[data-theme='dark']
--cds-feature-identity-containervar(--cds-color-feature-identity-container-01)[data-theme='dark']
--cds-feature-monitoring-backdropvar(--cds-color-feature-monitoring-container-02)[data-theme='dark']
--cds-feature-guard-backdropvar(--cds-color-feature-guard-container-02)[data-theme='dark']
--cds-feature-identity-backdropvar(--cds-color-feature-identity-container-02)[data-theme='dark']
--cds-risk-excellentvar(--cds-color-risk-excellent)[data-theme='dark']
--cds-risk-goodvar(--cds-color-risk-good)[data-theme='dark']
--cds-risk-fairvar(--cds-color-risk-fair)[data-theme='dark']
--cds-risk-highvar(--cds-color-red-01)[data-theme='dark']
--cds-risk-criticalvar(--cds-color-risk-critical)[data-theme='dark']
--cds-pii-category-name#00c876[data-theme='dark']
--cds-pii-category-email#ffd447[data-theme='dark']
--cds-pii-category-phone#e172eb[data-theme='dark']
--cds-pii-category-address#0067ff[data-theme='dark']
--cds-pii-category-family#003677[data-theme='dark']
Design system contract JSON Every token Reference Build with an agent Guide
Implementation preview

This design-owned implementation is ready to try and review. It does not establish product approval. Imported specifications retain their original review status.

Inspect version 0.2.0-preview.1