Skip to content
DesignMunkDesignMunk Submit a site

Mother Duck

motherduck.com
Infrastructure for answers: serverless cloud data warehouse for SQL or natural language.
AI Data & Infrastructure Next.js Homepage Aeonik Fono Inter
Share Visit site
motherduck.com DESKTOP · 1440
Mother Duck

AI Breakdown

Design export

# Design brief: the Mother Duck design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/07083147/motherduck-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07083147/motherduck-com-featured.webp
- On DesignMunk: https://designmunk.com/mother-duck/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# MotherDuck: Offset-Shadowed Query Console on a Warm Canvas

## Overview

MotherDuck's UI balances developer credibility with a friendly brand. It pairs a warm neutral surface with approachable illustrations and compact, tool-like controls. The tone is technical but not austere: monospaced headlines, console screenshots, and chips convey performance, while rounded cards and soft colors keep it welcoming. Spacing is moderately airy at the section level and tight inside components, supporting dense product storytelling.

## Colors

- **primary (#383838):** Core ink for headlines, body text, and icons.
- **secondary (#f9963f):** Orange accent for highlights, labels, and illustrative details.
- **tertiary (#97d4ff):** Primary CTA fill and active chip backgrounds; also used for hero emphasis.
- **neutral (#f4efea):** Warm surface for the page background and section blocks.
- **border (#d7d7d7):** Subtle 1px dividers, card outlines, and input borders.
- **brand-bagel (#f6cc9a):** Soft yellow for status and region chips (e.g., US-EAST-1) and playful highlights.
- **brand-porpita-porpita (#2192c7):** Deep teal accent for links, badges, and diagrams where stronger contrast is needed.
- **surface (#f4efea):** Alias of neutral; use as the default page surface.
- **on-surface (#383838):** Alias of primary; use for text on neutral and light cards.

## Typography

- Aeonik Fono (custom): Display-leaning sans for hero and secondary headlines at 44px (headline-lg) and 32px (headline-sm). Not freely hosted; substitute Space Grotesk, Sora, or Rubik when Aeonik Fono isn't available.
- Aeonik Mono (custom): Technical voice for headlines and labels at 40px (headline-md) and 18px (headline-xs). Not freely hosted; substitute IBM Plex Mono, JetBrains Mono, or Space Mono.
- Inter (Google): Body copy at 16px/1.8 with light weight 300 and slight tracking (0.023em). Use Inter for long-form paragraphs, captions, and UI labels to maintain readability on the warm background.

## Layout

- Spacing scale drives rhythm: 8px (xs) for micro-gaps, 16px (sm) for control padding, 24px (md) for intra-card spacing, 40px (lg) for section internals, 56px (xl) for section boundaries.
- A responsive grid supports a two-column hero (copy + console) and multi-column resource blocks. Cards and lists compress with 16–24px internals while sections breathe at 40–56px.
- Content width favors legibility over maximal density; rely on the scale rather than ad-hoc values to maintain balance across screens.

## Elevation & Depth

Depth is mostly tonal and structural. Cards are white on the warm neutral surface with a light border (#d7d7d7). A single expressive shadow is used: a hard, offset small shadow (rgb(56,56,56) -4px 4px 0px) for featured panels like the hero console, giving a playful, tactile lift. Avoid soft ambient shadows; prefer borders and whitespace for hierarchy.

## Shapes

Two radii communicate role: 2px (rounded.sm) for controls and chips, 16px (rounded.md) for containers and media. Buttons and pills look utilitarian and crisp; cards and screenshots feel friendly and substantial. Keep shape language consistent — mixing radii on the same component dilutes hierarchy.

## Components

- Buttons
  - Primary: #97d4ff background with #383838 text, 44px height, 11.5px × 18px padding, 2px radius. Use for main CTAs like "Start Free."
  - Secondary: #f4efea background with #383838 text, same sizing as primary. Use for tertiary CTAs such as "Book a Demo."
  - Link: Text-only in #383838 with 0px radius; reserve for inline actions.
- Card
  - White #ffffff surface on neutral background, #383838 text, 16px radius, 12px internal padding; add 1px #d7d7d7 border as needed.

Distinctive components on this page:

### Top navigation bar
- Text in #383838 on the neutral #f4efea surface. Primary action "START FREE" uses the primary button style (#97d4ff, 44px tall). Horizontal spacing aligns to 16px multiples.

### Hero query console
- White card (16px radius) with the small offset shadow (rgb(56,56,56) -4px 4px 0). Tab strip (ASK/MCP, SQL, PYTHON, CLI) sits on top; inner content uses Inter 16px. Border accents use #d7d7d7; active elements and chips may use #97d4ff.

### CTA group
- Pair of buttons under the hero copy: primary (blue) then secondary (neutral). Maintain 16–24px gap and align to the 44px control height.

### Feature accordion list
- Items like "A Duckling per user/agent" use a bordered row (#d7d7d7), 16–24px padding, Inter body, and plus/minus toggles. Keep icons and labels aligned to the 8px grid.

### Instance/region chips
- Small labels such as "US-EAST-1" use 2px radius, tight horizontal padding (8–16px), and strong contrast. Default fill may use brand-bagel (#f6cc9a); active/system chips can use tertiary (#97d4ff) with #383838 text.

### Resource trio (Flights, Guides, Dives)
- Three feature cards with white backgrounds, 16px radius, and 12–24px padding. Titles in Aeonik Fono (32px), body in Inter 16px; "Learn more" links use the link button style.

### Integrations strip
- Dense list of links/pills with 8–16px gaps and subtle borders (#d7d7d7). Keep icons monochrome and rely on text color #383838 for consistency.

### Blog list ("Fresh from the flock")
- Stacked card links: title in Aeonik Fono (32px), metadata in Inter. Use white cards on the neutral surface with 16px radii and 12px padding.

## Do's and Don'ts

- Do reserve #97d4ff for primary CTAs and key state chips; don't spread it across large backgrounds that compete with buttons.
- Do set long-form copy in Inter 16px/1.8 (weight 300); don't use the Aeonik families for paragraphs.
- Do use the small offset shadow only for featured panels; don't add soft drop shadows where a 1px #d7d7d7 border will suffice.
- Do keep controls at 44px height with 2px radius; don't mix radii within one control group.
- Do place white cards on the neutral #f4efea surface; don't stack neutral cards on neutral backgrounds without a border.

## Agent Prompt Guide

Quick color reference — text: #383838, background: #f4efea, border: #d7d7d7, accent (CTA): #97d4ff, secondary accent: #f9963f.

1) Build the hero with console
- Layout: two columns; left copy, right console card.
- Left: h1 in "Aeonik Mono", 40px/1.2, color #383838; body in Inter 16px/1.8, weight 300.
- Buttons: primary (#97d4ff bg, #383838 text, 44px tall, 11.5px 18px, 2px radius), secondary (#f4efea bg, #383838 text, same sizing). 16–24px gap.
- Console card: white #ffffff, 16px radius, 12–24px padding, 1px border #d7d7d7, shadow rgb(56,56,56) -4px 4px 0 0. Tabs sit above content.
- Page surface: #f4efea.

2) Feature accordion list
- Section padding: 56px top/bottom.
- Each row: 24px vertical padding, 1px border #d7d7d7, label in "Aeonik Mono" 18px/1.22, details in Inter 16px/1.8.
- Toggle icons aligned to an 8px grid; use #383838 for icons, #97d4ff for active states.

3) Resource cards (Flights, Guides, Dives)
- Three cards in a responsive grid.
- Card: #ffffff bg, 16px radius, 12px padding, 1px border #d7d7d7.
- Title: "Aeonik Fono" 32px/1.2, #383838. Body: Inter 16px/1.8. "Learn more" as link style.

4) Blog list
- Container on #f4efea with 40px vertical padding.
- Each post: white card, 16px radius, 12–16px padding.
- Title in "Aeonik Fono" 32px, metadata in Inter 16px/1.8. Use #f9963f sparingly for date/category highlights.

## Similar Brands

- PostHog — similarly playful brand voice with technical credibility; MotherDuck is warmer (neutral oat) and uses offset shadows where PostHog favors flat cards.
- ClickHouse — bold orange accents and developer-first storytelling; MotherDuck's palette is softer and relies more on chips and illustrations.
- Supabase — clean, product-led homepage with strong docs links; MotherDuck adds monospaced headlines and cartoon elements for approachability.
- Snowflake — enterprise data positioning with modular sections; MotherDuck is less corporate, with smaller controls and a friendlier canvas.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #383838;
  --color-secondary: #f9963f;
  --color-tertiary: #97d4ff;
  --color-neutral: #f4efea;
  --color-border: #d7d7d7;
  --color-brand-bagel: #f6cc9a;
  --color-brand-porpita-porpita: #2192c7;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 44px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.09;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-sm-size: 32px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.8;
  --text-body-md-tracking: 0.023em;
  --font-aeonik-fono: "Aeonik Fono";
  --font-aeonik-mono: "Aeonik Mono";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 2px;
  --radius-md: 16px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 56px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 11.5px 18px;
  --button-primary-height: 44px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 11.5px 18px;
  --button-secondary-height: 44px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 12px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #383838;
  --color-secondary: #f9963f;
  --color-tertiary: #97d4ff;
  --color-neutral: #f4efea;
  --color-border: #d7d7d7;
  --color-brand-bagel: #f6cc9a;
  --color-brand-porpita-porpita: #2192c7;
  --color-surface: #f4efea;
  --color-on-surface: #383838;
  --font-headline-lg: "Aeonik Fono";
  --font-headline-md: "Aeonik Mono";
  --font-headline-sm: "Aeonik Fono";
  --font-headline-xs: "Aeonik Mono";
  --font-body-md: "Inter";
  --text-headline-lg: 44px;
  --text-headline-md: 40px;
  --text-headline-sm: 32px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-body-md: 0.023em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 300;
  --radius-sm: 2px;
  --radius-md: 16px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 56px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.22,
                    0.22,
                    0.22
                ],
                "hex": "#383838"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.976,
                    0.588,
                    0.247
                ],
                "hex": "#f9963f"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.592,
                    0.831,
                    1
                ],
                "hex": "#97d4ff"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.957,
                    0.937,
                    0.918
                ],
                "hex": "#f4efea"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.843,
                    0.843,
                    0.843
                ],
                "hex": "#d7d7d7"
            }
        },
        "brand-bagel": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.965,
                    0.8,
                    0.604
                ],
                "hex": "#f6cc9a"
            }
        },
        "brand-porpita-porpita": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.129,
                    0.573,
                    0.78
                ],
                "hex": "#2192c7"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.957,
                    0.937,
                    0.918
                ],
                "hex": "#f4efea"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.22,
                    0.22,
                    0.22
                ],
                "hex": "#383838"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 56,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Aeonik Fono",
                "fontSize": {
                    "value": 44,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Aeonik Mono",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Aeonik Fono",
                "fontSize": {
                    "value": 32,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Aeonik Mono",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": 0.023,
                    "unit": "em"
                }
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Mother Duck**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears
agentwork.com
Agentwork AI
Agentwork