Brian Krabach
10 KiB
How We Built the muxplex Brand
A behind-the-scenes walkthrough of how the muxplex naming, icon, wordmark, and design system were created — from blank canvas to production-ready brand assets — using AI agents, human design judgment, and a structured creative process.
Session: March 26–April 1, 2026 Tools used: Amplifier (multi-agent orchestration), nano-banana (VLM image generation/analysis), Figma (manual vector tracing), Python (render pipeline)
Step 1: The Naming Brainstorm
The project started as "web-tmux" — a working directory name with no brand identity. We needed a real name.
Process: Parallel creative agents + round-robin distillation
Two AI design agents were dispatched in parallel, each independently generating name candidates:
- Voice Strategist (tone/messaging expert) → 15 candidates: webmux, muxdash, muxtile, panetop, muxbell, tmuxr, muxy, muxgrid, sessh, panecast, tileterm, muxsnap, bellhop, muxpop, muxlive
- Art Director (visual/brand expert) → 12 candidates: muxtop, muxdeck, muxboard, paneview, muxgrid, tmux-deck, muxplex, panecast, muxsnap, tileterm, muxbell, tmuxer
Then each agent critiqued the other's picks in a cross-pollination round:
Art Director: "muxplex has the most personality — you're multiplexing the multiplexer — and that self-referential nerd joke will earn a smirk in a README."
COE (Crusty Old Engineer): "tmuxr and muxy are Tumblr-era vowel-drop tricks. Those aged. Kill them."
This narrowed to 6 finalists: muxdeck, panetop, tileterm, muxplex, sessh, muxbell.
Final pick: "muxplex" — chosen by the human after reviewing the shortlist.
Registry validation
Before committing to the name, we checked availability across all major package registries:
| Registry | Status |
|---|---|
| npm | Available |
| PyPI | Available |
| crates.io | Available |
| Homebrew | Available |
| Docker Hub | Available |
| GitHub | 2 abandoned repos (0 stars, inactive since 2023) — no conflict |
Step 2: Icon Exploration (AI-Generated Rounds)
Round 1: Four initial concepts
Using nano-banana (Gemini VLM), we generated four icon concepts:
| Concept | Description |
|---|---|
| Grid | 3×3 terminal pane grid, amber cursors, notification dot |
| Hub | MX monogram with radial lines (rendered as "MLX" — AI got creative) |
| Wordmark-Split | "mux" white + "plex" cyan with amber cursor — strong two-tone |
| Badge | "mx" monogram on blueprint grid with amber badge |
Round 2: Refinement (Icons C through I)
More variations were generated and scored by the Art Director agent on four dimensions:
| Criterion | Weight |
|---|---|
| Color harmony with brand palette | 10 |
| Style match (geometric, technical) | 10 |
| Size scaling at 32px (favicon) | 10 |
| Overall brand coherence | 10 |
Winner: Icon D (Browser Frame) — 38/40. A browser window frame with a 2×2 terminal grid and traffic-light dots (amber, white, cyan). Used all four brand colors and scaled well to favicon size.
Runner-up: Icon C (Cursor) — 36/40. Single terminal with #_ prompt. Better monospace fit but missed the "web" and "multi-session" signals.
The human touch: Figma tracing
The AI-generated icon concepts were good directionally but lacked the precision needed for production use. The user took the winning concept and manually traced it in Figma, creating a clean vector with:
- Compound-path browser frame (outer rounded rect + header cutout)
- Three traffic-light circles: amber (#F1A640), white, cyan (#09C8E5)
- 2×2 grid of rounded pane rectangles (#222433)
- Background fill (#10131C)
This Figma SVG became the canonical icon source.
Step 3: Typography — Finding the Font
The initial AI-generated wordmark used a proportional geometric sans-serif that wasn't any specific font. We needed to identify (or match) it for production use.
Process: VLM font matching across 1,600+ Google Fonts
Nano-banana's vision analysis described the original letterforms:
- Proportional (not fixed-width)
- Geometric, monolinear
- Spurless arches on m/u
- Flat-cut terminals
A comparison page was generated with 8 candidate Google Fonts: Poppins, Josefin Sans, Urbanist, Outfit, DM Sans, Plus Jakarta Sans, Raleway, Jura.
Vision AI analysis identified Urbanist 700 as the winner:
"The tail-less
uwith flat horizontal terminals is the single most discriminating feature — it immediately eliminates Poppins, DM Sans, and others. Urbanist is the only font in the candidate list that shares this construction."
Font stack established:
- Urbanist 700 — Wordmark only (restricted use)
- DM Sans 400/500/600 — All UI text
- JetBrains Mono 400/500 — Terminal content, code blocks
Step 4: The Complete SVG Brand Set
With the Figma-traced icon and Urbanist 700 identified, the full SVG brand set was created programmatically:
Wordmark SVGs (outlined Urbanist letterforms — no font dependency)
wordmark-on-dark.svg— "mux" (#F0F6FF) + "plex" (#00D9F5), transparentwordmark-on-light.svg— "mux" (#0D1117) + "plex" (#0090B0), transparent
Icon SVGs (scaled from Figma trace)
muxplex-icon-dark.svg— White frame on dark inner bgmuxplex-icon-light.svg— Dark frame on light inner bg
Lockup SVGs (icon + wordmark combined)
lockup-on-dark.svg— Icon left + wordmark rightlockup-on-light.svg— Same, light variant
Iteration highlights
- Multiple rounds of spacing/alignment between icon and wordmark
- Cropping refinement — trimmed excessive whitespace around the lockup
- Color matching — ensured the cyan in the icon matched "plex" letterforms
- Background handling — light icon variant got subtle gray inner boxes for contrast
Step 5: The Color Palette
| Token | Hex | Use |
|---|---|---|
--bg |
#0D1117 |
Primary dark background |
--bg-secondary |
#10131C |
Icon card background |
--text |
#F0F6FF |
Primary text, "mux" wordmark |
--accent |
#00D9F5 |
Brand cyan, "plex" wordmark |
--bell-color |
#F1A640 |
Amber accent, notification indicators |
--bg-surface |
#161B22 |
Card/panel backgrounds |
--border |
#30363D |
Subtle borders |
Step 6: The Render Pipeline
A 438-line Python script (scripts/render-brand-assets.py) generates all production assets from the SVG sources:
Renderer auto-detection chain: cairosvg → rsvg-convert → inkscape → imagemagick
Generated assets:
- App icons: 16, 22, 32, 44, 48, 64, 128, 256, 512, 1024px
- Favicons: favicon.ico (multi-size), favicon-32.png, apple-touch-icon (180px)
- PWA icons: 192px, 512px
- Wordmark PNGs: 32px and 64px height
- Lockup PNGs: 32px and 64px height
- OG images: 1200×630 (dark + light variants)
- Platform-specific: .icns (macOS), .ico (Windows)
Run with: python scripts/render-brand-assets.py
Step 7: The Design System
A comprehensive 857-line design specification (assets/branding/DESIGN-SYSTEM.md) was created covering:
- Color System — 4-tier background luminance, WCAG contrast ratios
- Typography — 3 font stacks with precise weight/size scales
- Spacing — 4px base unit, 8 scale stops
- Border Radius — Sharp terminals, soft UI chrome
- Motion — 4 duration tokens, 4 easing curves, GPU rules
- Z-Index — 8-layer stacking system
- Component Patterns — Tile, header, terminal, bell badge specs
- Accessibility — WCAG 2.1 AA, focus indicators, touch targets
- Do/Don't Reference — Anti-patterns to avoid
Plus machine-readable tokens:
tokens.json— W3C Design Tokens formattokens.css— CSS custom properties
The Agent Roster
| Agent | Role | Contribution |
|---|---|---|
design-intelligence:voice-strategist |
Creative | 15 naming candidates, shortlist critique |
design-intelligence:art-director |
Creative | 12 naming candidates, icon brand-compatibility scoring (38/40) |
design-intelligence:component-designer |
Creative | Custom scrollbar styling, UI component guidance |
design-intelligence:layout-architect |
Reasoning | Settings panel layout, grid architecture |
design-intelligence:responsive-strategist |
Reasoning | Mobile strategy, breakpoints, FAB placement |
crusty-old-engineer (skill) |
Advisory | Name pruning, architecture skepticism |
nano-banana (tool) |
Vision + Generation | 8+ icon generation rounds, font identification |
foundation:web-research |
Research | Registry availability checks |
| Human (Figma) | Manual design | Final icon vector tracing |
Final Asset Tree
assets/branding/
├── DESIGN-SYSTEM.md # 857-line design specification
├── README.md # Brand asset usage guide
├── tokens.json # W3C design tokens
├── tokens.css # CSS custom properties
├── svg/
│ ├── icon/
│ │ ├── muxplex-icon-dark.svg
│ │ └── muxplex-icon-light.svg
│ ├── wordmark/
│ │ ├── wordmark-on-dark.svg
│ │ └── wordmark-on-light.svg
│ └── lockup/
│ ├── lockup-on-dark.svg
│ └── lockup-on-light.svg
├── icons/ # 16–1024px PNGs
├── favicons/ # .ico, apple-touch-icon
├── pwa/ # 192, 512px
├── lockup/ # 32, 64px PNGs
└── og/ # 1200×630 Open Graph images
scripts/
└── render-brand-assets.py # 438-line multi-renderer pipeline
The Arc in One Sentence
The muxplex brand was born from a parallel round-robin brainstorm between two creative AI agents, validated across 6 package registries, visually iterated through 8+ rounds of AI icon generation scored by an art director agent, had its font identified by vision AI (Urbanist 700), was hand-traced by the user in Figma for precision, and was codified into an 857-line design system with full dark/light mode support, WCAG AA compliance, and a 438-line Python render pipeline — all within a single multi-day session.