Forms that feel effortless to fill — Fieldcraft
A stacked, multi-section account-settings form on a white card: top-aligned labels, helper text, a 6-column responsive grid, custom checkboxes and radios, and one disciplined emerald accent for focus and the primary action.
Summary
A stacked, multi-section account-settings form on a single white card: top-aligned semibold labels, helper text under the fields that need it, a 6-column responsive grid for name/address rows, custom checkboxes and radios, and a single emerald accent reserved for focus rings, the primary button, and selected states. Wrapped in a marketing-style landing page (sticky nav, gradient hero, anatomy cards, dark prompt-CTA section, footer) that frames the form as a reusable pattern.
Style
Calm, editorial SaaS aesthetic on a white canvas with a slate-900 ink palette and one disciplined emerald accent (#10b981). Inter typeface, generous whitespace, soft rounded corners, faint dotted grain texture, and large blurred emerald glow blobs behind the hero and dark CTA.
Layout & Structure
Single-column, centered max-w-6xl page. Sticky translucent nav, gradient hero with centered headline, a slate-50 showcase band holding the form on a max-w-3xl white card, a 3-up anatomy grid on white, a dark emerald-glow prompt CTA with a code block, then a footer. The form itself is divided into stacked sections separated by hairline dividers, each section using a vertical stack or a 6-column responsive grid that collapses to one column on mobile.
Sticky nav
Hero
Showcase form card
Profile section
Personal information section
Notifications section
Form actions bar
Anatomy section
Prompt CTA + footer
Special Notes
Single accent discipline is the core idea: emerald (#10b981) is used ONLY on focus rings, the primary button, and selected checkbox/radio states; everything else is slate/white. Labels are always top-aligned and semibold (text-slate-700) so the eye scans straight down. The 6-column grid is the responsive backbone: paired/tripled fields collapse to one column on mobile with no rework. Inputs default to a slate-50 fill that turns white on focus. Custom checkbox/radio marks are drawn in pure CSS (::after pseudo-elements), not images, and carry visible focus rings for WCAG. Fonts via Google Fonts Inter; icons via Iconify (lucide:* set). Tailwind via CDN with an extended emerald scale (50 #ecfdf5 -> 900 #064e3b).