hero.neumorphism-dial-console · Dial console

A hero pattern from Neumorphism, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.neumorphism-dial-console". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
One wide raised console: label, display headline, lead and an inset email field with an accent submit in 1–7; a raised product well in 8–12. Under it, four raised gauge keys with a dial ring, a reading and a caption.
Slots
eyebrow, headline, subhead, signup, heroImage, stats[4..4]
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)
Section
vertical padding step 8

Pattern notes

  • One wide raised console panel (padding 40 px). Inside, columns 1–7 hold the label, the display headline at step 7 (≤15 ch), the lead and an inline email field pressed into the panel with an accent submit; columns 8–12 hold a raised well with a 4:5 product shot, rounded. Under the console, four raised gauge keys in a row: a small accent dial ring beside a reading at step 4 and a muted caption (two per row on phones).

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

you@example.com
Subscribe

140+

launches shipped

12

years independent

9 of 10

clients return

31%

average lift in demo requests