The Atelier Brief — an editorial intake form, set like a letter
An editorial intake form set like a letter: a warm cream page in Fraunces serif + Inter with a single burgundy accent, borderless underline inputs with serif labels (Name / E-mail, Project / Budget, Message), structured by full-bleed cream/ink/cream bands and hairline rules instead of cards, and a quiet ink 'Submit the brief' button.
Summary
An editorial intake form ('The Atelier Brief') for a by-correspondence design studio, built around THE underline-input form set like a letter, not a queue. A warm cream paper ground (#faf6ef) carried by a refined two-typeface system, Fraunces (an optical serif, the editorial voice) for every display word and field label, and Inter (sans) for body and UI text, over near-black ink (#1c1815) with a single burgundy accent (#7b2d3b). A faint dotted 'grain' texture sits over the whole page. A sticky translucent nav, a tall serif hero ('Forms that read like a letter, not a queue.' where 'letter' is italic burgundy), a full-bleed cream trust strip, then the form: a two-column editorial layout pairing a left intro column (chapter eyebrow, serif heading, hairline rule, contact lines) with a right form of borderless underline inputs (Name / E-mail paired, Project type / Budget paired, then a full-width Message textarea), closed by a privacy line and an ink 'Submit the brief' button. Below it, a full-bleed dark ink 'Selected work' band of three numbered articles, a light 'Process' section of three roman-numeral steps, and a cream footer. Quiet, literary, and confident; reflows from two columns / paired fields to a single stacked column on mobile.
Style
Editorial, literary form UI that reads like a page in a quiet book. A warm cream paper ground (#faf6ef, deeper panels #f3ecdf) under a faint dotted 'grain' radial-dot texture (rgba(28,24,21,0.025), 4px tile). A near-black warm ink (#1c1815) for primary text and a softer ink (#54493f) for secondary, with a single muted burgundy accent (DEFAULT #7b2d3b, deep #5e1f2b, light #c98a93, bright #e3aab2 for use on dark grounds). A two-typeface system: Fraunces (an optical-size variable serif, weights 300-700, used at large opsz for display and 'opsz' 24 for field labels) is the editorial voice for headlines, labels and accents; Inter (sans, 300-600) carries body copy and small UI text. Generous whitespace, tight negative letter-spacing on the big serif display (tracking -0.01em) and wide uppercase tracking (0.22-0.28em) on eyebrows, links and buttons. No card chrome and almost no borders: structure comes from hairline rules (a 1px center-fading gradient rule), full-bleed color bands (cream / deep-ink / cream) and rhythm, not boxes. Inputs are borderless underline fields (transparent, only a 1px bottom border) that on focus deepen to burgundy with a soft 1px burgundy shadow under the line. Interactions are restrained and typographic: quiet links draw a burgundy underline left-to-right on hover (.link-quiet), the ink submit button darkens to burgundy, lifts 1px and widens its letter-spacing on hover; arrow icons nudge right. Calm, refined, human, unhurried, never busy or sterile.
Layout & Structure
A single editorial page in full-bleed horizontal bands: a sticky translucent nav, a tall serif hero, a full-bleed cream trust strip, THE form section (a two-column editorial layout: a narrow left intro column + a wider right form of underline inputs), a full-bleed near-black ink 'Selected work' band, a light 'Process' section, and a cream footer. The nav / hero / work / process / footer use a wide max-w-6xl column; the form section narrows to max-w-5xl for a more letter-like measure. Everything reflows to a single column on mobile: the nav links hide behind the persistent 'Start a brief' link, the form's two intro/form columns stack and the paired fields (Name/E-mail, Project/Budget) collapse to one-up, the trust strip condenses its brand list, and the work grid goes one-up.
Sticky nav
Hero
Trust strip
The form section (the hero component)
Underline-input form (the reusable heart)
Selected work band
Process section
Footer
Components
Underline input (.underline-input)
Editorial serif label (.ed-label)
Quiet link (.link-quiet)
Ink submit button (.btn-submit)
Hairline rule (.rule)
Grain texture (.grain)
Outline monogram brand mark
Special Notes
Built on the Tailwind CDN with a tailwind.config extend: custom colors cream #faf6ef, creamdeep #f3ecdf, ink #1c1815, inksoft #54493f, burgundy #7b2d3b, burgundydeep #5e1f2b, burgundylt #c98a93, burgundybright #e3aab2; fontFamily serif = Fraunces, sans = Inter. Fonts load from Google Fonts (Fraunces ital,opsz 9..144,wght 300..700 + Inter 300-600); icons are Iconify lucide:* via the iconify CDN. The body carries the .grain dotted texture and #faf6ef background with smooth scroll-behavior. The signature move is the borderless underline-input form (.underline-input) set with Fraunces serif labels (.ed-label, 'opsz' 24), structured by full-bleed cream/ink/cream bands, hairline gradient rules (.rule) and whitespace rather than cards or borders, with quiet typographic interactions (the .link-quiet underline reveal, the .btn-submit hover that goes burgundy + lifts + widens letter-spacing). The form is a real, accessible native HTML form (text/email inputs + textarea, real <label for> pairings); onsubmit is no-opped for the static demo. On a single static frame the underline-focus color shift, the .link-quiet underline reveal and the .btn-submit hover only fully show live. 'Atelier Brief', the brand names in the trust strip / selected-work band, and the contact details are illustrative placeholders for a by-correspondence design-studio intake/contact form.