# MotherDuck — Design Extract (Default)

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 for a few components; a small `--sim-*` custom-property set drives the interactive architecture diagram.
This document describes the visual design of the home page. It is a reference, not a set of instructions.


---


## 1. Overall Style

MotherDuck employs a warm‑paper, hand‑drawn "duck pond" aesthetic laid over a crisp engineering‑diagram structure — playful branding for a serious infrastructure product.

- The canvas is a warm off‑white paper tone (`#F4EFEA`) behind a fixed header, with page sections alternating white (`#FFFFFF`) and the same warm‑paper tint. Default text is a soft ink black, never pure black.
- Corners are almost square: a 2 px radius is used everywhere a "radius" exists at all (buttons, cards, panels). True circles (`50%`) appear only for avatars/dots; a rare pill (`9999px`) and one asymmetric "speech‑bubble" corner (`16px 16px 2px 16px`) are the exceptions.
- Structural elements — buttons, cards, diagram panels — carry a heavy **2 px solid ink border**, not a soft 1 px hairline. Depth comes from a **hard, blur‑free offset drop‑shadow** in the same ink colour (`-4px 4px 0 0 #383838`, sometimes `-6px 6px`), like a sticker cut out and set down on the page; on hover the element slides 2–3 px away from its shadow, so the gap (and the sense of lift) grows.
- One master brand colour, a warm orange (`#FF9538`), is used sparingly but tellingly: it is the `<meta theme-color>`, the `::selection` highlight, and the colour behind a few oversized mono numerals and glow accents. The homepage itself leans on a *duck‑pond* colour system instead — sky blue, garden teal, sun yellow and watermelon coral — used for the interactive compute/architecture diagram and scattered chips.
- Three type voices: a quirky uppercase display face (**Aeonik Fono**, commercial) for the hero H1, a monospace uppercase face (**Aeonik Mono**, commercial) for section headlines and technical labels, and **Inter** (free) at a light weight for body copy and for uppercase nav/button labels (tracked +0.02em). Code blocks fall back to Source Code Pro / JetBrains Mono.
- The page reads like a spec sheet crossed with a picture book: interactive SVG architecture diagrams (hypertenancy "Ducklings" sized `STANDARD` / `JUMBO` / `MEGA` / `GIGA`), a tabbed agent‑client panel with real brand‑coloured tool icons (Claude Code, Cursor, ChatGPT, DuckDB), dense integrations logo grid, and duck‑illustration textures (a dithered SVG, a faint grid‑pattern PNG, a noise‑gradient PNG behind the header).
- Motion is short and snappy: 120 ms ease‑in‑out transform transitions with a 30 ms "snap" on `:active`, plus the diagonal shadow‑reveal hover described above. Nothing loops except a couple of ambient background effects behind diagram panels.
- Hero tagline: "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 pairs a warm‑paper neutral ground with an ink border/text colour and a five‑hue "duck pond" accent system; one saturated brand orange is reserved for selection and emphasis.

| Hex | Role |
|---|---|
| `#F4EFEA` | Page/header ground — warm paper tint |
| `#FFFFFF` | Card / panel surfaces, alternating section bands |
| `#F8F8F7` | Secondary off‑white surface (diagram "done" fill) |
| `#383838` | Ink — primary text, all 2 px borders, hard shadows |
| `#818181` | Muted ink — secondary text, ghost/rail elements |
| `#666666` / `#575757` | Disabled text / darker secondary text |
| `#D7D7D7` / `#E8E8E8` | Hairlines inside diagrams |
| `#ECE6DF` / `#E1D6CB` | Warm neutral tints (idle fill, secondary‑button active) |

**Brand orange** — `#FF9538` (base). Used for `theme-color`, `::selection` (at ~67% alpha), a couple of oversized Aeonik‑Mono numerals, and soft radial glows. This is the one colour that is "MotherDuck" the way pink is "Mux."

**Duck‑pond accent system** — each hue ships as a base / strong / tint triad, reused across the interactive diagrams:

| Hue | Base | Strong | Used for |
|---|---|---|---|
| Sky | `#6FC2FF` | `#2BA5FF` | Primary CTA fill (`#97D4FF` tint), links, focus rings |
| Garden | `#16AA98` | `#068475` | Diagram accents, success‑style states |
| Sun | `#FFDE00` | `#BFA800` | Diagram accents, highlight numerals |
| Watermelon | `#FF7169` | `#E23F35` | Diagram accents, alert‑style states |

