contact.brutalist-raw-form · Raw form

A contact pattern from Brutalist, drawn alone below with this design's tokens and sample copy. Used in this design on: contact page, section 1. Give the section root data-pattern="contact.brutalist-raw-form". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Two bordered cells: 1–6 holds the email at step 3 in mono plus phone and address; 7–12 holds a bare form with 2 px bordered inputs.
Slots
title, email, phone, address, contact
Grid areas
details 1-6 · form 7-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #012FD3 · accent2 #4980FE · Space Mono / Space Mono · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Two cells with collapsed 2 px borders. Cell 1 (1–6): uppercase h2, the email in mono at step 3 (the main call to action, underlined), phone and address as plain lines. Cell 2 (7–12): the form — name, email, message — with labels above inputs, 2 px borders, no radius, and a submit button that looks like a default HTML button in the accent colour. At phone width cells stack.

Start a conversation

hello@northfold.com

+351 21 340 5512

Rua da Boavista 72, 1200-066 Lisboa

Name
Your name
Email
you@example.com
Message
Tell us a little about your project…
Send message