Bold, blocky and confidently graphic. The canvas is an unusual warm gray-green sage (#e2e4dd) framed by thin margin rails, and the page is built from full-bleed colour blocks in the brand trio — hazard yellow #ffb200, hot orange #ff6100 and shocking pink #fa50b5 — alternating with white and dark-charcoal (#242628) bands. Headlines are the geometric/techno Rotonto display face in wide UPPERCASE (66/76, +1.32px tracking); the UI, body and nav run in the neutral Aeonik grotesque; and every eyebrow, label and button is uppercase JetBrains Mono for a developer-console feel. Buttons are full pills with mono labels — an orange primary, a yellow secondary and a white 1px outline, 44px tall, black text on colour. Content is framed in chunky 28px cards and a visible grid of thin bordered cells, with playful robot/character illustrations. Depth is nearly flat — graphic colour blocks and hairline borders rather than drop shadows; ink is black with cool blue-gray secondary text.
Browse Mux in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: mux.com (live DOM, computed styles), 2026-07-25 (desktop 1512px). Coverage: home. Dashboard: behind login (needs-dashboard). Responsive: breakpoints not captured. Motion: not captured in detail.
Mux is bold, blocky and confidently graphic. The canvas is an unusual warm gray-green sage, framed by thin margin rails, and the page is built from full-bleed colour blocks in the brand trio — a hazard yellow, a hot orange and a shocking pink — alternating with white and dark-charcoal bands. The hero headline is set in a geometric, slightly techno display face (Rotonto) in wide UPPERCASE, while the UI runs in the neutral Aeonik grotesque and every eyebrow, label and button is JetBrains Mono in uppercase, giving it a developer-console flavour. Playful robot/character illustrations and chunky 28px-radius bordered cells add personality. Controls are full pills with mono labels; depth is nearly flat, carried by colour blocks and hairline borders rather than shadow. Feels: bold, graphic, blocky, developer-playful.
| Token | Hex | Role / usage |
|---|---|---|
| sage | #e2e4dd | Primary gray-green canvas |
| sage-2 | #d0d2c8 | Deeper sage block |
| sage-tint | #f4f6f4 | Light section |
| gray-50 | #f4f4f4 | Light inset |
| white | #ffffff | Panels / cards |
| charcoal | #242628 | Dark section / footer |
| black | #000000 | Ink / dark blocks |
| Token | Hex | Role / usage |
|---|---|---|
| ink | #000000 | Primary text |
| ink-800 | #212121 | Strong text |
| blue-gray | #adb9c6 | Cool secondary text |
| gray-500 | #828c97 | Tertiary text |
| gray-600 | #565e67 | Muted |
| Token | Hex | Role / usage |
|---|---|---|
| yellow | #ffb200 | Colour block / secondary button |
| orange | #ff6100 | Colour block / primary button |
| pink | #fa50b5 | Colour block / accent |
| blue | #0091ff | Rare link accent |
| green | #1be349 | Rare accent |
Rule: build sections as full-bleed colour blocks in yellow/orange/pink over sage/white/charcoal; ink is black.
Rotonto — geometric/techno display face for big UPPERCASE headlines.Aeonik — neutral grotesque for UI, body, nav and section subheads.JetBrainsMono — every eyebrow, label, button and code snippet (UPPERCASE for chrome).| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Hero display (h1) | Rotonto | 66 / 76 | 400 | +1.32px | UPPERCASE |
| Section subhead | Aeonik | 24 / 27.6 | 700 | normal | sentence |
| Body | Aeonik | 16 / 24 | 400 | normal | sentence |
| Nav | Aeonik | 16 | 400 | normal | sentence |
| Eyebrow / label | JetBrainsMono | 14 / 16.8 | 400 | normal | UPPERCASE |
| Button | JetBrainsMono | 12 | 500 | normal | UPPERCASE |
Patterns: display is the geometric Rotonto in wide uppercase; all chrome (eyebrows, labels, buttons) is uppercase JetBrains Mono for a console feel; body/UI is calm Aeonik.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.