# Mux — Design Extract (Blueprint variant)

Source: https://www.mux.com/ (captured 2026-09-02).
Build platform: Next.js (App Router / React Server Components) + Tailwind CSS v4 (token‑driven styling).
Variant: **Blueprint** — an alternative color scheme. Structure, type, layout, and
components are unchanged from `design-default.md`; only the palette moves from a warm
putty‑and‑orange ground to a literal engineering‑blueprint reading: deep navy ground,
white/cyan line‑work, orange kept as the one "marked‑up" callout color.


---


## 1. Overall Style

Unchanged from `design-default.md`: the warm, light‑engineering‑drawing aesthetic, the
graph‑paper grid motif, the 1.75rem spacing unit, the pushable‑key and corner‑morph
button motions. Reading it as a literal drafting‑table blueprint (navy ground, pale
line‑work) is a natural extension of the same metaphor rather than a departure from it.

Hero tagline (unchanged): "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. Color Palette (generic description)

The palette inverts the neutral scale into a deep blueprint navy, keeps the grid motif
as pale line‑work instead of warm hairlines, and keeps the orange accent as the one
"marker" color that reads as a correction or highlight against the blue field.

- **Neutrals** – a deep blueprint‑navy canvas, a lifted navy surface, a brighter navy for hover states, and pale blue‑white for the "line" hairlines.
- **Accent hue** – the home page's orange carries over unchanged; against navy it reads as a grease‑pencil mark‑up rather than a warm sticker.
- **Text** – near‑white with a blue cast for headings; a desaturated pale blue for muted copy.
- **Brand mark** – the logo pink is unchanged; it is a fixed brand color independent of the content scheme.
- **Grid motif** – the same 56px/28px SVG tile, now stroked pale‑on‑navy — this is the one place the variant looks *more* like its metaphor than the default.

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


## 3. Typography (generic)

Unchanged from `design-default.md` — Rotonto‑style rounded display (substitute Rubik),
Aeonik‑style grotesque body (substitute Inter), JetBrains Mono for every label. Colors
follow the neutrals in §2 instead of their light‑mode equivalents.


## 4. Layout (generic)

Unchanged from `design-default.md` — same framed column grid, 1.75rem spacing unit,
breakpoints, and border‑radius scale (0, 2px, 28px, 56px, 112px pill). The graph‑paper
SVG background is unchanged in geometry; only its stroke color shifts to pale‑on‑navy.


## 5. Components (generic)

Unchanged in structure. The pushable‑key button keeps its base/face layering and ~5px
lift; the corner‑morph pill keeps its radius animation. Both now sit on the navy ground,
so their drop‑shadow ledges are lightened rather than darkened to stay visible.


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

Unchanged from `design-default.md` — same section order, same copy.


## 7. Assets (generic)

Unchanged from `design-default.md`. The blueprint‑grid SVG reads even more literally as
a drafting‑table blueprint under this scheme.


## 8. Motion (generic)

Unchanged from `design-default.md` — same easing tokens, same button lift and
corner‑morph, same lava‑lamp drift on colored panels.


## 9. Quick Token Summary (generic)

```css
:root {
  /* ground + neutrals */
  --color-navy:           #14335e;   /* blueprint navy canvas */
  --color-navy-light:     #1b3e6c;
  --color-navy-lighter:   #234a7d;
  --color-navy-deep:      #0e2749;

  /* line-work */
  --color-line:           #2c5089;
  --color-text:           #eaf1ff;
  --color-text-muted:     #9fb6dc;

  /* accent hue (unchanged from default) */
  --color-orange:         #ff6100;  --color-orange-dark: #ba4300;  --color-orange-neon: #ff8e0a;
  --color-pink-brand:     #fa50b5;  /* fixed brand mark color */

  /* type — unchanged from design-default.md */
  --font-display: "Rubik", "Helvetica Neue", sans-serif;
  --font-body:    "Inter", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", monospace;

  /* geometry — unchanged from design-default.md */
  --spacing: 1.75rem;
  --grid-width: min(calc(var(--spacing) * 48), 100% - calc(var(--spacing) * 4));
  --max-width-content: 42rem;
  --radius-4: 112px;

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