Mux

# Mux — Style Reference
> Parchment Grid, Terminal Cards
Theme: light

Mux embodies a 'developer's playroom' aesthetic: a grid-lined parchment canvas framing dark, rounded interface cards that feel like sophisticated terminal windows. The overall impression is one of playful precision, with clean, monospace-adjacent typography and vibrant orange accents that highlight interactive elements and functional states. Design components are substantial yet friendly, marked by generous radii and a focus on content hierarchy through contrasting dark cards on a light background. Visual interest is maintained through a subtle underlying grid and whimsical 'robot' illustrations.

## Colors
| Name | Value | Role |
|------|-------|------|
| Ink | `#000000` | Primary text, deep card backgrounds, active states |
| Greige Canvas | `#e2e4dd` | Dominant page background, low-prominence surfaces |
| Cloud Gray | `#ffffff` | Card surfaces, subtle background shifts, light text |
| Graphite Card | `#242628` | Primary card backgrounds, filled buttons |
| Subtle Ash | `#f4f6f4` | Secondary background variations, light UI elements |
| Ghost Border | `#adb9c6` | Subtle borders, ghost button outlines, secondary text |
| Slate Text | `#565e67` | Muted body text, helper text, inactive UI elements |
| Warm Gray Outline | `#828c97` | Tertiary borders, decorative strokes, subtle visual dividers |
| Action Orange | `#ff6100` | Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |
| Interactive Yellow | `#ffb200` | Highlight accents, badges, interactive prompts, subtle active states – this sunny yellow provides a secondary point of emphasis |
| Warning Yellow | `#bd8209` | Yellow outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color |
| Info Blue | `#0091ff` | Blue accent for outlined action borders, linked labels, and lightweight interactive emphasis. Use as a supporting accent, not as a status color |
| Success Green | `#00be43` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color |

## Typography
| Family | Role |
|--------|------|
| Aeonik | All primary headings, subheadings, and most body text — its modern, balanced forms create a strong, clear voice. |
| JetBrainsMono | Code snippets, secondary labels, and functional interface text — its monospace structure emphasizes a developer-centric product. |
| Rotonto | Hero headlines and large display text — its distinctive, bold presence provides a playful yet authoritative brand statement. |