Buttons
Five treatments, written inline wherever they appear. Radius is rounded (4px) almost everywhere; the app never uses a pill.
Primary
Blue 600, white label, 4px radius. Used for the one action a screen exists for: Create NDO, Save, Join, Confirm. Lifted from GroupView.svelte and every modal footer.
class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"Bordered
A grey or blue outline on white. The secondary action: Copy invite link, Join NDO, Associate with a group, Fork this NDO. Note the smaller padding — bordered buttons in the NDO header are px-3 py-1.5 text-xs, not px-4 py-2 text-sm.
class="rounded border border-gray-300 px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50"
class="rounded border border-blue-300 px-3 py-1.5 text-xs font-medium text-blue-600 hover:bg-blue-50"Ghost
No border, grey label, grey hover. Always the dismissive action, always to the left of the primary one in a modal footer.
class="rounded px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"Sidebar
Extra-small, full width, white hover instead of grey — because the rail is already grey. From Sidebar.svelte.
class="mb-1 flex w-full items-center gap-1 rounded px-2 py-1.5 text-xs text-blue-600 hover:bg-white"Inline compact
The smallest one, inside a form row or a group list item. Two sizes coexist here — px-2 py-1 in the sidebar forms, px-3 py-1.5 in the associate modal — and nothing distinguishes them but where they were written.
class="rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white hover:bg-blue-700 disabled:opacity-50"Drift worth fixing
Disabled state is disabled:opacity-50 on most buttons and
absent on some. Padding pairs (px-4 py-2, px-3 py-1.5, px-2 py-1)
are chosen per site rather than per role.