# The Digital Reef Charitable Trust — Brand Guidelines

Designed by **Nourished Studio** — Branding Proposal V.2

## Brand Essence

The Digital Reef represents the intersection of technology and community — a living, growing ecosystem where digital tools empower charitable impact. Like a coral reef, we believe small contributions create vast, interconnected structures of lasting value.

Our visual identity reflects Aotearoa New Zealand's landscapes — the deep greens of native bush, the blues of our coastline, the warmth of golden light — grounded in nature yet forward-looking in our digital mission.

## Brand Values

- **Community First** — Everything we build serves the people and causes we support
- **Transparency** — Open, honest, and accountable in all we do
- **Sustainability** — Building systems and solutions that endure
- **Innovation** — Using technology creatively to multiply charitable impact
- **Accessibility** — Ensuring our digital tools are usable by everyone

---

## Logo Usage

### Logo Variants

| Variant                       | File Location          | Use Case                        |
|-------------------------------|------------------------|---------------------------------|
| Primary Logo (with tagline)   | `assets/logos/`        | Hero placements, letterheads    |
| Primary Logo (no tagline)     | `assets/logos/`        | Compact placements, nav bars    |
| Brandmark (icon only)         | `assets/logos/`        | Favicons, app icons, avatars    |

### Favicon / Social Profile Images

Pre-generated at standard sizes in `assets/favicon/`:

- Favicon: 16px, 32px, 512px
- Facebook profile: 180px, cover: 820x312
- Instagram profile: 320px
- LinkedIn profile: 400px, background: 1584x396
- Twitter/X profile: 400px, banner: 1500x500
- YouTube banner: 2048x1152

### Logo Rules

- Minimum clear space: equal to the height of the "D" in Digital
- Minimum size: 120px wide for digital, 30mm for print
- Do not stretch, distort, or rotate
- Do not apply unapproved colours
- Do not place on busy or low-contrast backgrounds

---

## Colour Palette

### Primary Colours

| Name              | Hex       | CMYK              | Usage                                    |
|-------------------|-----------|--------------------|------------------------------------------|
| Pine Needle Green | `#3E4843` | C71 M55 Y63 K43   | Anchor colour — headers, primary text    |
| Forest Fern       | `#566D49` | C66 M39 Y78 K24   | Core brand green — buttons, key actions  |
| Sage              | `#8AA382` | C49 M24 Y56 K2    | Mid-tone — secondary elements, hover     |
| Olive             | `#D0D9A3` | C20 M5 Y43 K0     | Soft green — backgrounds, cards          |
| Deep Blue         | `#3A708E` | C81 M49 Y30 K6    | Trust blue — links, information          |
| Coastal           | `#89B1CC` | C46 M20 Y11 K0    | Light blue — accents, highlights         |

### Secondary Colours

| Name              | Hex       | CMYK              | Usage                                    |
|-------------------|-----------|--------------------|------------------------------------------|
| Golden            | `#F2E280` | C6 M6 Y62 K0      | Warmth — highlights, featured content    |
| Dusty Yellow      | `#F7E9A7` | C4 M5 Y41 K0      | Soft gold — backgrounds, notifications   |
| Wild Plum         | `#4E3A4C` | C65 M75 Y47 K39   | Rich accent — dark emphasis, contrast    |
| Mist              | `#C1D7E9` | C22 M8 Y3 K0      | Cool light — info panels, light accents  |
| Canyon Clay       | `#C95235` | C15 M81 Y89 K4    | Warm accent — CTAs, alerts, energy       |
| Ivory             | `#F3E9DE` | C4 M7 Y11 K0      | Warm white — page backgrounds            |

### Colour Pairings

| Combination                          | Use Case                            |
|--------------------------------------|-------------------------------------|
| Pine Needle text on Ivory background | Default body text                   |
| Forest Fern buttons on Ivory/White   | Primary actions                     |
| Deep Blue links on Ivory/White       | Hyperlinks and info                 |
| Canyon Clay on Ivory/White           | Urgent CTAs and alerts              |
| Ivory text on Pine Needle background | Dark section headers, footers       |
| Ivory text on Wild Plum background   | Feature/highlight sections          |
| Golden badges on Pine Needle         | Featured content tags               |

