Pattern library

Hero layouts

Working sketches for Root page openers, built from the same primitives as the section layouts. Use this page as the collection point while gathering references.

01 / CSS Grid + Frame

Default service opener

The reliable page opener for service, class and offer pages.

Slots: eyebrow, h1, intro, primary CTA, secondary action, supporting image

Studio Root

Small classes, proper attention.

Use this when the visitor needs to understand the offer quickly, then choose a clear next action without being pulled into a big brand moment.

02 / Cover + Stack

Brand statement hero

A high-level opener for the homepage or a campaign-style Root page.

Slots: brand line, large statement, support copy, one or two primary paths

Root Pilates

Move well. Eat well. Stay a while.

Best when the page needs to set the mood before it asks for a practical decision.

03 / CSS Grid + Frame

Editorial place hero

An image-led opener for cafe, about, story or place-based pages.

Slots: atmospheric image, h1, short story line, CTA, optional strapline

Cafe Root

Come for class. Stay for coffee.

Use this when the building, food, people or atmosphere need to do some of the explaining before the visitor reads the detail.

See the menu

Move well. Eat well. Stay a while.

04 / Wrapper + Stack

Compact utility hero

A restrained opener for practical pages where clarity matters more than ceremony.

Slots: eyebrow, h1, one-line intro, optional quick links

Workshops

Seasonal events, deeper practice and one-off gatherings.

Use this for timetable, contact, workshop listings or any page that should get out of the way quickly.

05 / CSS Grid

Full-bleed immersive hero

For the homepage, seasonal campaigns or any moment where the place needs to speak before the page does.

Slots: full-viewport image, minimal headline, single CTA, optional scroll prompt

Root is a place.

New Mill, HD9 7DU

Come in