MBON brand v1
Internal reference for the marinebon.org visual identity — colors, type, logo and the slide / poster conventions that follow from it. Not linked from the site navigation.
Internal · v1 · 2026-10-07 · source of truth: static/css/tokens/*.css in the site repo. This page is noindex and not listed anywhere; share the URL directly.
One identity, three places it shows up: the website (these CSS tokens), slides, and posters. Everything below derives from the website tokens so that the three stay in step. When a token changes on the site, change it here and in the PowerPoint theme.
Palette
Cobalt is the brand (logo, buttons); teal is the interactive accent (links, active state); coral is reserved for the single call to action on a page or slide; sun highlights data. Dark surfaces use navy and abyss, never pure black. Let one color dominate, use one accent, and keep coral rare.
- cobalt-500
#2456b8brand · logo blue · buttons · Office accent1 - cobalt-600
#1c44a0brand hover - teal-400
#38a7bbaccent · links · active · Office accent2 - teal-600
#15788faccent hover · link text · method facet - coral-500
#f2683faction · one CTA · Office accent3 - coral-600
#d24a2eaction hover - sun-400
#f5b53fdata highlight · Office accent4 - navy-700
#01375fprimary dark surface · title bands · Office dk2 - abyss-800
#082336deep panels over photography - abyss-900
#04131fdeepest background - ink-900
#0f2230strongest text · Office dk1 - ink-700
#1f3947headings - ink-500
#44606ebody text - ink-300
#8499a3muted · captions - text-on-dark
#eaf3f7text on navy / abyss - foam-50
#f6fafbpage background · Office lt2 - foam-100
#f1f7f9tinted surface · cards - line-200
#dbe5eadefault borders · gridlines
Facet colors tag the catalog (one hue per facet) and double as the categorical palette for charts, in this order:
- place
#01375fregions, places - method
#15788fobserving methods - org
#1a7a4eorganizations · Office accent5 - type
#b5651dtool / content types - portal
#6d4aa7OBIS, GBIF, EDI, ERDDAP · Office accent6 - content
#a83b6fpapers, tools, datasets - topic
#44606egeneral topics, years
Typography
Label · IBM Plex Mono · 12px · letter-spacing 0.14em · uppercase
Space Grotesk for display: observing life in the sea
IBM Plex Sans for body and UI. Humanist, scientific heritage, highly legible at small sizes. Use weight 400 for running text, 600 for lead-ins, and italic sparingly.
IBM Plex Mono for data: 24.55°N 81.78°W · AphiaID 1080 · ES(50)
- Display Space Grotesk 400–700: page titles, section heads, card titles, big numerals.
- Body / UI IBM Plex Sans 400–700 (+ italic): paragraphs, lists, buttons, captions.
- Data IBM Plex Mono 400–600: coordinates, identifiers, taxonomy tags, small labels.
- Scale 12 · 14 · 16 · 18 · 22 · 28 · 36 · 48 · 64 · 84 px (
--text-xsto--text-5xl). Line height 1.05 for display, 1.5–1.65 for body. - All three are open (OFL) and load from Google Fonts on the site. For slides and posters install them locally: Space Grotesk · IBM Plex .
Logo
- Cobalt wordmark on white or foam; white wordmark on navy, abyss or photography. No other recolors.
- Clear space of at least the height of the “M” on all sides; minimum width 120 px on screen, 1.5 in (38 mm) in print.
- The wordmark carries the full name, so do not repeat “Marine Biodiversity Observation Network” next to it.
Motifs
Two motifs carry across the site, slides and posters. Use them instead of decorative bars or stripes.
The pipeline. Place-based indicators are composed from four configurable elements; show them as four chips in this order and these colors.
- dataset
- place
- method
- delivery
Cards. Content sits in white or foam-100 cards with 10–16 px radius, a 1 px line-200 border or a soft shadow, and a mono label on top (the Label style above). Never an accent stripe along an edge, never a line under a title.
Slides and posters
The PowerPoint theme maps the tokens to Office’s scheme so colors can be picked by name and restyled in one place.
| Office slot | Token | Hex | Use |
|---|---|---|---|
| Text / dk1 | ink-900 | 0F2230 | body text on light |
| Background / lt1 | white | FFFFFF | slide background |
| Text 2 / dk2 | navy-700 | 01375F | title bands, headings |
| Background 2 / lt2 | foam-50 | F6FAFB | cards, tinted panels |
| Accent 1–6 | cobalt · teal · coral · sun · kelp · violet | 2456B8 38A7BB F2683F F5B53F 1A7A4E 6D4AA7 | charts, chips, icons |
| Hyperlink | teal-600 | 15788F | links |
- Slide 16:9, 13.33 × 7.5 in. Title 30–36 pt Space Grotesk bold in navy; mono label 11 pt teal above each block; body 14–16 pt IBM Plex Sans; 0.5 in margins. One message per slide; the all-hands one-slider uses the three blocks Overall goal · Recent successes · Recent challenges.
- Poster 24 × 36 in portrait (2 × 3 ft). Title 90 pt, section heads 48 pt, body 26–30 pt, captions 20 pt, readable from 1.5 m. Navy header band with the white wordmark, white body with foam cards, QR codes 2 in square in the footer.
- Templates mbon-template_v1.pptx (16:9 title, section, content and two-column layouts) · mbon-poster-template_v1_24x36.pptx (poster frame with header, card grid and footer). Both carry the theme above; the fonts must be installed on the machine that opens them.
- Figures use the facet palette for categories,
viridisfor continuous values (as in the H3 maps), and label axes in IBM Plex Sans withline-200gridlines.
Changing the brand
Edit static/css/tokens/colors.css or fonts.css, rebuild (hugo --gc --minify), then update this page and regenerate the templates. Bump to /brand/v2/ for any change that would make existing slides look off-brand; keep v1 online until the decks that use it are retired.