# Medium Corner Radius

## Essence

Medium Corner Radius is the rounded-corner token for cards, tiles, previews, and larger contained surfaces.

## Hook

Use when a UI area behaves as a contained surface rather than a compact control.

## Internal Rules

- Token: `--radius-md`.
- Value: `0.75rem / 12px`.
- Uses the shared `--corner-shape: squircle` continuous corner behavior.
- Keep this token for cards, content surfaces, and preview containers.
- Do not use this token for small controls when Small Corner Radius is available.

## Use When

- Article cards.
- Use-case items.
- Content surfaces and preview containers.
- Larger grouped UI areas.

## Do Not Use When

- The component is a compact interactive control.
- The shape is intentionally square.
- The component is intentionally pill-shaped or circular.

## Related Components And Patterns

- Article Card
- Use Case Item
- Component previews and surfaces
- Small Corner Radius owns compact controls.

## Code Paths

- `packages/design-system/src/styles/tokens.css`
- `packages/design-system/src/components`