# Mux — Design Extract (Default)

Source: https://www.mux.com/ (captured 2026-09-02).
Build platform: Next.js (App Router / React Server Components) + Tailwind CSS v4 (token‑driven styling).
This document describes the visual design of the home page. It is a reference, not a set of instructions.


---


## 1. Overall Style

Mux employs a warm, light‑engineering‑drawing aesthetic for a video‑API company.

- The canvas is a warm off‑white (“putty”) rather than pure white; default text is near‑black.
- Content lives in a centered column with 1 px context‑colored rules on the left and right, creating a “margin” feel.
- Sections stack with hairline borders top and bottom; a tiny –1 px margin collapses adjacent borders so each seam is a single line.
- A graph‑paper motif recurs: a 56 px SVG grid tile subdivided at 28 px, stroked in putty tones, used as section backgrounds.
- A fixed hue rotates per section (orange in the hero, yellow, gray, charcoal, blue…). Borders, fills and link underlines all derive from that single variable.
- The master brand colour is pink `#fa50b5` (logo, selection), but the home page leads with orange `#ff6100`.
- All spacing, gaps, border‑radii and sizes are multiples of a single unit: **1.75 rem = 28 px**. Corners are either crisp (`0`, `2px`) or fully round (`rounded‑4` = 112 px pill).
- Two signature button motions: a “pushable key” that lifts ~5 px on hover and snaps back on press, and a corner‑morph that animates border‑radius between round and square.
- Type voices: a rounded display face (Rotonto, commercial) for uppercase headlines, a grotesque (Aeonik, commercial) for body and bold sub‑heads, and JetBrains Mono for labels, tabs, buttons and stats (always UPPERCASE).
- Copy is developer‑first: a live cost calculator, code tabs, an SDK language grid, “built for humans and robots.”
- Hero tagline: “Video for developers” – “Mux helps teams do more with video. Stream it, moderate it, search it, analyze it, transform it. Build cost‑effectively in minutes, not months.”


## 2. Colour Palette (generic description)

The palette is built on a warm neutral ground and a rotating accent hue.

- **Neutrals** – a warm off‑white canvas, a lifted pale surface, a lightest near‑white, and a deep putty tone for quiet buttons.
- **Accent hues** – each section adopts one hue from a fixed set (orange, yellow, gray, charcoal, blue, pink, green, red). Borders, fills and link colours all stem from that one variable.
- **Brand triad** – every hue is supplied as base, a darker version for borders/text, and a neon‑saturated version for highlights/glows.
- **Link colours** – distinct light/dark variants for blue and green links.
- **Dark surfaces** – charcoal and black for footers and some cards, with white headings and a muted body colour.
- **Selection** – `::selection` uses the pink‑neon hue at 60 % alpha.

*(Exact hex values have been replaced with descriptive roles; any remaining colour tokens are generic references.)*


## 3. Typography (generic)

- **Display face** – a rounded commercial sans‑serif (originally Rotonto) used in UPPERCASE with moderate tracking.
- **Body face** – a grotesque commercial sans‑serif (originally Aeonik) with regular and bold weights, used for prose and bold sub‑headings.
- **Mono face** – JetBrains Mono (open‑source) for every label, eyebrow, tab, button, stat and code snippet, rendered at 0.825 em of its context and always UPPERCASE except in code blocks.
- **Substitutes** – when rebuilding without licences, Rubik can stand in for the display face and Inter for the body face.
- **Type scale** – a modular scale based on the 1.75 rem spacing unit, ranging from 0.75 rem (12 px) up to 4.125 rem (66 px) for large headlines.
- **Line‑height & tracking** – heading leading of 1.15–1.2, body 1.5, mono 1.2, tracking wide (0.02 em) for display.

*(Font names have been replaced with free‑substitute families; a note indicates which original fonts are commercial.)*


## 4. Layout (generic)

- The page is a framed column grid: thin “rail” columns on the sides (≈14 px at mobile, widening at larger breakpoints) surrounding a central content column whose edges are painted as 1 px context‑colored rules.
- **Maximum content width** ≈ 1344 px (48 × spacing). Prose blocks cap at 42 rem (672 px).
- **One spacing unit**: 1.75 rem = 28 px, unchanged across breakpoints. Utilities scale it (p‑0.25 → 7 px, p‑1 → 28 px, etc.).
- **Breakpoints** derived from the unit: ~504 px (18×28), 768 px, ~784 px, ~1176 px (42×28), ~1456 px (52×28), 1920 px.
- **Border‑radius scale**: 0, 2 px, rounded‑1 (28 px), rounded‑2 (56 px), rounded‑4 (112 px, pill), rounded‑full.
- **Sections** stack vertically as full‑width bands with their own background + context‑colored border, separated by a single shared hairline. Dark bands (charcoal/black) provide rhythm; the footer is charcoal.
- **Depth** is conveyed by a 1 px border and a slightly different fill; only a few elements receive a faint drop‑shadow.
- **Blueprint grid SVG** fills some section backgrounds instead of a flat colour.


