contact.neobrutal-form-card · Form card

A contact pattern from Neo-Brutalism, 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.neobrutal-form-card". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Big title and a yellow details box on 1–5; the form sits in a white bordered card with the hard shadow on 7–12.
Slots
title, body, address, email, hours, contact
Grid areas
details 1-5 · form 7-12 (12-column grid, 1-based inclusive spans)
Notes
Fields have 3px borders and the radius token; the submit button is primary with the hard shadow.
Tokens
bg #FFF4DE · text #111111 · heading #000000 · accent #FF5FA2 · accent2 #00BCA1 · Archivo Black / Space Grotesk · radius 8px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Columns 1–5: h2 at step 5, a paragraph, then a yellow bordered details box holding the address (bold), email and hours (mono). Columns 7–12: a white bordered card with the hard shadow holding the form; fields have 3 px borders and the radius, labels bold above, the submit button primary with the hard shadow.

Start a conversation

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Rua da Boavista 72, 1200-066 Lisboa

hello@northfold.com

Studio open Mon–Thu, 9:30–18:00

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