---
title: "Shape tokens"
description: "The corner radius scale, and the one number that says how a corner curves."
url: "https://tanrei.chnotchy.com/tokens/shape/"
last_updated: 2026-10-23T17:33:05.000Z
---

# Shape tokens

> The corner radius scale, and the one number that says how a corner curves.

Corner radii under `tanrei.sys.shape.corner`. For guidance, read [Shape](https://tanrei.chnotchy.com/foundations/shape/).

| Token | Value | Notes |
| --- | --- | --- |
| `--tanrei-sys-shape-corner-none` | 0px |  |
| `--tanrei-sys-shape-corner-extra-small` | 3px |  |
| `--tanrei-sys-shape-corner-small` | 6px | Default for controls: buttons, inputs, menu items, tooltips. |
| `--tanrei-sys-shape-corner-medium` | 8px |  |
| `--tanrei-sys-shape-corner-large` | 12px |  |
| `--tanrei-sys-shape-corner-large-increased` | 14px |  |
| `--tanrei-sys-shape-corner-extra-large` | 16px |  |
| `--tanrei-sys-shape-corner-extra-large-increased` | 20px |  |
| `--tanrei-sys-shape-corner-extra-extra-large` | 24px |  |
| `--tanrei-sys-shape-corner-full` | 9999px | Opt-in only: avatars, badges, segmented controls, pill variants. |

Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/shape.tokens.json`

## Corner smoothing

`tanrei.sys.shape.corner-smoothing` is an amount from 0 to 1 with Figma’s meaning: 0 a quarter circle, 0.6 what Figma calls the iOS corner, 1 the most eased. The radius does not change with it. Figma’s construction is what the amount means; Compose and Flutter draw it, the web draws the nearest superellipse, SwiftUI and iOS React Native the OS’s curve (the distances are on [Shape](https://tanrei.chnotchy.com/foundations/shape/#corner-smoothing)). Per shipped system:

| Design system | `corner-smoothing` |
| --- | --- |
| `tanrei` | 0 |
| `cupertino` | 0.6 |
| `m3-expressive-like` | 0 |
| `m3-like` | 0 |

Generated from `tokens/systems/*.system.json`, `design/tokens/<system>/tanrei.light.tokens.json`