# Effective Altruism Australia - Design Guidelines

*Last updated: 27 July 2025*

Base URL for all assets: `https://effective-altruism-australia.github.io/design-guidelines/`

---

## Colour Palette

### Primary Colours

| Colour | Hex | Usage |
|--------|-----|-------|
| Primary Teal | `#0C869B` | Accents, buttons, links, highlights |
| Dark Teal | `#145565` | Headings, dark text, navigation |
| Warm Off-White | `#F4EFE9` | Page backgrounds, subtle sections |
| Charcoal Black | `#151515` | Body text, primary content |
| Pure White | `#FFFFFF` | Card backgrounds, content areas |

### EAA Teal Palette

| Step | Hex |
|------|-----|
| 50 | `#ecffff` |
| 100 | `#cefeff` |
| 200 | `#a3fafe` |
| 300 | `#64f4fc` |
| 400 | `#1ee5f2` |
| 500 | `#02c8d8` |
| 600 | `#059fb5` |
| 700 | `#0c869b` |
| 800 | `#136677` |
| 900 | `#145565` |
| 950 | `#073845` |

### EAA Warm (Bronze) Palette

| Step | Hex |
|------|-----|
| 50 | `#f9f6f3` |
| 100 | `#f4efe9` |
| 200 | `#e2d4c6` |
| 300 | `#cfb8a2` |
| 400 | `#bb967c` |
| 500 | `#ad7f62` |
| 600 | `#a06d56` |
| 700 | `#855849` |
| 800 | `#6d4a3f` |
| 900 | `#593d35` |
| 950 | `#2f1e1b` |

### EAA Grey Neutral Palette

| Step | Hex |
|------|-----|
| 50 | `#f6f6f6` |
| 100 | `#e7e7e7` |
| 200 | `#d1d1d1` |
| 300 | `#b0b0b0` |
| 400 | `#888888` |
| 500 | `#6d6d6d` |
| 600 | `#5d5d5d` |
| 700 | `#4f4f4f` |
| 800 | `#454545` |
| 900 | `#3d3d3d` |
| 950 | `#151515` |

---

## Typography

### Merriweather (Serif) - Headings

- **Usage:** All headings and titles (H1, H2, H3, etc.)
- **Do:** Use for all headings and titles
- **Don't:** Don't use for body text or long paragraphs
- A classic serif font that provides elegance and readability for headings.

### Mukta (Sans-serif) - Body Text

- **Usage:** Body text, paragraphs, UI elements
- **Do:** Use for all body text and interface elements
- **Don't:** Don't use for headings or titles
- A clean, modern sans-serif font optimized for readability in body text.

### Default Sans-Serif (Fallback)

- **Family:** Arial, sans-serif
- **Usage:** Email and limited contexts
- **Do:** Use when custom fonts aren't available (emails, etc.)
- **Don't:** Don't use when Merriweather and Mukta are available
- Fallback to system default sans-serif fonts when custom fonts cannot be loaded.

---

## Logo Variations

### Square Logos

#### Full Colour

![Square logo - Full colour](https://effective-altruism-australia.github.io/design-guidelines/square-logo-full-colour.png)

- **Do:** Primary brand representation
- **Don't:** Avoid on coloured backgrounds that conflict
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-full-colour.svg) - Best for web use, large displays, and crisp scalable graphics
  - [PNG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-full-colour.png) - Best for presentations, documents, and email
  - [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/square-logo-full-colour-no-padding.png) - Best for tight layouts with precise spacing control

#### Mono Colour

![Square logo - Mono colour](https://effective-altruism-australia.github.io/design-guidelines/square-logo-mono-colour.png)

- **Do:** Use when displayed in small sizes or when full colour isn't an option
- **Don't:** Don't use where full colour is an option
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-mono-colour.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-mono-colour.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/square-logo-mono-colour-no-padding.png)

#### Black

![Square logo - Black](https://effective-altruism-australia.github.io/design-guidelines/square-logo-black.png)

- **Do:** Use on light backgrounds where full colour won't work
- **Don't:** Never use on dark backgrounds
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-black.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-black.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/square-logo-black-no-padding.png)

#### White

![Square logo - White](https://effective-altruism-australia.github.io/design-guidelines/square-logo-white.png)

- **Do:** Use on dark backgrounds where full colour won't work
- **Don't:** Never use on light backgrounds
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-white.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-white.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/square-logo-white-no-padding.png)

#### Inverted Mono Colour

