Design System Audit

motherduck.com
Visual Language

Complete design system extracted from motherduck.com — every token, component, interaction pattern, and accessibility note, all from real values.

13Color tokens

10Type styles

6Case studies

AeonikPrimary font

01 — Foundations

Color Palette

All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.

ink-deepest

#383838

Dominant — text, background

10.26:1 on page bg #f4efea · AAA ✓

canvas-soft

#f4efea

Dominant — background

18.38:1 on black · AAA ✓

black

#000000

Major — text

18.38:1 on page bg #f4efea · AAA ✓

white

#ffffff

Major — background, text

1.14:1 on page bg #f4efea · fails AA

canvas

#f8f8f7

Supporting — background

19.76:1 on black · AAA ✓

accent

#6fc2ff

Accent — background

10.84:1 on black · AAA ✓

primary

#ffde00

Accent — background

15.70:1 on black · AAA ✓

accent-2

#97d4ff

Accent — background

13.18:1 on black · AAA ✓

text-secondary

#818181

Accent — text

3.41:1 on page bg #f4efea · AA large text ✓

text

#c0c0c0

Accent — text, background

1.59:1 on page bg #f4efea · fails AA

accent-3

#22c55e

Accent — background

9.22:1 on black · AAA ✓

ink

#5a5a5a

Accent — background

6.90:1 on white · AA ✓

accent-4

#ff9538

Accent — background

9.61:1 on black · AAA ✓

02 — Foundations

Typography

Single font family: Aeonik Mono — used across all roles. Font files loaded by the site: Aeonik Mono (400, 700) · Aeonik Fono (400) · Inter (300, 400, 600, 700).

Role	Specs	Sample	Used on
Body	Aeonik Mono 16px / 400 lh 1.00	PRODUCTCOMMUNITYCOMPANYDOCSPRICINGCONTACT USLOG INSTART FREE	BODY element · 85 uses · real site copy
Micro	Aeonik Mono 12px / 400 lh 1.75	LABEL · TAG	DIV element · 22 uses
Body	Aeonik Mono 16px / 400 lh 1.19	PRODUCTCOMMUNITYCOMPANYDOCSPRICINGCONTACT USLOG INSTART FREE	SPAN element · 9 uses · real site copy
Body	Aeonik Mono 16px / 400 lh 1.19	PRODUCTCOMMUNITYCOMPANYDOCSPRICINGCONTACT USLOG INSTART FREE	BUTTON element · 7 uses · real site copy
Body	Aeonik Mono 16px / 400 lh 1.00	PRODUCTCOMMUNITYCOMPANYDOCSPRICINGCONTACT USLOG INSTART FREE	IMG element · 7 uses · real site copy
UI Label	Aeonik Mono 16px / 700 lh 1.00	Ryan Dolley	SPAN element · 6 uses · real site copy
Body	Aeonik Mono 16px / 400 lh 1.50	PRODUCTCOMMUNITYCOMPANYDOCSPRICINGCONTACT USLOG INSTART FREE	DIV element · 5 uses · real site copy
Micro	Aeonik Mono 12px / 500 lh 1.75	3 questions left	SPAN element · 5 uses · real site copy
UI Label	Aeonik Mono 16px / 600 lh 1.13	MotherDuck AI	SPAN element · 4 uses · real site copy
Body	Aeonik Mono 16px / 400 lh 1.00	PRODUCTCOMMUNITYCOMPANYDOCSPRICINGCONTACT USLOG INSTART FREE	P element · 3 uses · real site copy

03 — Components

Navigation

Nav demo using extracted colors, font, real link labels and the site's real logo.

nav · demo using extracted tokens & real links

motherduck.com

DOCSPRICINGCONTACT USLOG INSTART FREE

Extracted nav tokens

Background	#1a1a1a
Text color	#ffffff
Font family	Aeonik Mono
Links (extracted)	DOCS · PRICING · CONTACT US · LOG IN · START FREE

