# Radius

## Purpose

Corner radius scale and its meaning.

## Decisions

### Scale

| Token | Value | Used for |
|---|---|---|
| `r-1` | 4px | Checkbox, switch and slider thumbs, inline code |
| `r-2` | 8px | Button (all sizes), text field / URL bar, icon button, menu items, tabs, tooltips, images, code blocks |
| `r-3` | 12px | Toasts/banners (avatars are 12px at 36px but scale, see rules) |
| `r-4` | 16px | Card, dialog/modal, menu/dropdown/popover |
| `full` | pill / circle | Tags, radio buttons, progress bars, scrollbars, count badges |

### Rules

- **URL bar / text field:** same radius as a button (`r-2`, 8px), including when it grows to multiple lines. The field height equals the button height at each size: 28, 34 or 40px (see [Sizing](sizing.md)).
- **Switches and sliders:** squared style, all 4px (`r-1`): switch track, switch thumb, and slider thumb. Radio buttons stay fully round. The slider track is a 4px-high bar and follows `r-1`.
- **Avatars:** radius is one third of the avatar size (12px at 36px, 8px at 24px, 16px at 48px).
- **Buttons:** 8px at every size. Radius does not scale with button size. Icon buttons use the same 8px.
- **Tabs:** the tabs sit in one box. The leftmost tab's top-left and the rightmost tab's top-right corners are rounded (8px). Tabs are separated by a short vertical line that does not touch the top or bottom. The highlighted tab is the lighter grey, has both top corners rounded, and has an outward-turning bottom corner on each side where it sits against another tab (none on a side at the far left or far right). A hovered inactive tab gets rounded top corners (8px) and a square bottom.
- **Button groups:** buttons are separate (with a gap) by default. They can be combined (touching, square where they meet, shared border) when specified, typically when only one can be selected and the options are on a scale, such as graphics Low / Medium / High.
- **Text field with attached button:** not attached by default. An attached option (square where they meet) exists only when the text field has a locked height.
- **Focus ring:** concentric, so the ring follows the element's radius plus the gap.
- **Code:** inline code 4px, code blocks 8px.
- **Rows (by use case):**
  - Navigation items: borderless 8px rows inside a card, filled only when selected.
  - Settings rows, selectable file lists and data rows: flat rows separated by 1px lines, inset from the card edges by the card padding (the same gap used elsewhere) rather than running to the edge. Every row, including the first and last, has 8px rounded corners (`r-2`), which show when a row is hovered or selected.
  - Notifications: if the notification floats on its own (toasts, standalone alerts), each is its own bordered 8px element with no card behind. If it sits inside something else, such as a menu or panel, use separate rounded 8px rows with a gap inside that container. This is the general rule, with exceptions possible ("for the most part").
- **Nested corners:** concentric (inner radius = outer radius minus the gap between them, never below 0).
- **Images:** 8px, unless concentric inside a container.
- **Touching rule:** elements that touch with no gap use square corners where they meet; rounded corners appear only on outside edges (or where there is a gap). Avoid touching a screen edge where possible; if an element has to, it is square there. Otherwise corners are rounded.
- **Desktop and mobile:** the same radii.
- **Identity:** rounded shapes and pills are part of the Notoric identity.