Style guide

Vital 360

A wellness studio on two warm papers that alternate band by band, with one deep green that only ever marks an action. Erode carries the display lines and the numbers worth bragging about, DM Sans everything read as information.

Variables: --v3-*
Defined in: app/demo/vital-360/vital.css
Values: Read live from that file, so this page always matches it.

Colour
Typography
Corners
Spacing
Motion
Breakpoints
Components

Colour

The whole palette, grouped by the job each colour does. Components only paint with these.

Paper

--v3-base

The page, and every other band

--v3-band

The second paper, one step darker

--v3-card

A card: whichever paper its band is not

Ink

--v3-ink

Headings, titles and icons

--v3-ink-soft

Body copy, labels and chips

--v3-ink-faint

Units, captions and placeholders

Brand

--v3-brand

Buttons and the top banner, nothing else

--v3-brand-hover

A button under the pointer

--v3-on-brand

Type on the green

--v3-brand-wash

The banner's outline button under the pointer

Lines and washes

--v3-line

Hairlines on cream: the footer rule, the FAQ rows

--v3-band-line

The same hairline on the band

--v3-wash

A ghost control under the pointer, the current menu

--v3-wash-menu

A dropdown row under the pointer

--v3-shadow

The dropdown's shadow

On photographs

--v3-on-photo

Type and the button laid over a photograph

--v3-scrim

The colour every scrim is made of

--v3-scrim-bleed

The home's full-bleed band

--v3-scrim-bleed-sm

The same band on a phone, stronger and higher

--v3-scrim-card

The program cards on Landing 2

--v3-scrim-portrait

The instructor portraits

Typography

The ramp, largest first. Each class sets its own face, size, leading, weight and tracking, and the display sizes step down at the breakpoints.

Display 1.v3-d1

Fuel your body. Feed your goals.

Display 2.v3-d2

Real Stories, Real Transformations

Display 3.v3-d3

A Journey to Wellness

Figure.v3-figure

$149/month

Title 1.v3-t1

How to Stay Motivated on Your Fitness Journey

Title 2.v3-t2

Personal Training

Lead.v3-lead

Transform your health with an approach tailored to you.

Body.v3-body

Stay connected for the latest updates and wellness tips.

Small.v3-small

Monday: 9-18

Corners

Every radius in the template. Nothing rounds on a value of its own.

--v3-r

Controls, chips and photographs

--v3-r-card

A card, which holds 6px things

--v3-r-lg

The panel that holds a card

Spacing

The page rhythm. These step down at the breakpoints, so the readings follow the window. Each bar is drawn at its real length.

--v3-section

Top and bottom of a band

--v3-gap

Between blocks in a band

--v3-gap-md

Between a heading and what it heads

--v3-gutter

Page edge

--v3-measure-lead

The paragraph under a display line

--v3-measure-title

A display line

--v3-measure-head

A heading block with its action

--v3-container

The widest the column gets, gutter included

Motion

How long things take and how they ease. Hover a row to run it: durations on the house ease, easings on one duration long enough to show the curve.

Durations

--v3-dur-fast

A menu closing

--v3-dur

Hover colour, fields, a menu opening

--v3-dur-slow

The mobile sheet and the burger

--v3-dur-tilt

A tilted plate settling

--v3-dur-zoom

A photograph under the pointer

--v3-dur-marquee

One lap of the Instagram strip

Easings

--v3-ease

Everything that moves

--v3-ease-swap

The burger's two glyphs trading places

Breakpoints

Where the layout changes. A media query cannot read a variable, so these are the one set of numbers written straight into the stylesheet and the components.

max-width: 991px

Tablet: the navbar folds into the sheet, split bands stack, the display sizes step down.

max-width: 767px

Phone: the gutter tightens, grids go to one column, buttons go full width.

Components

The template's building blocks, live. Hover them: this is how they behave on the pages.

ButtonsVitalButton. Brand for every action, ghost for the navbar's own links. The green is the only button colour.

Book a session Services

Button on the bannerThe outline variant borrows the green band's own foreground, so it only ever sits on the brand.

Book a seat

ChipsChip. An outlined category tag, never filled, so it never competes with a button.

Personal TrainingNutritionPopular

Contact formContactForm. Filled fields under their labels, never outlined: on paper an outline reads as disabled. Sending swaps in the confirmation.

Account formAuthForm, which draws log in, sign up, reset and update from a list of fields. Checkboxes tick in the brand green.

Cards on both papersA card takes whichever paper its band is not. Put .v3-on-band on a section and every card inside flips on its own.

On cream

The card is the tan paper.

On the band

The same card, now cream.

PanelVitalQuestionsPanel. The top rung of the concentric ladder: the panel takes the 12px corner, the photograph inside keeps its 6px.

Got Questions

We’re here to help! Whether you’re curious about our services, need guidance on your wellness journey, or have any other inquiries, don’t hesitate to reach out. Your path to a healthier, happier you starts with a conversation.

Service cardsVitalServiceCards. The photograph zooms and the title underlines under the pointer; the price is in the serif.

Personal Training

Our certified trainers will create a personalized workout plan that adapts to your progress and keeps you motivated.

$149/month

Nutritional Coaching

Our nutritionists work with you to establish healthy eating habits that align with your goals and lifestyle.

$139/month

Mindfulness & Wellness Coaching

Our experts help you cultivate resilience and find balance in everyday life.

$129/month

Blog cardsBlogCard, for Blog 2 and the posts under an article. The chip names the category.

Personal Training

The Power of Personalized Training: Why It Works

Discover how tailored workouts can accelerate your fitness results and keep you motivated.

Nutrition

Top Nutritional Tips for Boosting Energy Naturally

Fuel your body with the right nutrients to feel energized and vibrant all day long.

PhotographsPlate: a 6px crop, filled and covered, shaped by the caller. Add .v3-tilt and an angle to drop one on the page like a print.

Two women in tree pose at the edge of a wood

Two women in a bridge and shoulderstand pair in a meadow

ProofStars over a hero or a review, the crowd of faces, and the placeholder logo row.

4,5/5 (Over 3,000 reviews)

Over 500 already joined us

LogoipsumLogoipsumLogoipsumLogoipsum

Links.v3-link, underlined from the font. Only links inside copy take it.

Already have an account? Log in