# MotherDuck — Design Extract (Mallard variant)

Source: https://motherduck.com/ (captured 2026-09-17).
Build platform: Next.js (Pages Router) + styled-components (runtime CSS-in-JS) with a thin layer of Tailwind utility classes.
Variant: **Mallard** — an alternative color scheme. Structure, type, layout, and
components are unchanged from `design-default.md`; only the palette inverts from a warm
paper ground with ink borders to a mallard‑feather near‑black ground with warm‑paper
borders/text — the same duck‑pond accent hues, read after dark.
This document describes the visual design of the home page. It is a reference, not a set of instructions.


---


## 1. Overall Style

Unchanged from `design-default.md`: the crisp, near‑square‑cornered "sticker" language —
2 px structural borders, flat blur‑free offset shadows, Aeonik Fono display / Aeonik
Mono headlines / light‑weight Inter body — carries over exactly. Reading it at night is a
natural extension: a mallard drake's head reads near‑black with an iridescent sheen, so
the paper‑and‑ink relationship simply inverts — ink becomes the light warm tone and the
page ground becomes a dark, slightly warm charcoal. The five duck‑pond accent hues
(sky, garden, sun, watermelon, brand orange) are unchanged; two are nudged brighter so
they keep enough contrast on the dark ground.

Hero tagline (unchanged): "Data Warehouse Built for Agents" — "Fast, serverless
analytics powered by DuckDB — with dedicated compute for every user and every agent.
Build a data stack in one prompt, or plug into the one you have."


## 2. Colour Palette (generic description)

The palette inverts the neutral scale into a warm near‑black ground with warm‑paper
"ink," keeps the 2 px structural border and hard offset shadow in that same light tone
instead of dark, and keeps the five accent hues from the default — brightening garden
and watermelon slightly for legibility.

| Hex | Role |
|---|---|
| `#1B1A17` | Page ground — warm near‑black (was the paper tint) |
| `#242320` | Card / panel surfaces |
| `#2C2A25` | Secondary surface, alternating bands |
| `#F4EFEA` | "Ink" — primary text, all 2 px borders, hard shadows (was `#383838`) |
| `#A8A296` | Muted ink — secondary text, ghost/rail elements |
| `#3A382F` | Hairlines inside diagrams |

**Brand orange** — `#FF9538`, unchanged. It pops harder on a dark ground and remains the
`::selection` colour and the glow/numeral accent.

**Duck‑pond accent system** — unchanged base hues; strong variants brightened where the
default's dark "strong" tone would disappear against the new dark ground:

| Hue | Base | Strong (dark‑tuned) | Used for |
|---|---|---|---|
| Sky | `#6FC2FF` | `#2BA5FF` (unchanged — already light) | Primary CTA fill, links, focus rings |
| Garden | `#16AA98` | `#3FE0C5` (brightened from `#068475`) | Diagram accents |
| Sun | `#FFDE00` | `#FFDE00` (unchanged — already pops) | Diagram accents, highlight numerals |
| Watermelon | `#FF7169` | `#FF6B60` (kept near‑original — still legible) | Diagram accents |

**Buttons** — unchanged fills: primary `#97D4FF` sky tint with dark‑ink text (`#1B1A17`)
for contrast, `:active` `#6FC2FF`; secondary `#F4EFEA` warm‑paper fill with the same dark
text, `:active` `#E1D6CB`. Because both button fills are already light, they read as pale
"sticker" chips set against the dark page — no re‑tuning needed beyond keeping their text
dark.

**Selection** — `::selection` stays the brand orange at ~67% alpha (`#FF9538AA}`), now
even more vivid against the dark ground.


## 3. Typography (generic)

Unchanged from `design-default.md` — Aeonik Fono (hero display, substitute **Space
Grotesk**), Aeonik Mono (section headlines, substitute **Space Mono**), Inter (body/UI,
free, unchanged). Colours follow the neutrals in §2: headings and labels sit on
`#F4EFEA` instead of `#383838`; muted copy sits on `#A8A296` instead of `#818181`.


## 4. Layout (generic)

Unchanged from `design-default.md` — same `1240px` / `1302px` content widths, 4/8 px
spacing rhythm, `556 / 728 / 960 / 1302px` breakpoints, and `2px` near‑square radius
scale. The header keeps its fixed position and noise‑gradient overlay; the overlay and
2 px bottom border now sit on the dark ground instead of paper.


## 5. Components (generic)

Unchanged in structure. The "sticker" panel keeps its `2px` border and flat offset
shadow, both now in warm‑paper (`#F4EFEA`) instead of ink, so the shadow reads as a pale
ledge behind the dark panel rather than a dark ledge behind a light one. Case‑study cards
swap their white fill for the `#242320` surface with the same `2px` light border.


## 6. Page Structure and Content (generic order)

Unchanged from `design-default.md` — same section order, same copy.


## 7. Assets (generic)

Unchanged from `design-default.md`. The grid‑pattern and noise‑gradient textures read
with more contrast against the darker ground; the dithered‑sky illustration behind the
agent‑tabs panel gains presence rather than losing it.


## 8. Motion (generic)

Unchanged from `design-default.md` — same `120ms` / `30ms` transform timings, same
diagonal shadow‑reveal hover on sticker panels, same `200ms` header cross‑fade.


## 9. Quick Token Summary (generic)

```css
:root {
  /* ground + neutrals (inverted) */
  --color-bg:           #1B1A17;   /* warm near-black page ground */
  --color-surface:      #242320;
  --color-surface-2:    #2C2A25;
  --color-ink:          #F4EFEA;   /* text, borders, hard shadows */
  --color-ink-muted:    #A8A296;
  --color-hairline:     #3A382F;

  /* brand (unchanged) */
  --color-brand-orange: #FF9538;

  /* duck-pond accents (base / dark-tuned strong) */
  --color-sky:        #6FC2FF; --color-sky-strong:        #2BA5FF;
  --color-garden:     #16AA98; --color-garden-strong:     #3FE0C5;
  --color-sun:        #FFDE00; --color-sun-strong:        #FFDE00;
  --color-watermelon: #FF7169; --color-watermelon-strong: #FF6B60;

  /* buttons — unchanged fills, dark text for contrast */
  --btn-primary-bg:    #97D4FF;  --btn-primary-active:   #6FC2FF;
  --btn-secondary-bg:  #F4EFEA;  --btn-secondary-active: #E1D6CB;
  --btn-text-on-fill:  #1B1A17;

  /* type — unchanged from design-default.md */
  --font-display: "Aeonik Fono", "Space Grotesk", ui-sans-serif, sans-serif;
  --font-mono:    "Aeonik Mono", "Space Mono", ui-monospace, monospace;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;

  /* geometry — unchanged from design-default.md */
  --space-unit:     4px;
  --max-width:      1240px;
  --radius:         2px;
  --border-weight:  2px;
  --shadow-hard:    -4px 4px 0 0 var(--color-ink);
  --shadow-hard-lg: -6px 6px 0 0 var(--color-ink);

  /* motion — unchanged from design-default.md */
  --ease:              ease-in-out;
  --duration-fast:     120ms;
  --duration-snap:     30ms;
  --duration-surface:  200ms;
}
```