# DataHub — Design Extract (Midnight / Dark)

Source: https://datahub.com/ (captured 2026-09-17).
Build platform: WordPress (Kadence theme + custom `datahub-blocks` plugin) with an extensive CSS custom-property design-token system.
This document describes a dark-mode counterpart built from the same tokens as [design-default.md](design-default.md) — DataHub's own home page ships light-only, but its button system already defines a complete parallel "dark-mode" (`--*-dm-*`) token set (e.g. `--btn-primary-dm-border: #3cbbeb`, `--btn-secondary-dm-fill: #0a4170`), so this variant recolors the page using DataHub's *own* dark tokens rather than invented ones. Typography, layout, components and copy are unchanged from the default extract.


---


## 1. Overall Style

Same framed-grid, serif-headline system as the default extract, rebuilt on the deep navy the live site already reserves for its darkest accents.

- The canvas becomes `#002131` — the site's own deepest navy token (used on the light site only for hero-headline text and the capability-tab background) — instead of warm paper.
- Primary text flips to a soft off-white (`#e3e1d6`, the light site's own border/neutral-2 token) rather than pure white, keeping the same slightly warm, never-stark contrast the light mode has.
- The brand hue inverts in emphasis: bright cyan (`#3cbbeb`) becomes the primary CTA/accent color on dark (this is DataHub's own documented dark-mode primary-button border/hover value), while the light-mode cobalt (`#006dcd`) recedes to a secondary/fill role.
- The signature "frame + tiles" grid pattern (see default extract §4) carries over exactly, just recolored: the frame becomes a lighter navy (`#0a4170`) and the tiles become a slightly-lifted dark surface instead of white.
- Corners, spacing, section rhythm and the sweep-fill button motion are all unchanged.


## 2. Color Palette (dark)

All values below are real tokens already present in the live CSS as the `-dm-` (dark-mode) variants of the default extract's button/surface system — none are invented.

| Token | Hex | Role |
|---|---|---|
| `--bg` (page ground) | `#002131` | Deepest navy — the light site's own text/tab-background color, used here as the canvas |
| `--surface` (lifted panel) | `#0a4170` | Mid navy — the light site's own CTA-hover color, used here as a card/frame fill |
| `--text` | `#e3e1d6` | Soft off-white — the light site's own border/neutral-2 token, reused as text |
| `--muted` | `#9ccfff` (blue-3) | Muted on-dark secondary text |
| `--border` | `#0a4170` | Frame background on dark |
| `--btn-primary-dm-border` | `#3cbbeb` | Primary CTA fill/border on dark (bright cyan) |
| `--btn-primary-dm-hover-fill` | `#3cbbeb` | Primary CTA hover sweep fill |
| `--btn-primary-dm-hover-out-text` | `#002131` | Text color once the cyan sweep covers the button |
| `--btn-secondary-dm-fill` | `#0a4170` | Secondary button fill on dark |
| `--btn-secondary-dm-hover-fill` | `#006dcd` | Secondary button hover (cobalt) |
| `--btn-text-dm-color` | `#e3e1d6` | Plain text-link color on dark |
| cyan tile accent | `#cff6ff` | Stat numbers / headings on dark tiles |

All other tokens (radius scale, fonts, spacing, motion) are unchanged from [design-default.md](design-default.md).


## 3–8. Typography, Layout, Components, Structure, Assets, Motion

Unchanged from the default extract — see [design-default.md](design-default.md) sections 3–8. Plantin MT Pro remains the display serif, Lab Grotesque the body sans; the 2.5px/6px/10px radius scale, the 1320px/1096px content widths, the frame+tiles grid pattern, and the `.25s` sweep-fill button hover all carry over as-is — only the fills, borders and text colors above apply.


## 9. Quick Token Summary (dark)

```css
:root {
  /* ground + neutrals (dark — DataHub's own -dm- tokens) */
  --bg:      #002131;  /* deep navy, the light site's own hero-headline color */
  --surface: #0a4170;  /* mid navy, the light site's own CTA-hover color */
  --text:    #e3e1d6;  /* soft off-white, the light site's own border/neutral-2 */
  --muted:   #9ccfff;
  --border:  #0a4170;

  /* primary CTA on dark — real DataHub dark-mode button tokens */
  --btn-primary-dm-border:      #3cbbeb;
  --btn-primary-dm-hover-fill:  #3cbbeb;
  --btn-primary-dm-hover-out-text: #002131;

  /* secondary CTA on dark */
  --btn-secondary-dm-fill:       #0a4170;
  --btn-secondary-dm-hover-fill: #006dcd;

  /* unchanged from default */
  --font-display: "Plantin MT Pro", Georgia, serif;
  --font-body:    "Lab Grotesque", Arial, sans-serif;
  --btn-outer-radius: 2.5px;
  --btn-inner-radius: 6px;
  --radius-tile:      10px;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --dur-sweep: .25s;
}
```