# MotherDuck · Design system migration spec

> Source: https://motherduck.com  ·  Curated by OpenDesign  ·  en

> The site stands out by combining technical precision with a friendly, illustrative UI, making complex infrastructure feel accessible.

## 1. Identity DNA

MotherDuck's design system is an architecture of contrasts: a warm, approachable base that structures complex data infrastructure with illustrative clarity. It uses a friendly utility as its guiding analogy, translating the power of a cloud data warehouse into a visual language that feels both precise and inviting.

**One-liner:** Infrastructure for answers.
**Keywords:** Data Warehouse · Analytics · SQL · DuckDB · Cloud
**Analogy:** A friendly, approachable utility for complex data infrastructure.

## 2. Color

The color system establishes a high-contrast foundation with a warm neutral base, deep ink for structure, and energetic yellow accents that inject personality. A bright blue is reserved specifically for primary actions, ensuring a clear visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F4EFEA` | main background |
| `--ink` | `#383838` | body text |
| `--muted` | `#666666` | placeholder |
| `--accent` | `#FFDE00` | single accent |
| `--line` | `rgba(56,56,56,1)` | divider |

**Color principle:** High-contrast, warm neutral base with energetic yellow accents and sharp 2px black outlines for a distinct, illustrative feel.

The principle is clarity through contrast, avoiding ambiguity with a distinct, illustrative palette.

## 3. Typography

Typographic voice is defined by a sharp dichotomy: monospaced type for headlines and a humanist sans-serif for body text. This pairing directly communicates technical precision while maintaining editorial readability.

- **Display:** monospaced
- **Body:** humanist-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.2 | 400 | 1px | Hero headings |
| body | 16px | 1.4 | 400 | normal | Body text |
| small | 14px | 1.4 | 400 | normal | Metadata and small labels |

**Type rules:**
- All headings are uppercase and set in a monospaced font.
- Body text uses a clean humanist sans-serif for readability.

## 4. Spacing

Spacing follows a strict 4px base grid, creating a predictable rhythm that balances generous padding for content focus with tight alignment for interface elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid with generous padding around major sections.

## 5. Surfaces

Surfaces are defined by sharp, 2px black borders and hard-offset solid-color shadows, rejecting soft depth in favor of an illustrative, paper-cut aesthetic.

- **Radius:** sm 2px · md 2px · lg 2px · pill 999px
- **Shadows:**
  - rgb(56, 56, 56) -8px 8px 0px 0px
  - rgb(255, 222, 0) -6px 6px 0px 0px
- **Borders:** 2px solid rgb(56, 56, 56)

## 6. Layout

The layout skeleton centers a bold hero section, followed by structured, multi-column content areas. A 12-column grid underpins the system, providing a consistent framework for information hierarchy.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered hero section with stacked content, followed by a multi-column logo grid.

## 7. Motion & Interaction

Motion philosophy is one of subtle reinforcement, using smooth CSS transitions for state changes. Hover effects employ understated transforms, focusing on tactile feedback rather than spectacle.

- **Durations:** micro 120ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.34, 0, 0.12, 1)`
- **Patterns:**
  - Subtle transforms on hover
  - Ease-in-out transitions for smooth state changes

- **Hover:** Subtle transforms and potential shadow shifts.
- **Click:** Standard pointer cursor.
- **Transition:** All 1584 instances use CSS transitions for smooth interactions.
- **Keyboard:** Standard web accessibility.

## 8. Voice & Don'ts

Editorial voice is professional yet approachable, with a slightly playful tone that avoids corporate dullness. Headlines are direct and technical, while calls to action are clear and encouraging.

- **Tone:** Professional yet approachable and slightly playful.
- **Headline style:** Direct, uppercase, and monospaced to convey technical precision.
- **CTA style:** Clear, action-oriented, and encouraging.
- **Avoid:** Overly complex jargon without context / Dull or strictly corporate phrasing / Visual clutter or excessive decoration

### Don'ts
- ❌ don't use rounded or soft corners — screenshot shows sharp 2px borders
- ❌ don't use a white background for the main body — screenshot shows a warm beige (#F4EFEA) instead
- ❌ don't use soft drop shadows — screenshot shows hard, solid color offsets
- ❌ don't use a dark mode by default — screenshot shows a light, high-contrast theme
- ❌ don't use playful or handwritten fonts — screenshot shows a clean monospaced and humanist sans-serif
- ❌ don't use subtle pastel accents — screenshot uses a bold, high-chroma yellow and bright blue

The system deliberately avoids decorative softness, refusing rounded corners, soft shadows, and pastel accents in favor of its sharp, illustrative structure.

## System Prompt (paste into AI tool)

```
MotherDuck is a cloud data warehouse platform for developers and data teams, characterized by a friendly but precise technical aesthetic. The design utilizes a warm beige background (#F4EFEA), deep gray ink (#383838), and a vibrant yellow accent (#FFDE00), accented by a bright light blue (#6FC2FF) for primary buttons. Typography heavily features a monospaced font (Aeonik Mono) for headlines in uppercase, paired with a clean humanist-sans for body text. Critical design rules include: maintaining sharp 2px black borders and hard offset shadows instead of soft glows, strictly using uppercase for display type, and avoiding generic rounded or 'soft' UI patterns. The overall feel is illustrative, structured, and approachable.
```