---
id: portfolio.ds.extra-small-corner-radius
name: "Extra Small Corner Radius"
type: token
status: active
relations: []
sources: ["apps/portfolio-site/src/design-system/docs/corner-radius.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/ProjectHeroItem.astro","packages/design-system/src/styles/tokens.css"]
catalog: ["apps/portfolio-site/src/design-system/docs/corner-radius.astro"]
previews: []
---
# Extra Small Corner Radius

## Purpose

Extra Small Corner Radius is the subtle rounded-corner token for compact inset surfaces that should remain visually close to a square.

## Contract

- Token: `--radius-xs`.
- Value: `0.25rem / 4px`.
- Uses the shared `--corner-shape: squircle` continuous corner behavior.
- Use for small internal panels and restrained surface treatments.
- Do not substitute it for Small or Medium Corner Radius on controls, cards, or large containers.

## Use

- Compact copy panels placed inside a larger visual surface.
- Small inset surfaces that need only a slight softening of their corners.

## Do Not Use

- A control needs the established Small Corner Radius.
- A card, tile, or preview needs Medium Corner Radius.
- The component is intentionally pill-shaped or circular.

## Code Paths

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

## Accessibility

Corner geometry must not reduce the visible focus ring or clip interactive content.

## Verification

- Confirm `--radius-xs` resolves to `4px` at the default root font size.
- Confirm the Project Hero Item copy panel consumes the token without a local radius value.
- Run `scripts/design-system-graph --check --no-write`.