hero.scandinavian-soft-room-panel · Room panel

A hero pattern from Scandinavian Soft, 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.scandinavian-soft-room-panel". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A pale rounded panel fills columns 1–7 and holds the whole message, top to bottom; a rounded 4:5 photograph stands in 8–12 with a small dot-led caption.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, caption
Grid areas
panel 1-7 · photo 8-12 (12-column grid, 1-based inclusive spans)
Notes
The panel uses the surface colour and the style radius; its content is spaced between top (eyebrow) and bottom (subhead + actions).
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #69A382 · accent2 #5DA29C · Nunito / Nunito Sans · radius 16px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • A rounded panel in the surface colour fills columns 1–7 at full hero height (≥80 vh), padded 80 px by 64 px; inside, the eyebrow sits at the top, the step-6 headline (weight 400, ≤14 ch) in the middle and the lead plus a primary button and an arrow link at the bottom (space between). Columns 8–12 hold a rounded 4:5 photograph with a caption underneath that starts with a small accent2 dot.

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.

Start a projectRead case studies

Corvid Robotics — identity