Ember Orange
#ff6100Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
Mux
mux.comWebsite preview
The design language
Mux is a sunlit engineering workshop rendered in warm olive paper: a light, spacious developer-tool surface where the canvas itself (#e2e4dd, a warm sage-gray) feels like a drafting table, and crisp white cards sit on top like printed spec sheets. The system is deliberately low-chroma — the background, borders, and text carry the visual weight, while two warm accents (vivid orange #ff6100 and vivid yellow #ffb200) arrive as small functional punctuation: filled CTAs, hairline section dividers, and tiny AI labels. Typography is dual: a geometric neo-grotesque (Aeonik) for nearly everything, and a chunky display face (Rotonto) reserved for the biggest hero headlines, giving each page a clear two-register rhythm. Components are rounded generously — 28px card radii, 112–9999px pill buttons — making the interface feel hand-built and approachable rather than enterprise-precise. Dark product surfaces (#242628) appear as inset panels (transcript viewers, video player chrome) so the rest of the page stays calm and warm.
Color palette
brand
accent
Amber Signal
#ffb200Hairline section dividers, feature underlines, AI badges, small punctuation strokes — a warm goldenrod that runs through the page like a highlighter mark
Marigold Deep
#bd8209Darker amber tone used for emphasized amber strokes and secondary accent borders
Signal Blue
#0091ffInline text links, interactive link underlines — the only cool chromatic accent, reserved exclusively for hyperlink treatment
Sprout Green
#00be43Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color
neutral
Olive Drafting
#e2e4ddPage canvas, hero backgrounds, the warm sage paper that everything sits on — the dominant surface tone of the entire site
Snow Card
#ffffffCard surfaces, navigation bar, elevated panels — the only surface that floats above the olive canvas
Inkstone
#000000Primary text, heading strokes, nav text, icon strokes — maximum contrast on light surfaces, always pure black
Forge Dark
#242628Dark inset surfaces — product mockups, transcript panels, video player chrome, footer; provides the only dark layer in the system
Mist Surface
#f4f6f4Subtle secondary surface, quiet dividers between sections, gentle wash backgrounds
Linen Border
#d0d2c8Hairline section dividers, card borders, warm gray rules that separate content bands
Steel
#828c97Muted text, secondary button borders, disabled states, low-emphasis borders
Pewter
#adb9c6Outlined button borders, subtle outlines on tags and chips, medium-weight hairlines
Graphite
#565e67Secondary text on light surfaces, helper copy, metadata labels
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
66px · 400 · 1.15 · 1.32px trackingThe quick brown fox jumps
heading-lg
50px · 400 · 1.15 · 1px trackingThe quick brown fox jumps
heading
24px · 700 · 1.2 · 0.48px trackingThe quick brown fox jumps
heading-sm
21px · 700 · 1.4 · 0.42px trackingThe quick brown fox jumps
subheading
18px · 700 · 1.5 · 0.36px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0.32px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.5 · 0.28px trackingThe quick brown fox jumps
caption
12px · 400 · 1.5 · 0.24px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Aeonik
- Weights
- 400, 700
- Sizes
- 14px, 16px, 18px, 21px, 24px, 50px
- Line height
- 1.20, 1.40, 1.50, 2.00
- Letter spacing
- 0.0200em across all sizes (≈0.28px at 14px, 0.32px at 16px, 0.48px at 24px, 1.0px at 50px)
- Fallback
- Inter, Söhne, or Neue Haas Grotesk
- Features
- "dlig" on, "kern" on
Primary workhorse — body copy, nav, buttons, cards, headings up to 50px; weight 400 for body, weight 700 for headings and emphasis. The geometric neo-grotesque forms give the page a clean engineering tone.
Additional typeface
Rotonto
- Weights
- 400
- Sizes
- 50px, 66px
- Line height
- 1.15, 1.20
- Letter spacing
- 0.0200em (≈1.0px at 50px, 1.32px at 66px)
- Fallback
- Cooper Black, Quicksand Bold, or Mabry Pro Black
Display face reserved for the hero headline only — chunky, slightly retro geometric forms that feel hand-lettered. Its presence is a signature: the biggest text on the page is visually distinct from everything else, creating a single moment of typographic drama per page.
Additional typeface
JetBrains Mono
- Weights
- 400
- Sizes
- 12px, 14px
- Line height
- 1.20, 1.50, 1.60
- Fallback
- IBM Plex Mono, Roboto Mono, or Geist Mono
Code samples, technical metadata, tab labels, AI badge text, inline monospaced data — appears wherever the page needs to read as 'this is a developer surface'
Spacing & shape
Spacing
- Density
- spacious
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64-80px
- Card padding
- 28-56px
- Element gap
- 14-28px
Border radius
tags
9999pxcards
28pxicons
2pxbuttons
112pxsmallCards
14pxSpacing scale
1px4px7px10px14px21px28px31px32px42px56px64px66px84px94px112px238pxGuidelines
Do
- Use the olive canvas (#e2e4dd) as the default page background — never substitute white for the root surface
- Reserve Rotonto exclusively for the 50–66px hero headline; use Aeonik for everything from 24px and below
- Set every Aeonik instance with letter-spacing 0.0200em and font-features 'dlig' on, 'kern' on — the tracking is part of the brand voice
- Use 28px border-radius on all cards and 112px on all pill buttons — these two radii define the soft, hand-built geometry
- Let Ember Orange (#ff6100) appear only as a filled CTA fill or active state — never as text color or decorative accent
- Separate content bands with 1px hairlines in #d0d2c8 or #ffb200, not with background color changes or shadows
- Stamp AI features with the small yellow 12px JetBrains Mono 'AI' badge — it is the system's signature punctuation
Don’t
- Don't add drop shadows to cards or panels — the system is intentionally flat; depth comes from surface color contrast only
- Don't use Rotonto for subheadings, body, or anything under 50px — its chunky forms are reserved for the hero moment
- Don't introduce a third or fourth border-radius value for cards beyond 7px, 14px, and 28px — the system has exactly three card radii
- Don't use Ember Orange for large fills like page sections or hero backgrounds — it is a button/accent color, not a surface color
- Don't pair Signal Blue (#0091ff) with non-link content — it is reserved exclusively for inline hyperlink text and underlines
- Don't switch to a different font-family for monospace code — JetBrains Mono (or its substitute) must stay consistent across all code contexts
- Don't override the 0.0200em letter-spacing on Aeonik at any size — the uniform tracking is a defining trait of the typeface treatment
Components
Primary CTA Button (Ember)
The single filled action button — used for 'Get Started', 'Talk to Us', and all conversion CTAsPill shape with 112px border-radius, filled background #ff6100, white text at 16px Aeonik weight 400, 0.0200em tracking, padding 28px horizontal × 14px vertical. The pill is deliberately tall — the 112px radius with 14px padding produces an almost-capsule shape that reads as friendly and confident, not corporate.
Ghost/Outlined Button
Secondary action — 'Read our docs', less prominent CTAsPill shape with 112px radius, transparent fill, 1px border in #000000 or #adb9c6, black text at 16px Aeonik weight 400, 28px × 14px padding. Sits visually subordinate to the Ember CTA by stripping the fill while keeping the capsule geometry.
Top Navigation Bar
Persistent site navigation — logo, product menu, solutions, developers, pricing, blog, log in, CTAWhite (#ffffff) background bar, 1px bottom border in #d0d2c8, logo left, centered link group in 16px Aeonik weight 400 black, right side splits into a text 'LOG IN' link and the Ember CTA pill. No shadow — the hairline border defines the edge.
Trust Logo Bar Card
Social proof — 'Trusted by top brands' with Cursor, Shopify, Runway, Dropbox, Yelp logosWhite card (#ffffff) with 28px border-radius, 1px border in #d0d2c8, 28px vertical padding. A left label cell reads 'TRUSTED BY TOP BRANDS' in 12px Aeonik weight 400 uppercase, then 5 logo cells divided by subtle vertical hairlines. The card sits on the olive canvas like a printed spec sheet.
Feature Card (Dark Product Mockup)
Showcase live product UI — transcript panel, video features, summarization, content moderationDark card (#242628) with 28px border-radius, no border, generous 56px padding. White text headings at 21px Aeonik weight 700, muted gray body text, small yellow 'AI' badge (see below) in the top-right corner. The dark surface is the only place deep blacks appear.
AI Badge
Tiny tag indicating AI-powered features — appears on every Mux Robots cardSmall yellow (#ffb200) rectangle or pill, 2px border-radius or full pill, 12px JetBrains Mono text in black, 7px padding. Functions as a highlighter mark — it stamps AI features the way you'd tag a printout.
Section Header Tag (DEPLOY-style)
All-caps small label above section titles12px Aeonik or JetBrains Mono weight 400, uppercase, letter-spacing 0.0200em, in #0091ff (Signal Blue) or #ffb200 (Amber). Sits centered or left above the section title, acting as a category stamp.
Tab Navigation Row
Switch between content types — Transcript / Thumbnails / GIFs / Clipping / StoryboardsHorizontal row of text tabs on dark surface, 16px Aeonik weight 400, inactive tabs in muted gray (#828c97 or similar), active tab in white with a 2px amber underline (#ffb200). No background pills — the underline alone signals state.
Yes/No Toggle Pair
Binary choice in Q&A UI — 'Is this video a cartoon? YES / NO'Two adjacent pill segments with 112px shared radius. Unselected side is dark gray fill with white text; selected side flips to Ember Orange (#ff6100) with white text. A '100% certainty' label in 12px JetBrains Mono sits to the right.
Hero Headline Block
The dominant text moment on the pageCentered stack: optional technical preview badge at top, then 66px Rotonto weight 400 in #000000 with 0.0200em tracking, line-height 1.15, followed by 18px Aeonik weight 400 body in #000000 at 1.5 line-height. Sits directly on the olive canvas — no card, no background.
Robot Character Illustration
Brand mascot — appears near hero and in Mux Robots sectionA small illustrated robot character rendered in flat colors (white, navy, amber accents) with a 2px stroke outline. Functions as a signature mark, not a decorative graphic — it recurs in the same pose to anchor the Mux Robots narrative.
Grid Pattern Section
Textured background for feature explanation sectionsOlive canvas (#e2e4dd) overlaid with a 1px grid in #d0d2c8 at ~28px intervals, creating a subtle architectural-drafting-paper texture. Cards float above the grid in white #ffffff.
Summary Tone Selector
Three-way toggle for AI summary tone — Neutral / Professional / PlayfulRow of three pill segments on a dark surface. Active tone has white text with a subtle highlight, inactive tones in muted gray. No background fills — state is shown through text weight and color only.
Surfaces & elevation
Level 0
Olive Canvas
#e2e4ddPage background, hero sections — the warm sage base layer
Level 1
Snow Card
#ffffffElevated cards, nav bar, feature panels floating above canvas
Level 2
Mist
#f4f6f4Quiet inset wash, secondary surface tone
Level 3
Blue Highlight
#cde6ffLight blue accent surface for special callouts
Level 4
Forge Dark
#242628Dark product UI panels — transcript, video player, code chrome
The design is intentionally shadowless. Cards and panels are separated by background contrast (olive canvas vs white card vs dark forge), generous 28px border-radii, and 1px hairline borders — never by drop shadows. This keeps the page feeling flat, printed, and architectural rather than floating in depth.
Trust logo bar card
none — relies on 28px radius and border only, no shadow
Feature mockup cards
none — dark fill (#242628) and 28px radius carry the weight, no drop shadow
Pill buttons
none — flat fill, no shadow
Layout & imagery
Layout
Centered max-width layout at 1200px, with the olive canvas extending full-bleed behind contained content. The hero is a centered vertical stack on the olive canvas: small badge → display headline → supporting paragraph → CTA pair → trust logo bar card below. Sections follow in a single column rhythm with 64–80px vertical gaps, alternating between text-only centered blocks and two-column text-plus-product-mockup grids. Feature explanations use a consistent 2-column pattern (text left, dark product card right) that flips on alternating sections to create a Z-pattern reading flow. Product mockup cards (dark #242628, 28px radius) are the visual anchors of most sections. Navigation is a single top bar — no sidebar, no sticky elements beyond the nav. The grid pattern section provides the only textural background; everything else is flat color. The page reads top-to-bottom as a sequence of full-width bands on the olive canvas, each band self-contained but unified by consistent card geometry and spacing.
Imagery
Imagery is minimal and product-centric. Photography appears only in one context: a real-world video still (retail store with employees at a counter) used inside a product mockup card to demonstrate Mux's video analysis features — treated as raw footage, not styled. The dominant illustrative element is a small flat-color robot character (white body, navy accents, amber highlights) with a consistent 2px stroke outline, acting as a recurring brand mascot. Section backgrounds occasionally carry a subtle 1px grid pattern on the olive canvas to evoke drafting paper. There is no lifestyle photography, no hero images, no full-bleed photography — the page is overwhelmingly text and UI mockups. The dark product panels (#242628) containing transcript, video player, and AI analysis UI serve as the primary visual content, making the product itself the imagery.
Design notes
Agent Guide
**Quick Color Reference** - text (on light): #000000 - text (on dark): #ffffff - background (page canvas): #e2e4dd - surface (cards): #ffffff - border (hairline): #d0d2c8 - accent (section dividers, AI badges): #ffb200 - link: #0091ff - primary action: #242628 (filled action) **Example Component Prompts** 1. Create a Primary Action Button: #242628 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. *Trust logo bar card*: White card (#ffffff), 28px border-radius, 1px #d0d2c8 border, 28px vertical padding. Left cell: 'TRUSTED BY TOP BRANDS' in 12px Aeonik weight 400 uppercase, #565e67. Five logo cells to the right divided by 1px vertical #d0d2c8 hairlines. 3. *Dark feature card*: Background #242628, 28px border-radius, 56px padding. White 21px Aeonik weight 700 heading, muted #828c97 body text. Small yellow 'AI' badge (#ffb200, 2px radius, 12px JetBrains Mono, 7px padding) in top-right corner. 4. *Tab navigation row*: On #242628 surface, horizontal row of 16px Aeonik weight 400 labels. Inactive tabs in #828c97, active tab in #ffffff with 2px #ffb200 underline. 5. *Yes/No toggle*: Two pill segments sharing 112px radius. Inactive: #565e67 fill, white text. Active: #ff6100 fill, white text. Right of toggle: '100% certainty' in 12px JetBrains Mono, #828c97.
Signature Choices
Three choices make this system immediately recognizable: 1. **Warm olive canvas everywhere** — #e2e4dd is not a neutral background; it's a warm sage-gray that makes the entire page feel like drafting paper. Replacing it with pure white or gray instantly kills the brand. 2. **Two warm accents doing opposite jobs** — Ember Orange (#ff6100) is loud and is used sparingly (filled CTAs, active states). Amber Signal (#ffb200) is soft and pervasive (hairline dividers, section underlines, AI badges). Orange shouts once per screen; amber murmurs throughout. 3. **Rotonto as a one-time display voice** — the page uses one chunky display face in one place (the hero headline). Everything else is Aeonik. This creates a dramatic two-register rhythm: one moment of typographic personality, then a long stretch of clean neo-grotesque engineering text.
Similar brands
Linear
Same approach of using a generous border-radius (28px cards, pill buttons) and a single warm accent color against a quiet neutral canvas, though Linear skews dark and Mux skews light
Resend
Shares the developer-tool warmth — olive-toned canvas, neo-grotesque type, pill-shaped CTAs, and a single chromatic accent that appears only in CTAs and active states
Vercel
Same dual-typeface strategy (one geometric workhorse + one display face for the hero) and the same flat, shadowless card system floating on a full-bleed canvas
Supabase
Shares the green-canvas-adjacent warm-neutral developer-tool aesthetic, large pill buttons, and a chunky display headline treatment above centered hero copy
Cal.com
Same spacious, light, rounded-everything developer-tool geometry with warm accents — though Cal.com goes brighter while Mux stays sage
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
