Editing disguised as reading: no box, no border — just text that reveals a soft gray wash on hover and a subtle outline on focus. Perfect for inline-editable titles, table cells, and settings values.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build Notion-style quiet inline inputs.
1. Resting: completely invisible — transparent background, no border, text renders exactly like the surrounding copy (#2F2E2B).
2. Hover: a soft wash appears, background #2F2E2B0F, radius 4px. Cursor: text.
3. Focus: background stays washed and a 2px ring in #B5654A59 appears. No border.
4. Padding: 4px 6px — just enough for the wash to breathe around the text.
5. Placeholder: #2F2E2B59, often an instruction like "Untitled" or "Empty".
6. Use for inline-editable titles, table cells, and property values — NOT for standalone forms.Editing disguised as reading: no box, no border — just text that reveals a soft gray wash on hover and a subtle outline on focus. Perfect for inline-editable titles, table cells, and settings values.
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.