Design at the Speed of Thought — Editorial Split Sign-Up

Summary

An editorial, magazine-style sign-up screen built as a full split-screen landing on a warm cream + deep burgundy palette. A translucent sticky cream nav sits over a two-pane main: the LEFT is an oversized serif brand panel on a burgundy ground (a film-grain texture, faint concentric SVG arcs and a soft radial bloom) carrying an uppercase 'Issue 06 . The Design Agent' eyebrow, a clamped Fraunces display headline 'Design at the speed of thought.' (the word 'speed' italic), a value paragraph, and a pull-quote testimonial with an initials avatar plus a three-icon feature row; the RIGHT is a near-black ink account-creation column with a 'Create your account' eyebrow, a Fraunces 'Start designing, free.' heading (the word 'free.' italic burgundy-light), Google + GitHub OAuth buttons above an 'or with email' divider, white email + password fields (icon-leading, with an eye toggle) on the dark ground, a four-segment password-strength meter, a burgundy 'Create account' CTA, a Terms/Privacy footnote, and an enterprise/log-in row. Below the split: a full-bleed cream 'Trusted in the studios shipping fastest' proof strip (serif logo lockups + a stacked-avatar count) and a dark ink FAQ/footer (an accordion of three open/closed questions + a brand column + a legal bar). Warm editorial aesthetic: cream #faf6ef on burgundy #7b2d3b and ink #1c1815, Fraunces serif display + Inter body.

Style

A warm, editorial / magazine aesthetic that treats a sign-up like the cover spread of a design journal. Three grounds carry the page: a cream paper #faf6ef, a deep wine burgundy #7b2d3b (the brand pane), and a near-black ink #1c1815 (the form column + footer), with a lighter burgundy #a9485a as the secondary accent and a darker burgundy #5e202b for shadows/blooms. Typography pairs Fraunces (an optical-size serif) for oversized display headlines, the brand wordmark, the pull-quote and the section labels with Inter for body/UI. The burgundy pane is textured: a fine SVG fractal-noise film grain at 5% overlay, faint concentric stroke arcs top-right and a soft blurred burgundy-dark radial bloom bottom-left. Color discipline is tight: cream type on burgundy, cream type on ink, burgundy as the single action color (the CTA, links, the brand tile, focus rings). Inputs are white cards on the dark column that get a burgundy focus ring; links use an animated underline-grow; the CTA and OAuth buttons lift on hover. Calm, high-craft, print-like; warm and human copy with zero em-dashes.

Layout & Structure

A sticky translucent cream nav, then a full-height two-pane split main (LEFT a burgundy editorial brand panel, RIGHT a near-black ink sign-up form column), then a full-bleed cream 'Trusted in the studios shipping fastest' proof strip, then a dark ink FAQ/footer (an accordion + a brand column + a legal bar). The split main is a grid lg:grid-cols-[1.04fr_1fr] at min-h-[calc(100vh-4rem)]; below lg it stacks and the order flips so the form column comes first. Most containers center in mx-auto max-w-[1240px] px-6 sm:px-8.

Sticky translucent nav

Split main shell

LEFT — burgundy editorial brand panel

RIGHT — ink sign-up form column

Trust / proof strip (full-bleed cream)

FAQ / footer (dark ink)

Responsive reflow

Special Notes

Built on the Tailwind CDN with a custom theme.extend: colors cream #faf6ef, creamlo #f3ecdf, ink #1c1815, inksoft #2a241f, burg #7b2d3b, burgdk #5e202b, burglt #a9485a; fontFamily.serif = ['Fraunces','Georgia','serif'] and fontFamily.sans = ['Inter','system-ui','sans-serif']. Google Fonts: Fraunces (ital, opsz 9..144, weights 300..700 roman + 300..600 italic) + Inter (weights 400;500;600). CSS keys: html scroll-behavior smooth; body font-family Inter, antialiased, optimizeLegibility; .display = letter-spacing -0.02em + line-height 0.95; .font-serif font-optical-sizing auto. .grain::before = content '', absolute inset-0, pointer-events none, opacity 0.05, mix-blend-mode overlay, background a tiled SVG feTurbulence fractalNoise data-URI (baseFrequency 0.85, numOctaves 2). .field = background #ffffff + 1px #d8cdbb border, transition border-color/box-shadow/background .18s; .field:focus-within = border-color #7b2d3b + box-shadow 0 0 0 3px rgba(123,45,59,0.12) + background #fffdfa; .field input background transparent, outline none; placeholder #a89a85; leading icons #9a8c77. .oauth:hover = border-color #b9ab95 + box-shadow 0 2px 14px rgba(28,24,21,0.06) + translate-y -1px. .cta:hover = translate-y -1px + box-shadow 0 12px 30px -8px rgba(123,45,59,0.45); .cta:active translate-y 0. .ulink = an underline-grow via background-image linear-gradient(currentColor,currentColor) + background-size 0% 1px -> 100% 1px on hover (background-position 0 100%). .rule = linear-gradient(90deg, transparent, rgba(250,246,239,0.32), transparent) hairline. .nav-blur = backdrop-filter saturate(140%) blur(10px). .meter-seg = height 4px + border-radius 99px. FAQ uses native <details>/<summary> with list-style none + ::-webkit-details-marker hidden and a .chev that rotates 180deg in details[open] (transition .25s). The RIGHT ink form pane carries a lg-only left edge-light (a before pseudo-element vertical gradient hairline from-transparent via-burglt/40 to-transparent). Icons via Iconify (Phosphor 'ph:*' set, logos:google-icon, mdi:github). Burgundy #7b2d3b is the single action/accent color (the CTA, the brand tile, links, the focus ring, the strength bars use burglt #a9485a); cream #faf6ef is the type-on-dark color; the form column is near-black ink #1c1815. The reusable prompt-library value is the EDITORIAL SPLIT sign-up: an oversized Fraunces serif brand panel on a textured burgundy ground (film grain + concentric arcs + a pull-quote testimonial) beside a near-black ink OAuth-first form column (white burgundy-focus-ring fields + a password-strength meter + a burgundy CTA), wrapped in a complete one-screen sign-up landing (sticky translucent nav + a full-bleed cream trust strip + a dark FAQ/footer accordion). Original prompt-library product for the placeholder brand 'Atelier'. Responsive: the split flips order and stacks below lg, nav center links hide below md, the 'Already with us?' label hides below sm, the display headline clamps, the trust strip and FAQ collapse to one column, no overflow at 390px.