**Buttons** — primary fill `#97D4FF` (sky tint) with ink text/border, `:active` fill `#6FC2FF`; secondary/ghost fill `#F4EFEA` with ink text/border, `:active` fill `#E1D6CB`.

**Selection** — `::selection` is the brand orange at ~67% alpha (`#FF9538AA`).

**Brand icon colours (borrowed, not site tokens)** — the "Agent‑native Analytics" tab strip renders each AI tool's own mark in its real brand colour, e.g. Claude's terracotta `#D97757`.


## 3. Typography (generic)

- **Aeonik Fono** (commercial) — a rounded, slightly eccentric display face, always uppercase, weight 400. Used only for the hero H1 and a few large standalone headlines.
- **Aeonik Mono** (commercial) — a monospace cut of the same family, always uppercase. Used for every section H2, plus technical labels, large numerals and the diagram chrome.
- **Inter** (free, self‑hosted `.woff2`) — the workhorse: body copy at weight 300 (light), UI text at 400, and — uppercase with `+0.02em` tracking — every nav item, button label and small caption.
- **Source Code Pro**, falling back to a self‑hosted "JetBrains Mono" variable font — code snippets and SQL examples.
- **Substitutes** (free): swap Aeonik Fono → **Fraunces** or **Space Grotesk** (uppercase) for the quirky display feel; Aeonik Mono → **Space Mono** or **JetBrains Mono**; Inter is already free.

### Type scale (desktop, ≥1302px unless noted)

| Token | Font | Size / weight | Line‑height | Use |
|---|---|---|---|---|
| H1 (hero) | Aeonik Fono | 28→40→44px / 400, uppercase | 1.09–48px | "Data Warehouse Built for Agents" |
| H2 (section) | Aeonik Mono | 28→32→40px / 400, uppercase | 1.2 | "An Agent‑First Architecture" etc. |
| H2 (small variant) | Aeonik Fono | 30px / 400, uppercase, tracking 0 | 1.2 | Card‑level headlines (e.g. blog module) |
| Body / subhead | Inter | 16→18px / 300 | 1.6 | Hero paragraph, section intros |
| UI label / nav / button | Inter | 14–16px / 400, uppercase, +0.02em | 1.2 | Nav items, button text, tabs |
| Large mono numeral | Aeonik Mono | 56px / 400 | 1 | Standalone stat callouts, orange‑coloured |
| Code | Source Code Pro / JetBrains Mono | 13–14px / 400 | ~1.5 | SQL / shell snippets |

### Heading pattern

Section blocks lead with an Aeonik‑Mono uppercase H2 (28–40px) immediately followed by a light‑weight Inter paragraph — no separate eyebrow/kicker line; the mono headline itself acts as the label.

*(Font names have been kept as found; substitutes above are free stand‑ins for the two commercial Aeonik cuts.)*


## 4. Layout (generic)

- **Header** is fixed/full‑width, `#F4EFEA` background, a faint noise‑gradient PNG overlay, and a 2 px bottom border that stays transparent until scroll.
- **Content width**: header inner column caps at `1302px` (padding `0 30px`); section content caps at `1240px`, centered.
- **Spacing unit**: base 4 px, used in practice as an 8 px rhythm — common steps `4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96`. Section vertical padding runs `56–96px` on desktop.
- **Breakpoints**: `556px`, `728px`, `960px`, `1302px`.
- **Radius scale**: `2px` (default — near‑square), `50%` (circular dots/avatars), `8px` (a few softer cards), `9999px` (rare pill), one bespoke `16px 16px 2px 16px` speech‑bubble corner.
- **Border weight**: a heavy `2px solid #383838` is the default structural border for buttons, cards and diagram panels — far thicker than a typical 1 px hairline.
- **Shadow**: no soft/blurred shadows. Depth is a flat, blur‑free offset shadow in ink (`-4px 4px 0 0 #383838`, `-6px 6px` on larger elements) that grows as the element translates diagonally on hover.
- **Sections** stack as full‑width bands alternating white and paper‑tint backgrounds; case‑study and card grids sit inside a `1240px` contained column with `container-type: inline-size` (container‑query driven internal layout).


