Design System Audit

mux.com
Visual Language

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

8Color tokens
8Type styles
6Case studies
AeonikPrimary font
01 — Foundations

Color Palette

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

black

#000000

Dominant — text, background

21.00:1 on page bg #ffffff · AAA ✓

white

#ffffff

Major — background, text

1.00:1 on page bg #ffffff · fails AA

canvas-soft

#e2e4dd

Major — background

16.38:1 on black · AAA ✓

canvas

#f4f6f4

Supporting — background

19.34:1 on black · AAA ✓

ink-deepest

#242628

Accent — background

15.19:1 on white · AAA ✓

primary

#ff6100

Accent — background

6.96:1 on black · AA ✓

accent

#ffb200

Accent — background

11.62:1 on black · AAA ✓

accent-2

#d0d2c8

Accent — background

13.73:1 on black · AAA ✓
02 — Foundations

Typography

Body: Aeonik · Display: JetBrainsMono. Font files loaded by the site: Aeonik (400, 700) · Rotonto (400) · JetBrainsMono (400).

RoleSpecsSampleUsed on
Body
Aeonik
16px / 400
lh 1.50
Skip to content
HTML element · 118 uses · real site copy
Body
Aeonik
16px / 400
lh 1.50
Skip to content
IMG element · 21 uses · real site copy
Body
Aeonik
16px / 400
lh 1.00
Skip to content
DIV element · 12 uses · real site copy
Body
Aeonik
16px / 400
lh 1.50
Skip to content
SPAN element · 9 uses · real site copy
Body
JetBrainsMono
66px / 400
lh 1.15
Video for developers
H1 element · 1 uses · real site copy
Body
Aeonik
18px / 400
lh 1.50
The quick brown fox jumps over the lazy dog
P element · 1 uses
Body
Aeonik
16px / 400
Skip to content
MUX-PLAYER element · 1 uses · real site copy
Heading
JetBrainsMono
24px / 700
lh 1.17
Unlock the data in your video
H2 element · 1 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
mux.com logo mux.com
Skip to contentPricingBlogTalk to usTalk to usLog inLog in
Extracted nav tokens
Background#1a1a1a
Text color#ffffff
Font familyAeonik
Links (extracted)Skip to content · Pricing · Blog · Talk to usTalk to us · Log inLog in

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: 112px · fill type: solid · padding density: normal.

btn-primary · token demo

bg #ff6100 · color #ffffff · radius: 112px

btn-secondary · outlined demo

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

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

Flat design system — no box-shadows. Depth is communicated through background contrast and borders.

section surface

bg #ffffff · text #000000

card surface

bg #e2e4dd · text #000000

06 — Components

Project Cards

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

SYNTHESIA BUILT TH

Synthesia built their AI video platform

https://www.mux.com/case-studies/synthesia

GLASSDOOR LAUNCHED

Glassdoor launched user-generated video

https://www.mux.com/case-studies/glassdoor

PATREON BUILT NATI

Patreon built native video

https://www.mux.com/case-studies/patreon

WILL BAUMANNCEO

Will BaumannCEO

https://www.mux.com/case-studies/fourthwall

BETHANY STACHENFEL

Bethany Stachenfeld Co-founder and CEO

https://www.mux.com/case-studies/sendspark

MARK BOGDANOFFPROD

Mark BogdanoffProduction Engineer

https://www.mux.com/case-studies/ted

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

mux.com
Get in Touch

Input states
input · default

radius: not detected · demo border/background styling

input · focus state demo

Demo focus treatment using extracted primary color #ff6100.

select · dropdown
08 — Foundations

Spacing Scale

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

4px
xs
16px
base
28px
xl
56px
3xl
09 — Foundations

Border Radius

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

2px
xs
2px
28px
xl
28px
112px
full
112px
9999px
full
9999px

⚠️ 9999px exceeds any component size — likely from an oversized decorative element (effectively a pill shape), not a reusable radius token.

10 — Foundations

Elevation & Depth

Fully flat design — zero box-shadow usage. Depth communicated through background-color contrast and 1px borders.

Level 0 — Page Canvas

bg #ffffff — the outermost layer. Everything sits on top of this.

Level 1 — Card Surface

bg #ffffff with 1px border. No shadow — white lift creates elevation via contrast.

Dark Section

bg #1a1a1a — depth through color contrast, no shadows.

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.1s ease).

idle vs hover · frozen demo states

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

Motion tokens (extracted)
TokenValueOccurrences
duration-fast0.1s3× in stylesheet
duration-base0.2s10× in stylesheet
duration-slow0.3s3× in stylesheet
duration-slower0.4s2× in stylesheet
duration-slowest1s3× in stylesheet
easing-1ease16× in stylesheet
easing-2linear7× in stylesheet
easing-3ease-in-out4× in stylesheet
12 — Responsive

Responsive Behavior

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

BreakpointBoundaryUsage
Mobile504px19 @media rules
Mobile-2550px2 @media rules
Tablet784px19 @media rules
Tablet-2897px3 @media rules
Desktop1176px21 @media rules
504px
550px
784px
897px
1176px

Extracted from https://www.mux.com/ stylesheets.

13 — Assets

Iconography & Brand Assets

Assets and links extracted from the scraped pages.

Brand mark — extracted asset
mux.com logo

https://cdn.sanity.io/images/2ejqxsnu/production/0b0e4f229af2b3d4a4b2bcbea4eb73da880282de-115x26.svg?auto=format&fit=max&w=3840

Social links found on site
Twitter / X ↗ LinkedIn ↗ GitHub ↗ YouTube ↗
Icon system

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