Ninety degrees.

Most of what people recognise as “Alix” is the corner. The base radius is 0, so buttons, cards, inputs, media, every surface meets at a hard 90°. Sharp reads as architectural, engineered, exact; it is the system’s most defining and most protected decision. Roundness is the rare exception, allowed only where the round shape is the meaning.

Base radius
0px
Corner
90° · sharp
Exception
rounded-full where meaningful
Separator
1px hairline
Contents
  1. 6.1Radius zero
  2. 6.2One knob
  3. 6.3The one exception
  4. 6.4Borders do the work
  5. 6.5Nested corners
  6. 6.6Misuse
6.1

Radius zero

Every default surface uses a true right angle: radius 0, with no arc. Two edges meet at a point. This is what makes the system feel cut rather than moulded.

Corner detail · enlargedr = 0px
90.0°
0
radius · every surface
The corner detail at scale. The red mark is the 90° construction symbol; the radius is 0, so the arc has no length.
6.2

One knob

There isn’t a hand-set radius on each component. The whole scale derives from a single token, --radius, by simple arithmetic, so the system’s corner character lives in one place. Today --radius is 0, which collapses sm/md/lg to 0 and leaves xl as reserved implementation headroom at 4px. That is not a branded default surface. Move that one value and every corner in the system moves with it.

TokenResolvedUse
radius0pxThe single source; every step derives from it.
radius-sm0pxSharp corner.
radius-md0pxSharp corner.
radius-lg0pxSharp corner.
radius-xl4pxReserved headroom, not a brand surface.
rounded-full9999The only active curve, used where round = meaning.
The derived scale, resolved at --radius: 0. The negative steps clamp to 0; xl is reserved headroom at 4px, and only rounded-full stays active where roundness carries meaning. Change the source and the column on the right re-renders everywhere at once.
6.3

The one exception

Roundness is allowed in exactly one situation: when the round shape is itself the meaning. A pill reads as a status or a filter, not a button. An avatar is round because faces are. A dot is a marker. These use rounded-full, the only active curve in a sharp system, because rounding here communicates a category, not a softening. Nothing in between, such as a gently rounded card, is permitted.

In review
PillBadge · Taglinerounded-full
AX
Avatarround by naturerounded-full
Series
Markerdots & legendsrounded-full
6.4

Borders do the work

The 1px border carries the structural load. It defines boundaries, divides content, and communicates state. Keep it hairline-thin; weight comes from contrast and spacing, not a thick rule.

Boundary

border-border

The default edge of cards, inputs, and tables. Use one consistent hairline instead of a shadow.

A bounded surface

Structure

border-t · border-b · border-l

Use one edge to divide without drawing a box: list rows, table cells, or page sections.

Overview
Activity
Settings

State

border-ring · border-l-success · border-destructive

A coloured border communicates focus, status, or error. State sits on the border, never on a corner radius.

Saved
Invalid entry
6.5

Nested corners

Nested corners must stay concentric: inner radius equals outer radius minus the padding between them. In Alix, 0 inside 0 keeps a nested thumbnail, inset, or selected state as sharp as its container. Never round an inner element independently to soften it.

Concentric: 0 inside 0. The inner frame is as sharp as the card.
A rounded inner against a sharp outer. The corners read as misaligned.
inner radius = outer radius − padding. The formula holds at every scale; at radius 0 it keeps nested elements sharp.
6.6

Misuse

Shape goes wrong by reaching for a radius the system doesn’t have. Sharpness is the brand; protect it.

Don't round a surface to soften it. Use space, not radius.
Don't mix radii across sibling elements. Use one shape language per view.
TagButton
Don't round a pill's neighbours. rounded-full is for the pill alone.