Tinyrack

Shape and boundaries

Choose shape by purpose, then use Tinyrack radius, border, and focus tokens to keep boundaries clear and nested surfaces coherent.

Choose shape by purpose

  • Use sm or md for compact controls whose boundary should remain crisp.
  • Use lg or xl for a distinct panel, popover, or overlay surface.
  • Use full only when a pill, status, avatar, or circle communicates the role.

Radius and border scale

RadiusValueCSS variable
xs0.125rem--tinyrack-radius-xs
sm0.25rem--tinyrack-radius-sm
md0.375rem--tinyrack-radius-md
lg0.5rem--tinyrack-radius-lg
xl0.75rem--tinyrack-radius-xl
full9999px--tinyrack-radius-full

Use default for normal boundaries, strong for stronger structure, and accent for a narrow emphasis edge. These map to --tinyrack-border-width-default, -strong, and -accent.

BorderValue
default1px
strong2px
accent3px

Nest shapes deliberately

An inner surface should use the same or a smaller radius than its container. Account for padding and border width; do not place a visibly rounder rectangle inside a tighter outer boundary.

Nested content

Let focus follow shape

Apply the focus outline to the interactive element so it follows that element's radius. Tinyrack uses --tinyrack-focus-width (2px) and --tinyrack-focus-offset (2px); do not replace the outline with a shape that clips or changes the control boundary.

Applied example

Deployment
ready
The action uses a control radius; the status uses a meaningful pill.

Implementation and reference

Use tinyrackRadii and tinyrackBorders in tooling, --tinyrack-radius-*, --tinyrack-border-width-*, and --tinyrack-focus-* in CSS, or the matching rounded-tinyrack-*, border, and outline utilities. Component --tr-* variables are the local override point.