Skip to content
Cloaked Design SystemFoundations

All tokens

See how color, type, space, shape, and movement work together. Start with a visual example, then inspect the exact definitions.

Implementation preview
01

See the system working together

Change a foundation and see its effect on a real composition. The examples use the same tokens as the source below.

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.

12 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 ↗
02

Explore one decision at a time

Every family has a visual example and the exact token definitions behind it.

Color

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

Typography

Give the message a clear hierarchy. Compare the real type styles, try your own words, and see each role in context.

Spacing

Use space to explain what belongs together. Compare the scale and adjust real padding and gaps in a small composition.

Radius

See what a corner changes. Compare every radius on the same geometry, then apply one to a contextual container.

Shadows

Compare subtle separation with an elevated layer. See the two defined shadows on real surfaces, including a flat reference.

Surfaces

Build a clear sense of place. Explore page, content, input, and inverse surfaces in one readable composition.

Motion

Compare the complete easing and duration scales, then see how real components use motion to explain changes.

03

Choose with the experience in mind

01

Choose a role before a value

Use semantic roles such as page background and primary-action text. Primitive colors are ingredients inside the system, not replacements for component roles.

02

Keep the relationships together

A type style includes its size, weight, line height, and tracking. An action color belongs with its foreground pair. Use the complete definition when you compose an experience.

03

Inspect the same source

These examples and local Storybook use the design-owned token CSS. Definitions retain both theme selectors and runtime expressions; they are not a guarantee of native-platform parity.

04

Keep the exact definition close

These values come directly from the design-owned source. Aliases, expressions, theme selectors, and source files are retained.

