Cloaked Design SystemFoundations

Radius

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

Implementation preview

Compare the shape, not the scale

See the radius choices on equal-sized shapes, then try them in context. The same radius can feel different as a container changes size.

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

Radius selectedOpen canvas

Example source

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

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

Compare the same shape

Hold width and height constant when comparing corners. A radius can look different on a small control and a large container even when the token is the same.

Let the component own its corners

Use a component's specified radius when one exists. The playground compares the available shapes; it does not approve arbitrary radius changes to Button, Field, or other components.

Understand full radius

The full token uses a large radius that the browser clamps to the shape. On a wide control it creates a pill; on an equal-sided shape it creates a circle.

Keep the exact definition close

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

Full radius reference 8 definitions

Source value	Selector	Source file
`4px`	`:root`	`packages/design-system/src/tokens/shape.css`
`8px`	`:root`	`packages/design-system/src/tokens/shape.css`
`12px`	`:root`	`packages/design-system/src/tokens/shape.css`
`16px`	`:root`	`packages/design-system/src/tokens/shape.css`
`20px`	`:root`	`packages/design-system/src/tokens/shape.css`
`24px`	`:root`	`packages/design-system/src/tokens/shape.css`
`32px`	`:root`	`packages/design-system/src/tokens/shape.css`
`9999px`	`:root`	`packages/design-system/src/tokens/shape.css`

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

Build from the same decisions

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

Agent handoff

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

Radius 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