Atelier — Welcome Back (editorial serif burgundy login)

Summary

An editorial, magazine-inspired login page. A full-bleed two-column split pairs a warm cream serif greeting panel (oversized Fraunces 'Welcome back.' headline with an italic burgundy accent, an issue/volume kicker, and a serif testimonial blockquote) against a clean sign-in card with Google SSO, email + password fields, a custom checkbox, and a deep-burgundy primary button. A sticky translucent nav sits on top. The whole thing reads like the cover of a design quarterly rather than a generic auth screen.

Style

Refined print-editorial aesthetic on a warm paper-cream canvas (#faf6ef) with near-black ink text (#1c1815) and a single burgundy accent (#7b2d3b, deepening to #5e1f2b on hover). Display copy is set in Fraunces (an optical serif) at light/regular weights with tight tracking and italic accents; UI/labels are Inter at 400-600. Subtle radial tints, a faint multiply grain texture, hairline rules, and tabular index numerals give it tactile, letterpress-like depth. Generous whitespace, soft 12-28px rounded corners, hairline ink/10-15 borders, and quiet micro-interactions (focus ring rgba(123,45,59,.10), animated link underlines).

Layout & Structure

A sticky translucent header over a full-bleed two-column split that fills the viewport (min-height calc(100vh - 68px)). Desktop columns are an asymmetric 1.05fr / 0.95fr grid with the editorial greeting on the left and the sign-in form on the right; the outer container is capped at max-width 1240px with px-6/sm:px-8 gutters. On mobile the grid collapses to one column and the order flips so the form sits on top (order-1) and the editorial panel below (order-2), with the rounded corners moving from a left/right split (lg:rounded-l-[28px] / rounded-r-[28px]) to a stacked top/bottom split (rounded-t/rounded-b-[24px]).

Sticky nav

Left editorial greeting panel

Right sign-in form

Special Notes

Fonts loaded from Google Fonts: Fraunces (ital, optical-size, weights 300-700) for all serif/display, Inter (400/500/600) for sans UI. Icons via Iconify (logos:google-icon, ph:eye, ph:check-bold). Built with the Tailwind CDN; custom theme tokens cream #faf6ef, ink #1c1815, burgundy #7b2d3b, burgundy-deep #5e1f2b. Responsive: desktop 1.05fr/0.95fr split with corner rounding on the outer edges; below lg it stacks to one column, reorders the form above the editorial panel, and switches to top/bottom corner rounding. No em-dashes in copy. The whole layout fills the viewport height minus the 68px nav. Selection color is burgundy-on-cream.