Contact

Wholegrain Digital wholegraindigital.com/contact/

Design type: Split-screen contact overlay
Page tags: contact form split screen modal serif file upload colour blocks agency
Site tags: agency bold colour serif
Vocabulary: 50/50 split screenfull-screen modal overlaypale mint form paneldark teal info panelserif display headingtwo-column form gridpill-shaped inputsdrag-and-drop file fieldcustom select with chevronunderlined yellow contact linkscircular close buttonrequired field hints
Prompt: Show prompt
Build a full-screen contact overlay for [Company name] as a 50/50 split layout that opens over the site from a "Contact" button. Palette: left panel pale mint/ice (#E4F0EF), right panel dark petrol teal (#05454F), deep indigo (#1E0560) for text, borders and the primary button, sunshine yellow (#FFE033) for links on the dark side, white text on teal. Type: a transitional serif for the two headlines (~44px, light weight); a clean grotesque sans for labels, inputs and body (14–16px). Small "(Required)" hints set at ~10px beside labels. Left panel (form), content max ~360px wide, vertically centred: - Serif heading "[Ask us anything!]". - Two-column grid: Name / Phone, Email / Budget (select with chevron). - Full-width file field: rounded rectangle with "Drop files here or" + small indigo pill "Select files". - Full-width textarea "[How can we help?]". - Full-width select "[How did you hear about us?]". - Centred indigo pill submit button "Send message". Inputs: white fill, 1px indigo border, fully rounded (pill) corners, ~36px tall, bold labels above. Right panel (info): - Circular outlined close (×) button top right. - Serif heading "[Tagline line one / line two]" in white. - Two small columns: company name + address + map pin "View in maps" link; "Start a conversation" with phone and email (small icons, yellow underlined links) and social icons. Behaviour: overlay fades/slides in, Esc and the close button dismiss it, focus is trapped inside. On mobile the panels stack, form first, info below, and the form grid collapses to one column.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of Contact on Wholegrain Digital