Contact & Where to Find Us — Atlas Forms (map-location teal)

Summary

A clean, modern LIGHT contact page for a forms-tool brand (AtlasForms), built around one signature pairing: a large cartographic 'Where to find us' MAP panel sitting beside a compact DARK form rail. The page stacks as a sticky blurred light nav, a full-bleed intro band (a teal 'Contact' eyebrow pill, a 'Talk to a human, or find us on the map.' display headline and a reassuring lead line), then THE CONTACT card: a single rounded-2xl bordered white card split lg:grid-cols-[1.65fr_1fr] into a LEFT map/location panel (a faux-cartographic .map-grid canvas of soft teal land blobs + rounded white 'roads', a 'Where to find us' label pill, a teal map PIN with a white callout card showing Lisbon HQ + email + phone, and a 2/4-up city strip Lisbon / Austin / Amsterdam / Singapore with a teal active underline) and a RIGHT dark ink-950 FORM RAIL (a 'Connect' header row with three rounded social icon tiles, a 'Get in contact' form of Email / Subject / Message dark inset fields with leading icons and a teal 'Send message' button, an 'We reply within one business day' reassurance line, and an 'Office hours' block with Mon-Fri / Sat-Sun rows plus a contact card of email / phone / address). A light full-bleed footer closes it. The reusable signature is the MAP-BESIDE-DARK-FORM contact system: a calm paper/ink/teal palette, an asymmetric map-panel-beside-dark-rail card, a CSS-only cartographic map texture, and dark inset fields with a teal focus ring. Inter throughout, Lucide icons, mood calm/trustworthy/local/human.

Style

