Pattern library

Section layouts

Working sketches for Root sections, built with the project primitives: Stack, Cluster, Grid, Sidebar, Switcher, Reel, Cover, Frame and Wrapper.

01 / Sidebar

Two column essential points

02 / Grid

Four quick pillars

Move

Short, scannable copy for a point that should feel equal to the others.

Recover

Short, scannable copy for a point that should feel equal to the others.

Eat

Short, scannable copy for a point that should feel equal to the others.

Stay

Short, scannable copy for a point that should feel equal to the others.

03 / Grid + Stack

Grid with additional row

Cafe Root

Come for class. Stay for coffee.

A strong feature block beside a quieter panel. Good for cafe/studio crossover sections.

Menu
Hire
Kiosk

04 / Reel

Small section slider

Class one

Let the next item trail off the edge so the scroll affordance is visible.

Class two

Let the next item trail off the edge so the scroll affordance is visible.

Class three

Let the next item trail off the edge so the scroll affordance is visible.

Class four

Let the next item trail off the edge so the scroll affordance is visible.

Class five

Let the next item trail off the edge so the scroll affordance is visible.

05 / Sidebar + Frame

Image with numbered steps

06 / Cover + Stack

Centered manifesto

Manifesto

Move well. Eat well. Stay a while.

Use sparingly. This is for brand rhythm between more practical sections.

07 / Sidebar + Grid

Grid beside copy lead

08 / Switcher

Split decision

Studio

Book a class

For people arriving with movement intent.

Timetable

Cafe

See the menu

For people arriving hungry, curious, or passing through New Mill.

Menu

09 / Grid + Frame

Editorial offset

Story block

Offset the copy to create movement.

A deliberately less regular composition for journal excerpts, special events, or sections that need energy without relying on decoration.

10 / Cluster

Data strip

8 per class

HD9 7DU

Cafe on site

New Mill

11 / Repel-style cluster

Call-to-action band

Next action

Give every page somewhere useful to go.

12 / Sidebar + Grid

Image grid with copy

14 / CSS Grid

Asymmetric image grid

Short spine

Spinal articulation and sequential movement.

Footwork

The foundation of every reformer session.

Long stretch

Full-body control and stability from the carriage.

Elephant

Hamstrings, calves and spinal decompression.

13 / Sidebar

One image, four text

15 / CSS Grid

Satellite image grid

The method

Movement, breath and nourishment.

No fuss. No ceremony. Simply arrive and begin.

Short spine

Spinal articulation and sequential movement.

Footwork

The foundation of every reformer session.

Long stretch

Full-body control and stability from the carriage.

Elephant

Hamstrings, calves and spinal decompression.

Hundred

Breath, stability and core engagement from day one.

16 / FeatureBlock

Homepage feature bubble