## 5. Components (generic)

- **Primary button** — `2px solid #383838` border, `2px` radius, fill `#97D4FF`, ink text, uppercase Inter 14px, padding `11.5px 18px`, `transform 120ms ease-in-out` on interaction, snaps with a `30ms` transition and fill `#6FC2FF` on `:active`. Disabled state: `#F8F8F7` fill, `#818181` border, `#666666` text.
- **Secondary button** — identical shape/metrics, fill `#F4EFEA`, `:active` fill `#E1D6CB`.
- **Text/ghost link button** (nav items, "VIEW ALL INTEGRATIONS") — no fill or border; Inter span with a `0.09em` ink underline that thickens and turns sky‑blue (`#6FC2FF`) on hover/active; icon paths tint the same blue on `:active`.
- **Diagram / accordion panel** — white fill, `2px solid #383838`, `2px` radius, hard offset shadow `-4px 4px 0 0 #383838`; on hover the panel (or its content) translates `2–3px` and the shadow offset grows to `-4/-6px`, revealing more of the "sticker" edge.
- **Case‑study card** — white fill, `2px solid #383838`, no radius/shadow, `min-height: 200–220px`, flex column with quote at top and a "Read case study" link (with chevron) pinned to the bottom.
- **Duckling size chips** — small uppercase Inter labels (`STANDARD`, `JUMBO`, `MEGA`, `GIGA`) inside the architecture diagram, each paired with a small ink dot icon.
- **Agent‑client tabs** ("Agent‑native Analytics") — a row of icon tabs (Claude Code, Cursor, ChatGPT, DuckDB CLI) rendered in each tool's real brand colour; active tab drives the panel content below (Skills / MCP Server / CLI).
- **Integrations logo grid** — a dense grid of monochrome‑on‑white partner logos (Fivetran, dbt, Airflow, Hex, Tableau, Looker, Omni, dltHub, PostgreSQL…), each cell bordered.
- **Footer link grid** — five‑ish column groups of plain Inter links under uppercase mono‑style group headers, on the warm‑paper ground.


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

1. **Header** — duck wordmark/logo; nav `PRODUCT · PRICING · DOCS · COMMUNITY · COMPANY`; right‑aligned `LOG IN` (text link) and `START FREE` (primary button).
2. **Hero** — H1 "Data Warehouse Built for Agents"; body "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."; primary CTA "Try 7 Days Free", secondary "Book a Demo"; a follow‑on row "Or start with your coding agent:" with Claude Code / Cursor / ChatGPT icons.
3. **An Agent‑First Architecture** (H2) — "Hypertenancy: an isolated compute instance for every person, dashboard, and agent. Run fast, highly concurrent queries without resource contention." Interactive "A Duckling" diagram with `STANDARD / JUMBO / MEGA / GIGA` size tiers.
4. **Serverless Analytics for Teams at the Frontier** (H2) — "Everything between your data and an answer — compute, storage, and the agent tooling that ties them together." Diagram covering Flights, Guides, Dives.
5. **Work with the tools you know** (H2) — "Build with the tools you love, from the latest in the data stack to your favorite languages." Integrations logo grid; CTA "VIEW ALL INTEGRATIONS".
6. **Customers building on MotherDuck** (H2, `#customers-heading`) — "Production apps, customer‑facing analytics, and internal insights — shipped on MotherDuck." Case‑study cards (Together AI, FinQore, and others) each with a pull‑quote and "Read case study" link.
7. **Agent‑native Analytics** (H2) — "Agents don't query like humans do. Use the skills, tools, and interfaces that fit your workflow best." Tabbed panel: Claude Code / Cursor / ChatGPT / DuckDB, surfacing Skills, MCP Server, CLI.
8. **Fresh from the flock** (H2) — "Tips, tricks, product news, and helpful resources from the MotherDuck team and beyond." Blog/resource card grid with a duck‑illustration accent image; CTA "Visit Blog".
9. **Footer** — big CTA, then link columns: **Product** (Overview, Hypertenancy, Dives, Flights, DuckLake, AI + MCP Server, Customer‑Facing Analytics, Data Warehousing + BI, REST API); **Compare** (vs Snowflake, vs BigQuery, vs Redshift, vs Databricks, vs ClickHouse, vs Postgres); **Resources** (Learn, Blog, Case Studies, Events, Videos & Streams, Research, Dive Gallery, DuckDB Newsletter, free guides/books); **Company** (About Us, Careers, Trust & Security, Support); legal row (Privacy Policy, Terms of Use, Support Policy).


