Forms

Inputs, labels, and the jade action button. The newsletter signup (BrevoForm) is the canonical example — every pattern below comes from it.

Inputs & labels

Labels are font-mono, sitting above the field. Inputs use a thin slate border, a subtle radius, and mono text. Placeholders are muted, never used in place of a label.

Name

Message

Focus states

Focus is the zmoki-azure ring — a 2px ring plus a matching border. Tab into or click the field below to see it.

Try focusing

focus:border-zmoki-azure-500
focus:ring-2 focus:ring-zmoki-azure-500
focus:outline-none

Submit button

The action button is solid zmoki-jade, mono and uppercase. Hover drops opacity to 80%. It is the same button used for resource downloads and copy actions.

Consent & captcha

A required consent checkbox (zmoki-azure focus ring) and the Cloudflare Turnstile captcha block. The captcha renders at full width; here it is a placeholder.

Cloudflare Turnstile widget

By checking this box, I acknowledge that I have read, understood, and agree to the Terms of Service and Privacy Policy.

Validation & error states

Errors switch the border and ring to zmoki-flame, with a mono 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 error variant only swaps the azure ring/border for flame.

label — font-mono text-sm font-medium
input — rounded-sm border border-slate-300 p-2 font-mono focus:ring-2 focus:ring-zmoki-azure-500
input (error) — border-zmoki-flame-500 focus:ring-zmoki-flame-500
button — rounded-sm bg-zmoki-jade-500 px-4 py-2 font-mono uppercase text-white hover:bg-zmoki-jade-500/80
checkbox — h-4 w-4 rounded border-slate-400 focus:ring-zmoki-azure-500