contact.bauhaus-form-block · Form block

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

Rule
A solid accent block on 1–6 carries title, address, email and phone in onAccent; the form fills 7–12 on the page background.
Slots
title, address, email, phone, contact
Grid areas
block 1-6 · form 7-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #0050CC · accent2 #AF0029 · Jost / Jost · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Columns 1–6: a solid accent block with the h2 (lowercase), address, email and phone in onAccent, top to bottom, and a yellow circle at the bottom. Columns 7–12: the form — name, email, message — with square fields, 2 px borders and a primary submit button. At phone width the block sits above the form.

Start a conversation

Rua da Boavista 72, 1200-066 Lisboa

hello@northfold.com

+351 21 340 5512

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