Foundations · Structure

Radius & spacing

Two structural token families. Radius is the --radius-* corner scale — smallest to fully-round, capped at 12px in app chrome — with two semantic aliases components should reach for. Spacing has no --space-* vars: it's Tailwind's default 4px scale used directly as p-* / gap-* / space-y-*. Both keep the rescuer roster on one rhythm.

Radius scale · one token per box

--radius-xs

2px

Tags, inline chips, checkbox — tiniest inset corner.

--radius-sm

4px

Badges, popover menu items, dense controls.

--radius-md

6px · =--radius-control

Buttons & inputs — the clickable/typeable radius.

--radius-lg

8px · =--radius-card

Cards, roster tiles, drawer inner corners.

--radius-xl

12px

Modals, hero panels — the MAX in app chrome.

--radius-pill

999px

Chips, switch track, avatars — fully round.

Semantic aliases · prefer these in components

--radius-control = --radius-md (6px)

Search rescuers…

Buttons, inputs, selects and toggles. The global *:focus-visible rule rounds the focus ring to this radius — hover the button or click the field to see it. Add foster is pinned :hover.

--radius-card = --radius-lg (8px)

Dana Whitfield

Foster lead · Northside

Active

Cards, list tiles and panels — the default container radius. Nested corners round inside it (avatar = --radius-pill, chip = --radius-pill).

Spacing scale · Tailwind's 4px rhythm (step n = n × 4px)

p-0.5 / gap-0.5

2px · 0.125rem

Hairline nudges — chip inset, icon offset.

p-1 / gap-1

4px · 0.25rem

Tightest gap — inline icon ↔ label.

p-1.5 / gap-1.5

6px · 0.375rem

Dense list / chip internal padding.

p-2 / gap-2

8px · 0.5rem

Compact control padding, small gaps.

p-3 / gap-3

12px · 0.75rem

Default row gap, control padding.

p-4 / gap-4

16px · 1rem

Default grid gap, card body gap.

p-5 / gap-5

20px · 1.25rem

Card padding (the roster tile is p-5).

p-6 / gap-6

24px · 1.5rem

Section inner spacing.

p-8 / gap-8

32px · 2rem

Between demos inside a section.

p-12 / gap-12

48px · 3rem

Major page-level block separation.

--radius-xs … xl

2 · 4 · 6 · 8 · 12px. Never exceed 12px in app chrome; a nested corner = outer radius − its padding, so insets stay concentric.

--radius-pill

999px — chips, pills, the switch track and avatars. Full rounding, independent of element size.

--radius-control

= --radius-md (6px). Buttons, inputs, selects, toggles — anything you click or type into. The global focus ring rounds to this.

--radius-card

= --radius-lg (8px). Cards, roster tiles, panels — the default container radius. Both aliases are knob-swappable at the theme level.

spacing = 4px base

No --space-* vars — spacing is Tailwind's default scale, step n = n × 0.25rem (n × 4px). e.g. gap-3 = 12px, p-5 = 20px.

rhythm rule

Stick to the scale (no arbitrary px) via p-* / px-* / py-*, gap-*, space-y-* / space-x-* and m-* — so gutters and vertical rhythm stay aligned across cards, rows and sections.

Source · src/app/design-system/tokens/page.tsx (Radius + Spacing sections) · tokens from @phauna/ds tokens/scale.css. Spacing is Tailwind's 4px scale — the system defines no --space-* variables.