Style guide
The colours, type, shapes and pictures of Xenoara Co in one place.
Brand
Xenoara CoXenoara CoNon-profit & Charity - Hopeful and human: greens and warm tones, people, nature and care.
Palette Bold Pink · Minimal Luxury style · pictures: Soft blobs with non-profit & charity subjects · fonts EB Garamond and Jost
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
EB Garamond
Headings
Jost
Text, buttons and forms (Google Fonts)
Real help, where it is needed most
Why supporters stay with us
Why we plant trees with the schools we build
Each well is built with the village and kept running by a trained local committee, so it still works ten years later.
Volunteers give their time in schools, shelters and food banks every week. Thousands of donors already trust us, and we work hard to keep it that way. Ninety cents of every dollar goes directly to the projects you support. Clean water wells are built with and maintained by local communities.
Start in minutes and get help from a real person whenever you need it.
Corners and depth
--wt-shadow--wt-shadow-lgComponents
Pictures
Soft blobs in the template colours, with non-profit & charity 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.