## 7. Assets (generic)

- Duck wordmark/logo — flat ink‑black SVG.
- `/images/noise-bg-dual-gradient.png` — faint grain/gradient texture behind the fixed header.
- `/images/transparent-grid-pattern.png` — engineering‑graph‑paper grid used as a background texture in diagram sections.
- `/images/agent-native-dither-sky.svg` — a dithered sky/cloud illustration behind the agent‑tabs panel.
- Partner/integration logos — monochrome PNG/SVG wordmarks (Fivetran, dbt, Airflow, Hex, Tableau, Looker, Omni, dltHub, PostgreSQL, DuckDB, and more).
- Agent‑tool icons rendered in their real brand colours (e.g. Claude's terracotta `#D97757`).
- Duck illustrations (e.g. "arms‑up duck") as small decorative accents next to the blog module.
- Fonts self‑hosted as `.woff2` (Aeonik Mono, Inter); Aeonik Fono/Source Code Pro loaded similarly.


## 8. Motion (generic)

- Default transition: `transform 120ms ease-in-out`; `:active` snaps back in `30ms`.
- Diagram panels: `background-color`/`box-shadow` transitions at `200ms ease-in-out`; hover translates the panel `2–3px` diagonally while the flat ink shadow offset grows from `4px` to `6px`, so lift is conveyed by shadow reveal, not blur.
- Header: `border-bottom` and `background-color` cross‑fade over `200ms` as the page scrolls past the hero.
- Link underline thickens and recolours to sky blue on hover (`border-bottom` transition implied by the state change, no explicit duration set — reads as instant).
- No large looping animations on the homepage beyond a couple of ambient radial‑glow elements tied to hover/focus state.


## 9. Quick Token Summary (generic)

```css
:root {
  /* ground + neutrals */
  --color-paper:        #F4EFEA;   /* header + alternating section bg */
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F8F8F7;
  --color-ink:          #383838;   /* text, borders, hard shadows */
  --color-ink-muted:    #818181;
  --color-ink-disabled: #666666;
  --color-hairline:     #D7D7D7;

  /* brand */
  --color-brand-orange: #FF9538;   /* selection, glows, meta theme-color */

  /* duck-pond accents (base / strong) */
  --color-sky:        #6FC2FF; --color-sky-strong:        #2BA5FF;
  --color-garden:     #16AA98; --color-garden-strong:     #068475;
  --color-sun:        #FFDE00; --color-sun-strong:        #BFA800;
  --color-watermelon: #FF7169; --color-watermelon-strong: #E23F35;

  /* buttons */
  --btn-primary-bg:    #97D4FF;  --btn-primary-active:   #6FC2FF;
  --btn-secondary-bg:  #F4EFEA;  --btn-secondary-active: #E1D6CB;

  /* type */
  --font-display: "Aeonik Fono", "Fraunces", ui-sans-serif, sans-serif; /* uppercase only */
  --font-mono:    "Aeonik Mono", "Space Mono", ui-monospace, monospace; /* uppercase only */
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-code:    "Source Code Pro", "JetBrains Mono", ui-monospace, monospace;

  /* geometry */
  --space-unit:     4px;          /* practical rhythm: 4 8 12 16 20 24 32 40 48 56 64 80 96 */
  --max-width:      1240px;       /* 1302px for the header row */
  --radius:         2px;          /* near-square everywhere */
  --border-weight:  2px;          /* heavy structural borders */
  --shadow-hard:    -4px 4px 0 0 var(--color-ink);   /* blur-free "sticker" shadow */
  --shadow-hard-lg: -6px 6px 0 0 var(--color-ink);

  /* motion */
  --ease:              ease-in-out;
  --duration-fast:     120ms;
  --duration-snap:     30ms;
  --duration-surface:  200ms;
}
```