Pixloop Design.md
MotherDuck homepage design, full-page screenshot

MotherDuck

A playful, developer-warm marketing surface built on a cream canvas (#f4efea) and an entirely monospace type system (Aeonik Mono display + Aeonik Fono body). The system reads like a friendly terminal — uppercase mono headlines, sky-blue CTA buttons with sharp 0–2px corners, a bright yellow announcement bar and marquee bands, hard offset "sticker" shadows, and hand-drawn duck/cloud illustrations. Brand voltage comes from the mono typography, the cream-and-blue palette, and the cheerful illustration layer rather than from heavy depth or accent saturation.

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
loading…

Color Palette

Accent

Neutrals

Typography

display 56px · 400 · 1.2
The quick brown fox jumps
heading 24px · 400 · 1.2
The quick brown fox jumps
label 16px · 600 · 1.2
The quick brown fox jumps
body 14px · 400 · 1.2
The quick brown fox jumps
button 16px · 400 · 1.0
The quick brown fox jumps

Spacing & Shape

Spacing

Name Value Preview
xxs 4px
xs 8px
sm 12px
md 16px
lg 20px
xl 22px

Border Radius

Name Value Preview
none 0px
sm 2px

FAQ

What colors does MotherDuck use?
MotherDuck's core palette includes #6fc2ff, #96d0ff, #316dca, #ffde00, #000000. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the MotherDuck DESIGN.md.
What font does MotherDuck use?
MotherDuck's primary typeface is Aeonik Mono. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the MotherDuck design system?
A playful, developer-warm marketing surface built on a cream canvas (#f4efea) and an entirely monospace type system (Aeonik Mono display + Aeonik Fono body). The system reads like a friendly terminal…

More like this