Lumen Docs

Spacing & radius

Tight spacing keeps density readable. Radius values are deliberate — never rounded (which is 4px in Tailwind and feels too mid).

Spacing scale

Tailwind defaults. Common pairs:

| Token | px | Usage | |---|---|---| | gap-0.5 / space-y-0.5 | 2 | Sidebar nav items, tight inline lists | | gap-1 / space-y-1 | 4 | Badge + text | | gap-1.5 | 6 | Form field label → input | | gap-2 | 8 | Button cluster, inline icon + text | | gap-3 | 12 | Card internal spacing | | gap-4 | 16 | Card group, form field group | | gap-5 | 20 | Modal section separator | | gap-6 | 24 | Dashboard sections | | gap-8 | 32 | Page section breaks |

Use gap-* with flex/grid rather than margin-*. Children never owe layout to their neighbors.

Padding common cases

Page shell

<AdminPageShell>
  // Content receives px-6 py-6 from the shell
  <div className="flex flex-col gap-4">...</div>
</AdminPageShell>

Never add max-w-* or extra padding inside an admin page shell. The shell handles it.

Modal

  • <ModalHeader> — p-6 pb-0
  • <ModalBody> — px-6 pb-4 (flex-col gap-4 for form-heavy modals)
  • <ModalFooter> — p-4 px-6 border-t border-line flex justify-end gap-2

Card

<Card className="p-4">...</Card>

Never p-2 on a card — too cramped. Never p-6 either — that's for modals.

Radius tokens

| Token | Value | Usage | |---|---|---| | --radius-sm | 6px | Buttons, form inputs, small icon tiles, list items | | --radius | 10px | Cards, modals, alerts, project icons | | rounded-full | 9999px | Avatars, badges, pills, primary CTA buttons |

Tailwind: rounded-[var(--radius)] or rounded-[var(--radius-sm)]. Avoid rounded-md (6px but not tokenized), rounded-lg (8px, off-brand), rounded-xl (12px, close but not the token).

Border convention

  • border border-line for subtle separation (modal body, card edge)
  • border border-line-strong for hover state on interactive surfaces
  • border-b border-line for dividers (topbar bottom edge, tab bar)
  • border-dashed border-line for empty-state placeholders

Never 2px borders. Never colored borders except border-accent/40 for active state accent.

Shadow

Tailwind's shadow-sm is fine for popovers. Modal uses its own backdrop. Cards don't need shadow — the border does the job.

.shadow-sm = 0 1px 2px 0 rgb(0 0 0 / 0.05);

Hard no: shadow-lg, shadow-2xl, drop-shadow-*. Too loud for a workspace UI.

Rules

  • Fixed row heights: h-8 (32px) for list rows, h-[52px] for top bars, h-9 (36px) for small buttons, h-10 (40px) for default buttons.
  • Explicit gap over margin: flex flex-col gap-4 not mb-4 on children.
  • No arbitrary px: rounded-[10px] is wrong if a token exists. Extend tokens if you need a new size.
  • --radius-sm first: if unsure, pick the smaller radius. Lumen is a tool, not a consumer app.