MotherDuck

Overview

MotherDuck is a serverless cloud data warehouse built on DuckDB, designed for AI agents, data teams, and modern analytics workflows. The design system embodies "Technical Warmth"—a philosophy that marries the precision and clarity of technical interfaces with the approachability of warm, human-centered design. The visual language uses a warm-neutral foundation (#f4efea background, #383838 text) paired with confident accent colors: a vibrant orange-gold primary (#ff9538) for CTAs and key interactions, teal-green secondary (#16aa98) for status and success states, and sky-blue tertiary (#6fc2ff) for informational elements. The aesthetic is deliberately minimal and monospace-forward, evoking the terminal and code editor while remaining accessible to non-technical users. Every interaction feels direct and purposeful—no unnecessary ornamentation, no gradients, no shadows beyond functional depth cues.

The brand voice is precise, confident, and conversational. MotherDuck speaks to builders, data engineers, and AI practitioners with clarity and respect for their time. Sentences are short and direct: "Build a data stack in one prompt." "Query your data in seconds." The tone avoids hype; instead, it emphasizes capability and speed. Typography relies on Aeonik Mono for body text and UI labels (monospace, 16px, 400 weight), creating a technical-but-friendly presence, while Aeonik Fono (sans-serif, 44px, 400 weight) anchors headlines with geometric clarity. The overall effect is a design system that feels like a tool built by engineers for engineers—but one that welcomes everyone.

Colors

Color strategy in MotherDuck is rooted in functional clarity and warm accessibility. The surface stack uses warm neutrals: #f4efea (surface, primary background), #ece6df (surface-container, card backgrounds), #d7d7d7 (outline-variant, subtle borders), and #383838 (on-surface, primary text). This warm-gray palette creates visual cohesion and reduces eye strain during long data-analysis sessions. Primary (#ff9538) is the signature accent—a warm orange-gold used exclusively for call-to-action buttons ("TRY 7 DAYS FREE"), active states, focus rings (0 0 0 3px rgba(255, 149, 56, 0.1)), and brand-critical interactions. Secondary (#16aa98) is a teal-green reserved for success states, positive indicators, and secondary actions; it appears on badges and status labels. Tertiary (#6fc2ff) is a sky-bl

Typography

The type system balances technical precision with human readability. Display (60px, Aeonik Fono, 400 weight, -0.02em letter-spacing) anchors hero sections with geometric authority. Headline-lg (44px, Aeonik Fono, 400 weight) is used for major section titles and page headings; the light weight and tight tracking (-0.015em) create an open, confident presence. Headline-md (32px, Aeonik Fono) steps down for subsections. Body text and UI labels use Aeonik Mono (monospace, 16px for body-md, 14px for label-md, 400 weight throughout) to reinforce the technical, code-editor aesthetic. Monospace creates visual rhythm and makes the interface feel like a native tool rather than a web application. Line-height is set to 1.5 for body text (24px on 16px base) to ensure readability during extended data-ana

Layout

Page rhythm follows a 12-column grid with a max-width of 1280px, centered on larger viewports. The spacing scale is semantic: unit (8px) is the base, with sm (12px) for tight component spacing, md (24px) for standard gutters and card padding, lg (40px) for section separation, and xl (64px) for major layout breaks. Hero sections use lg spacing (40px) above and below to create breathing room. Cards and containers use md padding (24px) internally. The gutter between grid columns is 24px (md spacing). White-space is generous but purposeful—never cramped. Section separation uses lg spacing (40px) vertically to create clear visual breaks between features, pricing, and testimonials. Container max-width is 1280px to prevent text lines from becoming too long (optimal reading width is 50–75 characte

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05)) for floating panels and dropdowns. Borders provide the primary visual hierarchy: all cards and inputs use 1px solid borders in outline-variant (#d7d7d7), creating clear separation without relying on shadow. Focus states use a 2px solid border in primary (#f

Shapes

The shape philosophy is "Minimal Geometry"—sharp, technical corners with minimal rounding. Border-radius follows a tight scale: sm (2px) for buttons and small interactive elements, DEFAULT (4px) for inputs and cards, md (8px) for larger containers and modals, lg (12px) for hero sections and feature cards, xl (16px) for oversized components, and full (9999px) for badges and pills. The 2px default on buttons creates a distinctly technical, code-editor-like appearance—not quite sharp, but deliberately restrained. Cards use 4px rounding to feel approachable without sacrificing technical credibilit

Components

Action Elements Buttons are the primary interaction mechanism and use a distinctive 2px solid border treatment. Primary buttons (#ff9538 background, white text, 2px solid #ff9538 border, 44px height, 12px 24px padding, 2px border-radius) are used for CTAs like "TRY 7 DAYS FREE" and "START FREE". On hover, the background shifts to #ffb366 (primary-fixed-dim) while maintaining the border. On active/pressed, the background becomes #e67e24 (darker orange). Secondary buttons (transparent background, #383838 text, 2px solid #383838 border, same dimensions) are used for "BOOK A DEMO" and alternative actions. Ghost buttons (transparent background, #ff9538 text, no border) are used for tertiary actions and links. All buttons use Aeonik Mono at 14px (label-md) with 0.02em letter-spacing. Transit

Do's and Don'ts

**Do**

• Do use Aeonik Mono for all body text and UI labels to reinforce the technical, code-editor aesthetic—never fall back to system fonts.
• Do apply 2px solid borders to all buttons and interactive elements; borders are the primary visual affordance, not shadows.
• Do use the primary color (#ff9538) exclusively for CTAs, active states, and focus rings; never use it for passive elements or backgrounds.
• Do maintain 24px (md spacing) as the standard gutter between sections and inside cards; generous white-space signals clarity and confidence.
• Do use 4px border-radius (DEFAULT) for cards and inputs; this is the visual signature of the system—never use 0px or excessive rounding.
• Do apply focus rings at 3px blur with rgba(255, 149, 56, 0.1) on all interactive elements for keyboard accessibility.
• Do keep font-weight at 400 throughout the system; hierarchy comes from size and spacing, not weight.
• Do use the warm-neutral surface stack (#f4efea, #ece6df, #e0dbd6) for backgrounds; these colors reduce eye strain and feel approachable.

**Don't**

• Don't use drop shadows for primary visual hierarchy; use 1px solid borders instead. Shadows are reserved for functional elevation (cards on hover, modals).
• Don't mix typefaces; Aeonik Mono is for body/UI, Aeonik Fono is for headlines. Never introduce system-ui, Inter, or other fonts.
• Don't use the primary color (#ff9538) for passive elements like backgrounds or borders; it must remain reserved for interactive CTAs and focus states.
• Don't exceed 16px border-radius on any component; excessive rounding contradicts the technical, minimal-geometry aesthetic.
• Don't use font-weight above 400; the system does not support bold or heavy weights. Use size and spacing for emphasis instead.
• Don't apply shadows to buttons or small interactive elements; use 2px solid borders instead. Shadows are only for cards (md elevation) and modals (lg elevation).
• Don't use gradients, glassmorphism, or other decorative effects; the system is flat-technical and relies on color, borders, and spacing for visual interest.
• Don't reduce padding below 12px (sm spacing) on interactive elements; tight padding makes targets hard to hit and feels cramped.