### Accessibility

- All text colours must meet WCAG 2.1 AA contrast ratios (4.5:1 for normal text, 3:1 for large text)
- Pine Needle Green on white: **9.2:1** (AAA pass)
- Pine Needle Green on Ivory: **8.5:1** (AAA pass)
- Wild Plum on white: **10.1:1** (AAA pass)
- Deep Blue on white: **4.7:1** (AA pass)
- Never use Olive, Golden, Dusty Yellow, Mist, or Coastal as text on light backgrounds

---

## Semantic Token Colours

In addition to the brand palette, Digital Reef uses standardised semantic colours for functional UI elements. These are separate from the Nourished Studio palette and serve specific UX purposes.

### Severity Scale

Based on CAP (Common Alerting Protocol) and ISO 22324 principles. Always pair colour with a text label and icon — never rely on colour alone (WCAG SC 1.4.1).

| Level | Primary | Background | Text on Bg | Contrast |
|-------|---------|------------|-----------|----------|
| Info | `#2563EB` | `#EFF6FF` | `#1E40AF` | 9.74:1 AA |
| Low | `#16A34A` | `#F0FDF4` | `#166534` | 9.28:1 AA |
| Medium | `#D97706` | `#FFFBEB` | `#92400E` | 8.35:1 AA |
| High | `#EA580C` | `#FFF7ED` | `#9A3412` | 8.63:1 AA |
| Critical | `#DC2626` | `#FEF2F2` | `#991B1B` | 9.62:1 AA |
| Emergency | `#FFFFFF` | `#7F1D1D` | `#FFFFFF` | 12.55:1 AAA |

### Status / Lifecycle

| State | Colour | Background | Text on Bg |
|-------|--------|------------|-----------|
| Draft | `#6B7280` | `#F3F4F6` | `#374151` |
| Pending | `#8B5CF6` | `#F5F3FF` | `#5B21B6` |
| Active | `#2563EB` | `#EFF6FF` | `#1E40AF` |
| Paused | `#D97706` | `#FFFBEB` | `#92400E` |
| Complete | `#16A34A` | `#F0FDF4` | `#166534` |
| Archived | `#9CA3AF` | `#F9FAFB` | `#4B5563` |
| Cancelled | `#EF4444` | `#FEF2F2` | `#991B1B` |

### Source & Domain Tags

Source and domain tags use their primary colour at 8% opacity as background, with a 27% opacity border. Text is set to the primary colour. This ensures legibility on both light and dark surfaces.

### WCAG Pairing Rules for Semantic Tokens

- Severity text-on-background colours are pre-validated to meet WCAG AA (4.5:1 minimum)
- Emergency level uses white text on dark red — meets AAA (12.55:1)
- Never use severity primary colours as text on white (some fail AA)
- Always use the designated `color_text_on_bg` value from the token file
- Source and domain tags use dark primary colours on near-white tinted backgrounds — all pass AA

---

## Brand Patterns

The brand includes topographic contour-line patterns inspired by NZ landscapes:

### Ben Ohau Pattern

Mountain-inspired contour lines. Available in:

- Medium Green (Forest Fern tones)
- Dark Green (Pine Needle tones)

### Shotover River Pattern

Flowing river-inspired contour lines. Available in:

- Light Green with Blue accent
- Medium Green

### Pattern Usage

- **Document footers** — the patterns are sized for document footer placement
- **Website section dividers** — use as decorative breaks between content sections
- **Presentation backgrounds** — subtle background texture on light slides
- Available in SVG (scalable), PNG, and PDF formats in `assets/patterns/`

---

## Typography

### Font Stack

| Role     | Font          | Fallback                     | Weight Range |
|----------|---------------|------------------------------|--------------|
| Headings | Outfit        | Inter, system-ui, sans-serif | 500–800      |
| Body     | Inter         | system-ui, sans-serif        | 300–700      |
| Code     | JetBrains Mono| Fira Code, monospace         | 400–700      |

