Style guide
The colours, type, shapes and pictures of Junoly Labs in one place.
Brand
Junoly LabsJunoly LabsHealth & Clinic - Calm, clean and trustworthy: cool blues and greens, care and wellbeing in every picture.
Palette Soft Cyan · Aurora Glass style · pictures: Gradient mesh with health & clinic subjects · fonts Urbanist and Inter
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
Inter
Text, buttons and forms (Google Fonts)
Book a doctor in minutes
Care built around your day
What to expect at your first dental visit
Our 18 specialists keep appointments open every week, so a referral becomes a visit within days rather than months.
Our team has done this many times, so you never have to guess. Your records are private, secure and always available when you need them. Same-day appointments are available for urgent needs on weekdays. Our specialists take time to listen and explain every step of your treatment.
Every detail is handled by people who care about getting it right.
Corners and depth
--wt-shadow--wt-shadow-lgComponents
Pictures
Gradient mesh 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.