Colour palette
GIVE uses a calm, institutional palette inspired by Nordic light and Sahel earth tones. Below are the main colours used in the CSS.
- Primary blue: #0050a3 – links, accents, active states
- Deep navy: #0d1b3d – header, donate button, chat button
- Text main: #141b2f – main body text
- Muted text: #4a5672 – secondary text
- Background light: #f5f7fb – main page background
- Cards background: #ffffff – cards, sections, footer
- Lines / borders: #e1e6f0 – header/footer borders, separators
When adding new sections or components, reuse these colours first. Avoid introducing new colours unless absolutely necessary.
Typography
GIVE uses a system font stack for performance and simplicity. This keeps the site accessible even on low-bandwidth connections.
Font stack:
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
- Page titles (h1): 2.0rem on desktop, 1.6rem on mobile
- Section titles (h2): 1.4rem
- Card titles (h3): around 1.0–1.05rem
- Body text: ~1.0rem
- Small text: 0.82–0.9rem (footer, meta, labels)
Text should stay short, clear and easy to read. Avoid long blocks without line breaks.
Layout and key components
The layout is based on a 1200px container and simple reusable components.
- .container: max-width: 1200px; centred with side padding.
- .site-header: sticky, compact, with logo + main navigation + language switch.
- .hero: light background, page title and short introduction.
- .section: vertical spacing between content blocks.
- .programmes-grid: grid of 4 cards on desktop, 2 on tablet, 1 on mobile.
- .initiatives-grid, .partners-grid, .team-grid: responsive grids for cards.
- .donate-btn / .btn / .btn-ghost: main buttons for calls to action.
- .site-footer: simple, with language links, “Support GIVE” link and contact.
- #give-chat-root: container for the GIVE Assistant widget in the bottom-right corner.
Accessibility and languages
GIVE works across several languages and with communities that may face accessibility barriers.
- Each page starts with a “Skip to main content” link (
.sr-onlyclass). - Headings follow a logical order: one
<h1>, then<h2>for sections. - Links use descriptive text, not just “click here”.
- Language switch is visible in the header and footer.
- Contrast is kept high enough for comfortable reading.
When adding new content, keep paragraphs short, avoid jargon and ensure that text can be translated easily to French, Norwegian and Spanish.
How to use this design system
This page is a living internal reference. When you add new pages or collaborate with designers and developers, you can share this link so they follow the same structure and visual language.
If you change core colours, typography or layout rules, remember to update this page so that all future content stays coherent.
Last updated: 1 December 2025