Talk to Slate — Contact (reasons-split-navy)

Summary

A warm, premium dark split contact page for an AI design-tool brand (Slate), modeled on the Linear 'Contact sales' layout but reskinned to a midnight-navy canvas with a warm cream/amber palette. The screen is a single full-bleed two-column contact section: a LEFT 'reasons to reach out' rail (an amber 'We reply within a day' status pill, a giant cream display headline 'Let's build something.' with an amber period, an intro line, and a three-row routed-reasons list with icon tiles for Talk to sales / Get support / Press & partners, plus a mailto fallback line) sitting beside a RIGHT elevated form card ('Tell us how we can help' with a paper-plane glyph, a Full name + Work email row, a What's-this-about + Team-size select row, a How-can-we-help textarea, an opt-in checkbox, and a chunky amber 'Send message' button), with a small encrypted-and-never-shared reassurance line under the card. A sticky blurred navy nav (an amber diamond logo tile + a 'Slate' wordmark, Library/Canvas/Pricing/Docs/Contact links, a Log in link and a cream 'Start free' pill) tops the page; a thin hairline trust strip ('Trusted by design teams shipping fast' + four icon brand marks) and a full four-column dark footer close it. The reusable signature is the warm-dark split-contact system: a navy canvas with a cream text family and ONE amber accent, an Inter-only type ramp with a very tight tracking display headline, subtle dot-grain + radial-glow texture, hairline cream/10 borders, and dark inset fields that focus to an amber ring. The mood is calm, confident, premium and human, never a generic support form.

Style

