Search documentation
Search pages, components, blocks, styles and colours.
36px controls, 13px text, and corners that nest.
Two densities
Controls come in a default and a compact size. Buttons, inputs, selects and menu rows share the same height, so they line up when you put them side by side.
Shape
Items, buttons, inputs and highlights are rounded-lg (8px). Containers such as popups, cards, dialogs and tab tracks are rounded-xl (12px). A container holds its items with 4px of padding (p-1), so the inner and outer corners are concentric.
Checkboxes use rounded-[5px]. Switches, badge dots and avatars are fully round.
Rounded or pill
Every corner comes from the --radius token: items and controls use rounded-lg (--radius) and containers rounded-xl (--radius × 1.4). Two values are supported:
Pill keeps containers concentric with their items, so menus, selects and tab tracks round out along with their rows. To switch a project to pill, add the radius item:
It sets --radius: 1.25rem in your stylesheet. To go back, set --radius to 0.5rem. Try both from the settings menu in the header of this site.