Forms
Inputs, labels, and the action button. The newsletter signup (Form) is the canonical example — every pattern below comes from it.
Inputs & labels
Labels are plain sans, sitting above the field. Inputs use a thin warm-stone border, rounded corners, and an green focus ring. Placeholders are muted, never used in place of a label.
Focus states
Focus is the claravine-green-500 ring — a soft 2px ring plus a matching border. Tab into or click the field below to see it.
- focus:border-claravine-green-500
- focus:ring-2 focus:ring-claravine-green-500/30
- focus:outline-none
Submit button
The action button is rounded and filled withclaravine-green-600 (the green accent), sans and semibold, with a subtle hover shift. It is the same button used for resource downloads and copy actions.
Consent & captcha
A required consent checkbox (claravine-green-500 focus ring) and the captcha block (provider-agnostic; Cloudflare Turnstile by default). The captcha renders at full width; here it is a placeholder.
Validation & error states
Errors switch the border and ring to zmoki-red-500, with a message below the field. Submit the demo with an empty or invalid email to see it live.
Please enter a valid email address.
Usage
Copy these utility strings straight onto inputs and buttons. The focus ring is the green accent (claravine-green-500); the error state switches border and ring to zmoki-red-500 with an inline message below the field.
- label— text-sm font-medium
- input— rounded-lg border border-zmoki-stone-300 p-2 focus:border-claravine-green-500 focus:ring-2 focus:ring-claravine-green-500/30
- input (error)— border-zmoki-red-400 focus:ring-zmoki-red-500/30
- button— rounded-lg bg-claravine-green-600 px-4 py-2 font-semibold text-white transition-colors hover:bg-claravine-green-700
- checkbox— h-4 w-4 rounded border-zmoki-stone-400 text-claravine-green-600 focus:ring-claravine-green-500