Brian Krabach
8234e2ec05
- Move coordinator/, frontend/, Caddyfile, pyproject.toml, requirements.txt, docs/ into muxplex/ subdir in prep for packaging/sharing - Add brand assets to frontend/: favicon.ico, pwa-192/512.png, apple-touch-icon.png, wordmark-on-dark.svg - Update app: title → muxplex, header → wordmark SVG, brand color tokens in style.css, manifest.json updated with muxplex name and brand icons - Add design system: assets/branding/tokens.css (101 CSS custom properties), tokens.json (127 tokens), DESIGN-SYSTEM.md (856-line spec) - Add assets/branding/: SVG sources, rendered PNGs (icons, favicons, PWA, OG) - Add scripts/render-brand-assets.py for reproducible PNG generation - Add muxplex/README.md
214 lines
9.1 KiB
JSON
214 lines
9.1 KiB
JSON
{
|
|
"$schema": "https://tr.designtokens.org/format/",
|
|
"$metadata": {
|
|
"name": "muxplex",
|
|
"description": "Design tokens for muxplex — web-based tmux session dashboard",
|
|
"version": "1.0.0",
|
|
"generated": "2026-03-27"
|
|
},
|
|
|
|
"color": {
|
|
"dark": {
|
|
"bg": {
|
|
"base": { "$value": "#0D1117", "$description": "Page background, deepest layer" },
|
|
"elevated": { "$value": "#10131C", "$description": "Cards, panels, icon bg" },
|
|
"surface": { "$value": "#1A1F2B", "$description": "Raised surfaces, hover states" },
|
|
"muted": { "$value": "#222433", "$description": "Subtle fills, secondary panels" }
|
|
},
|
|
"text": {
|
|
"primary": { "$value": "#F0F6FF", "$description": "Primary text, headings — 17.4:1 on bg-base" },
|
|
"secondary": { "$value": "#8E95A3", "$description": "Secondary labels, timestamps — 6.3:1 on bg-base" },
|
|
"disabled": { "$value": "#4A5060", "$description": "Disabled controls — decorative only" }
|
|
},
|
|
"accent": {
|
|
"cyan": { "$value": "#00D9F5", "$description": "Primary accent, links, focus — 11.0:1 on bg-base" },
|
|
"amber": { "$value": "#F1A640", "$description": "Notifications, activity — 9.3:1 on bg-base" }
|
|
},
|
|
"border": {
|
|
"subtle": { "$value": "#1E2430", "$description": "Dividers within a surface" },
|
|
"default": { "$value": "#2A3040", "$description": "Card outlines, input borders" },
|
|
"strong": { "$value": "#3A4050", "$description": "Emphasized borders, active outlines" }
|
|
},
|
|
"state": {
|
|
"success": { "$value": "#3FB950", "$description": "7.5:1 on bg-base" },
|
|
"error": { "$value": "#F85149", "$description": "5.7:1 on bg-base" },
|
|
"warning": { "$value": "#F1A640", "$description": "9.3:1 on bg-base" },
|
|
"info": { "$value": "#58A6FF", "$description": "7.5:1 on bg-base" },
|
|
"success-bg": { "$value": "rgba(63, 185, 80, 0.12)" },
|
|
"error-bg": { "$value": "rgba(248, 81, 73, 0.12)" },
|
|
"warning-bg": { "$value": "rgba(241, 166, 64, 0.12)" },
|
|
"info-bg": { "$value": "rgba(88, 166, 255, 0.12)" }
|
|
},
|
|
"overlay": {
|
|
"backdrop": { "$value": "rgba(0, 0, 0, 0.60)" },
|
|
"scrim": { "$value": "rgba(13, 17, 23, 0.80)" }
|
|
},
|
|
"focus": {
|
|
"ring": { "$value": "#00D9F5" }
|
|
}
|
|
},
|
|
|
|
"light": {
|
|
"bg": {
|
|
"base": { "$value": "#FFFFFF" },
|
|
"elevated": { "$value": "#F0F0F0" },
|
|
"surface": { "$value": "#E8E9EE" },
|
|
"muted": { "$value": "#DADCE0" }
|
|
},
|
|
"text": {
|
|
"primary": { "$value": "#0D1117", "$description": "18.9:1 on bg-base" },
|
|
"secondary": { "$value": "#4A5060", "$description": "8.1:1 on bg-base" },
|
|
"disabled": { "$value": "#8E95A3", "$description": "Decorative only" }
|
|
},
|
|
"accent": {
|
|
"cyan": { "$value": "#007D8C", "$description": "Darkened for 4.9:1 AA on white" },
|
|
"amber": { "$value": "#946000", "$description": "Darkened for 5.3:1 AA on white" }
|
|
},
|
|
"border": {
|
|
"subtle": { "$value": "#E0E2E8" },
|
|
"default": { "$value": "#D0D2D8" },
|
|
"strong": { "$value": "#B0B4BC" }
|
|
},
|
|
"state": {
|
|
"success": { "$value": "#1A7F37" },
|
|
"error": { "$value": "#CF222E" },
|
|
"warning": { "$value": "#946000" },
|
|
"info": { "$value": "#0969DA" },
|
|
"success-bg": { "$value": "rgba(26, 127, 55, 0.10)" },
|
|
"error-bg": { "$value": "rgba(207, 34, 46, 0.10)" },
|
|
"warning-bg": { "$value": "rgba(148, 96, 0, 0.10)" },
|
|
"info-bg": { "$value": "rgba(9, 105, 218, 0.10)" }
|
|
},
|
|
"overlay": {
|
|
"backdrop": { "$value": "rgba(0, 0, 0, 0.30)" },
|
|
"scrim": { "$value": "rgba(255, 255, 255, 0.80)" }
|
|
},
|
|
"focus": {
|
|
"ring": { "$value": "#007D8C" }
|
|
}
|
|
}
|
|
},
|
|
|
|
"typography": {
|
|
"fontFamily": {
|
|
"display": { "$value": "'Urbanist', system-ui, -apple-system, sans-serif", "$description": "Wordmark, H1 headings" },
|
|
"ui": { "$value": "'DM Sans', 'Inter', system-ui, -apple-system, sans-serif", "$description": "Body, labels, buttons" },
|
|
"mono": { "$value": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace", "$description": "Terminal content, code" }
|
|
},
|
|
"fontWeight": {
|
|
"regular": { "$value": 400 },
|
|
"medium": { "$value": 500 },
|
|
"semibold": { "$value": 600 },
|
|
"bold": { "$value": 700 }
|
|
},
|
|
"fontSize": {
|
|
"xs": { "$value": "0.75rem", "$description": "12px" },
|
|
"sm": { "$value": "0.8125rem", "$description": "13px" },
|
|
"base": { "$value": "0.875rem", "$description": "14px — default UI" },
|
|
"md": { "$value": "1rem", "$description": "16px" },
|
|
"lg": { "$value": "1.25rem", "$description": "20px" },
|
|
"xl": { "$value": "1.5rem", "$description": "24px" },
|
|
"2xl": { "$value": "1.875rem", "$description": "30px" },
|
|
"3xl": { "$value": "2.25rem", "$description": "36px" }
|
|
},
|
|
"lineHeight": {
|
|
"none": { "$value": 1 },
|
|
"tight": { "$value": 1.2 },
|
|
"snug": { "$value": 1.375 },
|
|
"base": { "$value": 1.5 },
|
|
"relaxed": { "$value": 1.625 }
|
|
},
|
|
"letterSpacing": {
|
|
"tight": { "$value": "-0.01em" },
|
|
"normal": { "$value": "0" },
|
|
"wide": { "$value": "0.02em" },
|
|
"wider": { "$value": "0.04em", "$description": "All-caps labels" }
|
|
},
|
|
"terminal": {
|
|
"tileFontSize": { "$value": "10.5px", "$description": "Monospace in overview tiles" },
|
|
"terminalFontSize": { "$value": "14px", "$description": "Monospace in expanded xterm.js" }
|
|
}
|
|
},
|
|
|
|
"spacing": {
|
|
"scale": {
|
|
"1": { "$value": "0.25rem", "$description": "4px" },
|
|
"2": { "$value": "0.5rem", "$description": "8px" },
|
|
"3": { "$value": "0.75rem", "$description": "12px" },
|
|
"4": { "$value": "1rem", "$description": "16px" },
|
|
"6": { "$value": "1.5rem", "$description": "24px" },
|
|
"8": { "$value": "2rem", "$description": "32px" },
|
|
"12": { "$value": "3rem", "$description": "48px" },
|
|
"16": { "$value": "4rem", "$description": "64px" }
|
|
},
|
|
"layout": {
|
|
"tileMinWidth": { "$value": "360px" },
|
|
"tileHeight": { "$value": "300px" },
|
|
"gridGap": { "$value": "8px" },
|
|
"pageMargin": { "$value": "16px" },
|
|
"appBarHeight": { "$value": "48px" },
|
|
"statusBarHeight": { "$value": "36px" },
|
|
"tileHeaderHeight": { "$value": "28px" },
|
|
"pickerWidth": { "$value": "400px" },
|
|
"pickerRowHeight": { "$value": "36px" },
|
|
"pickerRowHeightTouch": { "$value": "48px" },
|
|
"breakpointList": { "$value": "640px" }
|
|
}
|
|
},
|
|
|
|
"borderRadius": {
|
|
"none": { "$value": "0" },
|
|
"sm": { "$value": "4px" },
|
|
"md": { "$value": "6px" },
|
|
"lg": { "$value": "8px" },
|
|
"xl": { "$value": "12px" },
|
|
"full": { "$value": "9999px" }
|
|
},
|
|
|
|
"shadow": {
|
|
"dark": {
|
|
"none": { "$value": "none" },
|
|
"sm": { "$value": "0 1px 2px rgba(0, 0, 0, 0.30)" },
|
|
"md": { "$value": "0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.20)" },
|
|
"lg": { "$value": "0 4px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25)" },
|
|
"xl": { "$value": "0 8px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30)" },
|
|
"glowCyan": { "$value": "0 0 8px rgba(0, 217, 245, 0.35)" },
|
|
"glowAmber": { "$value": "0 0 8px rgba(241, 166, 64, 0.40)" }
|
|
},
|
|
"light": {
|
|
"none": { "$value": "none" },
|
|
"sm": { "$value": "0 1px 2px rgba(0, 0, 0, 0.06)" },
|
|
"md": { "$value": "0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)" },
|
|
"lg": { "$value": "0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06)" },
|
|
"xl": { "$value": "0 8px 32px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.08)" },
|
|
"glowCyan": { "$value": "0 0 8px rgba(0, 125, 140, 0.25)" },
|
|
"glowAmber": { "$value": "0 0 8px rgba(148, 96, 0, 0.25)" }
|
|
}
|
|
},
|
|
|
|
"motion": {
|
|
"duration": {
|
|
"instant": { "$value": "75ms", "$description": "Hover color shifts" },
|
|
"fast": { "$value": "150ms", "$description": "Button press, toggle, focus" },
|
|
"moderate": { "$value": "250ms", "$description": "Tile zoom, panel slide" },
|
|
"slow": { "$value": "400ms", "$description": "Page transitions" }
|
|
},
|
|
"easing": {
|
|
"out": { "$value": "cubic-bezier(0.16, 1, 0.3, 1)", "$description": "Decelerate — zoom in" },
|
|
"inOut": { "$value": "cubic-bezier(0.45, 0, 0.55, 1)", "$description": "Symmetric — zoom out" },
|
|
"spring": { "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)", "$description": "Overshoot — picker appear" },
|
|
"linear": { "$value": "linear" }
|
|
}
|
|
},
|
|
|
|
"zIndex": {
|
|
"base": { "$value": 0 },
|
|
"tile": { "$value": 1 },
|
|
"appBar": { "$value": 10 },
|
|
"expanding": { "$value": 20, "$description": "Tile during zoom transition" },
|
|
"backdrop": { "$value": 30 },
|
|
"picker": { "$value": 40, "$description": "Command palette overlay" },
|
|
"toast": { "$value": 50 },
|
|
"tooltip": { "$value": 60 }
|
|
}
|
|
} |