Spacing

Bootstrap

4px base grid, corner radius, elevation, and motion. Page shell and control sizes → Layout and Buttons. When to use which → Rules.

Scale

Use p-*, m-*, g-*, gap-* — utility index n = n × 4px for steps 1–4. Bar width = token in px (1:1) — compare steps side by side; in markup use utilities (gap-4, px-4, …), not inline widths.

4px

8px

16px

24px

32px

Utility index 1–4 matches the preview (gap-1 … gap-4). Page gutters (16px vs 32px) → Layout.

Shape

Soft corners — nothing sharp. Use Bootstrap rounded-* utilities (theme tokens in theme.scss).

rounded-0

0

rounded-1

8px

rounded-2

10px

rounded-3

14px

rounded-4

18px

rounded-5

20px

rounded-pill

pill

rounded (no suffix) equals rounded-2 (10px). rounded-circle = 50% — avatars only, not a fixed px radius.

Class / token	Radius	Theme variable
rounded-0	0	—
rounded-1	8px	$border-radius-sm
rounded-2, rounded	10px	$border-radius
rounded-3	14px	$border-radius-lg (cards, dropdowns)
rounded-4	18px	$border-radius-xl (page panel, sq-panel)
rounded-5	20px	$border-radius-xxl (modals)
rounded-pill	pill	$border-radius-pill (badges, nav-pills)
rounded-circle	50%	circular avatars
— (4px affordances)	4px	$border-radius-xs — checkboxes, tooltips; no rounded-* class

Elevation

Warm, subtle shadows. Cards default borderless with shadow-md; card-bordered + lighter shadow when the background is close to the card. Inputs use inset shadow so fields read recessed.

shadow-sm

Bordered / low lift

shadow / md

Default card, menus

shadow-lg

Page panel, toasts

CSS variables: --sq-shadow-sm, --sq-shadow-md, --sq-shadow-lg, --sq-shadow-inset — see Colors surfaces.

Motion

Fast, functional timing — no decorative motion.

Token / use	Duration
Press	80ms
Hover	120ms
Shadow, switch	180ms
Modal rise	260ms

Easing: cubic-bezier(.2, 0, .2, 1) — no overshoot or bounce. No looping or pulsing. Rows and buttons do not shift on hover.

Rules

Grid and utilities

1. Prefer Bootstrap gap-* / g-* on flex and grid before one-off margins.
2. Stack vertical rhythm with mb-* or gap-*, not empty spacer divs.
3. Page-level insets and shell measures — Layout; control heights — Forms, Buttons.

Shape, shadow, motion

1. Pick rounded-* from the table — cards rounded-3, page panel rounded-4, modals rounded-5; smaller controls via component styles (rounded-1 / rounded-2).
2. Default cards: raised shadow-md, no border; card-bordered when contrast is low.
3. Motion stays short and ease-out; never animate layout shift on hover for rows or buttons.