Digital Reef — Brand Preview

Logos

Digital Reef logos — brandmark (DR), wordmark (no tagline), and full logo (with tagline) — each in multiple brand colours.

Brandmark

Wordmark (No Tagline)

Full Logo (With Tagline)

Charitable Trust Logos

The Digital Reef Charitable Trust identity — for trust-specific documents, governance, and formal communications. Available in SVG, PNG, PDF, and EPS.

Charitable Trust Logo

SVG Logos

Original vector artwork from Nourished Studio — infinitely scalable for web, print, and large-format use. Available for all four logo variants in 7 brand colours.

Brandmark (SVG)

Wordmark — No Tagline (SVG)

Full Logo — With Tagline (SVG)

Charitable Trust (SVG)

Colour Palette

Designed by Nourished Studio. Earthy NZ-landscape tones grounded in nature.

Primary Colours

Pine Needle Green

#3E4843

Forest Fern

#566D49

Sage

#8AA382

Olive

#D0D9A3

Deep Blue

#3A708E

Coastal

#89B1CC

Secondary Colours

Golden

#F2E280

Dusty Yellow

#F7E9A7

Wild Plum

#4E3A4C

Mist

#C1D7E9

Canyon Clay

#C95235

Ivory

#F3E9DE

Gradients

Forest Depth

Coastal Mist

Golden Hour

NZ Landscape

Earth Tone

Typography

Outfit for headings, Inter for body text, JetBrains Mono for code.

Outfit — Headings

Place-Based Infrastructure

for Well-being Projects

Inter — Body Text

The Digital Reef Charitable Trust builds digital infrastructure for community well-being. Like a coral reef, we believe small contributions create vast, interconnected structures of lasting value.

Caption text — Inter Regular 14px. Use for metadata, dates, and secondary information.

JetBrains Mono — Code

const brand = require('@digitalreef/branding');
const primaryGreen = brand.colors.primary['forest-fern'].value;
// → '#566D49'

Brand Patterns

Topographic contour lines inspired by NZ landscapes — Ben Ohau mountains and Shotover River.

Ben Ohau — Medium Green

Ben Ohau — Dark Green

Shotover River — Light Green with Blue

Shotover River — Medium Green

Components

Drop-in styled components for all DR projects. Include variables.css + dr-components.css.

Buttons

Badges

Community Technology Featured Urgent New

Alerts

Info: This is an informational message.

Success: Operation completed successfully.

Warning: Please review before continuing.

Error: Something needs your attention.

Cards

Standard Card

A basic card for content display. Hover to see the lift effect.

Active Learn more

Accent Card

Left border accent in Forest Fern for emphasis.

Featured Card

Golden border with gradient top bar for highlighted content.

Dark Card

Pine Needle background for contrast sections.

Semantic Tokens

Severity, status, source, and domain indicators. Toggle dark mode to verify legibility.

Severity Indicators

Info Low Medium High Critical Emergency

Severity Dots

Info Low Medium High Critical Emergency

Status Badges

Draft Pending Active Paused Complete Archived Cancelled

Source Tags

Gazette LGA FTA Council Media Community

Domain Tags

Environment Planning Transport Health Recreation Infrastructure Governance Finance

Animations

Reef-inspired micro-interactions. All respect prefers-reduced-motion.

wave

float

tide

bioluminescent

shimmer

contour

Map Icons

Custom SVG icons for GIS map layers — optimised for MapLibre GL JS sprite sheets and HTML markers.

dr-parachute-marker

dr-parachute-detail

marker (currentColor)

detail (currentColor)

Favicon & Social Assets

AI-generated digital reef icon — pre-sized for every platform.

Digital Reef Brand Kit