Brand system

How BiteCast looks + sounds.

BiteCast is a fishing-decision tool, not a fishing chart. Every brand choice flows from that distinction — authoritative without being clinical, technical without being cold, opinionated without being preachy. We talk like an experienced AU offshore angler who happens to be an oceanographer.

Three single-word adjectives: direct · technical · Australian. Internal source-of-truth: docs/brand.md.

§ 1 · Palette

Six families

INK is the visual spine. CYAN is the brand accent. WARM + COOL are the canonical thermal pair. BLOOM is chlorophyll-only. DEPTH is bathymetry. Maximum 3 families + INK per illustration.

INK · spine

Primary linework, body text, annotations. INK 700 (#0a3d62) is the canonical 'BiteCast ink' for callouts.

INK 300

#475569

INK 500

#1e3a5f

INK 700

#0a3d62

INK 900

#0a1929

CYAN · brand accent

CTAs, interactivity, highlight strokes. Cyan 500 = the brand accent. Don't paint backgrounds with cyan — it's a foreground colour.

CYAN 50

#ecfeff

CYAN 100

#cffafe

CYAN 300

#67e8f9

CYAN 500

#06b6d4

CYAN 600

#0891b2

CYAN 700

#0e7490

CYAN 900

#164e63

WARM · warm water + Premium

Sub-tropical SST, EAC, warm-core eddy fills. Also used for Premium / Founders accent.

WARM 50

#fff7ed

WARM 100

#ffedd5

WARM 300

#fdba74

WARM 500

#f97316

WARM 600

#ea580c

WARM 700

#c2410c

WARM 900

#7c2d12

COOL · cool water

Tasman / Southern Ocean, cool-core eddies. Pairs with WARM as the canonical thermal split.

COOL 50

#f0f9ff

COOL 100

#e0f2fe

COOL 300

#7dd3fc

COOL 500

#0284c7

COOL 600

#0369a1

COOL 700

#0c4a6e

COOL 900

#082f49

BLOOM · chlorophyll productivity

Only when chlorophyll is the subject. Don't introduce green just for variety.

BLOOM 50

#f7fee7

BLOOM 100

#ecfccb

BLOOM 300

#bef264

BLOOM 500

#65a30d

BLOOM 600

#4d7c0f

BLOOM 700

#365314

BLOOM 900

#1a2e05

DEPTH · bathymetry / deep ocean

Bottom contours, deep-water shading. Slate spectrum.

DEPTH 300

#64748b

DEPTH 500

#334155

DEPTH 700

#1e293b

DEPTH 900

#0f172a

Semantic UI signals

UI states only — never use these in data viz (use the families above).

success

#10b981

warning

#f59e0b

danger

#ef4444

info

#06b6d4

§ 2 · Typography

Outfit + JetBrains Mono

Outfit for everything humans write — headings, body, CTAs. JetBrains Mono for everything measured — SST values, depths, ticket refs, diagram annotations. The split is load-bearing for the brand: numbers should look measured, not designed.

Outfit 800 · 48px · tracking -0.04em

An AI that sees what you see.

Outfit 700 · 24px · tracking -0.03em

Stop chasing the warmest water.

Outfit 400 · 16px · leading-relaxed

Skirts run on the surface — they ride the prop wash, period. To reach the upper thermocline you switch tools: diving hard-bodies, downrigger-rigged baits, or planer-pulled lures.

JetBrains Mono 700 · 11px · uppercase · tracking 0.06em

SST 22.4°C · TH-DEPTH 78M · MLD 28M

JetBrains Mono 400 · 12px

DORY-2026MAY14-A1F3 · Reply within 2h

§ 3 · Logo + mascot

BiteCast + Bruce + Dory

The wordmark is set in Outfit 800 with slightly tightened kerning. Bruce (shark dorsal fin) represents the in-app AI companion. Dory handles customer service. The two never appear together — context decides which.

BiteCast

The Fishing Forecast

Bruce · in-app

Dory · support

Both characters share the pin logo's nested-contour construction — three concentric outline strokes (decreasing weight inward) plus a small solid focal dot. Same DNA across the brand.

§ 4 · Illustration

Editorial-technical grammar

North star: NOAA chart × NYT graphics. Authoritative, scientific, restrained. Fills are stippling or hatching — never flat colour. All annotations in mono. Each diagram has one clear narrative + a maximum of three colour families plus INK.

Composable primitives

Every diagram pulls from lib/brand/svg-primitives.tsx. Boat, fish, school + the contour-styling marks (rings + bands) form the vocabulary — plus the finalised character marks Bruce + Dory:

Stroke + fill rules

• Primary boundary / front: 1.5–2px
• Body shapes (boat, fish): 1–1.5px
• Leader lines: 0.8px ending in a 1.5px filled circle
• Stipple / hatch: 0.4–0.6px
• Default fill = no fill. Use stipple/hatch when a fill is needed for area readability.
• Flat colour fills are reserved for the boat hull + Bruce.
• Gradients only for atmospheric warm-to-cool backgrounds in spatial illustrations.

Do / Don't

• Compose from primitives in lib/brand
• Mono labels, uppercase, leader-line callouts
• Stipple/hatch fills
• ≤3 colour families + INK
• Compass on geographic figures, depth scale on cross-sections

Don't

• Hardcode hex values in component files
• Use Outfit for measurements (use Mono)
• Flat-colour fill diagrams (use stipple/hatch)
• Introduce a 6th colour family
• Pull icons from external libraries

§ 5 · Voice

Direct, technical, Australian

AU spelling. Plain speech. We trust the user to handle real terminology. No corporate openers, no hype, no apology theatre.

Yes

“Stop chasing the warmest water. SST is about edges.”
“The EAC isn't a river. Stop trolling it like one.”
“We don't fight reasonable refund requests.”
“You're after a refund? Sign in and I'll sort it.”

“We're excited to announce…”
“Game-changing AI-powered insights”
“Best-in-class user experience”
“Let's dive in!”
“Unlock the power of…”

§ 6 · Background art

Atmospheric contour vectors

BCContourBackground renders blurred, stacked Bezier “ridges” for use behind hero sections + general ambient art. Three variants × four tones. Already live behind the homepage hero.

variant="swell" tone="cyan" (live on /)

variant="ridge" tone="ink"

variant="ocean" tone="cool"

variant="swell" tone="warm" · sharp (no blur)

Reference

• lib/brand/colors.ts — palette constants
• lib/brand/svg-primitives.tsx — illustration primitives
• components/ui/Icon.tsx — icon system
• app/globals.css — CSS variable definitions
• docs/brand.md — extended source-of-truth (deeper than this page)

Spotted a brand drift? Email hello@bitecast.com.au or update docs/brand.md directly.

← Back to BiteCast