MotherDuck — Design Extract Preview (Mallard)

A · Palette

Mallard ground, warm-paper ink, same duck-pond accents.

The paper/ink relationship inverts — a dark, warm near-black ground with light "ink" text and borders. The five accent hues carry over; garden and watermelon are nudged brighter to stay legible after dark.

bg (ground)

#1b1a17

surface

#242320

ink (text/border)

#f4efea

ink-muted

#a8a296

brand orange

#ff9538

sky

#6fc2ff

garden (dark-tuned)

#3fe0c5

sun

#ffde00

watermelon

#ff7169

B · Typography

Same faces, re-inked for the dark ground.

Unchanged from default: Aeonik Fono (substitute Space Grotesk) for the hero display, Aeonik Mono (substitute Space Mono) for section headlines, Inter for body. Only the colour role flips from ink-on-paper to paper-on-ink.

Display / H1 · Space Grotesk · 500 · UPPERCASE

Data Warehouse Built for Agents

Section head · Space Mono · UPPERCASE · 32px

An Agent-First Architecture

Body · Inter 300 · 18px

Everything between your data and an answer — compute, storage, and the agent tooling that ties them together.

Label · Inter UPPERCASE · +0.02em

Customers building on MotherDuck

C · Components

Pale stickers on a dark ground.

Buttons keep their light fills with dark text for contrast; the sticker shadow flips from dark-on-light to light-on-dark, reading as a pale ledge behind each panel.

Try 7 Days Free Book a Demo Standard

StandardJumboMegaGiga

A Duckling

Isolated compute instance, hover to see the shadow grow.

"MotherDuck's architecture is an excellent fit for the kind of exploration and unpredictable queries that agents need to be useful."

Read case study

D · Tokens

Quick token summary.

:root {
  --color-bg:      #1b1a17;   /* warm near-black ground */
  --color-surface: #242320;
  --color-ink:     #f4efea;   /* text, borders, hard shadows */
  --color-ink-muted: #a8a296;

  --color-brand-orange: #ff9538;   /* unchanged */

  --color-sky:        #6fc2ff;
  --color-garden:      #3fe0c5;   /* brightened for dark */
  --color-sun:         #ffde00;
  --color-watermelon:  #ff7169;

  --font-display: "Aeonik Fono", sans-serif;   /* uppercase only */
  --font-mono:    "Aeonik Mono", monospace;    /* uppercase only */
  --font-body:    "Inter", sans-serif;

  --radius:        2px;
  --border-weight: 2px;
  --shadow-hard:   -4px 4px 0 0 var(--color-ink);

  --duration-fast: 120ms;
  --duration-snap: 30ms;
}