How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Frame: content is min(1344px, 100% - 2 × gutter) wide (gutter 48px, 16px on phones), 184px from the top, 160px padding below.
- Header: the headline (display font, 88px, line-height 0.86, uppercase, -2.2px tracking) on the left and a 386px lede on the right, aligned to the bottom with 10px lifted off the baseline. A hairline runs under the header with 48px of space above it.
- Headline blur-in: each letter starts at opacity 0 and 10px blur and sharpens over 0.8s, 25ms apart, as soon as the page loads.
- Columns: 64px below the hairline, a 656px form and the channels column, 115px apart.
- Topics: a radio group styled as uppercase words in the muted color, 24px apart (8px between lines). Hover or selected turns them ink, and the selected one gets a 1px accent underline. Keyboard focus shows a 2px accent outline.
- Fields: a two column grid (28px rows, 32px columns). Each field is a 12px uppercase label with 0.1em tracking, 10px above an input with only a bottom border. Focus or an error turns the border the accent color. - An order adds "Order number" with a hint, and it must look like AL-10427. - A piece or A one-of-one adds a full-width "The piece" field. - "Message" is always full width, at least 120px tall, and needs 10 or more characters. - Errors appear under the field in 12px accent text.
- Send: a 241 × 43 accent button with the label and a 32px arrow 12px apart; hover darkens it. While sending it reads "Sending…" at 60% opacity. A 13px privacy line sits 32px to its right.
- Channels: rows with a 24px icon and 24px gap. Each row has a display-font uppercase label and a 14px light line under it, 24px padding and a hairline between rows. Hover turns the row the accent color.
- Sent state: "Got it. Thank you." blurs in with a lede naming the email address, a "Back to the collection" button and an underlined "Write another" that brings the form back.
- Under 1200px: the header stacks (16px gap), everything goes to one column with 56px between the form and channels, and the field grid is one column. Top padding 120px, bottom 80px.
- Under 768px: 100px top, a 30px headline (line-height 1.02, -0.6px tracking), 13px topics, the button full width up to 360px and 44px tall with the privacy line under it.
- Fallbacks: reduced motion and no JavaScript show the headline sharp straight away.