Style guide
The colours, type, shapes and pictures of Brioo in one place.
Brand
BriooBriooHealth & Clinic - Calm, clean and trustworthy: cool blues and greens, care and wellbeing in every picture.
Palette Fresh Mint · Swiss Grid style · pictures: Soft blobs with health & clinic subjects · fonts Albert Sans and Libre Franklin
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
Dark mode
Type
Albert Sans
Headings
Libre Franklin
Text, buttons and forms (Google Fonts)
Unwell this morning? Seen this afternoon.
What makes Brioo different
What our patients asked us most
Gentle cleanings, fillings and whitening from dentists who explain each step before they begin and never rush a nervous patient.
Video consultations let you speak with a doctor from the comfort of home. We listen first, then build a plan around what you actually need. Lab results arrive in your patient portal, usually within 48 hours.
Book online in two minutes and see a doctor as soon as today.
Corners and depth
--wt-shadow--wt-shadow-lgComponents
Pictures
Soft blobs 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).
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.