Style guide
The colours, type, shapes and pictures of Sageio in one place.
Brand
SageioSageioNon-profit & Charity - Hopeful and human: greens and warm tones, people, nature and care.
Palette Bold Teal · Swiss Grid style · pictures: Landscapes with non-profit & charity subjects · fonts Albert Sans and IBM Plex 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
Albert Sans
Headings
IBM Plex Sans
Text, buttons and forms (Google Fonts)
Together we can change lives
Giving you can trust
Why we plant trees with the schools we build
Regular giving lets us plan a whole school year and respond to emergencies the same week, without waiting for a new appeal.
A school kit costs less than a cinema ticket and lasts a whole year. Clear prices, honest advice and no surprises along the way. Our annual report is independently audited and published in full. Every donation is tax-deductible, and receipts arrive by email instantly.
We listen first, then build a plan around what you actually need.
Corners and depth
--wt-shadow--wt-shadow-lgComponents
Pictures
Landscapes 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.