---
title: "Shape tokens"
description: "The generated reference for the root radius, the six rungs derived from it, and the corner shape they are drawn with."
url: "https://opsinjs.pensievelabs.org/foundations/shape/tokens"
source: "https://opsinjs.pensievelabs.org/foundations/shape/tokens.md"
section: "Foundations"
kind: "foundation"
reviewed: "2026-09-20"
reviewer: "engineering"
aliases: ["radius tokens", "shape token reference"]
---

> Elements written as `<PascalCase … />` below are opsinjs documentation
> components. Their attributes are the content: the values they render are
> generated from `tokens/*.json` and `registry/catalogue.ts` and are
> published separately at https://opsinjs.pensievelabs.org/r/index.json and under the Reference
> section.
> Nothing is missing from this page. The data simply does not live in
> the prose.

<PageTemplate kind="foundation" />

## Overview [#overview]

The whole shape vocabulary: one root radius, the multipliers applied to it, the
six named rungs those produce, and the corner shape. Generated from
`tokens/shape.json` by `scripts/build-tokens.mts`.

It is the shortest generated table on the site, which is the point. If this table
ever grows past a screen, the system has started choosing radii instead of
deriving them.

## How it works [#how-it-works]

`tokens/shape.json` has three parts.

**The root.** One value, `--radius`. The product theme sets it generously; the
docs chrome sets it to zero. Everything else in this table is a function of it,
so a product that wants a different character changes exactly this.

**The multipliers.** One per rung, ascending. The generator emits the resolved
value alongside the multiplier, so the table shows both what a rung *is* and what
it is *derived from*. That is what makes it possible to tell at a glance
whether somebody has broken the ladder by authoring a rung directly.

`full` is emitted as a fixed capsule value rather than a multiple, because it is
not a point on the ladder. It is a statement that the element is a capsule.

**The corner shape.** A single `--opsin-corner-shape` value, applied through
`corner-shape` under a support query. See [Squircle](./squircle.mdx).

The specimens on this page render each rung at the product theme's root value,
with the superellipse applied where the browser supports it. On a browser
without `corner-shape`, this page therefore shows you exactly what your readers
on that browser will see, rather than an idealised picture of it.

## Using it [#using-it]

**Read the multiplier column, not just the value.** The resolved pixel figure
changes with the root; the multiplier is the stable fact.

**Use this page to check nesting arithmetic.** `inner = outer − padding` needs
both numbers, and this table plus the
[space table](../space/tokens.mdx) is where both live.

**Do not copy a resolved value into a component.** It is correct for one root
radius, which means it is correct for the product theme and wrong for any theme
derived from it. The docs chrome is one such theme, and there it would round
something that is meant to be square.

**If a rung is missing, the object is probably misclassified.** Six rungs cover
inline marks through full-screen surfaces. A request for a seventh is almost
always a control that has been categorised as a card, or the reverse.

## Tokens [#tokens]

<TokenTable scope="shape" />

<RadiusSpecimen step="md" />

## Accessibility impact [#accessibility-impact]

* **Publishing the multipliers makes the ladder auditable.** A rung whose value
  is not its multiplier times the root has been overridden somewhere, and a
  generated table is the only way anyone would notice.
* **Corner geometry reduces the usable hit area**, so the target-size
  measurements on [Density and touch](../space/density-and-touch.mdx) are taken
  against the interactive area rather than the bounding box. The rung a control
  uses is an input to that measurement.
* **Nothing here is measured for contrast**, because radius does not affect it.
  The `corner-shape` support matrix is on [Squircle](./squircle.mdx).
* **The table is a real table**, navigable cell by cell, as every generated table
  on this site is.

## Related [#related]

* [Radius scale](./radius-scale.mdx) says what each rung is for and the nesting
  rule.
* [Squircle](./squircle.mdx) covers the corner shape and its degradation.
* [Reference → Tokens](../../reference/generated/tokens.mdx) has the same rows
  alongside every other family.