Style guide
The colours, type, shapes and pictures of Bloom in one place.
Brand
BloomBloomHealth & Clinic - Calm, clean and trustworthy: cool blues and greens, care and wellbeing in every picture.
Palette Muted Jade · Aurora Glass style · pictures: Soft blobs with health & clinic subjects · fonts Urbanist and Plus Jakarta 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
Dark mode
Type
Urbanist
Headings
Plus Jakarta Sans
Text, buttons and forms (Google Fonts)
See a specialist this week
What makes Bloom different
Staying active after an injury
One family plan covers check-ups and vaccinations for parents and children, with everyone's records and reminders in a single account.
Lab results arrive in your patient portal, usually within 48 hours. Same-day appointments are available for urgent needs on weekdays. Friendly reminders make sure you never miss a check-up or a dose.
We work with most insurance providers and explain any costs upfront.
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.