Cloaked Design SystemFoundations

Spacing

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

Implementation preview

Make the relationships visible

Compare the gaps within a group and the space around it. Change the values to see how density affects the composition.

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.

2 stories

Spacing selectedOpen canvas

Example source

packages/design-system/src/foundations/Foundations.stories.tsxExport Spacing

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

Full story catalog JSON ↗

Choose with the experience in mind

Make relationships visible

Keep closely related content together and give separate groups more space. Choose from the scale based on the actual content and layout; the example is not a new component spacing contract.

Distinguish inset from gap

Padding separates content from its container. Gap separates siblings. Adjust them independently to see how both affect density and hierarchy.

Keep runtime insets separate

Safe-area and host-chrome tokens depend on the device and consuming application. Their env() and max() expressions remain in the reference; they are not fixed steps in the spacing scale. Disabled opacity is also a separate behavior token.

Keep the exact definition close

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

Full spacing reference 23 definitions

Source value	Selector	Source file
`4px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`8px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`12px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`16px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`20px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`24px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`32px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`40px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`48px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`56px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`64px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`72px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`80px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`96px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`120px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`240px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`var(--cds-space-20)`	`:root`	`packages/design-system/src/tokens/spacing.css`
`env(safe-area-inset-top, 0px)`	`:root`	`packages/design-system/src/tokens/spacing.css`
`env(safe-area-inset-bottom, 0px)`	`:root`	`packages/design-system/src/tokens/spacing.css`
`0px`	`:root`	`packages/design-system/src/tokens/spacing.css`
`0`	`:root`	`packages/design-system/src/tokens/spacing.css`
`max(var(--cds-safe-area-top-chrome), var(--cds-safe-area-top))`	`:root`	`packages/design-system/src/tokens/spacing.css`
`0.3`	`:root`	`packages/design-system/src/tokens/spacing.css`

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

Build from the same decisions

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

Agent handoff

Use the Cloaked spacing foundations.
Read https://design.cloaked.team/data/foundations/spacing.json first.
Use the exact token names, values, and theme selectors in this contract.
Check the shared foundation-spacing 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.

Spacing 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