A warm, premium DARK aesthetic on a deep midnight-navy canvas (#0b1f3a) with a cream text family (#f4ecdf at full strength, stepped down via opacity to cream/65, /60, /55, /40 for secondary text) and EXACTLY ONE accent: warm amber/gold (#f0b429). Register a custom Tailwind theme: navy { DEFAULT #0b1f3a, 900 #081730, 800 #0b1f3a, 700 #102a4d, 600 #16365f }, cream { DEFAULT #f4ecdf, 200 #efe6d6, 400 #d8cdb8 }, amber { DEFAULT #f0b429, 600 #d99a16 }, plus letterSpacing.tightest = -0.045em. The whole page reads as one quiet, confident dark surface: hairline borders everywhere are cream at low opacity (border-cream/10), cards are a slightly darker navy-900/70 lifted off the page with a big soft ambient shadow (shadow-[0_30px_80px_-30px_rgba(0,0,0,0.7)]), and the single amber accent is used sparingly but consistently (the status-pill dot + text, the headline period, the icon-tile glyphs, the form glyph chip, the focus ring, the primary button, the mailto link). Texture is subtle and physical, never loud: a .grain dot pattern (radial-gradient(rgba(244,236,223,0.025) 1px, transparent 1px) at 4px 4px) overlays the main, a .glow radial highlight (radial-gradient(60% 80% at 78% 12%, rgba(240,180,41,0.10), transparent 60%)) warms the top-right behind the form card, and a .hairline gradient rule (linear-gradient(90deg, transparent, rgba(244,236,223,0.14), transparent)) draws the 1px trust divider. Form fields are dark inset: a .field on bg #081730 with a 1px cream/12 border and cream text, placeholders in cream/.6, that on :focus drop the outline, switch border to amber, lift the fill to #0b1f3a and punch out a soft amber ring (box-shadow 0 0 0 3px rgba(240,180,41,0.18)); selects are appearance-none with a custom caret glyph. Type is Inter only (Google Fonts, weights 300-900): the display headline is font-extrabold, tracking-tightest (-0.045em), very tight leading (leading-[0.98]) at a large clamp (text-[44px] -> sm:text-[58px] -> lg:text-[64px]); section/card titles are font-bold tracking-tight; the status pill and section eyebrows are uppercase with wide tracking ([0.16em] / [0.18em]); body and labels are font-medium/regular in stepped cream opacities. ::selection is amber on navy. Corners are soft and modern (rounded-xl on fields/tiles, rounded-2xl on the form card, rounded-full on pills/buttons). Mood: calm, premium, warm-dark, confident, human, never harsh, never a generic blue SaaS form.

Layout & Structure

A full-bleed warm-dark contact page, centered inside a max-w-[1180px] mx-auto px-6 (lg:px-8) container, stacked top to bottom as: (1) a sticky blurred navy nav, (2) THE CONTACT section as a two-column split (a LEFT 'reasons to reach out' rail beside a RIGHT elevated form card, on a grain+glow textured main), (3) a thin hairline trust strip, and (4) a full four-column dark footer. The defining structural move is the asymmetric split contact grid: grid-cols-1 -> lg:grid-cols-[0.92fr_1.08fr] (the form column slightly wider) with a generous lg:gap-x-20 / xl:gap-x-28, where the LEFT column carries the brand voice + reason routing and the RIGHT column carries the actual intake card. The left rail's reasons are a vertical list of icon-tile rows separated by hairline cream/10 top borders; the right card is a single lifted panel with a two-up name/email row, a two-up select row, a full-width textarea, a checkbox and a primary button. Everything reflows to a single column below lg (the form card drops below the reasons rail) with no horizontal overflow at 390px; the nav center links hide below md, the trust strip and footer collapse their columns responsively.

Sticky blurred navy nav

Contact section shell + status pill

Left rail: headline, intro, reasons list, mailto

Right column: the elevated form card

Hairline trust strip

Dark four-column footer

Special Notes

Keep the warm-dark split-contact system intact, it is the whole point: a deep midnight-navy canvas (#0b1f3a) with a cream text family (#f4ecdf, stepped down with OPACITY, never new hues: cream/70 labels, cream/65 nav+footer body, cream/60 reason copy, cream/55 intro, cream/40 eyebrows, cream/10-/12 hairline borders) and EXACTLY ONE accent, warm amber/gold (#f0b429). Register the full Tailwind theme (navy DEFAULT #0b1f3a / 900 #081730 / 800 #0b1f3a / 700 #102a4d / 600 #16365f; cream DEFAULT #f4ecdf / 200 #efe6d6 / 400 #d8cdb8; amber DEFAULT #f0b429 / 600 #d99a16; letterSpacing.tightest -0.045em) and use Inter only (300-900). Spend the amber sparingly but consistently: the status-pill dot+text, the headline period, the reason-tile + form glyphs, the icon-tile hover border (amber/40), the mailto link, the .field focus border + amber ring (rgba(240,180,41,0.18)) and the primary 'Send message' button (on its amber glow shadow). Do NOT add a second accent hue or any loud gradient; the only gradients are the subtle .grain dot overlay, the warm top-right .glow radial behind the form, and the .hairline trust rule. Keep the dark inset .field treatment (bg #081730, 1px cream/12 border, cream text, cream/.6 placeholders) with the amber focus signal (outline:none, border amber, fill lifts to #0b1f3a, box-shadow 0 0 0 3px rgba(240,180,41,0.18)) and appearance-none selects with a custom ph:caret-up-down-bold caret. The headline must stay tight: font-extrabold, tracking-tightest (-0.045em), leading-[0.98], max-w-[8ch], text-[44px]->sm:text-[58px]->lg:text-[64px], with the trailing period the lone amber color hit. The structure is a single full-bleed contact page inside a max-w-[1180px] container: a sticky bg-navy/85 backdrop-blur-xl nav (an amber ph:diamonds-four-fill logo tile + a 'Slate' wordmark, Library/Canvas/Pricing/Docs/Contact links with the current Contact at full cream, a Log in link, a cream 'Start free' pill), THE CONTACT section (a grain+glow main holding the amber 'We reply within a day' status pill and a grid-cols-1 -> lg:grid-cols-[0.92fr_1.08fr] split: a LEFT rail with the headline + intro + a three-row routed-reasons list of bg-navy-700 amber icon tiles, hairline-separated, each with a trailing ph:arrow-up-right-bold + a description, plus a mailto:hey@slate.design line; and a RIGHT rounded-2xl bg-navy-900/70 FORM CARD with a header + paper-plane glyph chip, a Full name + Work email row, a What's-this-about + Team-size select row, a How-can-we-help textarea, an opt-in checkbox and an amber 'Send message' button, with an 'Encrypted & never shared' reassurance line below), a .hairline TRUST STRIP ('Trusted by design teams shipping fast' + four Iconify brand marks), and a bg-navy-900 four-column FOOTER (a Slate brand block + Product/Company/Connect link columns + a bottom bar). Everything must reflow cleanly: the split grid stacks to one column below lg (the form card drops below the reasons rail), the name/email and select rows collapse from sm:grid-cols-2 to single-column below sm, the nav center links hide below md, the trust strip goes flex-col below sm, the footer columns collapse (grid-cols-2 -> sm:grid-cols-3 -> lg four columns) and there is no horizontal overflow at 390px. Use Iconify Phosphor icons (ph:diamonds-four-fill, ph:handshake-bold, ph:lifebuoy-bold, ph:megaphone-bold, ph:arrow-up-right-bold, ph:paper-plane-tilt-fill, ph:caret-up-down-bold, ph:arrow-right-bold, ph:lock-simple-bold, ph:cube-bold, ph:planet-bold, ph:lightning-bold, ph:leaf-bold). Copy is warm, confident and human with zero em-dashes ('Let's build something.', 'Pick the door that fits.', 'no ticket maze', 'We'll sort it together.', 'We hate cold outreach too.'). Set ::selection to amber #f0b429 background on navy #0b1f3a text.