Forms

Form .

Grade densa (gap 18px, max 560px) compondo Field/RadioRow + Button submit.

Form · light surface

Dense grid: 18px between fields (the ONLY gap), 8px label→input, 560px cap. Radios wrap horizontally on one row — not a tall stacked column. Labels use Geist Mono, 11px/0.08em/uppercase (compact mono eyebrow style). Required fields carry * indicator (not color-only) + native required attr. Focus ring: var(--focus-ring) (green-600 light, green-400 dark — surface-aware).

Dense form · light surface · generic labels

Used only to reply to your message.
Preferred contact

Dense form · cream surface · confirms border re-theme

Preferred contact

Form · dark surface (carbon)

data-surface="carbon" — role tokens re-resolve automatically: --border → rgba(255,255,255,0.13), --focus-ring → --green-400. No overrides in Field.astro or RadioRow.astro.

Preferred contact

Form · verification

Dense spec

  • Form grid: display:grid; gap:18px — 18px is the ONLY field gap
  • Form container: max-width:560px; margin-inline:auto
  • Field: display:grid; gap:8px — 8px label→control coupling
  • Inputs: min-height:48px; padding:0 16px; font-size:16px
  • Border: var(--border) — no stale #D9D2BF hex
  • Focus: var(--focus-ring) border + 3px ring — surface-aware
  • Radios: display:flex; flex-wrap:wrap; gap:8px 18px — horizontal, not stacked
  • Radio options: min-height:44px; vertically centered