A content-first field for light editorial UIs: no box, no fill — just a 1px ink hairline under the text that thickens to 2px primary on focus. Labels sit above in quiet gray. Feels like writing on paper, not filling a form.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build Paper Underline inputs for light editorial forms.
1. No box fill. Bottom border only: 1px #0A0A0A at rest.
2. Focus: bottom border becomes 2px #DC2626 (signal red). No outer glow ring.
3. Label 13px #525252 above; value 16px #0A0A0A; placeholder #525252.
4. Height ~40px, zero radius. Transition 150ms on border only.
5. Never draw a full rectangular border around the field.A content-first field for light editorial UIs: no box, no fill — just a 1px ink hairline under the text that thickens to 2px primary on focus. Labels sit above in quiet gray. Feels like writing on paper, not filling a form.
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.