What is Mux's primary brand color?

Mux's primary brand voltage is amber `#ffb200` — the Get-started pill in the hero, the Start-building-for-free pill in the conversion band, and the small `Try Mux Data` chip near the footer. It is rare on the page (12 background fills, 70 text/border uses, total frequency 152) but it carries every primary CTA. The secondary voltage is a saturated brand green `#1be349` used for dashboard accents and the Talk-to-sales footer pill. Black `#000000` carries text; the cream `#e2e4dd` carries the canvas.

What typography does Mux use, and what should I substitute if Rotonto is unavailable?

Display sets in Rotonto at weight 400 (the hero `Video for developers` headline lands at 66px / 75.9px line-height / 1.32px tracking). Body sets in Aeonik at weight 400 with a positive `0.32px` letter-spacing — paragraphs, links, button labels, nav. Section eyebrows and code labels set in JetBrainsMono 14px uppercase. The three faces never blend roles. If Rotonto is unavailable, `Söhne Breit` or `Editorial New` at weight 400 are the closest wide-mouth grotesque substitutes; `Inter` plus `font-feature-settings: 'ss01'` for Aeonik; `JetBrains Mono` open-source is exact for the mono.

Why does Mux only use two card radii?

Mux runs an aggressive two-pole radius system. Every card, surface, transcript panel, code editor, and pricing block uses `28px` (the dominant value with 40 occurrences in the extracted CSS). Every CTA, every chip, every social-icon button, every Mux-Robots demo control uses `9999px`, a full pill (17 occurrences). The marketing surface deliberately avoids the `8px–16px` mid-range that most fintech and infra brands default to. Nothing about a Mux card is supposed to read as a square — the chrome itself is the voice.

Why is Mux's background cream instead of white?

The cream `#e2e4dd` (18 background fills) and the slightly bluer `#d0d2c8` (5 background fills) act as the page's warm body tone — white `#ffffff` is reserved for cards floating on the cream. The result is a four-step ladder: cream body, white card, dark `#242628` technical surface, ink-black `#000000` text. Where most developer infra defaults to pure-white-on-near-black, Mux runs warm-cream-on-near-black. The cream tone gives the orange CTA somewhere to land without screaming.

How does Mux handle elevation?

There are no captured drop shadows on the page — no `box-shadow` tokens fire on either the cards or the pills. Cards earn elevation through surface contrast alone: a white card lifts off the cream canvas via the `#e2e4dd` → `#ffffff` color step; a dark `#242628` panel reads as an inset technical layer by inverting polarity. The 28px radius does the rest. This is shadow-as-absence — the spec for using it is to commit to flat surfaces and let the cream / white / dark trio carry the depth that shadows usually carry.

Can I use this DESIGN.md to build my own React project?

Yes — the file is structured for direct ingestion by Claude, Cursor, or any AI tool that reads token-based design specs. Feed it as context and the agent reproduces Mux's moves rather than inventing a generic shadcn theme: cream canvas instead of pure white, amber single-voltage CTA, 28px card chrome, 9999px pill geometry, three-typeface contract with JetBrainsMono uppercase eyebrows. Every color hex, typography size, radius, and spacing value is a quoted token you can paste straight into Tailwind config or CSS variables.

Mux Design System

Mux's video-platform design language as a DESIGN.md file.

About Mux DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source mux.com

Web Infrastructure & Hosting
Developer Tools & IDEs

Mux's marketing surface is the dashboard of a video-API developer platform, written for engineers who already build players and care what a 99th-percentile rebuffer rate looks like. The brand sits on a warm cream canvas (`#e2e4dd`) rather than the developer-genre default of pure-white-on-near-black — and breaks that calm with an amber Get-started pill (`#ffb200`) where most infra brands would default to a blue, an ink-black, or a saturated indigo. A secondary brand green (`#1be349`) handles dashboard accents and the footer Talk-to-sales CTA. Everywhere else — code panels, dark transcript surfaces, the customer-love testimonial band — the page drops to a near-black `#242628` ink layer. The decoration is the contrast: warm canvas, dark technical card, amber pill.

This DESIGN.md packages the system into a single machine-readable file. Inside: 19 color tokens (cream canvas, amber primary, green secondary, near-black surface, four-step gray ladder), 14 typography styles across Rotonto display, Aeonik body, and JetBrainsMono mono, 5 corner radii (with the `28px` card radius doing most of the lifting and `9999px` reserved for pills), 9 spacing values built on a `14px / 28px / 56px` rhythm, and 18 components from `nav-bar` to `hero-band` to the polarity-flipped `dark-feature-card`. The format follows the Google Labs DESIGN.md spec — colors, typography, rounded, spacing, components, all token-referenced.

Feed the file to Claude, Cursor, or Copilot when you need a React component that reads as a video-developer brand rather than as a generic shadcn theme. The agent picks up the moves — amber single-voltage CTAs, cream canvas, 28px card chrome, JetBrainsMono uppercase eyebrows above Rotonto display, Aeonik body with a tracked `0.32px` letter-spacing. Reference the tokens directly in Tailwind config, or audit existing UI against them. The system rewards study because of what it refuses: there is no blue primary, no second display weight beyond Rotonto's working `400`, and no card radius between `28px` and `9999px` — the brand commits to a wide-corner geometry and never blinks.

What makes it distinct

Amber as primary voltage`#ffb200` paints the only Get started pill, never softened to a blue or a black
Two ultra-large radii28px for every card and 9999px for every CTA pill, with nothing between them
Three-typeface contractRotonto for display, Aeonik for body, JetBrainsMono uppercase for eyebrows
Cream canvas over white`#e2e4dd` is the warm body tone, white is reserved for cards and the nav
Green as the second voice`#1be349` carries dashboard accents, demo affordances, and the footer Talk-to-sales pill

Live at mux.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

mux.com

Explore Mux

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Mux design system FAQ

Common questions about Mux's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Mux — official site

Video API for developers — streaming, analytics, captions, and AI-ready video infrastructure.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Mux in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→