TerraPulse — Design Handoff & Brand Spec
Tracking issue: #226 — New logo + brand asset refresh
Purpose: a fill-in spec for the art department. The left columns describe every brand style currently in use and what it's for; the New value column is blank for you to propose updated values. Part 3 covers the new logo deliverables.
How these get applied: colors and fonts are defined as design tokens in one
file (web/src/styles/global.css). Changing a token's value updates every place
it's used across the site automatically — so you only need to give us one value
per row. (Per-article hero/accent colors are separate "content" colors and are
listed in §4.)
⚠️ Hard accessibility constraint — do not regress. A primary user has low vision. The site is intentionally large, chunky, and high-contrast. Any new palette must keep strong contrast (aim for WCAG AA: ≥ 4.5:1 for text on its background, ≥ 3:1 for large text/UI). Don't trade legibility for subtlety. When in doubt, go bolder/larger, not finer.
1. Core brand palette
Grouped by color (a single color may power several token names — fill in one new value per row and it propagates to all of them).
| Current value | Name | Token name(s) | Purpose / where used | New value |
|---|---|---|---|---|
#091E1A |
Deep Forest | tp-green-dark, tp-text, forest |
Nav bar, footer, all headings, body text | |
#1AAB7A |
Viridian | tp-green (viz-1) |
Primary accent, buttons / CTAs, active states | |
#148A62 |
Evergreen | tp-green-light |
Hover / pressed depth on green elements | |
#22C3D4 |
Cyan Flare | tp-teal (viz-3) |
Secondary accent; the "Pulse" in the wordmark | |
#3B8FD9 |
Arctic Blue | tp-blue |
Links, info highlights | |
#EDF5F2 |
Seafoam Mist | tp-bg, seafoam-mist |
Default light page background | |
#F6FAF8 |
Frost | tp-card, frost |
Elevated card / panel surfaces | |
#3D5C53 |
Verdigris | tp-muted, verdigris |
Secondary / muted text, captions | |
#DDE9E4 |
Glacier | tp-border, glacier |
Hairline borders, dividers | |
#7A9B90 |
Pewter | pewter |
Muted mid-tone accents | |
#B8D4CA |
Celadon | celadon |
Soft light accents |
2. Semantic / status colors
| Current value | Token name | Purpose | New value |
|---|---|---|---|
#D4453A |
coral |
Danger / error | |
#22c55e |
status-live |
Live-feed indicator dot — connected | |
#ef4444 |
status-down |
Live-feed indicator dot — disconnected |
3. Typography
| Role | Current font | Weights | Where used | New font (optional) |
|---|---|---|---|---|
| Display / headlines | Libre Baskerville (serif) | 400, 700 | Page titles, article headlines, brand serif | |
| Body / UI | Montserrat (sans) | 400–800 | All body text, nav, buttons, labels | |
| Mono / data | JetBrains Mono | 400 | Code, data tables, timestamps, tags | |
| 7-segment readout | DSEG7-Classic | 400 | Live-ticker timestamps only (the LED-style clock) |
Fonts load via a Google Fonts
<link>(Montserrat, Libre Baskerville, JetBrains Mono) plus a self-hosted DSEG7 woff2. If you change a font, give us the family name + source (Google Fonts slug or a woff2 file) and the weights needed.
4. Functional palettes (change only if re-theming the data viz)
These power data displays, not brand chrome. They're intentionally distinct hues so categories stay distinguishable. Recolor only if you're redesigning the data visuals — and keep them mutually distinguishable + high-contrast on dark.
Live-ticker event colors (one per hazard type). Most mirror a standard palette shade; three are custom and most likely to need art direction:
| Current value | Token | Meaning | New value |
|---|---|---|---|
#FF4F00 |
event-volcano |
Volcano (custom "International Orange") | |
#FFFF00 |
event-lightning |
Lightning (custom pure yellow) | |
#DC143C |
event-alert |
Critical alert (custom crimson) |
The other ~18 event colors (quake, storm, tornado, flood, flare, meteor, etc.) currently mirror standard palette shades. Full list lives in
docs/PALETTE.md§2f if you want to retheme the whole set.
Knowledge-graph palette (the /garden + lab graph node/edge colors):
| Current value | Token | Meaning | New value |
|---|---|---|---|
#2563eb |
graph-datasource |
Data-source nodes | |
#d97706 |
graph-metric |
Metric nodes | |
#7c3aed |
graph-workspace |
Paper / workspace nodes + citation edges | |
#059669 |
graph-finding / verdict-positive |
Findings / positive result | |
#dc2626 |
verdict-negative |
Negative / anti-correlation result | |
#9ca3af |
verdict-null |
Null result | |
#1B5E4B |
graph-accent |
Graph UI chrome (see brand-green note below) |
Categorical chart ramp (viz-1…viz-6) — reserved for future charts:
#1AAB7A, #1B6B9A, #22C3D4, #5E8C4A, #7A7EB5, #8CC4B4. Provide a
6-color categorical set if you want to define the house chart palette.
Per-article hero colors are content, not tokens — each article has its own
accentColor + bgColor pair in web/src/data/features.ts. Leave these to
editorial unless you want to define a house set of article themes.
⚠️ 5. Brand greens currently OUTSIDE the token system — please reconcile
These appear in the logo and browser chrome but are not in the palette above, so they can drift. Please give us canonical values (ideally aligned to the core palette) so everything matches:
| Current value | Where it's used | New value |
|---|---|---|
#1B5E4B |
Logo (globe body), browser theme-color, PWA manifest, graph accent | |
#4FA882 |
Logo (globe top highlight) | |
#2196F3 |
Logo (blue accent / water) | |
#2E7D5F |
Browser theme-color (light mode) | |
#F5F7FA |
PWA splash background (background_color) |
6. Logo & icon assets
Current logo
- File:
web/public/logo.svg— a globe mark, viewBox0 0 105.79 78.41(~106 × 78), 3 fills:#4FA882(top),#1B5E4B(body),#2196F3(accent). - Rendered: in the nav at 36 px tall (
h-9 w-auto), to the left of the "TerraPulse" wordmark ("Terra" regular + "Pulse" in Cyan Flare#22C3D4, set in Libre Baskerville). - No standalone wordmark file — the wordmark is live text, not an asset.
Current icon/asset inventory (what a rebrand must regenerate)
| Asset | Size(s) | Format | Used for |
|---|---|---|---|
favicon.ico |
16, 32 | ICO | Legacy browser tab icon |
favicon-16/32/48/64/96/128/180/192/256/512.png |
as named (px) | PNG | Tab icons, Android, general |
apple-touch-icon.png |
180×180 | PNG | iOS home-screen icon |
favicon-512x512.png (maskable) |
512×512 | PNG | PWA install / maskable icon |
og-image.png |
1200×630 | PNG | Social share card (default) |
site.webmanifest |
— | JSON | PWA name/colors/icon manifest |
New-logo deliverables (checklist for the art dept)
Please provide:
- Master logo — vector SVG, on a transparent background, with the artboard cropped tight. Note the intended aspect ratio.
- Color variants: (a) full color, (b) a monochrome / single-color
version, (c) versions that read on both the dark nav (
#091E1A) and light backgrounds (#EDF5F2). The nav renders the mark at ~36 px tall — confirm it's legible that small. - Wordmark direction — keep "TerraPulse" as live text (give us font + color), or deliver a locked wordmark/lockup as SVG.
- Favicon set — regenerate every size above from the new mark: PNG at
16, 32, 48, 64, 96, 128, 180, 192, 256, 512; plus a multi-res
favicon.ico(16+32). Must stay recognizable at 16 px. apple-touch-icon.png— 180×180, with a small safe margin (iOS rounds corners).- Maskable icon — 512×512 with all content inside the 80% safe zone (centered, ~410 px) so Android's mask doesn't clip it.
- OG share image —
og-image.pngat 1200×630 (default social card). - Browser/PWA colors — confirm the
theme_colorand splashbackground_color(see §5) to updatesite.webmanifest+ thetheme-colormeta tags.
Hand any of this back as files (SVG/PNG) + the filled-in tables above, and we'll wire the values into the token system and swap the assets.
7. Art-dept proposal — concept direction (round 1)
First pass from the art dept (returned 2026-05-29, commit bf906d1). These are
named concepts, not hex values. The source deck is now in the repo at
docs/IMG_4084.JPG, with Brad's accompanying notes transcribed in §8 below.
Still not fully implementable: the deck shows named swatches but prints no
hex (values must be eyedropped/approximated or confirmed by Brad), and the new
logo is raster only (no vector SVG yet).
Concept → where it maps:
- Neural Network Navy — base dark (nav/footer/text) + logo body + browser theme-color
- Datastream Cyan — proposed for primary accent, secondary ("Pulse"), and links (⚠ collapses three currently-distinct roles into one — REJECTED, see Resolutions below)
- Clarity White — light page background + PWA splash + light-mode theme-color
- Signal Red — danger / disconnected status / critical alert
- Map Element Orange — volcano event · Solar Amber — lightning event
- Government Data Blue — graph data-source · Scientific Source Plum — workspace · Seedling Green — finding/positive · Fertile Soil Charcoal — graph accent
- Atmospheric Silver — logo highlight · Oceanic Azure — logo water accent
- Fonts: unchanged. Several rows left "derived/blank".
Logo: still the "CORE MARK" concept only — no vector asset yet (pending
vectorization). Full filled-in table is preserved in git history at bf906d1.
Resolutions (EIC, 2026-06-07)
DECISION — adopt the three-concept system AS PRESENTED. Brad's deck
(docs/IMG_4084.JPG) is not three competing whole-site skins; it is one brand
(the "CORE MARK" Terra Pulse rings logo) with three contextual palettes that
switch by section of the site. This is Brad's stated intent ("the system can
visually shift depending on the context of the data being presented"). The earlier
reading of "Coupled Earth as the sole site palette" was a misunderstanding and is
retired.
Palette → section mapping (per Brad's "Applications" notes, §8):
| Palette | Concept | Applies to |
|---|---|---|
| Statistical Discipline | Navy / Clarity White / Signal Red / Datastream Cyan | The Paper Machine: papers, /articles, workspaces, statistical grids |
| Coupled Earth | Terra Firma Brown / Oceanic Blue / Atmospheric Silver / Solar Amber–Orange | The Living Map: live map, ticker, forecasting, compound-risk displays |
| Data Garden | Fertile Soil Charcoal / Seedling Green / Gov-Data Blue / Academic Plum / Sensor Orange / Autosense Aqua | The lab, autosense fetcher UI, /garden graph, API docs |
Implications for this doc: the §1/§5 "New value" columns (which led with a single Neural-Network-Navy base) captured a one-base synthesis, not the chosen contextual system. They are superseded by the mapping above and should be re-derived per section.
Standing affordance rule (unchanged): wherever a palette uses one hue for links and accents (notably Statistical Discipline's Datastream Cyan), links must also carry a non-color signal (e.g. underline) — low-vision affordance, WCAG 1.4.1. Do not let "is this a link?" depend on hue alone.
Open before implementation:
- Exact hex — deck prints none. Eyedrop/approximate from
IMG_4084.JPGto start, or get canonical values from Brad. - Vector logo — the CORE MARK is raster only; need an SVG + the favicon/OG set (§6).
- Per-section theming mechanism — the token system is currently one global
set in
global.css; contextual palettes need section-scoped token overrides. This is an architecture decision, not just new values.
8. Art-dept source — the deck + Brad's notes (verbatim)
Source image: docs/IMG_4084.JPG. Brad's accompanying message, transcribed
verbatim for provenance (this is the canonical statement of the three-concept
system; EIC chose to adopt it as presented — see §7 Resolutions):
Here are three distinct branding concepts and color palettes derived from the mission statement, using your logo as the foundation. I have broken these down into three primary directions that represent the core work of Terra Pulse.
The Overall Branding Presentation: I've laid these ideas out on a sleek, minimalist presentation board. Each panel features specific palettes and conceptual supporting imagery inspired by your text.
1. The 'Statistical Discipline' Palette (The Paper Machine) — focuses on the rigor and honesty of the data analysis; "collapsing uncertainty" through clean science and open code. Vibe: analytical, reliable, deeply knowledgeable. Palette: Neural Network Navy (Base) — deep, structured data; Clarity White — pure, unvarnished insight; Signal Red (Warning) — honest null results and corrected anomalies (Bonferroni / "correction is the science"); Datastream Cyan — technological accent for connecting datasets. Applications: The Paper Machine, reproducible workspaces, statistical grids, any interface where mathematical rigor is paramount.
2. The 'Coupled Earth' Palette (The Living Map) — focuses on the 'coupled systems' of the planet: Sun, Moon, Earth, Ocean, Atmosphere; visualizes the pulse of 'The Living Map.' Vibe: vital, dynamic, elemental, interconnected. Palette: Terra Firma Umber/Brown — central anchor (the central circle of the logo); Oceanic Blue — tides/oceanography, ocean-moon connections; Atmospheric Gray/Silver — air quality, inversions, meteorological chemistry; Solar Amber/Burnt Orange — solar wind and volcanic heat. Applications: 'The Living Map' visualizations, forecasting interfaces, compound risk index displays.
3. The 'Data Garden' Palette (Fertile Cross-Pollination) — focuses on ingesting diverse datasets and cultivating compound insights (cross-pollination). Vibe: cultivated growth, fertile data, diversified input. Palette: Fertile Soil Charcoal — dark, rich medium for all data; Seedling/Growth Green — vibrant, saturated, almost artificial green for digital growth from ingested data; Diverse Source Spectrum — distinct bold colors for diverse inputs (Gov-Data Blue, Academic Plum, Sensor Orange, etc.) then synthesized. Applications: the autosense fetcher interface, the Lab, data cross-pollination visualization tool, open API documentation.
I have rendered the main logo (with 'TERRA' above 'PULSE') and adapted the color pulse within each panel to show how the system can visually shift depending on the context of the data being presented.