calcofi.io brand v1

One source for the theme, the header chrome, the logo, the favicon and the icon set that every CalCOFI product shares — served from https://calcofi.io/brand/v1/. v1 is the brand in force; it is frozen once adopted: token additions are fine, anything that changes how an existing page looks or behaves is v2, and consumers opt in. The rule is checked weekly, not assumed (scripts/check_brand.py).

v1 · in force v2 · proposed (the SIO look)

The contract, in one breath

Theme resolution — ?theme=dark|light on any URL → cookie cc_theme on .calcofi.io → localStorage.theme → dark. theme.js sets data-theme / data-bs-theme / data-md-color-scheme on <html> and fires cc:theme; maps, Plotly and Mermaid restyle on it. Never key on prefers-color-scheme.
The header — logo far left → https://calcofi.io; the product's title beside it → its own root; the theme toggle at the right shows what a click switches to (a sun while the page is dark, a moon-in-sun while it is light). Where a framework owns the bar (Quarto, pkgdown, mkdocs, bslib) the logo goes in its brand slot and its toggle is bridged — never two bars, never two toggles.
The favicon set, except calcofi4r (hex) and calcofi4py (squircle).
?tour=off suppresses any guided tour, so live_url?theme=<t>&tour=off is a deterministic screenshot.

Header and release chip

The bar above is the contract's header, drawn by theme.css alone (explicit font, colour, size, so it reads the same inside a Bootstrap page as on a plain one). The chip a product puts beside its title to say which database release it is reading:

release v2026.08.25→ the schema site at that version

<header class="cc-header">
  <a class="cc-home" href="https://calcofi.io" aria-label="CalCOFI.io home">
    <img class="cc-logo-dark"  src="https://calcofi.io/brand/v1/logo_calcofi.svg"       alt="CalCOFI" width="32" height="32">
    <img class="cc-logo-light" src="https://calcofi.io/brand/v1/logo_calcofi_light.svg" alt="CalCOFI" width="32" height="32">
  </a>
  <a class="cc-title" href="./">Product</a>
  <span class="cc-spacer"></span>
  <nav class="cc-links"><a href="…">query</a><a href="…">docs</a></nav>
  <button class="cc-theme-toggle" type="button" aria-label="Toggle dark / light theme">🌓</button>
</header>

Tokens & contrast

Read live from theme.css: each text token against the --bg and --panel grounds of its theme, WCAG AA (4.5:1) marked ✓.

token	dark			light			role
	value	on bg	on panel	value	on bg	on panel

Icons

48 glyphs on the 24-px grid — Material Design Icons (Pictogrammers, Apache-2.0) plus the bespoke marine set (drawn by CalCOFI/explore scripts/icon_glyphs.py): cat-* the twelve data categories, lens-* the Explorer's lenses, realm-*, ui-*. icons.css exports each as a mask (<i class="cc-i cc-i-cat-fish"></i> draws it in the text colour on any page); icons/calcofi-icons.svg is the same set as a sprite for same-origin <use>. The full contact sheet at 16 / 24 / 40 px →

Files

file	what
`head.html`	the `<head>` block to paste verbatim, before any stylesheet: favicon links, the inline pre-paint snippet, `theme.css`, `theme.js`
`theme.css`	the tokens (`--bg --panel --panel-2 --border --fg --muted --accent --accent-d --warn`, both themes), `.cc-header` / `.cc-footer`, `.cc-release`, `.cc-dark-only` / `.cc-light-only` image pairing, the toggle icons as `--cc-icon-sun` / `--cc-icon-moon`
`theme.js`	resolve → apply → persist → toggle → notify (`cc:theme`); draws the toggle's icon over the 🌓 fallback
`icons.css` · `icons/`	the icon set as CSS masks and as a sprite, with its contact sheet
`logo_calcofi.svg` · `logo_calcofi_light.svg`	the mark on a dark / light ground
`favicon.ico` · `favicon-32x32.png` · `favicon-16x16.png` · `apple-touch-icon.png`	the favicon set
`README.md`	the contract in full — resolution order, the toggle, bridging a framework's own bar, the new-product checklist

Consumers in R: calcofi4r::cc_brand_head(), cc_brand_header(mode = cc_theme(request)), cc_is_dark(input), cc_tour_enabled(). Quarto: include libs/brand/quarto_head.html + quarto_header.html.