A calm, modern LIGHT aesthetic on a cool paper canvas (#f8fafc) with a deep slate ink text ramp and ONE accent: teal (#0f766e primary, with #0d9488 / #14b8a6 / #115e59 steps and #f0fdfa / #ccfbf1 tints). Register a custom Tailwind theme: paper #f8fafc; teal { 700 #0f766e, 800 #115e59, 600 #0d9488, 500 #14b8a6, 50 #f0fdfa, 100 #ccfbf1 }; ink { 950 #0b1220, 900 #0f172a, 800 #1e293b, 700 #334155, 600 #475569, 500 #64748b, 400 #94a3b8, 300 #cbd5e1, 200 #e2e8f0, 100 #f1f5f9 }. The whole page reads as one quiet light surface with hairline ink-200 borders, white cards and a single teal accent used consistently (the eyebrow pill, the logo tile, the map land/road/pin, the active city underline, the form focus ring, the primary button, the inline contact-card icons). Define three custom box-shadows: shadow-card = '0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12)' (the main card + nav button + label pill), shadow-pop = '0 12px 40px -8px rgba(15,23,42,.22)' (the floating map pin + callout) and shadow-rail = '0 24px 60px -24px rgba(15,94,89,.45)' (the teal submit button glow). The signature texture is a CSS-ONLY cartographic map: a .map-grid (background-color #e6f1ef + four layered linear-gradient grid lines, two fine at rgba(15,118,110,.06) sized 28px 28px and two heavier at rgba(15,118,110,.10) sized 140px 140px) overlaid with absolutely-positioned .blob land masses (organic border-radius like 42% 58% 55% 45% / 48% 50% 50% 52%, teal at .07-.10 alpha) and rounded white .road / .road-soft strips (background #fff opacity .9 and rgba(255,255,255,.55), border-radius 999px, rotated a few degrees). Form fields are dark inset: a .field on a near-black rail with a 1px white/10 border and a white/[.04] fill, placeholder ink-400 (#94a3b8), that on :focus drops outline, turns the border teal-500 (#14b8a6), deepens the fill to ink-950 (#0b1220) and punches a teal ring (box-shadow 0 0 0 4px rgba(20,184,166,.18)). The submit button .submit-btn lifts on hover (translateY(-1px) + a teal glow 0 10px 24px -8px rgba(20,184,166,.6)). Nav links carry an animated teal underline (.nav-link::after grows from width 0 to 100% on hover, height 2px, bg #0f766e). Type is Inter only (Google Fonts, weights 400-900): the display headline is font-extrabold, tracking-tight, leading-[1.05] at text-4xl -> sm:text-5xl; eyebrows/labels use a .tracky uppercase wide letter-spacing of .14em; body and labels are font-medium/semibold in stepped ink opacities; the submit button and city names are font-bold. Corners are soft and modern (rounded-lg on fields/buttons/tiles, rounded-xl on the callout + inline contact card, rounded-2xl on the main card, rounded-full on the eyebrow + label pills). Mood: calm, trustworthy, modern, local and human, never a cold generic SaaS form.

Layout & Structure

A full-bleed light contact page, centered inside a max-w-7xl mx-auto px-6 (lg:px-8) container, stacked top to bottom as: (1) a sticky blurred light nav, (2) a full-bleed INTRO band (an eyebrow pill + display headline + lead), (3) THE CONTACT section, a single rounded-2xl bordered white card, and (4) a light full-bleed footer. The defining structural move is THE CONTACT CARD's asymmetric split: a grid-cols-1 -> lg:grid-cols-[1.65fr_1fr] card (overflow-hidden rounded-2xl border-ink-200 bg-white shadow-card) pairing a LEFT map/location panel (much wider) with a RIGHT dark form rail (narrower). The LEFT panel is itself stacked: a tall .map-grid cartographic canvas (h-[360px] -> sm:h-[440px] -> lg:min-h-[560px] lg:flex-1) carrying floating overlays (a label pill top-left, a teal pin + white callout near center-left) above a 2/4-up city strip footer (grid-cols-2 sm:grid-cols-4, divide-x, the first city with a teal top underline). The RIGHT rail (bg-ink-950 p-7 sm:p-9) is stacked: a 'Connect' + social-tiles header row, the 'Get in contact' form (Email / Subject / Message + button + reassurance), and an 'Office hours' block (two day rows + an inline contact card). Everything reflows to a single column below lg (the form rail drops below the map panel, the LEFT panel switches from border-r to border-b); the nav center links hide below md, the 'Sign in' link hides below sm, the city strip goes 2-up below sm, the intro <br> hides below sm, the footer goes flex-col below sm; no horizontal overflow at 390px.

Sticky blurred light nav

Intro band

Contact card shell + split

Left panel: CSS cartographic map canvas + pin + callout + label

Left panel: city strip

Right rail: connect header + dark form

Right rail: office hours + inline contact card

Light full-bleed footer

Special Notes

Keep the MAP-BESIDE-DARK-FORM contact system intact, it is the whole point: a calm LIGHT paper canvas (#f8fafc) + a slate ink text ramp + EXACTLY ONE accent, teal (#0f766e primary, with #0d9488 / #14b8a6 / #115e59 steps and #f0fdfa / #ccfbf1 tints), paired as a single rounded-2xl bordered white card split lg:grid-cols-[1.65fr_1fr] into a WIDE LEFT cartographic map/location panel and a NARROW RIGHT dark ink-950 form rail. Register the full Tailwind theme (paper #f8fafc; teal { 700 #0f766e, 800 #115e59, 600 #0d9488, 500 #14b8a6, 50 #f0fdfa, 100 #ccfbf1 }; ink { 950 #0b1220, 900 #0f172a, 800 #1e293b, 700 #334155, 600 #475569, 500 #64748b, 400 #94a3b8, 300 #cbd5e1, 200 #e2e8f0, 100 #f1f5f9 }) and the three box-shadows shadow-card '0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12)', shadow-pop '0 12px 40px -8px rgba(15,23,42,.22)', shadow-rail '0 24px 60px -24px rgba(15,94,89,.45)'. Use Inter only (400-900) and Lucide (iconify) icons (lucide:map-pinned, lucide:arrow-right, lucide:message-square-dot, lucide:locate-fixed, lucide:mail, lucide:phone, lucide:twitter, lucide:github, lucide:linkedin, lucide:tag, lucide:send-horizontal, lucide:shield-check, lucide:clock, lucide:moon, lucide:map-pin). Build the MAP entirely in CSS, no real map tiles or brand imagery: a .map-grid (background-color #e6f1ef + four layered linear-gradient grid lines, two fine rgba(15,118,110,.06) sized 28px 28px and two heavier rgba(15,118,110,.10) sized 140px 140px) overlaid with absolutely-positioned organic .blob land masses (border-radius like 42% 58% 55% 45% / 48% 50% 50% 52%, teal at .07-.10 alpha) and rounded white .road / .road-soft strips (background #fff opacity .9 and rgba(255,255,255,.55), border-radius 999px, rotated a few degrees), plus a floating teal PIN (a white shadow-pop ring-1 circle holding a teal-700 dot ring-4 ring-teal-100) wired to a white callout card (a 'Lisbon HQ' header, a teal mailto row, a phone row, with a rotate-45 arrow nub), a top-left 'Where to find us' label pill, and a city strip (Lisbon active with a teal top underline / Austin / Amsterdam / Singapore). Keep the dark form rail (bg-ink-950) with dark inset .field controls (1px white/10 border, white/[.04] fill, ink-400 placeholders, leading icons) and the teal focus signal (outline:none, border teal-500 #14b8a6, fill deepens to ink-950 #0b1220, box-shadow 0 0 0 4px rgba(20,184,166,.18)), and the teal-700 .submit-btn with its shadow-rail glow + hover lift. Spend the single teal accent sparingly but consistently: the 'Contact' eyebrow pill, the logo tile + 'Forms' wordmark word, the map land/roads/pin, the active-city underline, the nav-link underline, the form focus ring, the 'Send message' button, the 'reply within a day' shield and the inline-contact-card icons. Do NOT add a second accent hue or any loud gradient; the only 'gradients' are the CSS map-grid lines and the organic land blobs. Eyebrows and small labels are .tracky (uppercase, letter-spacing .14em); the headline is font-extrabold tracking-tight leading-[1.05] at text-4xl -> sm:text-5xl ('Talk to a human, or find us on the map.'); the wordmark is 'Atlas' in ink-900 + 'Forms' in teal-700; nav links get an animated teal underline on hover. The structure is a single full-bleed contact page inside a max-w-7xl container: a sticky bg-paper/85 backdrop-blur-md nav, a full-bleed intro band (the 'Contact' eyebrow pill + the headline + a lead line), THE CONTACT CARD (the map panel beside the dark rail), and a light bg-white footer (a brand line + Privacy / Status / Docs links). Everything must reflow cleanly: the card stacks to one column below lg (the form rail drops below the map panel, the LEFT panel divider flips lg:border-r -> border-b), the city strip collapses sm:grid-cols-4 -> grid-cols-2 below sm, the nav center links hide below md, the 'Sign in' link hides below sm, the intro <br> hides below sm, the footer goes flex-col below sm, and there is no horizontal overflow at 390px. Copy is warm, human and local with zero em-dashes ('Talk to a human, or find us on the map.', 'a real person replies', 'we'll point you to the door', 'Drop the details and we'll route you to the right person.', 'We reply within one business day.'). The map canvas must never load a real map provider, tile or logo, it is a calm decorative cartographic illustration drawn in CSS only.