Layout values (height, padding, link states) are demo styling — not extracted from the site.

04 — Components

Button Variants

Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 2px · fill type: solid · padding density: normal.

btn-primary · token demo

bg #ffde00 · color #1a1a1a · radius: 2px

btn-secondary · outlined demo

Demo variant — outlined treatment of the extracted primary color #ffde00.

btn-ghost · text-only demo

Demo variant — text-only treatment of the extracted primary color.

btn-disabled · demo state

Generic disabled-state demo — not extracted from the site.

05 — Components

Cards & Surfaces

Depth communicated through shadows and background contrast.

section surface

bg #ffffff · text #000000

page canvas

bg #f4efea · text #383838

card surface

bg #ffde00 · text #000000

06 — Components

Project Cards

Real case studies found on the scraped site — titles and URLs extracted from live links.

CASE STUDIES

Case Studies

/case-studies/

https://motherduck.com/case-studies/zero-health-ai-powered-analytics/

https://motherduck.com/case-studies/reflex-careers-gig-economy-retail/

https://motherduck.com/case-studies/kultura-capital/

https://motherduck.com/case-studies/gardyn/

https://motherduck.com/case-studies/dexibit/

07 — Components

Form Elements

Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.

Contact form — site-styled demo

motherduck.com
Get in Touch

info@motherduck.com (extracted from site)

Name

Email Address

Message

Input states

input · default

radius: not detected · demo border/background styling

input · focus state demo

Demo focus treatment using extracted primary color #ffde00.

select · dropdown

08 — Foundations

Spacing Scale

Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.

1px
xxs

8px
sm

12px
md

16px
base

24px
lg

40px
2xl

92px
section

132px
section-2

09 — Foundations

Border Radius

Corner radius tokens observed across components. All values extracted from live stylesheet.

2px

xs
2px

4px

xs
4px

50%

full
50%

10 — Foundations

Elevation & Depth

Box-shadow tokens extracted from CSS variables. Shadow values represent real usage.

Observed element shadow

rgb(56, 56, 56) -8px 8px 0px 0px

Observed element shadow

rgb(56, 56, 56) -6px 6px 0px 0px

11 — Interactions

Motion

Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.

hover demo · using extracted tokens

Demo transitions use the fastest extracted duration (0.15s linear).

idle vs hover · frozen demo states

Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.

Motion tokens (extracted)

Token	Value	Occurrences
duration-fast	0.15s	1× in stylesheet
duration-base	0.3s	3× in stylesheet
duration-slow	0.7s	1× in stylesheet
duration-slower	0.75s	1× in stylesheet
duration-slowest	1s	3× in stylesheet
easing-1	linear	5× in stylesheet
easing-2	ease-in	4× in stylesheet
easing-3	cubic-bezier(.215,.61,.355,1)	4× in stylesheet

12 — Responsive

Responsive Behavior

Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.

Breakpoint	Boundary	Usage
Mobile	481px	2 @media rules
Mobile-2	556px	2 @media rules
Tablet	728px	3 @media rules
Desktop	960px	3 @media rules
Wide	1302px	3 @media rules

481px

556px

728px

960px

1302px

Extracted from https://motherduck.com/ stylesheets.

13 — Assets

Iconography & Brand Assets

Assets and links extracted from the scraped pages.

Brand mark — extracted (inline SVG)

Logo extracted as inline SVG from the page markup.

Social links found on site

LinkedIn ↗ Twitter / X ↗ YouTube ↗

Icon system

No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.

motherduck.comVisual Language

Color Palette

Typography

Navigation

Button Variants

Cards & Surfaces

section surface

page canvas

card surface

Project Cards

Form Elements

motherduck.comGet in Touch

Spacing Scale

Border Radius

Elevation & Depth

Motion

Responsive Behavior

Iconography & Brand Assets

motherduck.com
Visual Language

motherduck.com
Get in Touch