Skip to content

Style guide

The colours, type, shapes and pictures of Aeroium Deck in one place.

Brand

Aeroium Deck
On a light page
Aeroium Deck
On a dark page

Fitness & Wellness - Energetic and bold: strong reds, oranges and darks, movement and results.

Palette Bright Purple · Soft Modern style · pictures: Line waves with fitness & wellness subjects · fonts Fraunces and Albert Sans

Colours

Every colour is a token in assets/css/theme.css (--wt-primary ...). The contrast of the text colours is shown against the page; WCAG AA needs 4.5:1 for text.

Light mode

Primary
#bf13e9
text on it 4.7:1
Secondary
#fa2eae
 
Accent
#1ded5c
text on it 11.3:1
Page
#fdf7ff
 
Surface
#ffffff
 
Surface 2
#fbeffe
 
Text
#1e2430
14.8:1 on the page
Muted text
#4f5867
6.8:1 on the page
Border
#e3daeb
 
Links and brand text
#940fb4
6.7:1 on the page

Dark mode

Primary
#bf13e9
text on it 4.7:1
Secondary
#fa2eae
 
Accent
#1ded5c
text on it 11.3:1
Page
#140219
 
Surface
#24042c
 
Surface 2
#2f1137
 
Text
#e5e9f0
16.4:1 on the page
Muted text
#9aa4b5
7.9:1 on the page
Border
#43274a
 
Links and brand text
#e5a2f7
10.3:1 on the page

Type

Fraunces

Headings

Albert Sans

Text, buttons and forms (Google Fonts)

Stronger every single day

Built around your training week

HIIT twice a week: how hard is hard enough?

More than sixty classes a week, from 6 am spin to evening yoga, each capped at twenty so your coach knows your name.

Online coaching keeps you on track when you travel. Small group classes mean your coach knows your name and your form. We listen first, then build a plan around what you actually need. Track your progress in the app and see how far you have come.

More than sixty classes a week, from sunrise yoga to late-night spin.

Corners and depth

Corners
0.875rem
Large corners
1.75rem
Pills
50rem
Shadow --wt-shadow
Large shadow --wt-shadow-lg

Components

NewPaidPendingOverdue12
Thousands of members already trust us, and we work hard to keep it that way.

Pictures

Line waves in the template colours, with fitness & wellness subjects. Every product picture shows its product. Replace them with your own photos of the same size (see PHOTOS.md for the photos of the live demo).

Fitness & Wellness picture 1
Fitness & Wellness picture 2
Fitness & Wellness picture 3
Monthly pass
Monthly pass
10-class pack
10-class pack
Yoga retreat
Yoga retreat
Nutrition guide
Nutrition guide

Design files

  • design-tokens/tokens.json - every token in the W3C Design Tokens format: in Figma, install the Tokens Studio plugin and load the file; Style Dictionary turns it into code for other platforms.
  • design-tokens/style-guide.svg - this page as a board: drag it into Figma, Sketch or Illustrator and every swatch, text and shape stays editable.
  • design-tokens/tokens.css - the same values as CSS variables for other projects in the brand.