STYLE GUIDE
Style Guide
The colours, type and classes that make up Lumivie.
Colours
Each swatch uses its utility class, which is linked to a colour variable.
Brand/Green
#1d2e24 · .background-color-green
Brand/Cream
#f0eada · .background-color-cream
Neutral/Off White
#efece7 · .background-color-off-white
Neutral/Stone
#ebe9e2 · .background-color-stone
Neutral/Taupe
#68645b · .background-color-taupe
Headings
Heading classes use the Responsive variables, so they scale on tablet and mobile.
.heading-style-h1 · Heading Size/H1 · 5.375rem
Care with a light hand
.heading-style-h2 · Heading Size/H2 · 4.5rem
Care with a light hand
.heading-style-h3 · Heading Size/H3 · 3.5rem
Care with a light hand
.heading-style-h4 · Heading Size/H4 · 1.75rem
Care with a light hand
.heading-style-h5 · Heading Size/H5 · 1.5rem
Care with a light hand
Text
Lead text · .legal_lead · 1.375rem
Body text · .legal_text · 1.125rem with a 160% line height. Nurse-led injectables, laser and skin health delivered with a clinical standard of care.
.text-color-taupe · Neutral/Taupe
.text-color-green · Brand/Green
Spacing
- Padding Global · 4rem (page side gutter)
- Padding Section Large · 6rem
- Padding Section Medium · 5rem
- Padding Section Small · 3.5rem
- Each value is smaller in the Tablet, Mobile Landscape and Mobile Portrait modes.