Skip to content
Glowix Studio

Style guide

The colours, type, shapes and pictures of Glowix Studio in one place.

Brand

Glowix Studio
On a light page
Glowix Studio
On a dark page

Health & Clinic - Calm, clean and trustworthy: cool blues and greens, care and wellbeing in every picture.

Palette Lagoon Teal · Swiss Grid style · pictures: Line waves with health & clinic subjects · fonts Inter and Work 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
#0d9488
text on it 4.7:1
Secondary
#0891b2
 
Accent
#f43f5e
text on it 4.8:1
Page
#f2fbfa
 
Surface
#ffffff
 
Surface 2
#eaf7f6
 
Text
#1e2430
14.8:1 on the page
Muted text
#4f5867
6.8:1 on the page
Border
#d8e2e5
 
Links and brand text
#09645d
6.7:1 on the page

Dark mode

Primary
#0d9488
text on it 4.7:1
Secondary
#0891b2
 
Accent
#f43f5e
text on it 4.8:1
Page
#061413
 
Surface
#0d2220
 
Surface 2
#192d2b
 
Text
#e5e9f0
15.4:1 on the page
Muted text
#9aa4b5
7.5:1 on the page
Border
#2f413f
 
Links and brand text
#7ac4be
9.4:1 on the page

Type

Inter

Headings

Work Sans

Text, buttons and forms (Google Fonts)

Modern healthcare close to home

Care built around your day

Staying active after an injury

Video consultations run from 8 am to 8 pm, and any prescription is sent straight to the pharmacy you choose.

Lab results arrive in your patient portal, usually within 48 hours. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.

We work with most insurance providers and explain any costs upfront.

Corners and depth

Corners
0.125rem
Large corners
0.25rem
Pills
50rem
Shadow --wt-shadow
Large shadow --wt-shadow-lg

Components

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

Pictures

Line waves in the template colours, with health & clinic 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).

Health & Clinic picture 1
Health & Clinic picture 2
Health & Clinic picture 3
Annual check-up
Annual check-up
Dental cleaning
Dental cleaning
Physio session
Physio session
Blood test
Blood test

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.