---
title: "MotherDuck design system"
variant: extended
source: https://motherduck.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/motherduck-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# MotherDuck · Design System

> Playful duck motifs meet precise, agent-ready data tooling.

**Theme:** light · **Industry:** devtools · **Source:** https://motherduck.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

MotherDuck pairs a warm editorial canvas with sky-blue feature bands, crisp outlines, and playful duck illustrations. Monospaced display type and product-like diagrams make the page feel technical without losing its approachable character.

## North star

Balance warm, open editorial space with outlined technical UI and occasional playful duck-led illustrations.

## Overview

The page alternates a warm off-white canvas (#f4efea) with broad sky-blue (#97d4ff) bands, then reserves vivid yellow (#f9ee3e) for the resource feed near the footer. Charcoal (#383838) supplies readable copy, strong outlines, and the dark footer; white cards create clean contrast within the blue and neutral sections. Aeonik Fono gives uppercase hero headings a distinctive technical voice, while Inter handles paragraphs and navigation. Aeonik Mono and Source Code Pro support interface labels, diagrams, and code-like details. A wide, centered composition pairs text with a product UI in the hero, then moves through architecture diagrams, feature cards, customer proof, integrations, and agent workflows. Hand-drawn clouds, duck motifs, and schematic illustrations soften the precise layout. Comfortable section spacing and compact outlined components keep a long page orderly and scannable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Duck Ink | `#383838` | `--color-duck-ink` | brand | Primary text, dark footer, strong card outlines, and inverse interface surfaces. |
| Sky Blue | `#97d4ff` | `--color-sky-blue` | brand | Primary CTA fill and large architecture, customer, and agent-focused section bands. |
| Warm Canvas | `#f4efea` | `--color-warm-canvas` | surface | Main page background, hero canvas, and neutral sections. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Product UI panels, cards, navigation elements, and light text on dark surfaces. |
| Flock Yellow | `#ffde00` | `--color-flock-yellow` | accent | Radial and decorative gradient accent; appears in illustrative and background treatments. |
| Badge Gold | `#ebcd00` | `--color-badge-gold` | semantic | Fine badge border detail paired with the yellow stack-selection label. |
| Bright Azure | `#2ba5ff` | `--color-bright-azure` | accent | Badge outline accent, especially the shared-storage label. |
| Muted Graphite | `#666666` | `--color-muted-graphite` | neutral | Secondary body copy and subdued button text. |
| Signal Lemon | `#f9ee3e` | `--color-signal-lemon` | accent | Full-width resource-feed section background near the bottom of the page. |
| Soft Marigold | `#faf175` | `--color-soft-marigold` | semantic | Pale yellow badge fill for the stack-selection label. |
| Duckling Coral | `#d97757` | `--color-duckling-coral` | accent | Small action accent within product interface controls. |
| Cool Lilac Gray | `#e8e6ec` | `--color-cool-lilac-gray` | neutral | Light code and interface text inside dark product mockups. |
| Slate Lavender | `#8b8a96` | `--color-slate-lavender` | neutral | Low-emphasis interface text within product-like panels. |
| Status Teal | `#16aa98` | `--color-status-teal` | semantic | Small status indicators and interface details in product mockups. |
| Night Panel | `#16161e` | `--color-night-panel` | surface | Occasional dark product-mockup card surface, not a primary page background. |
| Cloud Paper | `#f8f8f7` | `--color-cloud-paper` | surface | Minor light card and footer detail surface. |
| Quiet Line | `#d7d7d7` | `--color-quiet-line` | neutral | Subtle card and interface hairline borders. |

### Semantic aliases

`--color-canvas` → `#f4efea` (Warm Canvas) · `--color-surface` → `#383838` (Duck Ink) · `--color-surface-2` → `#97d4ff` (Sky Blue) · `--color-surface-3` → `#ffffff` (Clean White) · `--color-text` → `#383838` (Duck Ink) · `--color-text-muted` → `#ffffff` (Clean White) · `--color-text-subtle` → `#666666` (Muted Graphite) · `--color-border` → `#d7d7d7` (Quiet Line) · `--color-accent` → `#97d4ff` (Sky Blue) · `--color-accent-2` → `#ffde00` (Flock Yellow) · `--color-accent-3` → `#d97757` (Duckling Coral) · `--color-on-accent` → `#383838` (Duck Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#383838` | `#f4efea` | 10.26:1 | AAA |
| `#383838` | `#97d4ff` | 7.36:1 | AAA |
| `#383838` | `#ffffff` | 11.73:1 | AAA |
| `#ffffff` | `#f4efea` | 1.14:1 | fail |
| `#ffffff` | `#383838` | 11.73:1 | AAA |
| `#ffffff` | `#97d4ff` | 1.59:1 | fail |
| `#666666` | `#f4efea` | 5.03:1 | AA |
| `#666666` | `#383838` | 2.04:1 | fail |
| `#666666` | `#97d4ff` | 3.6:1 | AA-large |
| `#666666` | `#ffffff` | 5.74:1 | AA |

### Gradients

- `repeating-conic-gradient(rgb(255, 222, 0) 0deg, rgb(255, 222, 0) 5deg, rgba(255, 222, 0, 0) 5deg, rgba(255, 222, 0, 0) 30deg)`
- `radial-gradient(circle, rgb(255, 222, 0) 0%, rgba(255, 222, 0, 0) 70%)`
- `linear-gradient(45deg, rgb(27, 102, 15) 0%, rgb(108, 174, 62) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 300, 400, 500, 700 | Body copy, navigation, secondary headings, and compact buttons. | Inter |
| Aeonik Fono | `--font-display` | webfont | 400 | Primary display heading, especially the uppercase hero title. | Space Mono |
| Source Code Pro | `--font-mono` | system | 400, 700 | Captions, code examples, and technical labels. | Source Code Pro |
| Aeonik Mono | `--font-aeonik-mono` | webfont | 400, 300 | Navigation, interface labels, diagram text, and product-card copy. | Space Mono |
| JetBrains Mono | `--font-jetbrains-mono` | webfont | 400, 700 | Occasional code or technical UI text. | JetBrains Mono |

- **Inter:** Use light navigation, regular body weight, restrained tracking, and mostly sentence case.
- **Aeonik Fono:** Regular weight with uppercase treatment; preserve the technical, monospaced display character.
- **Source Code Pro:** Regular monospace with compact sizing and a clear code-console feel.
- **Aeonik Mono:** Use monospace for product-facing details; uppercase labels and compact controls suit the schematic UI.
- **JetBrains Mono:** Keep to code-like supporting content; regular or bold weights are measured.

### Type scale — Golden Ratio (ratio ≈ 1.581, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1.2 | 0 | uppercase | Aeonik Fono | Uppercase hero headline introducing the agent-focused warehouse. |
| h2 | 20px | 300 | 1.6 | 0 | — | Inter | Light supporting section headings and explanatory subheads. |
| body | 16px | 400 | 1.4 | 0.02em | — | Inter | Paragraphs describing product benefits, integrations, and customer proof. |
| caption | 13px | 400 | 1.62 | 0 | — | Source Code Pro | Compact labels, annotations, and small technical notes. |
| button | 12px | 400 | 1 | 0 | uppercase | Inter | Short uppercase calls to action and navigation controls. |
| nav | 16px | 300 | 1.3 | 0 | — | Inter | Primary navigation links across the header. |
| code | 13px | 400 | 1.62 | 0 | — | Source Code Pro | SQL snippets and developer-oriented code examples. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 8, 12, 16, 20, 22, 24, 30, 32, 40 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width 1242px.

A centered page composition uses a measured maximum width of 1242px, with the hero split between copy and an oversized product interface. Broad, full-width color bands alternate with neutral canvas sections, while card groups range from three-column features to denser integration grids. The page aligns headings and content to clear section edges; the hero headline is left aligned, and the integrations introduction is centered. A comfortable section rhythm supports the long scroll, with tighter spacing inside controls and diagrams. The footer shifts to a dark, multi-column directory.

## Shape & elevation

- Radius: button `2px` · card `2px` · badge `2px` · nav `2px` · link `2px` · xs `2px` · sm `8px` · md `14px` · lg `16px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.08) 0px 4px 20px 0px`
- Shadow `hairline` (card): `rgb(56, 56, 56) -4px 4px 0px 0px`
- Motion: standard transition `0.12s ease-in-out` on interactive elements.

The design relies on outlines and contrast more than soft elevation. Buttons, badges, and selected cards use dark borders with very slight corner rounding; product panels read as framed interfaces. A restrained card shadow may appear, while the dark offset detail adds a graphic, print-like edge. Keep surfaces mostly flat and avoid floating layers.

## Imagery

Product screenshots and interface mockups are framed in dark, crisp outlines and paired with code-like detail. Hand-drawn clouds, small ducks, and schematic architecture diagrams bring a playful editorial quality to otherwise technical content. Customer and integration marks sit in orderly grids; resource cards use thumbnail imagery. Keep illustrations flat and outlined, with occasional bright color confined to diagrams and decorative motifs.

## Components

### Primary CTA

Sky Blue (#97d4ff) fill, Duck Ink (#383838) outline, uppercase label, and tight rectangular shape; pair with a plain outlined secondary action.

### Product interface frame

Large white mockup with a dark hairline border, compact tab strip, SQL panel, and status details that make the product tangible.

### Feature cards

Three-column product cards on Warm Canvas, each with a distinct pastel panel, small interface preview, and concise learn-more link.

### Architecture diagram

Layered dark schematic blocks, connectors, small labels, and illustrated clouds sit within a Sky Blue section.

### Badge

Compact uppercase Aeonik Mono label in a pale fill with a clearly visible colored outline.

### Resource card

Thumbnail-led editorial card with a strong outline, compact metadata, and short headline on the yellow resource band.

### Footer directory

Dark charcoal canvas with brand mark, social icons, and tightly organized link columns.

### Measured component styles

- **Primary button** (“START FREE”): background #97d4ff · text #383838 · border 2px solid #383838 · radius 2px · padding 11.5px 18px · 400 16px Aeonik Mono · uppercase
- **Secondary button** (“MCP”): background #f4efea · text #383838 · border 2px solid #383838 · radius 2px · padding 8px 16px · 400 12px Inter · uppercase
- **Link** (“dbt”): transparent background · text #383838 · radius 0px · padding 0px · 400 16px Aeonik Mono
- **Input**: transparent background · text #383838 · radius 0px · padding 4px 0px 0px 6px · 400 12px Inter
- **Card** (“FLIGHTS Python pipelines that run on Mot”): background #383838 · text #383838 · radius 0px · padding 0px · 400 16px Aeonik Mono
- **Badge** (“SHARED STORAGE”): background #ceebff · text #383838 · border 2px solid #2ba5ff · radius 2px · padding 4px 8px · 400 12px Aeonik Mono · uppercase
- **Navigation item** (“PRODUCT COMMUNITY COMPANY DOCS PRICING C”): transparent background · text #383838 · radius 0px · padding 0px · 400 16px Aeonik Mono

## Do

- Use Warm Canvas (#f4efea) as the default page ground.
- Reserve Sky Blue (#97d4ff) for large feature bands and primary CTAs.
- Set display headlines in an uppercase technical face.
- Frame product previews and cards with crisp dark outlines.
- Use monospace typography for code, labels, and diagram annotations.
- Keep duck and cloud artwork playful, flat, and secondary to content.

## Don't

- Don't replace the warm canvas with pure white across the whole page.
- Don't use rounded, pill-shaped controls where the measured UI is square-edged.
- Don't add gradients as a general-purpose background treatment.
- Don't make every section blue or yellow; preserve the neutral-blue-yellow rhythm.
- Don't let decorative illustrations overwhelm product information.
- Don't apply soft shadows to every card.

## Agent prompt

Build a new MotherDuck-style page with a Warm Canvas (#f4efea) foundation, Duck Ink (#383838) typography and outlines, and broad Sky Blue (#97d4ff) feature bands. Use Signal Lemon (#f9ee3e) sparingly for a standout editorial or resource area. Set display headlines in uppercase Aeonik Fono or a close monospace substitute; use Inter for readable body copy and Aeonik Mono or Source Code Pro for interface labels and code. Favor a centered, wide composition with clear section bands, left-aligned product storytelling, and compact grid-based cards. Show product value through outlined interface panels and schematic diagrams. Add restrained hand-drawn clouds or duck illustrations as supporting motifs. Keep controls rectangular, borders crisp, shadows minimal, and the long-page rhythm comfortable and scannable.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Warm Canvas split hero: left-aligned copy and actions beside a large framed product interface. | Product-led introduction, Primary and secondary CTA, Customer logo proof | Uppercase display headline, Outlined interface mockup, Sky-blue CTA |
| 2 | how-it-works | Full-width blue band combining a left accordion with a central architecture schematic. | Expandable feature points, Architecture explanation, Customer quote | Cloud illustrations, Connected diagram blocks, Outlined quote panel |
| 3 | product-showcase | Neutral canvas with a central layered stack diagram and compact explanatory panels around it. | Product architecture overview, Tool and interface mapping | Layered dark blocks, Outlined label panels, Connector lines |
| 4 | feature-grid | Three equal feature cards aligned in a row on the neutral canvas. | Feature comparison, Learn-more links | Pastel card backgrounds, Embedded product previews, Dark outlines |
| 5 | testimonials | Single wide quote card with testimonial text and customer attribution aligned opposite. | Customer evidence, Named attribution | White quote panel, Strong rectangular border, Logo and role details |
| 6 | integrations | Centered introduction above a broad, illustrated integration field and horizontal tools strip. | Integration discovery, View-all link | Partner logo grid, Duck illustration, Outlined tools panel |
| 7 | testimonials | Full-width blue band with customer cards arranged in a loose two-row grid. | Customer proof, Case-study navigation | White bordered cards, Cloud backdrop, Brand marks |
| 8 | feature-split | Blue feature area with a dark terminal preview beside a vertical stack of white capability cards. | Agent workflow demonstration, Documentation links, MCP entry point | Terminal mockup, Outlined cards, Yellow decorative edge |
| 9 | content-feed | Bright yellow section with an editorial card row and compact carousel controls. | Browse recent resources, Carousel navigation, Visit blog | Thumbnail cards, Compact metadata, Blue outlined CTA |
| 10 | footer | Dark full-width footer with brand and social links beside multiple directory columns. | Browse site sections, Social navigation, Policy and trust links | Charcoal background, Compact link lists, Small brand marks |

## Source CSS custom properties (selected)

```css
--sim-surface: #f8f8f7;
--sim-border: #383838;
--sim-font-base: "Inter",sans-serif;
--sim-font-mono: "Aeonik Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
--sim-space-1: 0.25rem;
--sim-space-2: 0.5rem;
--sim-space-3: 0.75rem;
--sim-space-4: 1rem;
--sim-space-6: 1.5rem;
--sim-space-8: 2rem;
--sim-space-12: 3rem;
--swiper-theme-color: #007aff;
--toastify-color-light: #fff;
--toastify-color-dark: #121212;
--toastify-color-info: #3498db;
--toastify-color-success: #07bc0c;
--toastify-color-warning: #f1c40f;
--toastify-color-error: #e74c3c;
--toastify-color-transparent: rgba(255,255,255,0.7);
--toastify-icon-color-info: #3498db;
--toastify-icon-color-success: #07bc0c;
--toastify-icon-color-warning: #f1c40f;
--toastify-icon-color-error: #e74c3c;
--toastify-toast-background: #fff;
--toastify-font-family: sans-serif;
--toastify-text-color-light: #757575;
--toastify-text-color-dark: #fff;
--toastify-text-color-info: #fff;
--toastify-text-color-success: #fff;
--toastify-text-color-warning: #fff;
--toastify-text-color-error: #fff;
--toastify-spinner-color: #616161;
--toastify-spinner-color-empty-area: #e0e0e0;
--toastify-color-progress-light: linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);
--toastify-color-progress-dark: #bb86fc;
--toastify-color-progress-info: #3498db;
--toastify-color-progress-success: #07bc0c;
--toastify-color-progress-warning: #f1c40f;
--toastify-color-progress-error: #e74c3c;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/motherduck-com