---
title: "Mux design system"
variant: extended
source: https://www.mux.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/mux-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mux · Design System

> Warm editorial surfaces meet vivid video tooling.

**Theme:** light · **Industry:** devtools · **Source:** https://www.mux.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mux pairs a warm gray canvas and confident black typography with rounded product demos, vivid orange actions, and technical details. Its long homepage alternates open editorial sections with dense interface showcases and dark testimonial and footer bands.

## North star

Keep a warm, restrained canvas and crisp technical typography, then make product demos and orange actions the focal points.

## Overview

The visual system is anchored by a muted warm-gray canvas (#e2e4dd), with near-black type and outlined boundaries giving the page a restrained, technical character. Pale surfaces distinguish interactive demonstrations, while charcoal panels create strong contrast for code examples, AI workflows, testimonials, and the footer. Amber appears as a large CTA band and selected demo accents; orange is reserved for the primary hero action and small markers. Typography combines Aeonik’s clean, friendly sans-serif for navigation and reading with JetBrains Mono for labels, code, and compact uppercase controls. A distinctive display face shapes the oversized hero headline. The layout moves between centered hero content, modular demo grids, split editorial features, and dark testimonial cards. Rounded CTA pills and generous card corners soften the precise grid, while thin gray rules keep navigation, logo cells, and panels visually connected. Product imagery and robot illustrations add personality without changing the restrained base palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Logo cells, demo cards, and light button surfaces against the warm gray canvas. |
| Signal Ink | `#000000` | `--color-signal-ink` | brand | Primary headings, body copy, navigation, links, and high-contrast interface text. |
| Warm Canvas | `#e2e4dd` | `--color-warm-canvas` | brand | Main page background, hero field, and open editorial feature sections. |
| Charcoal Panel | `#242628` | `--color-charcoal-panel` | surface | Dark demo panels, testimonial section, and footer backgrounds. |
| API Blue | `#0091ff` | `--color-api-blue` | accent | A sparse link accent; not a defining large-area color in the supplied screenshots. |
| Mux Amber | `#ffb200` | `--color-mux-amber` | accent | Full-width closing CTA band and selected highlights within product demos. |
| Mist Surface | `#f4f6f4` | `--color-mist-surface` | surface | Pale background for the interactive video-data demonstration section. |
| Slate Mist | `#adb9c6` | `--color-slate-mist` | semantic | Muted text in video transcript and interface playback details on dark panels. |
| Action Orange | `#ff6100` | `--color-action-orange` | accent | Hero primary CTA and small NO badges or markers inside product interfaces. |
| Cool Rule | `#828c97` | `--color-cool-rule` | semantic | Borders and restrained outlines around cards, buttons, and section elements. |
| Deep Fade | `#121314` | `--color-deep-fade` | surface | Dark gradient transition detail; supporting shade rather than a major flat section color. |
| Stone Surface | `#d0d2c8` | `--color-stone-surface` | surface | Muted AI-workflow section background and secondary card or control surfaces. |
| Antique Gold | `#bd8209` | `--color-antique-gold` | semantic | Measured border detail in card and section elements; not a primary brand fill. |
| Graphite Edge | `#565e67` | `--color-graphite-edge` | semantic | Subtle outlines and badge details, especially around compact interface labels. |

### Semantic aliases

`--color-canvas` → `#e2e4dd` (Warm Canvas) · `--color-surface` → `#242628` (Charcoal Panel) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-surface-3` → `#f4f6f4` (Mist Surface) · `--color-surface-4` → `#d0d2c8` (Stone Surface) · `--color-text` → `#000000` (Signal Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#adb9c6` (Slate Mist) · `--color-border` → `#828c97` (Cool Rule) · `--color-accent` → `#0091ff` (API Blue) · `--color-accent-2` → `#ffb200` (Mux Amber) · `--color-accent-3` → `#ff6100` (Action Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#e2e4dd` | 16.38:1 | AAA |
| `#000000` | `#242628` | 1.38:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f4f6f4` | 19.34:1 | AAA |
| `#ffffff` | `#e2e4dd` | 1.28:1 | fail |
| `#ffffff` | `#242628` | 15.19:1 | AAA |
| `#ffffff` | `#f4f6f4` | 1.09:1 | fail |
| `#adb9c6` | `#e2e4dd` | 1.55:1 | fail |
| `#adb9c6` | `#242628` | 7.62:1 | AAA |
| `#adb9c6` | `#ffffff` | 1.99:1 | fail |

### Gradients

- `linear-gradient(to left, rgb(0, 0, 0) 0%, oklab(0 0 0 / 0.5) 70%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, rgb(0, 0, 0) 0%, oklab(0 0 0 / 0.5) 70%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(in oklab, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, rgb(36, 38, 40) 0%, oklab(0.267355 -0.00175832 -0.00437757 / 0.5) 70%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Aeonik | `--font-body` | webfont | 400, 700 | Main interface and reading face for body text, navigation, headings, links, and buttons. | Inter |
| JetBrainsMono | `--font-mono` | webfont | 400 | Monospaced labels, code, captions, and compact uppercase CTA text. | JetBrains Mono |

- **Aeonik:** Use regular weight for reading and navigation, bold for section headings; keep casing natural and tracking restrained.
- **JetBrainsMono:** Regular weight; use uppercase for short controls and technical labels, with clear compact utility styling.

### Type scale — Perfect Fifth (ratio ≈ 1.462, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 50px | 400 | 1.2 | 0.02em | — | Rotonto | Oversized centered hero headline, in a distinctive display face. |
| h2 | 24px | 700 | 1.15 | 0 | — | Aeonik | Primary feature and testimonial section headings. |
| h3 | 21px | 700 | 1.15 | 0 | — | Aeonik | Product demo card titles and subsection headings. |
| body | 16px | 400 | 1.5 | 0.02em | — | Aeonik | Supporting copy, feature descriptions, and explanatory text. |
| caption | 14px | 400 | 1.6 | 0 | — | JetBrainsMono | Monospaced technical labels, timestamps, and compact captions. |
| button | 16px | 700 | 1.5 | 0.02em | — | Aeonik | Bold labels for prominent actions and interface controls. |
| nav | 16px | 400 | 1.5 | 0 | — | Aeonik | Header navigation and primary site links. |
| link | 16px | 400 | 1.5 | 0.02em | — | Aeonik | Inline feature links and calls to explore product content. |
| code | 14px | 400 | 1.6 | 0 | — | JetBrainsMono | Code snippets and technical examples in demo panels. |

OpenType features in use: `"dlig", "kern"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 7, 14, 28, 42, 56, 84 px.
- Section rhythm 56px · element gap 28px · card padding — · max content width 1328px.

The page uses a centered content frame measured at a 1328px maximum width, with a comfortable density and clear separation between major sections. The hero is centered and spacious; subsequent content switches to multi-column, card-based demonstrations and six-column editorial splits. The AI workflow area becomes a denser twelve-column composition, while testimonials use three columns. Sections follow a measured 56px rhythm, with 28px element spacing. Thin rules align the header, logo strip, and page edges; preserve generous breathing room around headings and primary actions.

## Shape & elevation

- Radius: button `9999px` · card `28px` · media `2px` · badge `9999px` · xs `2px` · sm `14px` · md `28px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `2s cubic-bezier(0.7, 0, 0.3, 1)` on interactive elements.

The page is mostly flat: no measured shadows are present. Separate content with thin cool-gray borders, contrasting section fills, and card boundaries instead of floating elevation. Rounded demo cards and pill-shaped controls create softness, while layered video and interface overlays provide depth within product mockups.

## Imagery

Use real video stills and interface captures as evidence of the product, framed within rounded demo panels and occasionally paired with explanatory cards. The page also uses playful robot and hand-drawn graffiti illustrations, which add character without defining the core palette. Keep imagery integrated with the grid, retain recognizable playback or code overlays, and use darker media panels where contrast helps interface content read clearly.

## Components

### Primary CTA

Bright orange pill button with black uppercase monospaced text; pair it with a white outlined secondary action in the hero.

### Header navigation

Warm-gray header with black Aeonik links, a logo at left, fine rules, and a prominent amber contact pill.

### Logo cloud

White horizontal brand strip divided into equal cells by thin gray rules, with partner marks centered in each cell.

### Interactive demo card

Rounded product panel combining explanatory text, video or analytics UI, and small mono labels or action controls.

### Dark product panel

Charcoal rounded card with white text, fine cool-gray outlines, and embedded code, transcript, or AI workflow content.

### Testimonial grid

Dark band with a large illustrated title tile alongside compact charcoal quote cards and subdued attribution details.

### Closing CTA band

Full-width amber section with a large charcoal pill action and two smaller utility links beneath.

### Measured component styles

- **Primary button** (“TRY ANOTHER VIDEO CARET”): background #e2e4dd · text #000000 · border 1px solid #d0d2c8 · radius 0px · padding 14px 28px · 400 14px JetBrainsMono · uppercase
- **Link** (“Beta Arrow Right”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Aeonik
- **Card** (“Embedding a video with Mux is simple REA”): transparent background · text #ffffff · border 1px solid · radius 28px · padding 0px · 400 16px Aeonik
- **Badge** (“NO”): background #ff6100 · text #000000 · border 1px solid #565e67 · radius 9999px · padding 0px · 400 14px JetBrainsMono · uppercase
- **Navigation item** (“Product Caret Solutions Caret Developers”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Aeonik

## Do

- Use the warm gray canvas for open sections.
- Keep primary copy black and highly legible.
- Reserve orange for prominent actions and small highlights.
- Use JetBrains Mono for labels, code, and compact controls.
- Build product stories from rounded cards and clear grid divisions.
- Alternate pale content sections with charcoal product panels.

## Don't

- Do not introduce unmeasured palette colors.
- Do not add drop shadows to otherwise flat panels.
- Do not make every section dark or card-heavy.
- Do not use orange as the dominant background outside the CTA band.
- Do not replace product evidence with generic decorative imagery.
- Do not use monospaced type for long-form body copy.

## Agent prompt

Build a new Mux page in the same restrained, developer-focused visual language. Use Warm Canvas (#e2e4dd) as the main field, Signal Ink (#000000) for text, Gallery White (#ffffff) and Mist Surface (#f4f6f4) for light cards, and Charcoal Panel (#242628) for dark product modules. Apply Mux Amber (#ffb200) to a standout CTA area and Action Orange (#ff6100) sparingly to primary actions or interface markers. Set reading and navigation in Aeonik or a close sans-serif substitute; use JetBrains Mono for code, captions, and uppercase utility labels. Compose centered editorial introductions with modular, rounded product demonstrations, thin borders, and generous measured rhythm. Prefer real product UI, video stills, and restrained playful illustrations. Keep the page flat, aligned, and clear rather than adding shadows or decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero within a warm-gray canvas, followed by a segmented partner-logo strip and visible media previews. | Primary and secondary CTA, Partner social proof | Oversized display headline, Centered copy, Orange pill CTA, Ruled logo cells |
| 2 | product-showcase | Pale section with a multi-column collage of video, transcript, code, cost, and analytics cards. | Select a video, Try another video, Show code | Rounded demo cards, Light and dark panel contrast, Grid-backed background, Compact controls |
| 3 | feature-grid | Dense twelve-column composition of a lead feature card, smaller workflow panels, and large illustration. | Start building, Explore workflow examples | Stone background, Dark rounded cards, Embedded video stills, Robot illustration |
| 4 | feature-split | Open six-column editorial section with heading on one side and explanatory case-study content on the other. | Browse case studies, Carousel-style media controls | Split text layout, Small video thumbnail, Minimal circular controls |
| 5 | integrations | Six-column split introduction followed by a large ruled grid of language and framework marks. | Browse supported technologies, Visit marketplace | Logo tiles, Thin dividers, Minimal text links |
| 6 | testimonials | Charcoal three-column band with an illustrated title tile and a grid of customer quote cards. | Read customer quotes, Explore customer stories | Dark section band, Illustrated feature tile, Compact quote cards, Muted attribution |
| 7 | cta | Full-width amber band with one prominent charcoal pill action and two supporting links. | Start building for free, Explore APIs, Request a demo | Amber background, Large dark pill, Small mono labels, Simple icons |
| 8 | footer | Tall charcoal footer with multiple link columns, social icons, a data CTA, and a slim legal row. | Browse grouped links, Open standalone Mux Data, Visit social channels | Charcoal surface, White and muted text, Column headings, Bottom legal divider |

## Source CSS custom properties (selected)

```css
--tweet-border: 1px solid #cfd9de;
--tweet-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--tweet-font-color: #0f1419;
--tweet-font-color-secondary: #536471;
--tweet-bg-color: #fff;
--tweet-bg-color-hover: #f7f9f9;
--tweet-quoted-bg-color-hover: #00000008;
--tweet-color-blue-primary: #1d9bf0;
--tweet-color-blue-primary-hover: #1a8cd8;
--tweet-color-blue-secondary: #006fd6;
--tweet-color-blue-secondary-hover: #006fd61a;
--tweet-color-red-primary: #f91880;
--tweet-color-red-primary-hover: #f918801a;
--tweet-color-green-primary: #00ba7c;
--tweet-color-green-primary-hover: #00ba7c1a;
--tweet-verified-old-color: #829aab;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mux-com