A dark-mode field that barely exists until you need it: a whisper of a border on a translucent surface, brightening on hover and snapping into a violet ring on focus. Built for keyboard-first products.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build Linear-style ghost input fields for a dark UI.
1. Resting: background #F5F3FF0A, border 1px #F5F3FF1A, radius 8px, height 36px (compact, keyboard-first density).
2. Hover: border brightens to #F5F3FF2E. Transition 120ms.
3. Focus: border becomes #8B5CF6 with a 3px #8B5CF659 ring. No other glow.
4. Text: #F5F3FF at 14px. Placeholder: #F5F3FF4D. Label: 13px medium at 70% white.
5. Support a trailing keyboard hint (e.g. ⌘K) in a small bordered chip inside the field.
6. Everything darkens gracefully — never pure black fields on pure black pages.A dark-mode field that barely exists until you need it: a whisper of a border on a translucent surface, brightening on hover and snapping into a violet ring on focus. Built for keyboard-first products.
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.