![Square logo - Inverted mono colour](https://effective-altruism-australia.github.io/design-guidelines/square-logo-inverted-mono-colour.png)

- **Do:** Use for social media avatars etc.
- **Don't:** Don't use in other cases where full colour logo is an option
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-inverted-mono-colour.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-inverted-mono-colour.png)

### Large Format Logos

#### Full Colour

![Large logo - Full colour](https://effective-altruism-australia.github.io/design-guidelines/large-logo-full-colour.png)

- **Do:** Primary brand representation
- **Don't:** Avoid on coloured backgrounds that conflict
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-full-colour.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-full-colour.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/large-logo-full-colour-no-padding.png)

#### Mono Colour

![Large logo - Mono colour](https://effective-altruism-australia.github.io/design-guidelines/large-logo-mono-colour.png)

- **Do:** Use when displayed in small sizes or when full colour isn't an option
- **Don't:** Try to use the full colour version if you can
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-mono-colour.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-mono-colour.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/large-logo-mono-colour-no-padding.png)

#### Full Colour Dark

![Large logo - Full colour dark](https://effective-altruism-australia.github.io/design-guidelines/large-logo-full-colour-dark.png)

- **Do:** Use for large displays on dark backgrounds
- **Don't:** Don't use on light backgrounds or in small sizes - the gradient on the bulb will get lost in the background
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-full-colour-dark.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-full-colour-dark.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/large-logo-full-colour-dark-no-padding.png)

#### Mono Colour Dark

![Large logo - Mono colour dark](https://effective-altruism-australia.github.io/design-guidelines/large-logo-mono-colour-dark.png)

- **Do:** Use for smaller displays on dark backgrounds
- **Don't:** Don't use on light backgrounds
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-mono-colour-dark.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-mono-colour-dark.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/large-logo-mono-colour-dark-no-padding.png)

---

## Environmental Logo Variations

### Square Logos (ENV)

#### Full Colour

![Square logo ENV - Full colour](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-full-colour.png)

- **Do:** Primary brand representation
- **Don't:** Avoid on coloured backgrounds that conflict
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-full-colour.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-full-colour.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-full-colour-no-padding.png)

#### Mono Colour

![Square logo ENV - Mono colour](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-mono-colour.png)

- **Do:** Use when displayed in small sizes or when full colour isn't an option
- **Don't:** Don't use where full colour is an option
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-mono-colour.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-mono-colour.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-mono-colour-no-padding.png)

#### Black

![Square logo ENV - Black](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-black.png)

- **Do:** Use on light backgrounds where full colour won't work
- **Don't:** Never use on dark backgrounds
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-black.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-black.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-black-no-padding.png)

#### White

![Square logo ENV - White](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-white.png)

- **Do:** Use on dark backgrounds where full colour won't work
- **Don't:** Never use on light backgrounds
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-white.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-white.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-white-no-padding.png)

#### Inverted Mono Colour

![Square logo ENV - Inverted mono colour](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-inverted-mono-colour.png)

- **Do:** Use for social media avatars etc.
- **Don't:** Don't use in other cases where full colour logo is an option
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-inverted-mono-colour.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/square-logo-env-inverted-mono-colour.png)

### Large Format Logos (ENV)

#### Full Colour

![Large logo ENV - Full colour](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-full-colour.png)

- **Do:** Primary brand representation
- **Don't:** Avoid on coloured backgrounds that conflict
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-full-colour.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-full-colour.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-full-colour-no-padding.png)

#### Mono Colour

![Large logo ENV - Mono colour](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-mono-colour.png)

- **Do:** Use when displayed in small sizes or when full colour isn't an option
- **Don't:** Don't use where full colour is an option
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-mono-colour.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-mono-colour.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-mono-colour-no-padding.png)

#### Full Colour Dark

![Large logo ENV - Full colour dark](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-full-colour-dark.png)

- **Do:** Use for large displays on dark backgrounds
- **Don't:** Don't use on light backgrounds or in small sizes - the gradient on the bulb will get lost in the background
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-full-colour-dark.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-full-colour-dark.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-full-colour-dark-no-padding.png)

#### Mono Colour Dark

![Large logo ENV - Mono colour dark](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-mono-colour-dark.png)