All fonts are free via [Google Fonts](https://fonts.google.com/).

### Type Scale

- Hero titles: 3rem–4.5rem (48–72px), Outfit Extrabold
- Section headings: 1.875rem–2.25rem (30–36px), Outfit Bold
- Subheadings: 1.25rem–1.5rem (20–24px), Outfit Semibold
- Body text: 1rem–1.125rem (16–18px), Inter Regular
- Small/caption: 0.75rem–0.875rem (12–14px), Inter Regular

---

## Voice & Tone

### Brand Voice

- **Warm but professional** — We're a charity, not a corporation. Friendly, approachable, but credible.
- **Clear and jargon-free** — Our audience includes donors, volunteers, and community members of all technical levels.
- **Empowering** — Focus on what people *can* do, not what they can't.
- **Grounded** — Real stories, real impact. Avoid hyperbole.

### Writing Guidelines

- Use active voice: "We built" not "It was built"
- Prefer short sentences and paragraphs
- Use "we" for the Trust, "you" for the reader
- Capitalise "The Digital Reef" on first mention, then "Digital Reef" or "DR"
- Use NZ English spelling (colour, organise, programme)

---

## Photography & Imagery

### Style

- Natural, authentic — real people in real contexts
- Warm lighting that complements the earthy palette
- Avoid stock photo cliches (handshakes, thumbs up)
- Prefer NZ landscapes and communities where possible
- The brand pattern contour lines can overlay or border photographs

### Overlay Treatment

When placing text over images:

- Use a gradient overlay: `rgba(62, 72, 67, 0.75)` (Pine Needle) or `rgba(78, 58, 76, 0.75)` (Wild Plum)
- Ensure text contrast meets WCAG AA
- Ivory (`#F3E9DE`) or white text on overlays

---

## Digital Reef Favicon & Icon

The AI-generated favicon features a pixel-art digital coral reef with circuit board traces — symbolising the fusion of nature and technology. It uses a dark navy background with vibrant neon blues, teals, corals, and greens that complement the primary earthy palette with digital energy.

Use this icon for:

- Website favicons
- Social media profile images
- App icons
- Digital identity where the full logo is too large

---

## Iconography

- Style: Rounded, outlined (2px stroke), consistent with Lucide or Heroicons
- Colour: Match the context colour from the brand palette
- Size: Minimum 20px, default 24px

### Custom Map Icons

Custom SVG icons for GIS/map use are stored in `assets/icons/`.

#### Parachute Icons

Two variants for the Airspace guild, optimised for MapLibre GL JS:

| File | Variant | Use | Optimised for |
|------|---------|-----|---------------|
| `dr-parachute-marker.svg` | Minimal | Map markers, sprite sheets, small UI | 16–32px, SDF recolouring |
| `dr-parachute-marker-sdf.svg` | Minimal (SDF) | SDF sprite generation (black fill) | spritezero pipeline |
| `dr-parachute-marker-dr-teal.svg` | Minimal (teal) | HTML markers, static use | Pre-filled with Primary #0D9488 |
| `dr-parachute-detail.svg` | Detailed | Legend entries, tooltips, print | 32–64px |
| `dr-parachute-detail-dr-teal.svg` | Detailed (teal) | Legend entries, static use | Pre-filled with Primary #0D9488 |

**SDF sprite generation:**
```bash
npx @elastic/spritezero-cli --sdf dr-sprites assets/icons/
npx @elastic/spritezero-cli --sdf --retina dr-sprites@2x assets/icons/
```

---

## Motion & Animation

- Subtle, purposeful — motion should guide attention, not distract
- Preferred easing: `ease-in-out`
- Transitions: 150ms–300ms for UI elements
- Page transitions: 300ms–500ms
- Brand-themed animations available in the Tailwind preset:
  - `animate-wave` — gentle vertical movement
  - `animate-float` — organic drifting motion
  - `animate-contour` — slow background shift (echoes the topographic patterns)
  - `animate-shimmer` — light sweep effect