Spacing & elevation

Spacing

Laurel uses Tailwind's default spacing scale: one unit is 4px (p-2, gap-4, size-6, …). Stock Mira components are already compact, so most spacing comes from the components themselves.

Separate sections with whitespace from this scale, not with rules or boxes.

Forms use a 24px gap between fields and fieldsets, with 12px between a field's label, control and helper text. Standard cards use 20px internal spacing. Checkbox and radio options keep their tighter internal spacing. Tables, menus and toolbars retain Mira's compact spacing.

Radius

The theme sets one variable, --radius: 0.25rem (4px). Mira derives the rest of the scale from it, so rounded-lg is 4px and the smaller and larger steps scale around it. To make the whole system rounder or squarer, change that one value.

Elevation

Mira defines depth with a hairline ring (ring-1 ring-foreground/10) on cards and small surfaces, and Tailwind's shadow-md and shadow-lg on popovers and dialogs. On a light ground, do not stack heavy shadows. On a dark ground elevation is lighter: a raised surface is a step lighter than the ground (--card and --popover over --background) and its edge is a hairline of the light ink.