Full all tokens reference 335 definitions
TokenSource valueSelectorSource file
#ffffff:rootpackages/design-system/src/tokens/primitives.css
#f3f1ed:rootpackages/design-system/src/tokens/primitives.css
#e0ddd6:rootpackages/design-system/src/tokens/primitives.css
#c4c2bc:rootpackages/design-system/src/tokens/primitives.css
#84827e:rootpackages/design-system/src/tokens/primitives.css
#646260:rootpackages/design-system/src/tokens/primitives.css
#232321:rootpackages/design-system/src/tokens/primitives.css
#1b1b18:rootpackages/design-system/src/tokens/primitives.css
#141410:rootpackages/design-system/src/tokens/primitives.css
#0b0b0a:rootpackages/design-system/src/tokens/primitives.css
#ff550c:rootpackages/design-system/src/tokens/primitives.css
#008924:rootpackages/design-system/src/tokens/primitives.css
#0089241a:rootpackages/design-system/src/tokens/primitives.css
#b83100:rootpackages/design-system/src/tokens/primitives.css
#b831001a:rootpackages/design-system/src/tokens/primitives.css
#d07d00:rootpackages/design-system/src/tokens/primitives.css
#d07d001a:rootpackages/design-system/src/tokens/primitives.css
#ffffff0d:rootpackages/design-system/src/tokens/primitives.css
#ffffff1a:rootpackages/design-system/src/tokens/primitives.css
#ffffff26:rootpackages/design-system/src/tokens/primitives.css
#ffffff33:rootpackages/design-system/src/tokens/primitives.css
#ffffff99:rootpackages/design-system/src/tokens/primitives.css
#0b0b0a0d:rootpackages/design-system/src/tokens/primitives.css
#0b0b0a26:rootpackages/design-system/src/tokens/primitives.css
#3498db:rootpackages/design-system/src/tokens/primitives.css
#27ae60:rootpackages/design-system/src/tokens/primitives.css
#f0923b:rootpackages/design-system/src/tokens/primitives.css
#c90004:rootpackages/design-system/src/tokens/primitives.css
#62c081:rootpackages/design-system/src/tokens/primitives.css
#2c5a3d:rootpackages/design-system/src/tokens/primitives.css
#193524:rootpackages/design-system/src/tokens/primitives.css
#2a9ae8:rootpackages/design-system/src/tokens/primitives.css
#1b4566:rootpackages/design-system/src/tokens/primitives.css
#112a3d:rootpackages/design-system/src/tokens/primitives.css
#a474ff:rootpackages/design-system/src/tokens/primitives.css
#3d2e66:rootpackages/design-system/src/tokens/primitives.css
#251b3d:rootpackages/design-system/src/tokens/primitives.css
4px:rootpackages/design-system/src/tokens/spacing.css
8px:rootpackages/design-system/src/tokens/spacing.css
12px:rootpackages/design-system/src/tokens/spacing.css
16px:rootpackages/design-system/src/tokens/spacing.css
20px:rootpackages/design-system/src/tokens/spacing.css
24px:rootpackages/design-system/src/tokens/spacing.css
32px:rootpackages/design-system/src/tokens/spacing.css
40px:rootpackages/design-system/src/tokens/spacing.css
48px:rootpackages/design-system/src/tokens/spacing.css
56px:rootpackages/design-system/src/tokens/spacing.css
64px:rootpackages/design-system/src/tokens/spacing.css
72px:rootpackages/design-system/src/tokens/spacing.css
80px:rootpackages/design-system/src/tokens/spacing.css
96px:rootpackages/design-system/src/tokens/spacing.css
120px:rootpackages/design-system/src/tokens/spacing.css
240px:rootpackages/design-system/src/tokens/spacing.css
var(--cds-space-20):rootpackages/design-system/src/tokens/spacing.css
env(safe-area-inset-top, 0px):rootpackages/design-system/src/tokens/spacing.css
env(safe-area-inset-bottom, 0px):rootpackages/design-system/src/tokens/spacing.css
0px:rootpackages/design-system/src/tokens/spacing.css
0:rootpackages/design-system/src/tokens/spacing.css
max(var(--cds-safe-area-top-chrome), var(--cds-safe-area-top)):rootpackages/design-system/src/tokens/spacing.css
0.3:rootpackages/design-system/src/tokens/spacing.css
4px:rootpackages/design-system/src/tokens/sizing.css
8px:rootpackages/design-system/src/tokens/sizing.css
12px:rootpackages/design-system/src/tokens/sizing.css
16px:rootpackages/design-system/src/tokens/sizing.css
20px:rootpackages/design-system/src/tokens/sizing.css
24px:rootpackages/design-system/src/tokens/sizing.css
32px:rootpackages/design-system/src/tokens/sizing.css
40px:rootpackages/design-system/src/tokens/sizing.css
48px:rootpackages/design-system/src/tokens/sizing.css
56px:rootpackages/design-system/src/tokens/sizing.css
64px:rootpackages/design-system/src/tokens/sizing.css
72px:rootpackages/design-system/src/tokens/sizing.css
80px:rootpackages/design-system/src/tokens/sizing.css
96px:rootpackages/design-system/src/tokens/sizing.css
120px:rootpackages/design-system/src/tokens/sizing.css
160px:rootpackages/design-system/src/tokens/sizing.css
240px:rootpackages/design-system/src/tokens/sizing.css
320px:rootpackages/design-system/src/tokens/sizing.css
4px:rootpackages/design-system/src/tokens/shape.css
8px:rootpackages/design-system/src/tokens/shape.css
12px:rootpackages/design-system/src/tokens/shape.css
16px:rootpackages/design-system/src/tokens/shape.css
20px:rootpackages/design-system/src/tokens/shape.css
24px:rootpackages/design-system/src/tokens/shape.css
32px:rootpackages/design-system/src/tokens/shape.css
9999px:rootpackages/design-system/src/tokens/shape.css
0.5px:rootpackages/design-system/src/tokens/shape.css
1px:rootpackages/design-system/src/tokens/shape.css
2px:rootpackages/design-system/src/tokens/shape.css
3px:rootpackages/design-system/src/tokens/shape.css
4px:rootpackages/design-system/src/tokens/shape.css
16px:rootpackages/design-system/src/tokens/effects.css
96px:rootpackages/design-system/src/tokens/effects.css
rgb(0 0 0 / 40%):rootpackages/design-system/src/tokens/effects.css
0 -10px 40px rgb(0 0 0 / 15%):rootpackages/design-system/src/tokens/effects.css
0 2px 8px rgb(0 0 0 / 10%):rootpackages/design-system/src/tokens/effects.css
-apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif:rootpackages/design-system/src/tokens/typography.css
ui-monospace, 'SF Mono', Menlo, monospace:rootpackages/design-system/src/tokens/typography.css
'Simula', Georgia, serif:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
4.5rem:rootpackages/design-system/src/tokens/typography.css
1.1:rootpackages/design-system/src/tokens/typography.css
0:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
3rem:rootpackages/design-system/src/tokens/typography.css
1.1:rootpackages/design-system/src/tokens/typography.css
0:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-serif):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
2rem:rootpackages/design-system/src/tokens/typography.css
1.1:rootpackages/design-system/src/tokens/typography.css
-0.02em:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-serif):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
1.75rem:rootpackages/design-system/src/tokens/typography.css
1.1:rootpackages/design-system/src/tokens/typography.css
0:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-serif):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
1.5rem:rootpackages/design-system/src/tokens/typography.css
1.1:rootpackages/design-system/src/tokens/typography.css
0:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
2rem:rootpackages/design-system/src/tokens/typography.css
1.1:rootpackages/design-system/src/tokens/typography.css
0:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
1.75rem:rootpackages/design-system/src/tokens/typography.css
1.1:rootpackages/design-system/src/tokens/typography.css
0:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
1.5rem:rootpackages/design-system/src/tokens/typography.css
1.1:rootpackages/design-system/src/tokens/typography.css
0:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
1.25rem:rootpackages/design-system/src/tokens/typography.css
1.2:rootpackages/design-system/src/tokens/typography.css
0.005em:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
510:rootpackages/design-system/src/tokens/typography.css
1rem:rootpackages/design-system/src/tokens/typography.css
1.2:rootpackages/design-system/src/tokens/typography.css
-0.02em:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
1rem:rootpackages/design-system/src/tokens/typography.css
1.3:rootpackages/design-system/src/tokens/typography.css
-0.02em:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
0.875rem:rootpackages/design-system/src/tokens/typography.css
1.2:rootpackages/design-system/src/tokens/typography.css
-0.02em:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
400:rootpackages/design-system/src/tokens/typography.css
0.75rem:rootpackages/design-system/src/tokens/typography.css
1.3:rootpackages/design-system/src/tokens/typography.css
0:rootpackages/design-system/src/tokens/typography.css
var(--cds-font-sans):rootpackages/design-system/src/tokens/typography.css
600:rootpackages/design-system/src/tokens/typography.css
0.6875rem:rootpackages/design-system/src/tokens/typography.css
1.1:rootpackages/design-system/src/tokens/typography.css
0.06em:rootpackages/design-system/src/tokens/typography.css
1htmlpackages/design-system/src/tokens/typography.css
var(--pui-font-scale)htmlpackages/design-system/src/tokens/typography.css
var(--cds-color-brand)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-07)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-04-strong)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-red-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-04)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-02)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-07)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-04)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-07)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-red-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-white-60)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-02)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-02)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-03)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-green-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-green-02)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-red-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-red-02)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-orange-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-orange-02)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-risk-excellent)[data-theme='light']packages/design-system/src/tokens/themes.css
rgba(52, 152, 219, 0.1)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-04)[data-theme='light']packages/design-system/src/tokens/themes.css
rgba(132, 130, 126, 0.1)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-status-success-subtle)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-status-success-solid)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-status-warning-subtle)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-status-warning-solid)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-status-danger-subtle)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-status-danger-solid)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-status-info-subtle)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-status-info-solid)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-black-05)[data-theme='light']packages/design-system/src/tokens/themes.css
rgba(255, 85, 12, 0.15)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-black-05)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-black-15)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-06)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-white-15)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-white-05)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-white-15)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-monitoring)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-guard)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-identity)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-monitoring-container-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-guard-container-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-identity-container-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-monitoring-container-02)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-guard-container-02)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-identity-container-02)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-risk-excellent)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-risk-good)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-risk-fair)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-red-01)[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-risk-critical)[data-theme='light']packages/design-system/src/tokens/themes.css
#00c876[data-theme='light']packages/design-system/src/tokens/themes.css
#ffd447[data-theme='light']packages/design-system/src/tokens/themes.css
#e172eb[data-theme='light']packages/design-system/src/tokens/themes.css
#0067ff[data-theme='light']packages/design-system/src/tokens/themes.css
#003677[data-theme='light']packages/design-system/src/tokens/themes.css
var(--cds-color-brand)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-07)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-06)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-60)[data-theme='dark']packages/design-system/src/tokens/themes.css
color-mix(in srgb, var(--cds-color-red-01) 60%, var(--cds-color-white))[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-04)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-10)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-05)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-02)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-07)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-07)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-05)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-red-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-10)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-07)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-15)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-15)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-15)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-green-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-green-02)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-red-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-red-02)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-orange-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-orange-02)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-risk-excellent)[data-theme='dark']packages/design-system/src/tokens/themes.css
rgba(52, 152, 219, 0.1)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-04)[data-theme='dark']packages/design-system/src/tokens/themes.css
rgba(132, 130, 126, 0.1)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-status-success-solid)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-status-warning-solid)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-status-danger-solid)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-status-info-solid)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-05)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-05)[data-theme='dark']packages/design-system/src/tokens/themes.css
rgba(255, 85, 12, 0.15)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-05)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-15)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-grey-06)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-black)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-05)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-15)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-05)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-white-15)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-monitoring)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-guard)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-identity)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-monitoring-container-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-guard-container-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-identity-container-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-monitoring-container-02)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-guard-container-02)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-feature-identity-container-02)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-risk-excellent)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-risk-good)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-risk-fair)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-red-01)[data-theme='dark']packages/design-system/src/tokens/themes.css
var(--cds-color-risk-critical)[data-theme='dark']packages/design-system/src/tokens/themes.css
#00c876[data-theme='dark']packages/design-system/src/tokens/themes.css
#ffd447[data-theme='dark']packages/design-system/src/tokens/themes.css
#e172eb[data-theme='dark']packages/design-system/src/tokens/themes.css
#0067ff[data-theme='dark']packages/design-system/src/tokens/themes.css
#003677[data-theme='dark']packages/design-system/src/tokens/themes.css
cubic-bezier(0.2, 0.9, 0.3, 1):rootpackages/design-system/src/tokens/motion.css
cubic-bezier(0.4, 0, 0.6, 0.3):rootpackages/design-system/src/tokens/motion.css
cubic-bezier(0.77, 0, 0.175, 1):rootpackages/design-system/src/tokens/motion.css
150ms:rootpackages/design-system/src/tokens/motion.css
200ms:rootpackages/design-system/src/tokens/motion.css
300ms:rootpackages/design-system/src/tokens/motion.css

Design-owned preview Version 0.2.0-preview.1 335 definitions

05

Build from the same decisions

Give an agent the guidance, source values, and working example together.

Agent handoff
Use the Cloaked all tokens foundations.
Read https://design.cloaked.team/data/foundations/tokens.json first.
Use the exact token names, values, and theme selectors in this contract.
Check the shared foundation-overview example and preserve its visual intent.
Verify keyboard access, both themes, responsive layout, and reduced-motion behavior where applicable.
Treat this design-owned version as an implementation preview, pending sign-off.
All tokens contract JSON Complete token source JSON 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