Monochrome discipline applied to forms: a crisp 1px gray border that simply turns darker on focus. No color, no glow theatrics — the field's confidence comes from perfect spacing and contrast.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build Vercel Geist-style monochrome input fields.
1. Resting: white background, 1px solid #E2E8F0 border, 6px radius, height 40px, 14px text.
2. Hover: border darkens to #E2E8F0. Focus: border becomes #0F172A plus a matching 1px ring (reads as a 2px black outline). Transitions 150ms.
3. NO accent color anywhere in the form — black is the focus color. Errors are the single exception (#EE0000).
4. Label: 13px #64748B above the field. Placeholder #64748B. Helper text 13px #64748B below.
5. Prefix/suffix slots (e.g. https:// or .vercel.app) sit in #F8FAFC compartments separated by the same #E2E8F0 border.
6. Disabled: #F8FAFC background, #64748B text, not-allowed cursor.Monochrome discipline applied to forms: a crisp 1px gray border that simply turns darker on focus. No color, no glow theatrics — the field's confidence comes from perfect spacing and contrast.
Click into the fields and type — focus rings, label motion and error states are live.
Click into the fields and type — focus rings, label motion and error states are live.