- **Do:** Use for smaller displays on dark backgrounds
- **Don't:** Don't use on light backgrounds
- **Downloads:**
  - [SVG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-mono-colour-dark.svg) |
  [PNG](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-mono-colour-dark.png) |
  [PNG (no padding)](https://effective-altruism-australia.github.io/design-guidelines/large-logo-env-mono-colour-dark-no-padding.png)

---

## Impact Icons

Simple line icons representing the charities and programs supported by EAA.

### Against Malaria Foundation

![Against Malaria Foundation icon](https://effective-altruism-australia.github.io/design-guidelines/against-malaria.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/against-malaria.svg)

### Deworm the World

![Deworm the World icon](https://effective-altruism-australia.github.io/design-guidelines/de-worm.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/de-worm.svg)

### EAA Amplify

![EAA Amplify icon](https://effective-altruism-australia.github.io/design-guidelines/eaa-amplify.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/eaa-amplify.svg)

### EAAE

![EAAE icon](https://effective-altruism-australia.github.io/design-guidelines/eaae.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/eaae.svg)

### EAAE Operations

![EAAE Operations icon](https://effective-altruism-australia.github.io/design-guidelines/eaae-operations.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/eaae-operations.svg)

### GiveDirectly

![GiveDirectly icon](https://effective-altruism-australia.github.io/design-guidelines/give-directly.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/give-directly.svg)

### GiveWell All Grants Fund

![GiveWell All Grants Fund icon](https://effective-altruism-australia.github.io/design-guidelines/givewell-all-grants-fund.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/givewell-all-grants-fund.svg)

### Giving What We Can

![Giving What We Can icon](https://effective-altruism-australia.github.io/design-guidelines/giving-what-we-can.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/giving-what-we-can.svg)

### Helen Keller International

![Helen Keller International icon](https://effective-altruism-australia.github.io/design-guidelines/hki.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/hki.svg)

### Malaria Consortium

![Malaria Consortium icon](https://effective-altruism-australia.github.io/design-guidelines/malaria-consortium.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/malaria-consortium.svg)

### New Incentives

![New Incentives icon](https://effective-altruism-australia.github.io/design-guidelines/new-incentives.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/new-incentives.svg)

### One Acre Fund

![One Acre Fund icon](https://effective-altruism-australia.github.io/design-guidelines/one-acre-fund.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/one-acre-fund.svg)

### StrongMinds

![StrongMinds icon](https://effective-altruism-australia.github.io/design-guidelines/strongminds.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/strongminds.svg)

### Unlimit Health

![Unlimit Health icon](https://effective-altruism-australia.github.io/design-guidelines/unlimit.svg)

- **Download:** [SVG](https://effective-altruism-australia.github.io/design-guidelines/unlimit.svg)

---

## Bad Examples - What Not to Do

### 1. Stacking Text Next to Logo

![Bad example - Stacked text](https://effective-altruism-australia.github.io/design-guidelines/bad-example-stacked-text.png)

- **Don't:** Stack the text next to the logo
- **Do:** Use standard logo with two lines of text

### 2. Centre-Justified Text

![Bad example - Centre justified text](https://effective-altruism-australia.github.io/design-guidelines/bad-example-center-justified-text.png)

- **Don't:** Centre-justify the text next to the logo
- **Do:** Use standard logo with right-aligned text

### 3. Wrong Font Usage

![Bad example - Wrong font](https://effective-altruism-australia.github.io/design-guidelines/bad-example-wrong-font.png)

- **Don't:** Use other fonts with the logo
- **Do:** Use Merriweather font

### 4. Awkward Spacing

![Bad example - Awkward spacing](https://effective-altruism-australia.github.io/design-guidelines/bad-example-awkward-spacing.png)

- **Don't:** Awkwardly space the icon and text
- **Do:** Use the logos above as a reference

### 5. Squeezed Text

![Bad example - Squeezed text](https://effective-altruism-australia.github.io/design-guidelines/bad-example-squeezed-text.png)

- **Don't:** Squeeze the text in too close to the logo
- **Do:** Use the logos above as a reference

---

## CSS Design Tokens

```css
/* Primary colours */
--primary:      #0C869B;
--dark:         #145565;
--dark-deeper:  #073845;
--warm-white:   #F4EFE9;
--charcoal:     #151515;
--white:        #FFFFFF;
--bg:           #f9f6f3;

/* Shadows */
--shadow-sm:  0 1px 3px rgba(20,85,101,0.07), 0 2px 8px rgba(20,85,101,0.06);
--shadow-md:  0 4px 16px rgba(20,85,101,0.12), 0 1px 4px rgba(20,85,101,0.07);
--shadow-lg:  0 8px 32px rgba(20,85,101,0.16);

/* Border radius */
--radius:     16px;
--radius-sm:  8px;
--radius-xs:  5px;

/* Easing */
--ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
```