Shape and borders Radii TokenValue--helix-radii-none0--helix-radii-smcalc(var(--helix-seed-radii, 0.5rem) * 0.5)--helix-radii-mdvar(--helix-seed-radii, 0.5rem)--helix-radii-lgcalc(var(--helix-seed-radii, 0.5rem) * 1.5)--helix-radii-full9999px full is 9999px, which gives a pill shape on an element that is not square. A percentage radius such as 50% gives an ellipse on a wide element. Changing the rounding is the quickest way to change how your interface looks. You change it with one token, the seed: :root { --helix-seed-radii: 2px; } This makes every card, dialog, input, and button squarer at once, because sm, md, and lg are all computed from the seed. With this seed, they become 1px, 2px, and 3px. The theme engine has a radius intent input for the same purpose. See Deriving a theme. Setting --helix-radii-md changes only what uses md. Buttons, inputs, and dialogs use sm, and cards use lg, so none of them change. Each step is computed from the seed on its own, so overriding one step changes only that step. To change the rounding everywhere, set the seed. Every floating panel uses sm. This includes: dialogs drawers menus popovers tooltips toasts the panel a field opens below itself They all have the same corner, whatever their size. You compare a radius with the corners next to it, so the size of the panel does not matter. Circles do not use these tokens. An avatar, a loader, and a radio are circles by design, so they set 50% directly. A theme that squares off everything else does not change them. Border widths TokenValue--helix-border-thin1px--helix-border-thick2px--helix-border-surfacevar(--helix-border-thin)--helix-border-floating0 You pick from the first two. The last two are policy tokens, described in Surfaces and separation. A theme sets them to zero to go shadow-first, or to a width to go border-first. For this reason, each component reads its border width from its own hook. A theme can recolor a width written inline but cannot remove it. A theme also cannot add a border back to a component that sets border: none. In both cases, the surface can be themed in one direction only. Corners in a group of controls Controls next to each other in a group have flat corners where they meet, so a button group looks like one shape: [data-button]:not(:first-child) { border-start-start-radius: 0; } The base layer does this for the recipes, and each component does it for itself. If you build your own group: Flatten the inner corners, and keep the outer corners rounded. Use border-start-start-radius, which follows the writing direction. border-top-left-radius does not.