## 5. Components (generic)

- **Pushable‑key button** – two stacked layers (a muted base and a coloured face). On hover the face lifts ~5 px and reveals a shadow ledge; on press it snaps back. Uses the section’s accent hue.
- **Corner‑morph button** – a pill that animates its border‑radius between round and square on hover, using the energetic cubic‑bezier easing.
- **Pill / chip** – fully rounded, 1 px border (context colour), a –0.5 px negative margin to merge with neighbours, uppercase mono label. Used for “Trusted‑by” tags, tab groups and status indicators.
- **Nav / header** – a bordered bar with the brand wordmark, product/solution/pricing links (Radix dropdown), and CTA buttons (talk‑to‑us, log‑in, get‑started). Sits inside the framed column.
- **Tab group** – mono UPPERCASE labels in a row, active tab bottom border merges with the panel.
- **Cost calculator row** – stacked label/value pairs in mono, ending with a “Total” line and a CTA.
- **Case‑study card** – big quantified result, customer name, short context line, link.
- **Testimonial** – embedded pull‑quotes with attribution.
- **Code block** – dark background, JetBrains Mono, tabbed by embed method, copy control.
- **Footer** – charcoal background, white text, link grid (Product, Resources, Developers, Integrations, Solutions, Company) and legal/social row.


## 6. Page Structure and Content (generic order)

1. **Header & navigation** – brand wordmark, nav triggers, CTA buttons.
2. **Hero** – large UPPERCASE headline, tagline paragraph, primary CTA (“Get started”), secondary CTA (“Read docs”), context hue orange.
3. **Trusted‑by list** – customer names in a grid (placeholder; original list removed).
4. **Features section** – tabbed demo (Upload, Transcript, Thumbnails, GIFs, Clipping, Storyboards).
5. **Embedding a video** – code tabs (React component, Web component, iframe embed).
6. **Cost calculator** – label/value rows, CTA “Use our calculator.”
7. **Video analytics overview** – brief description of metrics.
8. **Mux robots** – “Integrate pre‑built AI workflows or build your own.”
9. **Case studies** – quantified results for selected customers.
10. **Language & frameworks** – compatibility list (Python, Go, Elixir, Node, Ruby, PHP, iOS, Android, Vercel, Next.js, Astro).
11. **Global testimonials** – pull‑quotes / embedded tweets.
12. **Final CTA** – “No credit card required to start using Mux. Start building for free.”
13. **Footer** – link grid + legal/social.


## 7. Assets (generic)

- Blueprint grid SVG (56 px tile, 28 px subdivisions) – used as a repeating background.
- Line‑icon set (monochrome, non‑scaling‑stroke) for arrows, chevrons, copy, close.
- Video via Mux player or image.mux.com thumbnails; placeholder fill uses the neutral deep tone.
- Customer logos – generic placeholders; the original list of brand marks has been replaced.
- No decorative photography beyond the grid and colour bands.


## 8. Motion (generic)

- Easing: cubic‑bezier(0.7,0,0.3,1) “fast‑in fast‑out” for UI; cubic‑bezier(0.2,0.3,0.65,1) for entrances.
- Default transition duration 0.15 s.
- Button lift (translate‑y –5.25 px) and corner‑ morph on hover, both on the energetic curve.
- Hero content settles with a slow translate‑y (1250 ms) matching a delay.
- Lava‑lamp gradient drift (15 s loop) on some coloured panels.
- Loader/pills: blink, typewriter, cycling ellipses.
- Button throb pulse (2‑count).
- Respects `prefers‑reduced‑motion`.


## 9. Quick Token Summary (generic)

```css
:root {
  /* ground + neutrals */
  --color-putty:          #e2e4dd;   /* warm off‑white canvas */
  --color-putty-light:    #f4f6f4;
  --color-putty-lighter:  #fafaf9;
  --color-putty-deep:     #d0d2c8;

  /* brand hue (example) */
  --color-orange:         #ff6100;  --color-orange-dark: #ba4300;  --color-orange-neon: #ff8e0a;

  /* type */
  --font-display: "Rubik", "Helvetica Neue", sans-serif;   /* display, UPPERCASE */
  --font-body:    "Inter", "Helvetica Neue", sans-serif;    /* body, regular/bold */
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", monospace;

  /* geometry */
  --spacing: 1.75rem;              /* 28 px, constant at every breakpoint */
  --grid-width: min(calc(var(--spacing) * 48), 100% - calc(var(--spacing) * 4)); /* ~1344px */
  --max-width-content: 42rem;      /* 672px prose cap */
  --radius-4: 112px;               /* pill */

  /* motion */
  --ease-in-out-energetic: cubic-bezier(.7, 0, .3, 1);
  --ease-out-energetic:    cubic-bezier(.2, .3, .65, 1);
  --default-transition-duration: .15s;
}
```