CURATED · OPEN · FREE

MotherDuck

Infrastructure for answers.

datadb

MotherDuck screenshot

↓ Download design system (14 MB)Open in OpenDesign

Visit: https://motherduck.com

📦 Browse pack contents →

01

Identity DNA

Data WarehouseAnalyticsSQLDuckDBCloud

A friendly, approachable utility for complex data infrastructure.

02

Color

#FFDE00Accent

#383838Ink

#F4EFEABG

#666666Muted

rgba(56,56,56,1)Line

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

03

Typography

monospaced · humanist-sans

display40px · 400
body16px · 400
small14px · 400

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

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px base grid with generous padding around major sections.

05

Surfaces

sm · 2px

md · 2px

lg · 2px

pill · 999px

2px solid rgb(56, 56, 56)

rgb(56, 56, 56) -8px 8px 0px 0px · rgb(255, 222, 0) -6px 6px 0px 0px

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

07

Motion & Interaction

120msmicro

200mssmall

400msmedium

cubic-bezier(0.34, 0, 0.12, 1)easing

Subtle transforms on hover · Ease-in-out transitions for smooth state changes

Subtle transforms and potential shadow shifts. · Standard pointer cursor.

08

Components

button Solid light blue (#6FC2FF) or outline style with sharp 2px black borders and subtle hard offsets.
card Illustrative elements with hard shadows.
input Simple bordered inputs with rounded corners.
hero Large monospaced uppercase headline, brief description, and prominent dual-action CTA buttons.

09

Voice & Don'ts

Tone Professional yet approachable and slightly playful.
Headlines Direct, uppercase, and monospaced to convey technical precision.
CTAs Clear, action-oriented, and encouraging.

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
Avoid: Overly complex jargon without context
Avoid: Dull or strictly corporate phrasing
Avoid: Visual clutter or excessive decoration

10

Inside the pack — real screenshots

MotherDuck — 桌面首屏（hero） — 桌面首屏（hero）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko