# Mux — Design System
> Video infrastructure API for developers.
- **Canonical:** https://uiuxskills.com/library/mux
- **Source:** https://www.mux.com
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:10.271Z

---

---
version: alpha
name: Mux
description: Video infrastructure API for developers.
tone: >-
  Technical, playful, and direct. The brand balances professional reliability with a 'hacker'
  aesthetic, often using retro-inspired imagery and clear, benefit-driven copy.
color-scheme: light
colors:
  primary: "#FF6100"
  secondary: "#FFB200"
  surface: "#FFFFFF"
  surface-container: "#F4F4F4"
  on-surface: "#000000"
  on-primary: "#FFFFFF"
  error: "#D32F2F"
  success: "#388E3C"
  outline: "#E0E0E0"
  focus-ring: "#FF6100"
typography:
  display-lg:
    fontFamily: Arial
    fontSize: 48px
  display-md:
    fontFamily: Arial
    fontSize: 36px
  headline-lg:
    fontFamily: Arial
    fontSize: 30px
  headline-md:
    fontFamily: Arial
    fontSize: 24px
  headline-sm:
    fontFamily: Arial
    fontSize: 20px
  body-md:
    fontFamily: Arial
    fontSize: 16px
  label-sm:
    fontFamily: Arial
    fontSize: 12px
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#E65700"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#E65700"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFEBEE"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-medium: 200ms
  easing-standard: ease-in-out
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Mux delivers a high-energy, developer-first visual identity that balances technical precision with a playful, "hacker" aesthetic. The design language is bold and functional, using a vibrant orange-centric palette to communicate performance, reliability, and innovation in the video infrastructure space.

## Colors

The color strategy focuses on high-contrast utility, using a bold brand orange to anchor primary interactions while maintaining a clean, neutral foundation for data-heavy interfaces.

