Skip to content

Style guide

The colours, type, shapes and pictures of Glowia in one place.

Brand

Glowia
On a light page
Glowia
On a dark page

Non-profit & Charity - Hopeful and human: greens and warm tones, people, nature and care.

Palette Deep Forest · Aurora Glass style · pictures: Dot grid with non-profit & charity subjects · fonts Unbounded 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

Primary
#166534
text on it 7.1:1
Secondary
#4d7c0f
 
Accent
#ca8a04
text on it 6.0:1
Page
#f5faf3
 
Surface
#ffffff
 
Surface 2
#edf5ec
 
Text
#1e2430
14.7:1 on the page
Muted text
#4f5867
6.8:1 on the page
Border
#d9dfe0
 
Links and brand text
#166534
6.7:1 on the page

Dark mode

Primary
#166534
text on it 7.1:1
Secondary
#4d7c0f
 
Accent
#ca8a04
text on it 6.0:1
Page
#08120a
 
Surface
#102014
 
Surface 2
#1c2b20
 
Text
#e5e9f0
15.7:1 on the page
Muted text
#9aa4b5
7.6:1 on the page
Border
#313f35
 
Links and brand text
#a2c2ae
9.9:1 on the page

Type

Unbounded

Headings

Plus Jakarta Sans

Text, buttons and forms (Google Fonts)

Every donation makes a difference

Why supporters stay with us

Five things we learned this year

Last year, supporters like you funded 14 clean water wells, 3,200 school kits and 41,000 meals across 36 communities.

Start in minutes and get help from a real person whenever you need it. Leave a gift in your will and help future generations. Local partners know their communities and make sure help arrives where it matters.

Friendly people answer your questions quickly, by phone, chat or email.

Corners and depth

Corners
0.875rem
Large corners
1.75rem
Pills
50rem
Shadow --wt-shadow
Large shadow --wt-shadow-lg

Components

NewPaidPendingOverdue12
You receive photos and updates showing exactly what your donation achieved.

Pictures

Dot grid 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).

Non-profit & Charity picture 1
Non-profit & Charity picture 2
Non-profit & Charity picture 3
Monthly gift
Monthly gift
School kit
School kit
Meal pack
Meal pack
Tree planting
Tree planting

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.