contact.neumorphism-control-form · Control form

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

Rule
A raised form panel in 1–7 (label, h2, line, name / email / message in inset wells, accent submit); three raised contact panels stacked in 8–12: the email and the phone each beside a round key, then a rounded map well over the hours and address.
Slots
sectionLabel, title, body, contact, email, phone, map, hours, address
Tokens
bg #E3E8EF · text #28303B · heading #161C25 · accent #3F5BD9 · accent2 #794EBA · Plus Jakarta Sans / Plus Jakarta Sans · radius 22px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • A raised form panel in 1–7 (padding 40 × 32 px): label, h2, a muted line, then name, email and message fields pressed into the panel and an accent submit. Columns 8–12: three raised contact panels stacked with 24 px gaps: the email beside a round key with an accent dot, the phone beside a round key with a ring, and a rounded 16:9 map well over the hours and the address.

Contact

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.

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

hello@northfold.com

+351 21 340 5512

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

Rua da Boavista 72, 1200-066 Lisboa

Layout tree (as in design/layout.json)
{
  "pattern": "contact.neumorphism-control-form",
  "kind": "contact",
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "contact",
    "email",
    "phone",
    "map",
    "hours",
    "address"
  ],
  "tree": {
    "el": "grid",
    "gap": 8,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "bg": "surface",
        "gap": 5,
        "pad": [
          10,
          8
        ],
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "sectionLabel",
            "role": "label",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 18
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body",
            "maxCh": 46
          },
          {
            "el": "form",
            "slot": "contact",
            "fields": [
              "name",
              "email",
              "message"
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "8-12",
        "gap": 6,
        "children": [
          {
            "el": "box",
            "mobile": "keep",
            "bg": "surface",
            "dir": "row",
            "gap": 5,
            "pad": [
              6,
              6
            ],
            "align": "center",
            "children": [
              {
                "el": "box",
                "bg": "surface",
                "dir": "row",
                "pad": 2,
                "align": "center",
                "justify": "center",
                "children": [
                  {
                    "el": "shape",
                    "kind": "circle",
                    "size": "sm",
                    "fill": "accent"
                  }
                ]
              },
              {
                "el": "text",
                "slot": "email",
                "role": "h4",
                "step": 1,
                "weight": 600
              }
            ]
          },
          {
            "el": "box",
            "mobile": "keep",
            "bg": "surface",
            "dir": "row",
            "gap": 5,
            "pad": [
              6,
              6
            ],
            "align": "center",
            "children": [
              {
                "el": "box",
                "bg": "surface",
                "dir": "row",
                "pad": 2,
                "align": "center",
                "justify": "center",
                "children": [
                  {
                    "el": "shape",
                    "kind": "ring",
                    "size": "sm",
                    "fill": "accent"
                  }
                ]
              },
              {
                "el": "text",
                "slot": "phone",
                "role": "h4",
                "step": 1,
                "weight": 600
              }
            ]
          },
          {
            "el": "box",
            "bg": "surface",
            "gap": 4,
            "pad": [
              6,
              6
            ],
            "children": [
              {
                "el": "media",
                "slot": "map",
                "aspect": "16/9",
                "treatment": "map",
                "frame": "rounded"
              },
              {
                "el": "box",
                "gap": 1,
                "children": [
                  {
                    "el": "text",
                    "slot": "hours",
                    "role": "body",
                    "weight": 600
                  },
                  {
                    "el": "text",
                    "color": "textMuted",
                    "slot": "address",
                    "role": "small"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page