Spacing & radius

By default, Untitled UI uses a numeric primitives spacing scale with proportional values where one spacing unit is equal to 0.25rem or 4px. As an example, 16px is twice as much spacing as 8px, so the steps are named 4 and 2 respectively. In code the unit is Tailwind's --spacing token and every utility (p-4, gap-2, size-8) multiplies it. The measure lines are relative, scaled against the scale's largest step; the Pixels column carries exact sizes.

Working from a pre-defined and limited spacing system allows you to work faster and consistently. These pre-defined spacing values are derived from the primitive spacing values and are useful for gaps, padding, and margin used across all of your components and designs. The names are the Figma library's variable layer; in code the same steps are the numeric utilities in the Tailwind column.

Working from a pre-defined and limited radius system for adding border radiuses (or radii) to elements allows you to work faster and consistently, with values derived from the primitive spacing scale. The kit declares rounded-xs (2px) through rounded-4xl (32px) plus rounded-full in theme.css, each backed by the --radius-* token of the same suffix, with bare rounded aliasing rounded-sm. The sheet's denser scale doesn't map one-to-one: its 10px and 20px steps don't exist in code, its names below xl sit one step off (the sheet's radius-xxs is the kit's rounded-xs), xl and 2xl align exactly, its radius-4xl (24px) is the kit's rounded-3xl, and the kit's rounded-4xl reaches past the sheet's largest step.