Graphite · Floating-Label Form Design
A calm, premium account form in graphite on off-white: floating-label hairline inputs that lift on focus, Inter type, one solid ink button, no boxes or shadows.
Summary
A calm, premium account-form landing in graphite (#1c1c1e) on warm paper (#fbfbfa), built around floating-label hairline inputs: the label rests inside each field and lifts + scales to 0.78 on focus or fill while a 1px graphite underline draws in from the left. Inter throughout, generous whitespace, one solid graphite button, no field boxes or drop shadows. A sticky blurred nav, a three-up pattern strip on a mist band, a live form-card preview, a full-bleed dark prompt section, and a palette specimen strip.
Style
Restrained, editorial, premium-minimal. Monochrome graphite-on-paper palette with a single near-black accent; hairline borders (black at 5-10% opacity) instead of heavy boxes; Inter at 400-800 weights, tight negative tracking on headings; lots of breathing room; one solid ink button as the only filled surface in light sections; a single full-bleed dark (graphite) section for contrast.
Layout & Structure
Single long-scroll desktop page at max-width 72rem (max-w-6xl), 6 stacked full-width sections: sticky nav, hero, full-bleed mist pattern strip, live-preview split (copy + form card), full-bleed dark prompt split, palette specimen strip, footer. Two-column sections collapse to single column on mobile.
Sticky nav
Hero
Pattern strip (full-bleed mist)
Live preview split
Form card (the hero component)
Prompt section (full-bleed dark)
Palette specimen strip
Footer
Components
Floating-label hairline input
Solid ink button with hover lift
Hairline divider grid
Highlighted code/prompt panel
Reveal card
Special Notes
Icons are Iconify Phosphor (ph:*) loaded from the iconify CDN. Tailwind is configured via CDN with custom named colors ink #1c1c1e, ink2 #2c2c2e, platinum #c7c7cc, mist #f4f4f5, paper #fbfbfa. The floating-label and underline-draw effects are 100% CSS (no JS); a .is-focused helper class is only used to freeze the focus state for a static capture and should be dropped in production. Selection color is ink-on-paper. Source pattern: floating-label input on CodePen (https://codepen.io/AdrianBece/pen/KKKZQOY). All accent comes from a single graphite hue plus opacity, never multiple colors.