contact.seventies-hello-sunshine · Hello sunshine

A contact pattern from Seventies Psychedelic, 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.seventies-hello-sunshine". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
On 1–5 a step-6 title, a lead line and the email at step 2 in the link colour, with a setting half-sun in the accent at the foot of the column; on 6–12 the form on a rounded surface panel padded 48 px.
Slots
title, body, email, contact
Grid areas
sun 1-5 · form 6-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F7E8C6 · text #3A1D0C · heading #4A1F08 · accent #D2561E · accent2 #BF8400 · Shrikhand / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Two columns of the same height. On 1–5: the fat title (step 6, max 12 ch), a lead line and the email at step 2 in orange, with a big orange half-sun setting at the foot of the column (hidden at phone width). On 6–12: the form (name, email, message) on a rounded `surface` panel padded 48 px, capsule fields and a capsule submit button.

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.

hello@northfold.com

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