# Mux — Marketing Site Design Spec > 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. ## 1. Visual Theme & Atmosphere 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. ## 2. Color Palette & Roles ### Surfaces | 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 | ### Ink & neutrals | 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 | ### Brand colour blocks | 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. ## 3. Typography Rules - `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. ## 4. Component Stylings ### Buttons — full pills, mono labels - **Primary**: bg orange `#ff6100`, text black, radius full-pill, height `44px`, padding `14px 28px`, JetBrainsMono 12px/500 UPPERCASE. - **Secondary**: bg yellow `#ffb200`, black text (nav "Talk to us"). - **Outline**: transparent, 1px border, black/white text (e.g. "Read our docs"). ### Cards / cells - Chunky `28px` radius cards; logo-wall and content cells framed by thin 1px borders forming a grid. ### Nav - MUX bold wordmark, Product/Solutions/Developers dropdowns (JetBrains Mono chevrons), Pricing, Blog; right LOG IN + a yellow "Talk to us" pill. ### Illustrations - Playful robot/character illustrations (e.g. "Mux Robots Beta"). ### Inputs - Not deeply captured; bordered, likely pill/rounded. ## 5. Layout Principles - Sage canvas framed by thin margin rails; content in a centered column with a visible grid of bordered cells. - Centered hero: eyebrow label + illustration, colossal Rotonto uppercase headline, Aeonik sub, two pill CTAs. - Full-bleed colour-block sections (yellow/orange/pink) alternate with white, sage and dark-charcoal bands. - Bordered logo wall ("Trusted by top brands"). ## 6. Depth & Elevation - Radii: `28px` (cards), full-pill buttons, plus `112/14/6/2px` for specific elements. - Elevation: nearly flat; structure from colour blocks and 1px borders, minimal shadows. - Depth is graphic colour blocking, not drop shadows. ## 7. Motion - Not captured in detail; playful illustration and hover states suggest lively but restrained motion. ## 8. Backgrounds, Effects & WebGL - Sage `#e2e4dd` canvas; full-bleed brand colour blocks (yellow/orange/pink), white and dark-charcoal bands. - Bordered grid cells and playful vector illustrations. - No heavy WebGL observed; graphic, flat, colour-blocked surfaces. ## 9. Do's and Don'ts ### Do - Use the warm sage `#e2e4dd` canvas and build sections as full-bleed colour blocks (yellow `#ffb200`, orange `#ff6100`, pink `#fa50b5`). - Set big headlines in the geometric Rotonto display face, wide UPPERCASE. - Make every eyebrow, label and button uppercase JetBrains Mono; keep body/UI in Aeonik. - Make buttons full pills with mono labels — orange primary, yellow secondary, white outline. - Frame content in chunky 28px cards and a visible grid of bordered cells; add playful robot illustrations. ### Don't - Don't render it cool/minimal — the identity is bold colour-blocking on warm sage. - Don't set chrome in a normal sans; eyebrows/labels/buttons are uppercase mono. - Don't rely on drop shadows; depth is colour blocks and hairline borders. - Don't mix in a second display family — Rotonto owns the headlines. ## 10. Responsive Behavior - Not captured (desktop 1512px only). A cookie/consent banner is present. ## 11. Agent Prompt Guide Quick token reference: - Canvas sage `#e2e4dd` · Ink `#000000` · Charcoal `#242628` · Blocks yellow `#ffb200` / orange `#ff6100` / pink `#fa50b5` - Fonts: `Rotonto` (display UPPER) / `Aeonik` (UI/body) / `JetBrainsMono` (eyebrows, labels, buttons UPPER) · Hero 66/76 +1.32px · Radius 28px card / full pill · Button 44px - Buttons: orange `#ff6100` primary / yellow secondary / white outline, JetBrainsMono 12/500 UPPER, black text · Flat, colour-blocked, bordered grid Use the Mux design language: bold, blocky and confidently graphic. Set the canvas in an unusual warm gray-green sage (`#e2e4dd`) framed by thin margin rails, and build sections as 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. Frame content in chunky 28px-radius cards and a visible grid of thin bordered cells, and add 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. Feels: bold, graphic, blocky, developer-playful. Avoid: a cool/minimal treatment, setting chrome in a normal sans, relying on drop shadows, or adding a second display family.