*   Primary (#FF6100): The core brand color used for primary CTAs and active focus states.
*   Secondary (#FFB200): An accent yellow reserved for highlights and progress indicators.
*   Surface (inferred) (#FFFFFF): The primary background color for pages and containers.
*   Surface-container (inferred) (#F4F4F4): A subtle gray background used to differentiate cards and section groupings.
*   On-surface (#000000): The primary text and iconography color.
*   Outline (inferred) (#E0E0E0): The standard border color for structural dividers and input fields.
*   Focus-ring (inferred) (#FF6100): The high-visibility ring used for keyboard navigation and active inputs.
*   Error (inferred) (#D32F2F): Reserved exclusively for critical validation and destructive states.
*   Success (inferred) (#388E3C): Used for status indicators and positive feedback.

## Typography

The typography uses a clean, sans-serif approach to ensure maximum readability for technical documentation and complex data.

*   Display-lg (inferred): Used exclusively for hero-level headlines.
*   Headline-md (inferred): Used for major section headers.
*   Body-md (observed): The standard weight for paragraph text and technical descriptions.
*   Label-sm (observed): Used for UI labels, button text, and small captions.

## Layout

The layout follows a mobile-first, responsive grid system constrained by a max-width container. It utilizes a 4px base spacing unit, favoring generous whitespace in hero sections to emphasize key messages, while applying tighter density to data-heavy components like analytics dashboards. The page pattern typically follows a sequence of: nav, hero, social-proof, features, case-studies, and footer. The hero section is characterized by a centered headline and subhead paired with dual primary and secondary CTAs.

## Elevation & Depth

Depth is applied sparingly to maintain a clean, flat aesthetic, using subtle single-layer shadows to distinguish interactive elements from the background.

*   Elevation.sm (inferred): Subtle lift for small UI elements.
*   Elevation.md (inferred): Standard depth for cards and interactive containers.
*   Elevation.lg (inferred): Used for modals or overlays that require high visual priority.

## Shapes

The brand employs a dual-radius strategy to balance technical rigor with approachability. Structural containers like cards utilize a moderate `{rounded.md}` (4px) to maintain a crisp, professional look, while interactive elements like buttons and badges use `{rounded.full}` to signal clickability and high-energy interaction.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and transparent backgrounds with `{colors.primary}` borders for secondary actions. Always apply `{rounded.full}` to ensure the brand's signature pill-shaped aesthetic.

### Card
Cards are defined by a `{colors.surface}` background and `{rounded.md}` corners. Use these containers to group related features or case study summaries, applying `{colors.outline}` for subtle separation if they are placed on a light background.

### Badge
Badges are used for status indicators, utilizing `{colors.surface-container}` for neutral labels or `{colors.success}` for positive states. They should always use `{typography.label-sm}` and `{rounded.sm}` for a compact, technical look.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.secondary}` for primary action buttons. |
| Apply `{rounded.full}` to all buttons. | Do not mix sharp corners with `{rounded.full}` on the same component. |
| Use `{typography.display-lg}` for hero headlines only. | Avoid using `{typography.body-md}` for headers. |
| Apply `{rounded.md}` to card containers. | Avoid excessive use of `{elevation.lg}` on flat surfaces. |
| Use `{colors.outline}` for all structural dividers. | Do not use `{spacing.xs}` for main section margins. |
| Maintain `{spacing.md}` between card elements. | Never use `{colors.error}` for non-destructive actions. |
| Use `{colors.focus-ring}` for input field focus states. | Avoid using low-contrast colors for text on `{colors.surface}`. |
| Use `{typography.label-sm}` for button labels. | Do not use decorative fonts for technical documentation. |

## Content Style

CTA labels are written as imperative, action-oriented verbs in sentence case (e.g., "Get started," "Talk to us"). This directness mirrors the developer-first nature of the platform.

Headings are benefit-driven and concise, focusing on the "why" behind the technical feature. They are designed to be scanned quickly, avoiding jargon in favor of clear, declarative statements.

Copy density is kept low through the use of short paragraphs and frequent bulleted lists. This rhythm ensures that technical information remains digestible and scannable for busy developers.

## Imagery & Icons

The imagery style is mixed, combining high-fidelity product screenshots with retro-inspired illustrations and graffiti-style graphics. This contrast reinforces the "hacker" aesthetic while keeping the product interface grounded and professional. Iconography should be minimal and functional, adhering to the same clean, bold lines found in the UI.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Mux, a developer-first video infrastructure brand with a technical, bold, and playful "hacker" aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{spacing.md}`, `{rounded.full}` — never hardcode hex values, pixel sizes, or raw font names.
2. Respect the components block exactly: buttons always use `{rounded.full}` (pill shape); cards always use `{rounded.md}`. Do not invent variants or radius combinations the spec doesn't list.
3. Follow the Layout narrative for page structure (nav → hero → social-proof → features → case-studies → footer), spacing density, and the mobile-first breakpoint approach; use one breakpoint at 768px when the spec is silent.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, using `{colors.secondary}` on a primary CTA or applying `{elevation.lg}` to a flat card — surface the conflict before generating output.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values override the spec.

## Output contract

**Must:**
- Use named tokens for every color, spacing, radius, shadow, and typography value.
- Cover hover (`button-primary-hover`, `link-hover`), focus (`input-field-focus`, `{colors.focus-ring}`), and disabled states for every interactive component the spec defines.
- Apply `{motion.duration-medium}` and `{motion.easing-standard}` to all transitions on interactive elements.
- Write CTAs in imperative sentence case per the Content Style section (e.g., "Get started").
- Use `{typography.label-sm}` for all button labels.

**Must NOT:**
- Invent colors, font sizes, or radii absent from the spec.
- Use framework utility defaults when a brand token exists.
- Add emoji, filler copy, or unsolicited marketing language.
- Use `{colors.secondary}` for any primary action button.
- Rewrite, replace, or restructure existing page copy, headings, navigation items, or page sections as a side effect of applying tokens.

## When in doubt
- Ask the user before introducing any value not present in the spec.
- Prefer composing existing components over creating new tokens.
- For ambiguous background roles, default to `{colors.surface}`; for text on that surface, use `{colors.on-surface}`.
- For unspecified elevation needs, default to `{elevation.sm}` — the brand favors flat surfaces; reserve `{elevation.lg}` for modals only.
- If the product has an authoritative design system, its values take precedence over all "(inferred)" tokens in this spec.