refactor: restructure project into muxplex/ subdir with brand integration
- 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
This commit is contained in:
Brian Krabach
@@ -0,0 +1,857 @@
|
||||
# muxplex Design System
|
||||
|
||||
**Version:** 1.0.0
|
||||
**Date:** 2026-03-27
|
||||
**Applies to:** muxplex web-based tmux session dashboard
|
||||
|
||||
This document defines every visual property used in muxplex. It is the single
|
||||
source of truth. All values reference `tokens.css` (CSS custom properties) and
|
||||
`tokens.json` (structured data for tooling).
|
||||
|
||||
---
|
||||
|
||||
## How to Use This File
|
||||
|
||||
1. Add `<link rel="stylesheet" href="tokens.css">` before your app styles.
|
||||
2. Reference any token as `var(--color-bg-base)`, `var(--space-4)`, etc.
|
||||
3. This document explains *when* and *why* to use each token.
|
||||
4. The JSON file mirrors every value for scripts, linters, or framework config.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Color System](#1-color-system)
|
||||
2. [Typography](#2-typography)
|
||||
3. [Spacing](#3-spacing)
|
||||
4. [Border Radius](#4-border-radius)
|
||||
5. [Shadows & Elevation](#5-shadows--elevation)
|
||||
6. [Motion & Transitions](#6-motion--transitions)
|
||||
7. [Z-Index Layers](#7-z-index-layers)
|
||||
8. [Component Patterns](#8-component-patterns)
|
||||
9. [Dark / Light Mode](#9-dark--light-mode)
|
||||
10. [Accessibility](#10-accessibility)
|
||||
11. [Do / Don't Reference](#11-do--dont-reference)
|
||||
|
||||
---
|
||||
|
||||
## 1. Color System
|
||||
|
||||
### 1.1 Backgrounds
|
||||
|
||||
Dark mode uses **luminance stepping** — lighter surfaces appear more elevated.
|
||||
This is the primary depth cue; shadows are supplementary.
|
||||
|
||||
| Token | Dark | Light | Purpose |
|
||||
|--------------------------|-------------|-------------|-----------------------------------|
|
||||
| `--color-bg-base` | `#0D1117` | `#FFFFFF` | Page background, deepest layer |
|
||||
| `--color-bg-elevated` | `#10131C` | `#F0F0F0` | Cards, panels, tile bodies |
|
||||
| `--color-bg-surface` | `#1A1F2B` | `#E8E9EE` | Raised surfaces, hover states |
|
||||
| `--color-bg-muted` | `#222433` | `#DADCE0` | Subtle fills, secondary panels |
|
||||
|
||||
**Usage rules:**
|
||||
- `bg-base` is always the page `<body>` background.
|
||||
- `bg-elevated` is the default card/panel surface (session tiles, picker).
|
||||
- `bg-surface` appears on hover or as a secondary tier within a card (tile header).
|
||||
- `bg-muted` is for de-emphasized areas (idle session backgrounds, code blocks).
|
||||
|
||||
### 1.2 Text
|
||||
|
||||
| Token | Dark | Light | Contrast on bg-base | Purpose |
|
||||
|----------------------------|-------------|-------------|---------------------|--------------------------|
|
||||
| `--color-text-primary` | `#F0F6FF` | `#0D1117` | 17.4:1 / 18.9:1 AAA | Headings, body text |
|
||||
| `--color-text-secondary` | `#8E95A3` | `#4A5060` | 6.3:1 / 8.1:1 AA | Labels, timestamps |
|
||||
| `--color-text-disabled` | `#4A5060` | `#8E95A3` | 2.4:1 / 2.6:1 | Disabled controls only |
|
||||
|
||||
**Usage rules:**
|
||||
- `text-primary` for anything the user needs to read — session names, body copy,
|
||||
headings, wordmark text.
|
||||
- `text-secondary` for supporting information — "2s ago" timestamps, hint text,
|
||||
metadata labels, picker keyboard shortcuts.
|
||||
- `text-disabled` **only** for controls the user cannot interact with. Never for
|
||||
content a sighted user needs to read. The low contrast is intentional — it
|
||||
signals "you can't use this."
|
||||
|
||||
### 1.3 Accents
|
||||
|
||||
| Token | Dark | Light | Role |
|
||||
|--------------------------|-------------|-------------|-----------------------------------|
|
||||
| `--color-accent-cyan` | `#00D9F5` | `#007D8C` | Primary accent, links, "plex" |
|
||||
| `--color-accent-amber` | `#F1A640` | `#946000` | Notifications, bell indicator |
|
||||
|
||||
**Critical note — light mode:** The brand cyan (`#00D9F5`) fails contrast on
|
||||
white (1.7:1). In light mode, the token automatically maps to `#007D8C` (4.9:1
|
||||
AA) for text. If you need the bright cyan for a decorative non-text element in
|
||||
light mode, use the literal hex `#00D9F5` directly — but never for text.
|
||||
|
||||
The same applies to amber: `#946000` replaces `#F1A640` in light mode for text
|
||||
use (5.3:1 AA).
|
||||
|
||||
### 1.4 Borders
|
||||
|
||||
| Token | Dark | Light | Purpose |
|
||||
|---------------------------|-------------|-------------|------------------------------|
|
||||
| `--color-border-subtle` | `#1E2430` | `#E0E2E8` | Dividers within a surface |
|
||||
| `--color-border-default` | `#2A3040` | `#D0D2D8` | Card outlines, input borders |
|
||||
| `--color-border-strong` | `#3A4050` | `#B0B4BC` | Active outlines, emphasis |
|
||||
|
||||
**Usage rules:**
|
||||
- Borders in dark mode are **decorative**, not functional separators. Don't rely
|
||||
on border visibility for meaning — use background contrast instead.
|
||||
- `border-subtle` for hairline dividers inside cards (e.g., between tile header
|
||||
and terminal content).
|
||||
- `border-default` for card outlines and input field borders.
|
||||
- `border-strong` for active/focused input borders or highlighted tiles.
|
||||
|
||||
### 1.5 Semantic State Colors
|
||||
|
||||
| Token | Dark | Light | Contrast (dark bg-base) | Purpose |
|
||||
|--------------------|-------------|-------------|-------------------------|--------------------|
|
||||
| `--color-success` | `#3FB950` | `#1A7F37` | 7.5:1 AAA | Connected, healthy |
|
||||
| `--color-error` | `#F85149` | `#CF222E` | 5.7:1 AA | Disconnected, fail |
|
||||
| `--color-warning` | `#F1A640` | `#946000` | 9.3:1 AAA | Attention needed |
|
||||
| `--color-info` | `#58A6FF` | `#0969DA` | 7.5:1 AAA | Informational |
|
||||
|
||||
Each state has a background tint variant (`--color-success-bg`, etc.) at ~10-12%
|
||||
opacity for banner or badge backgrounds.
|
||||
|
||||
### 1.6 Overlays
|
||||
|
||||
| Token | Dark | Light | Purpose |
|
||||
|----------------------|------------------------------|--------------------------------|----------------------|
|
||||
| `--color-backdrop` | `rgba(0, 0, 0, 0.60)` | `rgba(0, 0, 0, 0.30)` | Behind picker/modal |
|
||||
| `--color-scrim` | `rgba(13, 17, 23, 0.80)` | `rgba(255, 255, 255, 0.80)` | Frosted glass areas |
|
||||
|
||||
---
|
||||
|
||||
## 2. Typography
|
||||
|
||||
### 2.1 Font Stacks
|
||||
|
||||
```css
|
||||
--font-display: 'Urbanist', system-ui, -apple-system, sans-serif;
|
||||
--font-ui: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace;
|
||||
```
|
||||
|
||||
**Load from Google Fonts:**
|
||||
```html
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Urbanist:wght@700&display=swap" rel="stylesheet">
|
||||
```
|
||||
|
||||
### 2.2 Font Roles
|
||||
|
||||
| Font | Weights | Use Cases |
|
||||
|-----------------|-------------|------------------------------------------------------|
|
||||
| Urbanist | 700 | Wordmark only, H1-level page titles |
|
||||
| DM Sans | 400 / 500 / 600 | All UI text — buttons, labels, body, headings H2+ |
|
||||
| JetBrains Mono | 400 / 500 | Terminal tile content, expanded terminal, code blocks |
|
||||
|
||||
**Urbanist is restricted.** It appears in exactly two places:
|
||||
1. The "muxplex" wordmark in the app bar.
|
||||
2. An H1 page title if the app ever has one (currently: "Terminal Dashboard" in
|
||||
the app bar could use it, or stay DM Sans 600 for a quieter look).
|
||||
|
||||
Do not use Urbanist for buttons, labels, or body text. Its high x-height and
|
||||
geometric structure read as a display face, not a UI face.
|
||||
|
||||
### 2.3 Type Scale
|
||||
|
||||
All sizes use `--font-ui` (DM Sans) unless noted.
|
||||
|
||||
| Token | Size | Weight | Line-height | Use |
|
||||
|----------------|--------|------------------|----------------------|--------------------------------------|
|
||||
| `--text-xs` | 12px | 400 regular | `--leading-base` 1.5 | Fine print, keyboard shortcuts |
|
||||
| `--text-sm` | 13px | 400 / 500 | `--leading-base` 1.5 | Timestamps, secondary labels |
|
||||
| `--text-base` | 14px | 400 / 500 | `--leading-base` 1.5 | **Default UI text** — buttons, body |
|
||||
| `--text-md` | 16px | 500 medium | `--leading-snug` 1.375 | Session names in tiles |
|
||||
| `--text-lg` | 20px | 600 semibold | `--leading-tight` 1.2 | Section headings |
|
||||
| `--text-xl` | 24px | 600 semibold | `--leading-tight` 1.2 | Panel titles |
|
||||
| `--text-2xl` | 30px | 700 Urbanist | `--leading-tight` 1.2 | H1 page titles |
|
||||
| `--text-3xl` | 36px | 700 Urbanist | `--leading-none` 1.0 | Hero wordmark (if needed) |
|
||||
|
||||
### 2.4 Letter Spacing
|
||||
|
||||
| Token | Value | Use |
|
||||
|----------------------|------------|---------------------------------------------|
|
||||
| `--tracking-tight` | -0.01em | Headings 20px+ (tighten for optical balance)|
|
||||
| `--tracking-normal` | 0 | Body text, default |
|
||||
| `--tracking-wide` | 0.02em | Small text <13px (open up for legibility) |
|
||||
| `--tracking-wider` | 0.04em | All-caps labels ("NEEDS ATTENTION") |
|
||||
|
||||
### 2.5 Terminal Typography
|
||||
|
||||
| Context | Font | Size | Weight |
|
||||
|--------------------|---------------|---------------------------|--------|
|
||||
| Tile preview | JetBrains Mono | `--tile-font-size` 10.5px | 400 |
|
||||
| Expanded terminal | JetBrains Mono | `--terminal-font-size` 14px | 400 |
|
||||
| Code in UI | JetBrains Mono | `--text-sm` 13px | 400 |
|
||||
|
||||
- Terminal text uses the standard ANSI 16-color palette provided by xterm.js.
|
||||
Don't override ANSI colors with brand colors.
|
||||
- In overview tiles, 10.5px monospace yields ~50 characters per 360px tile width —
|
||||
enough to scan build output, log lines, and command prompts.
|
||||
- The expanded terminal at 14px matches standard terminal emulator defaults.
|
||||
|
||||
---
|
||||
|
||||
## 3. Spacing
|
||||
|
||||
### 3.1 Scale
|
||||
|
||||
4px base unit. Every spacing value is a multiple of 4.
|
||||
|
||||
| Token | Value | Pixels | Common Use |
|
||||
|-------------|-------|--------|---------------------------------------------|
|
||||
| `--space-1` | 0.25rem | 4px | Inner padding of small elements, icon gaps |
|
||||
| `--space-2` | 0.5rem | 8px | Grid gap, compact padding, inline spacing |
|
||||
| `--space-3` | 0.75rem | 12px | Card inner padding, button padding |
|
||||
| `--space-4` | 1rem | 16px | Page margin, section gaps |
|
||||
| `--space-6` | 1.5rem | 24px | Between groups of content |
|
||||
| `--space-8` | 2rem | 32px | Major section separation |
|
||||
| `--space-12`| 3rem | 48px | App bar height equivalent, hero spacing |
|
||||
| `--space-16`| 4rem | 64px | Maximum breathing room |
|
||||
|
||||
### 3.2 Layout Constants
|
||||
|
||||
These are fixed dimensions drawn from the layout architecture spec.
|
||||
|
||||
| Token | Value | Purpose |
|
||||
|-----------------------------|--------|--------------------------------------|
|
||||
| `--tile-min-width` | 360px | CSS Grid auto-fill minmax floor |
|
||||
| `--tile-height` | 300px | Fixed tile height for scanning |
|
||||
| `--grid-gap` | 8px | Space between tiles |
|
||||
| `--page-margin` | 16px | Inset from viewport edges |
|
||||
| `--app-bar-height` | 48px | Overview mode header |
|
||||
| `--status-bar-height` | 36px | Expanded mode header |
|
||||
| `--tile-header-height` | 28px | Session name row in each tile |
|
||||
| `--picker-width` | 400px | Command palette panel width |
|
||||
| `--picker-row-height` | 36px | Desktop session row |
|
||||
| `--picker-row-height-touch` | 48px | Touch-device session row (44px min) |
|
||||
| `--breakpoint-list` | 640px | Below this: list view, not grid |
|
||||
|
||||
### 3.3 Grid Setup
|
||||
|
||||
```css
|
||||
.session-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--tile-min-width), 1fr));
|
||||
gap: var(--grid-gap);
|
||||
padding: var(--page-margin);
|
||||
}
|
||||
```
|
||||
|
||||
This one rule handles responsive column count from 320px to 2560px+ viewports.
|
||||
No breakpoints needed for column count — `auto-fill` adapts naturally.
|
||||
|
||||
---
|
||||
|
||||
## 4. Border Radius
|
||||
|
||||
| Token | Value | Use |
|
||||
|-----------------|----------|-----------------------------------------------|
|
||||
| `--radius-none` | 0 | Terminal content areas (hard edges = terminal) |
|
||||
| `--radius-sm` | 4px | Small buttons, input fields, badges |
|
||||
| `--radius-md` | 6px | Session tiles, cards, panels |
|
||||
| `--radius-lg` | 8px | Modal dialogs, command palette |
|
||||
| `--radius-xl` | 12px | Large cards, image containers |
|
||||
| `--radius-full` | 9999px | Pills, dots, avatar circles |
|
||||
|
||||
**Guiding principle:** Terminal-adjacent elements use sharper radii (0–4px).
|
||||
UI chrome uses softer radii (6–12px). The contrast between sharp terminal
|
||||
content and softened UI chrome reinforces the "tool wrapping a terminal" feel.
|
||||
|
||||
---
|
||||
|
||||
## 5. Shadows & Elevation
|
||||
|
||||
### 5.1 Dark Mode
|
||||
|
||||
Primary depth cue is **luminance stepping** (bg-base < bg-elevated < bg-surface <
|
||||
bg-muted). Shadows are secondary — used mainly on floating overlays.
|
||||
|
||||
| Token | Value | Use |
|
||||
|----------------|-----------------------------------------------------------|------------------------------|
|
||||
| `--shadow-none`| `none` | Default (no shadow needed) |
|
||||
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.30)` | Subtle lift on hover |
|
||||
| `--shadow-md` | `0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.20)`| Cards, dropdown menus |
|
||||
| `--shadow-lg` | `0 4px 16px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.25)`| Picker panel, modals |
|
||||
| `--shadow-xl` | `0 8px 32px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.30)`| Expanded tile during zoom |
|
||||
|
||||
### 5.2 Glow Effects
|
||||
|
||||
| Token | Value | Use |
|
||||
|-----------------|---------------------------------------|----------------------------|
|
||||
| `--glow-cyan` | `0 0 8px rgba(0,217,245,0.35)` | Focus ring halo, active UI |
|
||||
| `--glow-amber` | `0 0 8px rgba(241,166,64,0.40)` | Bell indicator pulse |
|
||||
|
||||
### 5.3 Light Mode
|
||||
|
||||
Shadows become the primary depth cue in light mode. Opacity values are lower
|
||||
(0.04–0.14) since dark shadows on light surfaces are naturally more visible.
|
||||
Token names stay the same — values switch automatically.
|
||||
|
||||
---
|
||||
|
||||
## 6. Motion & Transitions
|
||||
|
||||
### 6.1 Duration Tokens
|
||||
|
||||
| Token | Value | Use |
|
||||
|------------------------|--------|-----------------------------------|
|
||||
| `--duration-instant` | 75ms | Hover color shifts |
|
||||
| `--duration-fast` | 150ms | Button press, toggle, focus ring |
|
||||
| `--duration-moderate` | 250ms | Tile zoom, panel slide, picker |
|
||||
| `--duration-slow` | 400ms | Page-level transitions |
|
||||
|
||||
### 6.2 Easing Functions
|
||||
|
||||
| Token | Curve | Feel |
|
||||
|-----------------|------------------------------------|--------------------------------|
|
||||
| `--ease-out` | `cubic-bezier(0.16, 1, 0.3, 1)` | Decelerating — tile zoom in |
|
||||
| `--ease-in-out` | `cubic-bezier(0.45, 0, 0.55, 1)` | Symmetric — tile zoom out |
|
||||
| `--ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Overshoot — picker pop-in |
|
||||
| `--ease-linear` | `linear` | Progress bars, continuous |
|
||||
|
||||
### 6.3 Convenience Shorthands
|
||||
|
||||
```css
|
||||
/* Color transitions — use on interactive elements */
|
||||
transition: var(--transition-colors);
|
||||
|
||||
/* Opacity transitions — use on fade in/out */
|
||||
transition: var(--transition-opacity);
|
||||
|
||||
/* Transform transitions — use on position/scale changes */
|
||||
transition: var(--transition-transform);
|
||||
```
|
||||
|
||||
### 6.4 GPU Acceleration Rule
|
||||
|
||||
Only animate `transform` and `opacity`. These are composited on the GPU and
|
||||
maintain 60fps. Never animate `width`, `height`, `top`, `left`, `margin`, or
|
||||
`padding` — these trigger layout recalculation.
|
||||
|
||||
**Example — tile zoom:**
|
||||
```css
|
||||
.tile--expanding {
|
||||
/* Good: GPU-composited */
|
||||
transform: scale(1.5) translate(100px, 50px);
|
||||
transition: transform var(--duration-moderate) var(--ease-out);
|
||||
}
|
||||
|
||||
/* Bad: triggers layout */
|
||||
.tile--expanding-bad {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
transition: width 250ms, height 250ms;
|
||||
}
|
||||
```
|
||||
|
||||
### 6.5 Reduced Motion
|
||||
|
||||
All duration tokens collapse to `0ms` when `prefers-reduced-motion: reduce` is
|
||||
active. This means transitions become instantaneous — no motion, but the state
|
||||
change still happens. No additional code is needed if you use the tokens.
|
||||
|
||||
---
|
||||
|
||||
## 7. Z-Index Layers
|
||||
|
||||
| Token | Value | Layer |
|
||||
|------------------|-------|------------------------------------|
|
||||
| `--z-base` | 0 | Default stacking context |
|
||||
| `--z-tile` | 1 | Session tiles in grid |
|
||||
| `--z-app-bar` | 10 | App bar / status bar |
|
||||
| `--z-expanding` | 20 | Tile during zoom animation |
|
||||
| `--z-backdrop` | 30 | Semi-transparent overlay backdrop |
|
||||
| `--z-picker` | 40 | Command palette panel |
|
||||
| `--z-toast` | 50 | Toast notifications |
|
||||
| `--z-tooltip` | 60 | Tooltips (always on top) |
|
||||
|
||||
**Rule:** Never use raw z-index numbers. Always reference the token. This
|
||||
prevents z-index wars where developers guess higher and higher values.
|
||||
|
||||
---
|
||||
|
||||
## 8. Component Patterns
|
||||
|
||||
### 8.1 Session Tile Card
|
||||
|
||||
The fundamental UI element. A fixed-height card showing a tmux session preview.
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────┐
|
||||
│ ● session-name 2s ago │ ← Header: 28px
|
||||
├──────────────────────────────────────────┤
|
||||
│ │
|
||||
│ $ npm run build │
|
||||
│ > project@1.0.0 build │
|
||||
│ > tsc && vite build │ ← Terminal content
|
||||
│ ... │ JetBrains Mono 10.5px
|
||||
│ ✓ built in 3.42s │ on bg-elevated
|
||||
│ │
|
||||
└──────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Structure:**
|
||||
|
||||
```css
|
||||
.session-tile {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-md); /* 6px */
|
||||
height: var(--tile-height); /* 300px */
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: var(--transition-colors);
|
||||
}
|
||||
|
||||
.session-tile:hover {
|
||||
background: var(--color-bg-surface);
|
||||
border-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
.session-tile:focus-visible {
|
||||
outline: 2px solid var(--color-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.tile-header {
|
||||
height: var(--tile-header-height); /* 28px */
|
||||
padding: 0 var(--space-2); /* 0 8px */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--color-bg-surface);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
}
|
||||
|
||||
.tile-name {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-md); /* 16px */
|
||||
font-weight: var(--weight-medium); /* 500 */
|
||||
color: var(--color-text-primary);
|
||||
line-height: var(--leading-snug);
|
||||
}
|
||||
|
||||
.tile-timestamp {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-xs); /* 12px */
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.tile-terminal {
|
||||
flex: 1;
|
||||
padding: var(--space-1) var(--space-2); /* 4px 8px */
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--tile-font-size); /* 10.5px */
|
||||
line-height: var(--leading-snug); /* 1.375 */
|
||||
color: var(--color-text-primary);
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
/* Fade overflow at top — show most recent lines */
|
||||
mask-image: linear-gradient(to bottom, transparent 0%, black 24px);
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24px);
|
||||
}
|
||||
```
|
||||
|
||||
### 8.2 Header / App Bar
|
||||
|
||||
```css
|
||||
.app-bar {
|
||||
height: var(--app-bar-height); /* 48px */
|
||||
padding: 0 var(--page-margin); /* 0 16px */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3); /* 12px */
|
||||
background: var(--color-bg-surface);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
z-index: var(--z-app-bar);
|
||||
}
|
||||
|
||||
/* Expanded mode — thinner */
|
||||
.status-bar {
|
||||
height: var(--status-bar-height); /* 36px */
|
||||
padding: 0 var(--space-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
background: var(--color-bg-surface);
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
z-index: var(--z-app-bar);
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-family: var(--font-display); /* Urbanist */
|
||||
font-weight: var(--weight-bold); /* 700 */
|
||||
font-size: var(--text-lg); /* 20px */
|
||||
letter-spacing: var(--tracking-tight);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Wordmark coloring: mux = primary text, plex = cyan accent */
|
||||
.wordmark-mux { color: var(--color-text-primary); }
|
||||
.wordmark-plex { color: var(--color-accent-cyan); }
|
||||
```
|
||||
|
||||
### 8.3 Terminal Container (Expanded Mode)
|
||||
|
||||
```css
|
||||
.terminal-container {
|
||||
flex: 1;
|
||||
background: var(--color-bg-base); /* Deepest black */
|
||||
/* xterm.js mounts into this element */
|
||||
/* Sized via ResizeObserver — no fixed dimensions */
|
||||
}
|
||||
|
||||
/* xterm.js configuration tokens */
|
||||
.xterm-config {
|
||||
--xterm-font-family: var(--font-mono);
|
||||
--xterm-font-size: var(--terminal-font-size); /* 14px */
|
||||
--xterm-bg: var(--color-bg-base);
|
||||
--xterm-fg: var(--color-text-primary);
|
||||
--xterm-cursor: var(--color-accent-cyan);
|
||||
}
|
||||
```
|
||||
|
||||
### 8.4 Bell Badge / Activity Indicator
|
||||
|
||||
The bell is the only element that should interrupt the user's scanning pattern.
|
||||
|
||||
```css
|
||||
/* Dot indicator in tile header */
|
||||
.bell-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-accent-amber);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Idle state — no dot, or dim neutral */
|
||||
.bell-dot--idle {
|
||||
background: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
/* Active bell — amber with glow pulse */
|
||||
.bell-dot--active {
|
||||
background: var(--color-accent-amber);
|
||||
box-shadow: var(--glow-amber);
|
||||
animation: bell-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bell-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bell-dot--active {
|
||||
animation: none;
|
||||
/* Static amber dot — still visible, just not moving */
|
||||
}
|
||||
}
|
||||
|
||||
/* Border glow on the whole tile when bell is active */
|
||||
.session-tile--bell {
|
||||
border-color: var(--color-accent-amber);
|
||||
box-shadow: inset 0 0 0 1px var(--color-accent-amber),
|
||||
var(--glow-amber);
|
||||
}
|
||||
```
|
||||
|
||||
### 8.5 Command Palette / Session Picker
|
||||
|
||||
```css
|
||||
.picker-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--color-backdrop);
|
||||
z-index: var(--z-backdrop);
|
||||
}
|
||||
|
||||
.picker-panel {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: var(--picker-width); /* 400px */
|
||||
max-height: 70vh;
|
||||
background: var(--color-bg-surface);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-lg); /* 8px */
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: var(--z-picker);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.picker-row {
|
||||
height: var(--picker-row-height); /* 36px */
|
||||
padding: 0 var(--space-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-colors);
|
||||
}
|
||||
|
||||
.picker-row:hover,
|
||||
.picker-row--active {
|
||||
background: var(--color-bg-muted);
|
||||
}
|
||||
|
||||
.picker-hint {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-secondary);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
/* Mobile: bottom sheet */
|
||||
@media (max-width: 639px) {
|
||||
.picker-panel {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
max-height: 60vh;
|
||||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||||
}
|
||||
|
||||
.picker-row {
|
||||
height: var(--picker-row-height-touch); /* 48px */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 8.6 Status Indicator (Connection)
|
||||
|
||||
```css
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.status-dot--connected {
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.status-dot--disconnected {
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.status-dot--connecting {
|
||||
background: var(--color-warning);
|
||||
animation: blink 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.status-dot--connecting {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Dark / Light Mode
|
||||
|
||||
### 9.1 How It Works
|
||||
|
||||
`tokens.css` defines dark mode as the default (`:root`). Light mode activates in
|
||||
two ways:
|
||||
|
||||
1. **Automatic:** `@media (prefers-color-scheme: light)` overrides all tokens.
|
||||
2. **Manual:** Add `data-theme="light"` to `<html>` for user toggle.
|
||||
|
||||
The `data-theme` attribute always wins. If a user sets `data-theme="dark"`, they
|
||||
stay dark even if their OS is in light mode.
|
||||
|
||||
### 9.2 Implementation
|
||||
|
||||
```js
|
||||
// Read user preference or fall back to OS
|
||||
function getTheme() {
|
||||
const stored = localStorage.getItem('muxplex-theme');
|
||||
if (stored) return stored; // 'light' | 'dark'
|
||||
return matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
||||
}
|
||||
|
||||
// Apply
|
||||
function applyTheme(theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('muxplex-theme', theme);
|
||||
}
|
||||
|
||||
// Toggle
|
||||
function toggleTheme() {
|
||||
const current = document.documentElement.getAttribute('data-theme') || getTheme();
|
||||
applyTheme(current === 'dark' ? 'light' : 'dark');
|
||||
}
|
||||
```
|
||||
|
||||
### 9.3 What Changes, What Doesn't
|
||||
|
||||
| Property | Changes between modes? | Notes |
|
||||
|----------------|------------------------|-----------------------------------------|
|
||||
| Background | Yes | Full palette swap |
|
||||
| Text | Yes | Full palette swap |
|
||||
| Accents | Yes | Darkened for light mode contrast |
|
||||
| Borders | Yes | Full palette swap |
|
||||
| State colors | Yes | Darkened for light mode contrast |
|
||||
| Shadows | Yes | Lower opacity in light mode |
|
||||
| Typography | No | Same fonts, sizes, weights |
|
||||
| Spacing | No | Same layout constants |
|
||||
| Border radius | No | Same values |
|
||||
| Motion | No | Same durations and easing |
|
||||
| Z-index | No | Same stacking |
|
||||
|
||||
---
|
||||
|
||||
## 10. Accessibility
|
||||
|
||||
### 10.1 Contrast Compliance
|
||||
|
||||
All text-on-background combinations meet WCAG 2.1 AA (4.5:1 for normal text,
|
||||
3:1 for large text):
|
||||
|
||||
| Pairing | Dark | Light | Level |
|
||||
|-----------------------------------|--------|--------|-------|
|
||||
| text-primary on bg-base | 17.4:1 | 18.9:1 | AAA |
|
||||
| text-primary on bg-elevated | 17.1:1 | 16.6:1 | AAA |
|
||||
| text-primary on bg-surface | 15.2:1 | 15.6:1 | AAA |
|
||||
| text-secondary on bg-base | 6.3:1 | 8.1:1 | AA |
|
||||
| text-secondary on bg-surface | 5.5:1 | 6.6:1 | AA |
|
||||
| accent-cyan on bg-base | 11.0:1 | 4.9:1 | AA+ |
|
||||
| accent-amber on bg-base | 9.3:1 | 5.3:1 | AA |
|
||||
|
||||
**Exception:** `text-disabled` intentionally fails contrast (2.4:1). It is used
|
||||
only on non-interactive disabled elements where the low contrast communicates
|
||||
"unavailable." This follows WCAG 2.1 §1.4.3 exception for disabled components.
|
||||
|
||||
### 10.2 Focus Indicators
|
||||
|
||||
Every interactive element gets a visible focus ring via `:focus-visible`:
|
||||
|
||||
```css
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
```
|
||||
|
||||
The cyan focus ring achieves 11.0:1 contrast on dark backgrounds and 4.9:1 on
|
||||
light — well above the 3:1 WCAG requirement for UI components.
|
||||
|
||||
### 10.3 Touch Targets
|
||||
|
||||
- Picker rows on mobile: 48px tall (≥44px WCAG minimum).
|
||||
- Session tiles: full card is the click target — well above 44px.
|
||||
- Settings gear and close buttons: minimum 44×44px touch area (can be visually
|
||||
smaller with padding extending the target).
|
||||
|
||||
### 10.4 Reduced Motion
|
||||
|
||||
All `--duration-*` tokens become `0ms` under `prefers-reduced-motion: reduce`.
|
||||
Animations declared with `@keyframes` should include an explicit
|
||||
`@media (prefers-reduced-motion: reduce)` block that sets `animation: none`.
|
||||
|
||||
### 10.5 Screen Reader Support
|
||||
|
||||
Reference the semantic HTML structure in the layout spec. Key points:
|
||||
- Grid uses `role="grid"` with `role="gridcell"` per tile.
|
||||
- Each tile has `aria-label` combining session name, bell state, and timestamp.
|
||||
- Expanded terminal uses `role="application"` (keyboard goes to xterm.js).
|
||||
- Skip link: "Skip to sessions" at page top.
|
||||
|
||||
---
|
||||
|
||||
## 11. Do / Don't Reference
|
||||
|
||||
### Color
|
||||
|
||||
| Do | Don't |
|
||||
|----|-------|
|
||||
| Use `var(--color-text-primary)` for all readable text | Use `text-disabled` for text users need to read |
|
||||
| Use semantic tokens (`--color-error`) for status meaning | Use accent-amber for errors (amber = attention, not failure) |
|
||||
| Use `--color-bg-surface` for hover states | Create new hex colors outside the token system |
|
||||
| Let accents auto-adjust between dark/light mode | Hardcode `#00D9F5` in light mode (fails contrast) |
|
||||
|
||||
### Typography
|
||||
|
||||
| Do | Don't |
|
||||
|----|-------|
|
||||
| Use Urbanist 700 only for wordmark and H1 titles | Use Urbanist for buttons, labels, or body text |
|
||||
| Use DM Sans for all UI text (buttons, labels, body) | Mix Inter and DM Sans — pick one (DM Sans primary) |
|
||||
| Use JetBrains Mono only for terminal/code content | Use JetBrains Mono for UI labels or headings |
|
||||
| Use `--tracking-wider` for all-caps section labels | Set letter-spacing to 0 on all-caps text (looks cramped) |
|
||||
|
||||
### Spacing
|
||||
|
||||
| Do | Don't |
|
||||
|----|-------|
|
||||
| Use `--space-*` tokens for all spacing | Use arbitrary values (15px, 7px, 23px) |
|
||||
| Use `--grid-gap` (8px) between tiles | Use larger gaps — this is a dense monitoring tool |
|
||||
| Use `--page-margin` (16px) for viewport inset | Let tiles touch viewport edges |
|
||||
| Use `--space-2` (8px) for compact inline gaps | Use 0 gap between inline elements |
|
||||
|
||||
### Borders & Radius
|
||||
|
||||
| Do | Don't |
|
||||
|----|-------|
|
||||
| Use `--radius-md` (6px) for cards and tiles | Use large radii (16px+) — this is a developer tool |
|
||||
| Use `--radius-none` (0) on terminal content areas | Round terminal corners (terminals have hard edges) |
|
||||
| Use `--border-subtle` inside cards, `--border-default` on card edges | Use borders as primary separators — background contrast is primary |
|
||||
|
||||
### Motion
|
||||
|
||||
| Do | Don't |
|
||||
|----|-------|
|
||||
| Animate only `transform` and `opacity` | Animate `width`, `height`, `top`, `left`, `margin` |
|
||||
| Use `--ease-out` for zoom in, `--ease-in-out` for zoom out | Use `ease` (default) or `linear` for spatial transitions |
|
||||
| Keep tile zoom at 200-300ms total | Use decorative flourishes or slow-motion effects |
|
||||
| Always include `prefers-reduced-motion` fallback | Forget reduced motion (tokens handle it, but check @keyframes) |
|
||||
|
||||
### Component Patterns
|
||||
|
||||
| Do | Don't |
|
||||
|----|-------|
|
||||
| Show bottom of terminal content (most recent) with top fade | Show top of content with scrollbars |
|
||||
| Use amber dot for bell — visible, non-semantic | Use red for bell (implies error) or green (implies success) |
|
||||
| Use command palette (keyboard-triggered overlay) for session switching | Use persistent sidebar (steals terminal space) |
|
||||
| Keep tile height fixed for spatial scanning | Use variable-height tiles (breaks scan and position memory) |
|
||||
|
||||
### Dark / Light Mode
|
||||
|
||||
| Do | Don't |
|
||||
|----|-------|
|
||||
| Use CSS custom properties — values swap automatically | Hardcode hex colors in component styles |
|
||||
| Test both modes when adding new UI elements | Assume dark-mode-only (light mode tokens exist for a reason) |
|
||||
| Use `data-theme` attribute for user override | Use class names for theme switching (attributes are cleaner) |
|
||||
| Use luminance stepping for depth in dark mode | Rely on shadows for depth in dark mode (they're invisible) |
|
||||
|
||||
---
|
||||
|
||||
## File Inventory
|
||||
|
||||
| File | Format | Purpose |
|
||||
|------|--------|---------|
|
||||
| `tokens.css` | CSS custom properties | Link into HTML — single source of truth for styles |
|
||||
| `tokens.json` | Structured JSON | Machine-readable for tooling, scripts, or framework config |
|
||||
| `DESIGN-SYSTEM.md` | This document | Human-readable specification and usage guide |
|
||||
|
||||
All three files live in `muxplex/assets/branding/` alongside the existing brand
|
||||
assets (icons, wordmark, lockup, etc.).
|
||||
@@ -0,0 +1,40 @@
|
||||
# muxplex Brand Assets
|
||||
|
||||
## Source files (SVGs)
|
||||
All brand assets are derived from these source SVGs in `svg/`:
|
||||
|
||||
| File | Use |
|
||||
|------|-----|
|
||||
| `svg/icon/muxplex-icon-dark.svg` | App icon — dark background version |
|
||||
| `svg/icon/muxplex-icon-light.svg` | App icon — light background version |
|
||||
| `svg/wordmark/wordmark-on-dark.svg` | Wordmark text — for use on dark surfaces |
|
||||
| `svg/wordmark/wordmark-on-light.svg` | Wordmark text — for use on light surfaces |
|
||||
| `svg/lockup/lockup-on-dark.svg` | Icon + wordmark combined — dark |
|
||||
| `svg/lockup/lockup-on-light.svg` | Icon + wordmark combined — light |
|
||||
|
||||
## Generated assets
|
||||
Run `../scripts/render-brand-assets.py` to regenerate everything from the SVG sources.
|
||||
|
||||
| Directory | Contents |
|
||||
|-----------|----------|
|
||||
| `icons/` | App icons at 16–1024px |
|
||||
| `favicons/` | favicon.ico, favicon-*.png, apple-touch-icon.png |
|
||||
| `pwa/` | PWA manifest icons (192, 512px) |
|
||||
| `og/` | Open Graph images 1200×630 (dark + light) |
|
||||
| `wordmark/` | Wordmark PNGs at 32 and 64px height |
|
||||
| `lockup/` | Lockup PNGs at 32 and 64px height |
|
||||
|
||||
## Wordmark note
|
||||
Font: Urbanist 700 (Google Fonts). SVGs reference Google Fonts CDN.
|
||||
For offline rendering, install locally: `pip install cairosvg` and ensure network access
|
||||
or embed the font in the SVG beforehand.
|
||||
|
||||
## Colour palette
|
||||
| Token | Hex | Use |
|
||||
|-------|-----|-----|
|
||||
| Dark background | `#0D1117` | Primary dark bg |
|
||||
| Icon inner | `#10131C` | Icon card bg (dark) |
|
||||
| White / light text | `#F0F6FF` | "mux" wordmark, icon frame |
|
||||
| Cyan | `#00D9F5` | "plex" wordmark, cyan traffic light |
|
||||
| Amber | `#F1A640` | Amber traffic light, accent |
|
||||
| Light panes | `#E8E9EE` | Icon card bg (light) |
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 397 B |
Binary file not shown.
|
After Width: | Height: | Size: 669 B |
Binary file not shown.
|
After Width: | Height: | Size: 919 B |
Binary file not shown.
|
After Width: | Height: | Size: 401 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 397 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 495 B |
Binary file not shown.
|
After Width: | Height: | Size: 535 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 669 B |
Binary file not shown.
|
After Width: | Height: | Size: 919 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
+18
@@ -0,0 +1,18 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5_84)">
|
||||
<path d="M61.2547 2.7453H2.7453V61.2547H61.2547V2.7453Z" fill="#10131C"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M61.941 0C63.0781 0 64 0.921837 64 2.05898V61.941C64 63.0781 63.0781 64 61.941 64H2.05898C0.921839 64 0 63.0781 0 61.941V2.05898C0 0.921837 0.921837 0 2.05898 0H61.941ZM2.74531 18.1877V61.2547H61.2547V18.1877H2.74531ZM2.74531 15.7855H61.2547V2.74531H2.74531V15.7855Z" fill="white"/>
|
||||
<path d="M9.2654 12.1823C10.8764 12.1823 12.1823 10.8764 12.1823 9.2654C12.1823 7.65445 10.8764 6.34851 9.2654 6.34851C7.65445 6.34851 6.34851 7.65445 6.34851 9.2654C6.34851 10.8764 7.65445 12.1823 9.2654 12.1823Z" fill="#F1A640"/>
|
||||
<path d="M18.5308 12.1823C20.1418 12.1823 21.4477 10.8764 21.4477 9.2654C21.4477 7.65445 20.1418 6.34851 18.5308 6.34851C16.9199 6.34851 15.614 7.65445 15.614 9.2654C15.614 10.8764 16.9199 12.1823 18.5308 12.1823Z" fill="white"/>
|
||||
<path d="M27.7962 12.1823C29.4072 12.1823 30.7131 10.8764 30.7131 9.2654C30.7131 7.65445 29.4072 6.34851 27.7962 6.34851C26.1853 6.34851 24.8793 7.65445 24.8793 9.2654C24.8793 10.8764 26.1853 12.1823 27.7962 12.1823Z" fill="#00D9F5"/>
|
||||
<path d="M28.8257 24.5362H12.3539C11.7853 24.5362 11.3244 24.9971 11.3244 25.5657V36.8901C11.3244 37.4587 11.7853 37.9196 12.3539 37.9196H28.8257C29.3943 37.9196 29.8552 37.4587 29.8552 36.8901V25.5657C29.8552 24.9971 29.3943 24.5362 28.8257 24.5362Z" fill="#222433"/>
|
||||
<path d="M51.6461 24.5362H35.1743C34.6057 24.5362 34.1448 24.9971 34.1448 25.5657V36.8901C34.1448 37.4587 34.6057 37.9196 35.1743 37.9196H51.6461C52.2147 37.9196 52.6756 37.4587 52.6756 36.8901V25.5657C52.6756 24.9971 52.2147 24.5362 51.6461 24.5362Z" fill="#222433"/>
|
||||
<path d="M28.8257 42.2091H12.3539C11.7853 42.2091 11.3244 42.67 11.3244 43.2386V54.563C11.3244 55.1316 11.7853 55.5925 12.3539 55.5925H28.8257C29.3943 55.5925 29.8552 55.1316 29.8552 54.563V43.2386C29.8552 42.67 29.3943 42.2091 28.8257 42.2091Z" fill="#222433"/>
|
||||
<path d="M51.6461 42.2091H35.1743C34.6057 42.2091 34.1448 42.67 34.1448 43.2386V54.563C34.1448 55.1316 34.6057 55.5925 35.1743 55.5925H51.6461C52.2147 55.5925 52.6756 55.1316 52.6756 54.563V43.2386C52.6756 42.67 52.2147 42.2091 51.6461 42.2091Z" fill="#222433"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5_84">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
+18
@@ -0,0 +1,18 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5_94)">
|
||||
<path d="M61.2547 2.7453H2.74536V61.2547H61.2547V2.7453Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M61.941 0C63.0781 0 64 0.921837 64 2.05898V61.941C64 63.0781 63.0781 64 61.941 64H2.05898C0.921839 64 0 63.0781 0 61.941V2.05898C0 0.921837 0.921837 0 2.05898 0H61.941ZM2.74531 18.1877V61.2547H61.2547V18.1877H2.74531ZM2.74531 15.7855H61.2547V2.74531H2.74531V15.7855Z" fill="#0D1117"/>
|
||||
<path d="M9.2654 12.1823C10.8764 12.1823 12.1823 10.8764 12.1823 9.2654C12.1823 7.65445 10.8764 6.34851 9.2654 6.34851C7.65445 6.34851 6.34851 7.65445 6.34851 9.2654C6.34851 10.8764 7.65445 12.1823 9.2654 12.1823Z" fill="#F1A640"/>
|
||||
<path d="M18.5308 12.1823C20.1417 12.1823 21.4477 10.8764 21.4477 9.2654C21.4477 7.65445 20.1417 6.34851 18.5308 6.34851C16.9198 6.34851 15.6139 7.65445 15.6139 9.2654C15.6139 10.8764 16.9198 12.1823 18.5308 12.1823Z" fill="#888899"/>
|
||||
<path d="M27.7963 12.1823C29.4072 12.1823 30.7132 10.8764 30.7132 9.2654C30.7132 7.65445 29.4072 6.34851 27.7963 6.34851C26.1853 6.34851 24.8794 7.65445 24.8794 9.2654C24.8794 10.8764 26.1853 12.1823 27.7963 12.1823Z" fill="#00D9F5"/>
|
||||
<path d="M28.8257 24.5362H12.3538C11.7853 24.5362 11.3243 24.9971 11.3243 25.5657V36.8901C11.3243 37.4587 11.7853 37.9196 12.3538 37.9196H28.8257C29.3943 37.9196 29.8552 37.4587 29.8552 36.8901V25.5657C29.8552 24.9971 29.3943 24.5362 28.8257 24.5362Z" fill="#888899"/>
|
||||
<path d="M51.6461 24.5362H35.1743C34.6057 24.5362 34.1448 24.9971 34.1448 25.5657V36.8901C34.1448 37.4587 34.6057 37.9196 35.1743 37.9196H51.6461C52.2147 37.9196 52.6756 37.4587 52.6756 36.8901V25.5657C52.6756 24.9971 52.2147 24.5362 51.6461 24.5362Z" fill="#888899"/>
|
||||
<path d="M28.8257 42.2091H12.3538C11.7853 42.2091 11.3243 42.67 11.3243 43.2386V54.563C11.3243 55.1316 11.7853 55.5925 12.3538 55.5925H28.8257C29.3943 55.5925 29.8552 55.1316 29.8552 54.563V43.2386C29.8552 42.67 29.3943 42.2091 28.8257 42.2091Z" fill="#888899"/>
|
||||
<path d="M51.6461 42.2091H35.1743C34.6057 42.2091 34.1448 42.67 34.1448 43.2386V54.563C34.1448 55.1316 34.6057 55.5925 35.1743 55.5925H51.6461C52.2147 55.5925 52.6756 55.1316 52.6756 54.563V43.2386C52.6756 42.67 52.2147 42.2091 51.6461 42.2091Z" fill="#888899"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5_94">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
+20
@@ -0,0 +1,20 @@
|
||||
<svg width="250" height="58" viewBox="0 0 250 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5_59)">
|
||||
<path d="M48.7102 7.97281H7.81012V50.0181H48.7102V7.97281Z" fill="#10131C"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.19 6C49.9848 6 50.6293 6.66244 50.6293 7.4796V50.5113C50.6293 51.3284 49.9848 51.9909 49.19 51.9909H7.33035C6.53545 51.9909 5.89105 51.3284 5.89105 50.5113V7.4796C5.89105 6.66244 6.53545 6 7.33035 6H49.19ZM7.81012 19.0698V50.0181H48.7102V19.0698H7.81012ZM7.81012 17.3436H48.7102V7.9728H7.81012V17.3436Z" fill="white"/>
|
||||
<path d="M12.3679 14.7543C13.494 14.7543 14.4069 13.8158 14.4069 12.6582C14.4069 11.5006 13.494 10.5621 12.3679 10.5621C11.2418 10.5621 10.3289 11.5006 10.3289 12.6582C10.3289 13.8158 11.2418 14.7543 12.3679 14.7543Z" fill="#F1A640"/>
|
||||
<path d="M18.8447 14.7543C19.9708 14.7543 20.8837 13.8158 20.8837 12.6582C20.8837 11.5006 19.9708 10.5621 18.8447 10.5621C17.7186 10.5621 16.8057 11.5006 16.8057 12.6582C16.8057 13.8158 17.7186 14.7543 18.8447 14.7543Z" fill="white"/>
|
||||
<path d="M25.3216 14.7543C26.4477 14.7543 27.3606 13.8158 27.3606 12.6582C27.3606 11.5006 26.4477 10.5621 25.3216 10.5621C24.1955 10.5621 23.2826 11.5006 23.2826 12.6582C23.2826 13.8158 24.1955 14.7543 25.3216 14.7543Z" fill="#00D9F5"/>
|
||||
<path d="M26.0412 23.6319H14.5268C14.1294 23.6319 13.8072 23.9631 13.8072 24.3717V32.5095C13.8072 32.9181 14.1294 33.2493 14.5268 33.2493H26.0412C26.4387 33.2493 26.7609 32.9181 26.7609 32.5095V24.3717C26.7609 23.9631 26.4387 23.6319 26.0412 23.6319Z" fill="#222433"/>
|
||||
<path d="M41.9935 23.6319H30.4791C30.0817 23.6319 29.7595 23.9631 29.7595 24.3717V32.5095C29.7595 32.9181 30.0817 33.2493 30.4791 33.2493H41.9935C42.391 33.2493 42.7132 32.9181 42.7132 32.5095V24.3717C42.7132 23.9631 42.391 23.6319 41.9935 23.6319Z" fill="#222433"/>
|
||||
<path d="M26.0412 36.3318H14.5268C14.1294 36.3318 13.8072 36.663 13.8072 37.0716V45.2094C13.8072 45.618 14.1294 45.9492 14.5268 45.9492H26.0412C26.4387 45.9492 26.7609 45.618 26.7609 45.2094V37.0716C26.7609 36.663 26.4387 36.3318 26.0412 36.3318Z" fill="#222433"/>
|
||||
<path d="M41.9935 36.3318H30.4791C30.0817 36.3318 29.7595 36.663 29.7595 37.0716V45.2094C29.7595 45.618 30.0817 45.9492 30.4791 45.9492H41.9935C42.391 45.9492 42.7132 45.618 42.7132 45.2094V37.0716C42.7132 36.663 42.391 36.3318 41.9935 36.3318Z" fill="#222433"/>
|
||||
<path d="M60.88 41V17H66.736V19.136C67.552 18.272 68.528 17.592 69.664 17.096C70.8 16.584 72.024 16.328 73.336 16.328C75 16.328 76.528 16.72 77.92 17.504C79.328 18.288 80.448 19.336 81.28 20.648C82.128 19.336 83.248 18.288 84.64 17.504C86.032 16.72 87.56 16.328 89.224 16.328C90.984 16.328 92.576 16.76 94 17.624C95.44 18.472 96.584 19.616 97.432 21.056C98.296 22.48 98.728 24.072 98.728 25.832V41H92.872V27.392C92.872 26.464 92.64 25.616 92.176 24.848C91.728 24.064 91.12 23.44 90.352 22.976C89.6 22.496 88.752 22.256 87.808 22.256C86.864 22.256 86.008 22.488 85.24 22.952C84.488 23.4 83.88 24.008 83.416 24.776C82.952 25.544 82.72 26.416 82.72 27.392V41H76.864V27.392C76.864 26.416 76.64 25.544 76.192 24.776C75.744 24.008 75.136 23.4 74.368 22.952C73.6 22.488 72.744 22.256 71.8 22.256C70.872 22.256 70.024 22.496 69.256 22.976C68.488 23.44 67.872 24.064 67.408 24.848C66.96 25.616 66.736 26.464 66.736 27.392V41H60.88ZM102.576 32.12V17H108.432V30.584C108.432 31.528 108.664 32.392 109.128 33.176C109.592 33.944 110.208 34.56 110.976 35.024C111.76 35.472 112.616 35.696 113.544 35.696C114.504 35.696 115.368 35.472 116.136 35.024C116.904 34.56 117.52 33.944 117.984 33.176C118.448 32.392 118.68 31.528 118.68 30.584V17H124.536L124.56 41H118.704L118.68 38.816C117.848 39.68 116.864 40.368 115.728 40.88C114.592 41.376 113.376 41.624 112.08 41.624C110.336 41.624 108.744 41.2 107.304 40.352C105.864 39.488 104.712 38.344 103.848 36.92C103 35.48 102.576 33.88 102.576 32.12ZM128.404 41L137.188 28.952L128.476 16.976H135.7L140.788 23.96L145.9 16.976H153.124L144.412 28.952L153.196 41H145.972L140.788 33.896L135.628 41H128.404Z" fill="#F0F6FF"/>
|
||||
<path d="M162.783 53H156.927V17H162.783V20.048C163.567 18.96 164.527 18.08 165.663 17.408C166.815 16.72 168.159 16.376 169.695 16.376C171.455 16.376 173.095 16.704 174.615 17.36C176.135 18.016 177.471 18.928 178.623 20.096C179.791 21.248 180.695 22.584 181.335 24.104C181.991 25.624 182.319 27.256 182.319 29C182.319 30.744 181.991 32.384 181.335 33.92C180.695 35.456 179.791 36.808 178.623 37.976C177.471 39.128 176.135 40.032 174.615 40.688C173.095 41.344 171.455 41.672 169.695 41.672C168.159 41.672 166.815 41.336 165.663 40.664C164.527 39.976 163.567 39.088 162.783 38V53ZM169.623 22.016C168.407 22.016 167.319 22.336 166.359 22.976C165.399 23.6 164.647 24.44 164.103 25.496C163.559 26.552 163.287 27.72 163.287 29C163.287 30.28 163.559 31.456 164.103 32.528C164.647 33.584 165.399 34.432 166.359 35.072C167.319 35.696 168.407 36.008 169.623 36.008C170.855 36.008 171.983 35.696 173.007 35.072C174.031 34.448 174.847 33.608 175.455 32.552C176.063 31.48 176.367 30.296 176.367 29C176.367 27.72 176.063 26.552 175.455 25.496C174.847 24.44 174.031 23.6 173.007 22.976C171.999 22.336 170.871 22.016 169.623 22.016ZM185.708 41V5H191.564V41H185.708ZM207.518 41.624C205.31 41.624 203.294 41.056 201.47 39.92C199.662 38.784 198.214 37.256 197.126 35.336C196.054 33.416 195.518 31.296 195.518 28.976C195.518 27.232 195.83 25.6 196.454 24.08C197.078 22.544 197.934 21.2 199.022 20.048C200.126 18.88 201.406 17.968 202.862 17.312C204.318 16.656 205.87 16.328 207.518 16.328C209.39 16.328 211.102 16.728 212.654 17.528C214.222 18.312 215.55 19.392 216.638 20.768C217.726 22.144 218.518 23.712 219.014 25.472C219.51 27.232 219.622 29.072 219.35 30.992H201.806C202.03 31.888 202.398 32.696 202.91 33.416C203.422 34.12 204.07 34.688 204.854 35.12C205.638 35.536 206.526 35.752 207.518 35.768C208.542 35.784 209.47 35.544 210.302 35.048C211.15 34.536 211.854 33.848 212.414 32.984L218.39 34.376C217.414 36.504 215.958 38.248 214.022 39.608C212.086 40.952 209.918 41.624 207.518 41.624ZM201.614 26.6H213.422C213.246 25.64 212.87 24.776 212.294 24.008C211.734 23.224 211.038 22.6 210.206 22.136C209.374 21.672 208.478 21.44 207.518 21.44C206.558 21.44 205.67 21.672 204.854 22.136C204.038 22.584 203.342 23.2 202.766 23.984C202.206 24.752 201.822 25.624 201.614 26.6ZM220.326 41L229.11 28.952L220.398 16.976H227.622L232.71 23.96L237.822 16.976H245.046L236.334 28.952L245.118 41H237.894L232.71 33.896L227.55 41H220.326Z" fill="#00D9F5"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5_59">
|
||||
<rect width="250" height="58" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
+21
@@ -0,0 +1,21 @@
|
||||
<svg width="250" height="58" viewBox="0 0 250 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5_71)">
|
||||
<rect width="250" height="58" fill="white"/>
|
||||
<path d="M48.7102 7.97281H7.81006V50.0181H48.7102V7.97281Z" fill="#F0F0F0"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.1899 6C49.9848 6 50.6292 6.66244 50.6292 7.4796V50.5113C50.6292 51.3284 49.9848 51.9909 49.1899 51.9909H7.33029C6.53539 51.9909 5.89099 51.3284 5.89099 50.5113V7.4796C5.89099 6.66244 6.53539 6 7.33029 6H49.1899ZM7.81006 19.0698V50.0181H48.7102V19.0698H7.81006ZM7.81006 17.3436H48.7102V7.9728H7.81006V17.3436Z" fill="#0D1117"/>
|
||||
<path d="M12.3679 14.7543C13.494 14.7543 14.4069 13.8158 14.4069 12.6582C14.4069 11.5006 13.494 10.5621 12.3679 10.5621C11.2418 10.5621 10.3289 11.5006 10.3289 12.6582C10.3289 13.8158 11.2418 14.7543 12.3679 14.7543Z" fill="#F1A640"/>
|
||||
<path d="M18.8447 14.7543C19.9708 14.7543 20.8837 13.8158 20.8837 12.6582C20.8837 11.5006 19.9708 10.5621 18.8447 10.5621C17.7186 10.5621 16.8057 11.5006 16.8057 12.6582C16.8057 13.8158 17.7186 14.7543 18.8447 14.7543Z" fill="#888899"/>
|
||||
<path d="M25.3215 14.7543C26.4476 14.7543 27.3605 13.8158 27.3605 12.6582C27.3605 11.5006 26.4476 10.5621 25.3215 10.5621C24.1954 10.5621 23.2825 11.5006 23.2825 12.6582C23.2825 13.8158 24.1954 14.7543 25.3215 14.7543Z" fill="#00D9F5"/>
|
||||
<path d="M26.0412 23.6319H14.5268C14.1293 23.6319 13.8071 23.9631 13.8071 24.3717V32.5095C13.8071 32.9181 14.1293 33.2493 14.5268 33.2493H26.0412C26.4386 33.2493 26.7608 32.9181 26.7608 32.5095V24.3717C26.7608 23.9631 26.4386 23.6319 26.0412 23.6319Z" fill="#888899"/>
|
||||
<path d="M41.9934 23.6319H30.479C30.0816 23.6319 29.7594 23.9631 29.7594 24.3717V32.5095C29.7594 32.9181 30.0816 33.2493 30.479 33.2493H41.9934C42.3909 33.2493 42.7131 32.9181 42.7131 32.5095V24.3717C42.7131 23.9631 42.3909 23.6319 41.9934 23.6319Z" fill="#888899"/>
|
||||
<path d="M26.0412 36.3318H14.5268C14.1293 36.3318 13.8071 36.663 13.8071 37.0716V45.2094C13.8071 45.618 14.1293 45.9492 14.5268 45.9492H26.0412C26.4386 45.9492 26.7608 45.618 26.7608 45.2094V37.0716C26.7608 36.663 26.4386 36.3318 26.0412 36.3318Z" fill="#888899"/>
|
||||
<path d="M41.9934 36.3318H30.479C30.0816 36.3318 29.7594 36.663 29.7594 37.0716V45.2094C29.7594 45.618 30.0816 45.9492 30.479 45.9492H41.9934C42.3909 45.9492 42.7131 45.618 42.7131 45.2094V37.0716C42.7131 36.663 42.3909 36.3318 41.9934 36.3318Z" fill="#888899"/>
|
||||
<path d="M60.88 41V17H66.736V19.136C67.552 18.272 68.528 17.592 69.664 17.096C70.8 16.584 72.024 16.328 73.336 16.328C75 16.328 76.528 16.72 77.92 17.504C79.328 18.288 80.448 19.336 81.28 20.648C82.128 19.336 83.248 18.288 84.64 17.504C86.032 16.72 87.56 16.328 89.224 16.328C90.984 16.328 92.576 16.76 94 17.624C95.44 18.472 96.584 19.616 97.432 21.056C98.296 22.48 98.728 24.072 98.728 25.832V41H92.872V27.392C92.872 26.464 92.64 25.616 92.176 24.848C91.728 24.064 91.12 23.44 90.352 22.976C89.6 22.496 88.752 22.256 87.808 22.256C86.864 22.256 86.008 22.488 85.24 22.952C84.488 23.4 83.88 24.008 83.416 24.776C82.952 25.544 82.72 26.416 82.72 27.392V41H76.864V27.392C76.864 26.416 76.64 25.544 76.192 24.776C75.744 24.008 75.136 23.4 74.368 22.952C73.6 22.488 72.744 22.256 71.8 22.256C70.872 22.256 70.024 22.496 69.256 22.976C68.488 23.44 67.872 24.064 67.408 24.848C66.96 25.616 66.736 26.464 66.736 27.392V41H60.88ZM102.576 32.12V17H108.432V30.584C108.432 31.528 108.664 32.392 109.128 33.176C109.592 33.944 110.208 34.56 110.976 35.024C111.76 35.472 112.616 35.696 113.544 35.696C114.504 35.696 115.368 35.472 116.136 35.024C116.904 34.56 117.52 33.944 117.984 33.176C118.448 32.392 118.68 31.528 118.68 30.584V17H124.536L124.56 41H118.704L118.68 38.816C117.848 39.68 116.864 40.368 115.728 40.88C114.592 41.376 113.376 41.624 112.08 41.624C110.336 41.624 108.744 41.2 107.304 40.352C105.864 39.488 104.712 38.344 103.848 36.92C103 35.48 102.576 33.88 102.576 32.12ZM128.404 41L137.188 28.952L128.476 16.976H135.7L140.788 23.96L145.9 16.976H153.124L144.412 28.952L153.196 41H145.972L140.788 33.896L135.628 41H128.404Z" fill="#0D1117"/>
|
||||
<path d="M162.783 53H156.927V17H162.783V20.048C163.567 18.96 164.527 18.08 165.663 17.408C166.815 16.72 168.159 16.376 169.695 16.376C171.455 16.376 173.095 16.704 174.615 17.36C176.135 18.016 177.471 18.928 178.623 20.096C179.791 21.248 180.695 22.584 181.335 24.104C181.991 25.624 182.319 27.256 182.319 29C182.319 30.744 181.991 32.384 181.335 33.92C180.695 35.456 179.791 36.808 178.623 37.976C177.471 39.128 176.135 40.032 174.615 40.688C173.095 41.344 171.455 41.672 169.695 41.672C168.159 41.672 166.815 41.336 165.663 40.664C164.527 39.976 163.567 39.088 162.783 38V53ZM169.623 22.016C168.407 22.016 167.319 22.336 166.359 22.976C165.399 23.6 164.647 24.44 164.103 25.496C163.559 26.552 163.287 27.72 163.287 29C163.287 30.28 163.559 31.456 164.103 32.528C164.647 33.584 165.399 34.432 166.359 35.072C167.319 35.696 168.407 36.008 169.623 36.008C170.855 36.008 171.983 35.696 173.007 35.072C174.031 34.448 174.847 33.608 175.455 32.552C176.063 31.48 176.367 30.296 176.367 29C176.367 27.72 176.063 26.552 175.455 25.496C174.847 24.44 174.031 23.6 173.007 22.976C171.999 22.336 170.871 22.016 169.623 22.016ZM185.708 41V5H191.564V41H185.708ZM207.518 41.624C205.31 41.624 203.294 41.056 201.47 39.92C199.662 38.784 198.214 37.256 197.126 35.336C196.054 33.416 195.518 31.296 195.518 28.976C195.518 27.232 195.83 25.6 196.454 24.08C197.078 22.544 197.934 21.2 199.022 20.048C200.126 18.88 201.406 17.968 202.862 17.312C204.318 16.656 205.87 16.328 207.518 16.328C209.39 16.328 211.102 16.728 212.654 17.528C214.222 18.312 215.55 19.392 216.638 20.768C217.726 22.144 218.518 23.712 219.014 25.472C219.51 27.232 219.622 29.072 219.35 30.992H201.806C202.03 31.888 202.398 32.696 202.91 33.416C203.422 34.12 204.07 34.688 204.854 35.12C205.638 35.536 206.526 35.752 207.518 35.768C208.542 35.784 209.47 35.544 210.302 35.048C211.15 34.536 211.854 33.848 212.414 32.984L218.39 34.376C217.414 36.504 215.958 38.248 214.022 39.608C212.086 40.952 209.918 41.624 207.518 41.624ZM201.614 26.6H213.422C213.246 25.64 212.87 24.776 212.294 24.008C211.734 23.224 211.038 22.6 210.206 22.136C209.374 21.672 208.478 21.44 207.518 21.44C206.558 21.44 205.67 21.672 204.854 22.136C204.038 22.584 203.342 23.2 202.766 23.984C202.206 24.752 201.822 25.624 201.614 26.6ZM220.326 41L229.11 28.952L220.398 16.976H227.622L232.71 23.96L237.822 16.976H245.046L236.334 28.952L245.118 41H237.894L232.71 33.896L227.55 41H220.326Z" fill="#0090B0"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5_71">
|
||||
<rect width="250" height="58" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
+11
@@ -0,0 +1,11 @@
|
||||
<svg width="210" height="58" viewBox="0 0 210 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5_54)">
|
||||
<path d="M5.12 41.8772V15.8772H11.464V18.1912C12.348 17.2552 13.4053 16.5185 14.636 15.9812C15.8667 15.4265 17.1927 15.1492 18.614 15.1492C20.4167 15.1492 22.072 15.5739 23.58 16.4232C25.1053 17.2725 26.3187 18.4079 27.22 19.8292C28.1387 18.4079 29.352 17.2725 30.86 16.4232C32.368 15.5739 34.0233 15.1492 35.826 15.1492C37.7327 15.1492 39.4573 15.6172 41 16.5532C42.56 17.4719 43.7993 18.7112 44.718 20.2712C45.654 21.8139 46.122 23.5385 46.122 25.4452V41.8772H39.778V27.1352C39.778 26.1299 39.5267 25.2112 39.024 24.3792C38.5387 23.5299 37.88 22.8539 37.048 22.3512C36.2333 21.8312 35.3147 21.5712 34.292 21.5712C33.2693 21.5712 32.342 21.8225 31.51 22.3252C30.6953 22.8105 30.0367 23.4692 29.534 24.3012C29.0313 25.1332 28.78 26.0779 28.78 27.1352V41.8772H22.436V27.1352C22.436 26.0779 22.1933 25.1332 21.708 24.3012C21.2227 23.4692 20.564 22.8105 19.732 22.3252C18.9 21.8225 17.9727 21.5712 16.95 21.5712C15.9447 21.5712 15.026 21.8312 14.194 22.3512C13.362 22.8539 12.6947 23.5299 12.192 24.3792C11.7067 25.2112 11.464 26.1299 11.464 27.1352V41.8772H5.12ZM50.2909 32.2572V15.8772H56.6349V30.5932C56.6349 31.6159 56.8863 32.5519 57.3889 33.4012C57.8916 34.2332 58.5589 34.9005 59.3909 35.4032C60.2403 35.8885 61.1676 36.1312 62.1729 36.1312C63.2129 36.1312 64.1489 35.8885 64.9809 35.4032C65.8129 34.9005 66.4803 34.2332 66.9829 33.4012C67.4856 32.5519 67.7369 31.6159 67.7369 30.5932V15.8772H74.0809L74.1069 41.8772H67.7629L67.7369 39.5112C66.8356 40.4472 65.7696 41.1925 64.5389 41.7472C63.3083 42.2845 61.9909 42.5532 60.5869 42.5532C58.6976 42.5532 56.9729 42.0939 55.4129 41.1752C53.8529 40.2392 52.6049 38.9999 51.6689 37.4572C50.7503 35.8972 50.2909 34.1639 50.2909 32.2572ZM78.2714 41.8772L87.7874 28.8252L78.3494 15.8512H86.1754L91.6874 23.4172L97.2254 15.8512H105.051L95.6134 28.8252L105.129 41.8772H97.3034L91.6874 34.1812L86.0974 41.8772H78.2714Z" fill="#F0F6FF"/>
|
||||
<path d="M115.515 54.8772H109.171V15.8772H115.515V19.1792C116.364 18.0005 117.404 17.0472 118.635 16.3192C119.883 15.5739 121.339 15.2012 123.003 15.2012C124.909 15.2012 126.686 15.5565 128.333 16.2672C129.979 16.9779 131.427 17.9659 132.675 19.2312C133.94 20.4792 134.919 21.9265 135.613 23.5732C136.323 25.2199 136.679 26.9879 136.679 28.8772C136.679 30.7665 136.323 32.5432 135.613 34.2072C134.919 35.8712 133.94 37.3359 132.675 38.6012C131.427 39.8492 129.979 40.8285 128.333 41.5392C126.686 42.2499 124.909 42.6052 123.003 42.6052C121.339 42.6052 119.883 42.2412 118.635 41.5132C117.404 40.7679 116.364 39.8059 115.515 38.6272V54.8772ZM122.925 21.3112C121.607 21.3112 120.429 21.6579 119.389 22.3512C118.349 23.0272 117.534 23.9372 116.945 25.0812C116.355 26.2252 116.061 27.4905 116.061 28.8772C116.061 30.2639 116.355 31.5379 116.945 32.6992C117.534 33.8432 118.349 34.7619 119.389 35.4552C120.429 36.1312 121.607 36.4692 122.925 36.4692C124.259 36.4692 125.481 36.1312 126.591 35.4552C127.7 34.7792 128.584 33.8692 129.243 32.7252C129.901 31.5639 130.231 30.2812 130.231 28.8772C130.231 27.4905 129.901 26.2252 129.243 25.0812C128.584 23.9372 127.7 23.0272 126.591 22.3512C125.499 21.6579 124.277 21.3112 122.925 21.3112ZM140.35 41.8772V2.87719H146.694V41.8772H140.35ZM163.978 42.5532C161.586 42.5532 159.402 41.9379 157.426 40.7072C155.467 39.4765 153.899 37.8212 152.72 35.7412C151.559 33.6612 150.978 31.3645 150.978 28.8512C150.978 26.9619 151.316 25.1939 151.992 23.5472C152.668 21.8832 153.595 20.4272 154.774 19.1792C155.97 17.9139 157.357 16.9259 158.934 16.2152C160.511 15.5045 162.193 15.1492 163.978 15.1492C166.006 15.1492 167.861 15.5825 169.542 16.4492C171.241 17.2985 172.679 18.4685 173.858 19.9592C175.037 21.4499 175.895 23.1485 176.432 25.0552C176.969 26.9619 177.091 28.9552 176.796 31.0352H157.79C158.033 32.0059 158.431 32.8812 158.986 33.6612C159.541 34.4239 160.243 35.0392 161.092 35.5072C161.941 35.9579 162.903 36.1919 163.978 36.2092C165.087 36.2265 166.093 35.9665 166.994 35.4292C167.913 34.8745 168.675 34.1292 169.282 33.1932L175.756 34.7012C174.699 37.0065 173.121 38.8959 171.024 40.3692C168.927 41.8252 166.578 42.5532 163.978 42.5532ZM157.582 26.2772H170.374C170.183 25.2372 169.776 24.3012 169.152 23.4692C168.545 22.6199 167.791 21.9439 166.89 21.4412C165.989 20.9385 165.018 20.6872 163.978 20.6872C162.938 20.6872 161.976 20.9385 161.092 21.4412C160.208 21.9265 159.454 22.5939 158.83 23.4432C158.223 24.2752 157.807 25.2199 157.582 26.2772ZM177.853 41.8772L187.369 28.8252L177.931 15.8512H185.757L191.269 23.4172L196.807 15.8512H204.633L195.195 28.8252L204.711 41.8772H196.885L191.269 34.1812L185.679 41.8772H177.853Z" fill="#0090B0"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5_54">
|
||||
<rect width="210" height="58" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
+11
@@ -0,0 +1,11 @@
|
||||
<svg width="210" height="58" viewBox="0 0 210 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5_50)">
|
||||
<path d="M5.12 41.8772V15.8772H11.464V18.1912C12.348 17.2552 13.4053 16.5185 14.636 15.9812C15.8667 15.4265 17.1927 15.1492 18.614 15.1492C20.4167 15.1492 22.072 15.5739 23.58 16.4232C25.1053 17.2725 26.3187 18.4079 27.22 19.8292C28.1387 18.4079 29.352 17.2725 30.86 16.4232C32.368 15.5739 34.0233 15.1492 35.826 15.1492C37.7327 15.1492 39.4573 15.6172 41 16.5532C42.56 17.4719 43.7993 18.7112 44.718 20.2712C45.654 21.8139 46.122 23.5385 46.122 25.4452V41.8772H39.778V27.1352C39.778 26.1299 39.5267 25.2112 39.024 24.3792C38.5387 23.5299 37.88 22.8539 37.048 22.3512C36.2333 21.8312 35.3147 21.5712 34.292 21.5712C33.2693 21.5712 32.342 21.8225 31.51 22.3252C30.6953 22.8105 30.0367 23.4692 29.534 24.3012C29.0313 25.1332 28.78 26.0779 28.78 27.1352V41.8772H22.436V27.1352C22.436 26.0779 22.1933 25.1332 21.708 24.3012C21.2227 23.4692 20.564 22.8105 19.732 22.3252C18.9 21.8225 17.9727 21.5712 16.95 21.5712C15.9447 21.5712 15.026 21.8312 14.194 22.3512C13.362 22.8539 12.6947 23.5299 12.192 24.3792C11.7067 25.2112 11.464 26.1299 11.464 27.1352V41.8772H5.12ZM50.2909 32.2572V15.8772H56.6349V30.5932C56.6349 31.6159 56.8863 32.5519 57.3889 33.4012C57.8916 34.2332 58.5589 34.9005 59.3909 35.4032C60.2403 35.8885 61.1676 36.1312 62.1729 36.1312C63.2129 36.1312 64.1489 35.8885 64.9809 35.4032C65.8129 34.9005 66.4803 34.2332 66.9829 33.4012C67.4856 32.5519 67.7369 31.6159 67.7369 30.5932V15.8772H74.0809L74.1069 41.8772H67.7629L67.7369 39.5112C66.8356 40.4472 65.7696 41.1925 64.5389 41.7472C63.3083 42.2845 61.9909 42.5532 60.5869 42.5532C58.6976 42.5532 56.9729 42.0939 55.4129 41.1752C53.8529 40.2392 52.6049 38.9999 51.6689 37.4572C50.7503 35.8972 50.2909 34.1639 50.2909 32.2572ZM78.2714 41.8772L87.7874 28.8252L78.3494 15.8512H86.1754L91.6874 23.4172L97.2254 15.8512H105.051L95.6134 28.8252L105.129 41.8772H97.3034L91.6874 34.1812L86.0974 41.8772H78.2714Z" fill="#0D1117"/>
|
||||
<path d="M115.515 54.8772H109.171V15.8772H115.515V19.1792C116.364 18.0005 117.404 17.0472 118.635 16.3192C119.883 15.5739 121.339 15.2012 123.003 15.2012C124.909 15.2012 126.686 15.5565 128.333 16.2672C129.979 16.9779 131.427 17.9659 132.675 19.2312C133.94 20.4792 134.919 21.9265 135.613 23.5732C136.323 25.2199 136.679 26.9879 136.679 28.8772C136.679 30.7665 136.323 32.5432 135.613 34.2072C134.919 35.8712 133.94 37.3359 132.675 38.6012C131.427 39.8492 129.979 40.8285 128.333 41.5392C126.686 42.2499 124.909 42.6052 123.003 42.6052C121.339 42.6052 119.883 42.2412 118.635 41.5132C117.404 40.7679 116.364 39.8059 115.515 38.6272V54.8772ZM122.925 21.3112C121.607 21.3112 120.429 21.6579 119.389 22.3512C118.349 23.0272 117.534 23.9372 116.945 25.0812C116.355 26.2252 116.061 27.4905 116.061 28.8772C116.061 30.2639 116.355 31.5379 116.945 32.6992C117.534 33.8432 118.349 34.7619 119.389 35.4552C120.429 36.1312 121.607 36.4692 122.925 36.4692C124.259 36.4692 125.481 36.1312 126.591 35.4552C127.7 34.7792 128.584 33.8692 129.243 32.7252C129.901 31.5639 130.231 30.2812 130.231 28.8772C130.231 27.4905 129.901 26.2252 129.243 25.0812C128.584 23.9372 127.7 23.0272 126.591 22.3512C125.499 21.6579 124.277 21.3112 122.925 21.3112ZM140.35 41.8772V2.87719H146.694V41.8772H140.35ZM163.978 42.5532C161.586 42.5532 159.402 41.9379 157.426 40.7072C155.467 39.4765 153.899 37.8212 152.72 35.7412C151.559 33.6612 150.978 31.3645 150.978 28.8512C150.978 26.9619 151.316 25.1939 151.992 23.5472C152.668 21.8832 153.595 20.4272 154.774 19.1792C155.97 17.9139 157.357 16.9259 158.934 16.2152C160.511 15.5045 162.193 15.1492 163.978 15.1492C166.006 15.1492 167.861 15.5825 169.542 16.4492C171.241 17.2985 172.679 18.4685 173.858 19.9592C175.037 21.4499 175.895 23.1485 176.432 25.0552C176.969 26.9619 177.091 28.9552 176.796 31.0352H157.79C158.033 32.0059 158.431 32.8812 158.986 33.6612C159.541 34.4239 160.243 35.0392 161.092 35.5072C161.941 35.9579 162.903 36.1919 163.978 36.2092C165.087 36.2265 166.093 35.9665 166.994 35.4292C167.913 34.8745 168.675 34.1292 169.282 33.1932L175.756 34.7012C174.699 37.0065 173.121 38.8959 171.024 40.3692C168.927 41.8252 166.578 42.5532 163.978 42.5532ZM157.582 26.2772H170.374C170.183 25.2372 169.776 24.3012 169.152 23.4692C168.545 22.6199 167.791 21.9439 166.89 21.4412C165.989 20.9385 165.018 20.6872 163.978 20.6872C162.938 20.6872 161.976 20.9385 161.092 21.4412C160.208 21.9265 159.454 22.5939 158.83 23.4432C158.223 24.2752 157.807 25.2199 157.582 26.2772ZM177.853 41.8772L187.369 28.8252L177.931 15.8512H185.757L191.269 23.4172L196.807 15.8512H204.633L195.195 28.8252L204.711 41.8772H196.885L191.269 34.1812L185.679 41.8772H177.853Z" fill="#0090B0"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5_50">
|
||||
<rect width="210" height="58" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
@@ -0,0 +1,355 @@
|
||||
/* ================================================================
|
||||
muxplex — Design Tokens
|
||||
================================================================
|
||||
Single source of truth for all visual properties.
|
||||
Dark mode is the default. Light mode via prefers-color-scheme.
|
||||
Manual override: set `data-theme="light"` on <html>.
|
||||
|
||||
Usage:
|
||||
<link rel="stylesheet" href="tokens.css">
|
||||
<!-- then reference vars anywhere: color: var(--color-text-primary); -->
|
||||
|
||||
Last updated: 2026-03-27
|
||||
================================================================ */
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
1. COLOR — Dark mode (default)
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
/* Backgrounds — luminance stepping (lighter = more elevated) */
|
||||
--color-bg-base: #0D1117; /* Page background, deepest layer */
|
||||
--color-bg-elevated: #10131C; /* Cards, panels, icon bg */
|
||||
--color-bg-surface: #1A1F2B; /* Raised surfaces, hover states */
|
||||
--color-bg-muted: #222433; /* Subtle fills, secondary panels */
|
||||
|
||||
/* Text — three-tier hierarchy */
|
||||
--color-text-primary: #F0F6FF; /* Primary text, headings, wordmark 17.4:1 on bg-base */
|
||||
--color-text-secondary: #8E95A3; /* Secondary labels, timestamps 6.3:1 on bg-base */
|
||||
--color-text-disabled: #4A5060; /* Disabled controls, placeholder 2.4:1 — decorative */
|
||||
|
||||
/* Accents */
|
||||
--color-accent-cyan: #00D9F5; /* Primary accent, links, focus rings 11.0:1 on bg-base */
|
||||
--color-accent-amber: #F1A640; /* Notifications, activity indicators 9.3:1 on bg-base */
|
||||
|
||||
/* Borders — decorative, not relied upon for meaning */
|
||||
--color-border-subtle: #1E2430; /* Dividers within a surface */
|
||||
--color-border-default: #2A3040; /* Card outlines, input borders */
|
||||
--color-border-strong: #3A4050; /* Emphasized borders, active outlines */
|
||||
|
||||
/* State / semantic — GitHub Primer–adjacent, tested on bg-base */
|
||||
--color-success: #3FB950; /* 7.5:1 on bg-base */
|
||||
--color-error: #F85149; /* 5.7:1 on bg-base */
|
||||
--color-warning: #F1A640; /* 9.3:1 (= amber) */
|
||||
--color-info: #58A6FF; /* 7.5:1 on bg-base */
|
||||
|
||||
/* State backgrounds — low-opacity tints for banners, badges */
|
||||
--color-success-bg: rgba(63, 185, 80, 0.12);
|
||||
--color-error-bg: rgba(248, 81, 73, 0.12);
|
||||
--color-warning-bg: rgba(241, 166, 64, 0.12);
|
||||
--color-info-bg: rgba(88, 166, 255, 0.12);
|
||||
|
||||
/* Overlay */
|
||||
--color-backdrop: rgba(0, 0, 0, 0.60);
|
||||
--color-scrim: rgba(13, 17, 23, 0.80);
|
||||
|
||||
/* Focus ring */
|
||||
--color-focus-ring: #00D9F5;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
2. COLOR — Light mode
|
||||
----------------------------------------------------------------
|
||||
Activated by OS preference or data-theme="light" on <html>.
|
||||
Accent-accessible variants darken cyan/amber to pass 4.5:1 on
|
||||
white. Use these for TEXT set in accent colors; the bright values
|
||||
remain available for decorative/non-text use.
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root:not([data-theme="dark"]) {
|
||||
--color-bg-base: #FFFFFF;
|
||||
--color-bg-elevated: #F0F0F0;
|
||||
--color-bg-surface: #E8E9EE;
|
||||
--color-bg-muted: #DADCE0;
|
||||
|
||||
--color-text-primary: #0D1117; /* 18.9:1 on bg-base */
|
||||
--color-text-secondary: #4A5060; /* 8.1:1 on bg-base */
|
||||
--color-text-disabled: #8E95A3; /* 2.6:1 — decorative */
|
||||
|
||||
/* Bright values kept for icons, decorative indicators */
|
||||
--color-accent-cyan: #007D8C; /* 4.9:1 on #FFF — AA text */
|
||||
--color-accent-amber: #946000; /* 5.3:1 on #FFF — AA text */
|
||||
|
||||
--color-border-subtle: #E0E2E8;
|
||||
--color-border-default: #D0D2D8;
|
||||
--color-border-strong: #B0B4BC;
|
||||
|
||||
--color-success: #1A7F37;
|
||||
--color-error: #CF222E;
|
||||
--color-warning: #946000;
|
||||
--color-info: #0969DA;
|
||||
|
||||
--color-success-bg: rgba(26, 127, 55, 0.10);
|
||||
--color-error-bg: rgba(207, 34, 46, 0.10);
|
||||
--color-warning-bg: rgba(148, 96, 0, 0.10);
|
||||
--color-info-bg: rgba(9, 105, 218, 0.10);
|
||||
|
||||
--color-backdrop: rgba(0, 0, 0, 0.30);
|
||||
--color-scrim: rgba(255, 255, 255, 0.80);
|
||||
|
||||
--color-focus-ring: #007D8C;
|
||||
}
|
||||
}
|
||||
|
||||
/* Manual override */
|
||||
[data-theme="light"] {
|
||||
--color-bg-base: #FFFFFF;
|
||||
--color-bg-elevated: #F0F0F0;
|
||||
--color-bg-surface: #E8E9EE;
|
||||
--color-bg-muted: #DADCE0;
|
||||
|
||||
--color-text-primary: #0D1117;
|
||||
--color-text-secondary: #4A5060;
|
||||
--color-text-disabled: #8E95A3;
|
||||
|
||||
--color-accent-cyan: #007D8C;
|
||||
--color-accent-amber: #946000;
|
||||
|
||||
--color-border-subtle: #E0E2E8;
|
||||
--color-border-default: #D0D2D8;
|
||||
--color-border-strong: #B0B4BC;
|
||||
|
||||
--color-success: #1A7F37;
|
||||
--color-error: #CF222E;
|
||||
--color-warning: #946000;
|
||||
--color-info: #0969DA;
|
||||
|
||||
--color-success-bg: rgba(26, 127, 55, 0.10);
|
||||
--color-error-bg: rgba(207, 34, 46, 0.10);
|
||||
--color-warning-bg: rgba(148, 96, 0, 0.10);
|
||||
--color-info-bg: rgba(9, 105, 218, 0.10);
|
||||
|
||||
--color-backdrop: rgba(0, 0, 0, 0.30);
|
||||
--color-scrim: rgba(255, 255, 255, 0.80);
|
||||
|
||||
--color-focus-ring: #007D8C;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
3. TYPOGRAPHY
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
/* Font stacks */
|
||||
--font-display: 'Urbanist', system-ui, -apple-system, sans-serif;
|
||||
--font-ui: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace;
|
||||
|
||||
/* Font weights */
|
||||
--weight-regular: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--weight-bold: 700;
|
||||
|
||||
/* Type scale — DM Sans base (UI text) */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.8125rem; /* 13px */
|
||||
--text-base: 0.875rem; /* 14px — default UI text */
|
||||
--text-md: 1rem; /* 16px */
|
||||
--text-lg: 1.25rem; /* 20px */
|
||||
--text-xl: 1.5rem; /* 24px */
|
||||
--text-2xl: 1.875rem; /* 30px — Urbanist headings start here */
|
||||
--text-3xl: 2.25rem; /* 36px */
|
||||
|
||||
/* Line heights */
|
||||
--leading-none: 1;
|
||||
--leading-tight: 1.2;
|
||||
--leading-snug: 1.375;
|
||||
--leading-base: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
|
||||
/* Letter spacing */
|
||||
--tracking-tight: -0.01em;
|
||||
--tracking-normal: 0;
|
||||
--tracking-wide: 0.02em;
|
||||
--tracking-wider: 0.04em; /* All-caps labels */
|
||||
|
||||
/* Terminal-specific */
|
||||
--tile-font-size: 10.5px; /* Monospace in overview tiles */
|
||||
--terminal-font-size: 14px; /* Monospace in expanded xterm.js */
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
4. SPACING
|
||||
----------------------------------------------------------------
|
||||
4px base unit. Use semantic names for layout constants,
|
||||
numeric names for general-purpose spacing.
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
/* Scale */
|
||||
--space-1: 0.25rem; /* 4px */
|
||||
--space-2: 0.5rem; /* 8px */
|
||||
--space-3: 0.75rem; /* 12px */
|
||||
--space-4: 1rem; /* 16px */
|
||||
--space-6: 1.5rem; /* 24px */
|
||||
--space-8: 2rem; /* 32px */
|
||||
--space-12: 3rem; /* 48px */
|
||||
--space-16: 4rem; /* 64px */
|
||||
|
||||
/* Layout constants (from layout spec) */
|
||||
--tile-min-width: 360px;
|
||||
--tile-height: 300px;
|
||||
--grid-gap: 8px;
|
||||
--page-margin: 16px;
|
||||
--app-bar-height: 48px;
|
||||
--status-bar-height: 36px;
|
||||
--tile-header-height: 28px;
|
||||
--picker-width: 400px;
|
||||
--picker-row-height: 36px;
|
||||
--picker-row-height-touch: 48px;
|
||||
--breakpoint-list: 640px;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
5. BORDER RADIUS
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--radius-none: 0;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-full: 9999px;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
6. SHADOWS / ELEVATION
|
||||
----------------------------------------------------------------
|
||||
Dark mode: luminance stepping is the primary depth cue.
|
||||
Shadows serve as supplementary reinforcement on overlays.
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--shadow-none: none;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35),
|
||||
0 1px 2px rgba(0, 0, 0, 0.20);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.40),
|
||||
0 2px 4px rgba(0, 0, 0, 0.25);
|
||||
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.50),
|
||||
0 4px 8px rgba(0, 0, 0, 0.30);
|
||||
|
||||
/* Glow — for bell indicator, focus ring */
|
||||
--glow-cyan: 0 0 8px rgba(0, 217, 245, 0.35);
|
||||
--glow-amber: 0 0 8px rgba(241, 166, 64, 0.40);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root:not([data-theme="dark"]) {
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08),
|
||||
0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10),
|
||||
0 2px 4px rgba(0, 0, 0, 0.06);
|
||||
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.14),
|
||||
0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
|
||||
--glow-cyan: 0 0 8px rgba(0, 125, 140, 0.25);
|
||||
--glow-amber: 0 0 8px rgba(148, 96, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08),
|
||||
0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10),
|
||||
0 2px 4px rgba(0, 0, 0, 0.06);
|
||||
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.14),
|
||||
0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
|
||||
--glow-cyan: 0 0 8px rgba(0, 125, 140, 0.25);
|
||||
--glow-amber: 0 0 8px rgba(148, 96, 0, 0.25);
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
7. MOTION / TRANSITIONS
|
||||
----------------------------------------------------------------
|
||||
GPU-accelerated properties only (transform, opacity).
|
||||
Respect prefers-reduced-motion.
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
/* Durations */
|
||||
--duration-instant: 75ms; /* Hover color shifts */
|
||||
--duration-fast: 150ms; /* Button press, toggle, focus */
|
||||
--duration-moderate: 250ms; /* Tile zoom, panel slide */
|
||||
--duration-slow: 400ms; /* Page transitions, complex */
|
||||
|
||||
/* Easing */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate — zoom in */
|
||||
--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* Symmetric — zoom out */
|
||||
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot — picker appear */
|
||||
--ease-linear: linear;
|
||||
|
||||
/* Convenience shorthands */
|
||||
--transition-colors: color var(--duration-instant) var(--ease-out),
|
||||
background-color var(--duration-instant) var(--ease-out),
|
||||
border-color var(--duration-instant) var(--ease-out);
|
||||
--transition-opacity: opacity var(--duration-fast) var(--ease-out);
|
||||
--transition-transform: transform var(--duration-moderate) var(--ease-out);
|
||||
}
|
||||
|
||||
/* Reduced motion — collapse all durations to near-zero */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root {
|
||||
--duration-instant: 0ms;
|
||||
--duration-fast: 0ms;
|
||||
--duration-moderate: 0ms;
|
||||
--duration-slow: 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
8. Z-INDEX LAYERS
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--z-base: 0;
|
||||
--z-tile: 1;
|
||||
--z-app-bar: 10;
|
||||
--z-expanding: 20; /* Tile during zoom transition */
|
||||
--z-backdrop: 30;
|
||||
--z-picker: 40; /* Command palette overlay */
|
||||
--z-toast: 50;
|
||||
--z-tooltip: 60;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
9. FOCUS STYLES
|
||||
----------------------------------------------------------------
|
||||
Global focus-visible ring. 2px offset ensures it doesn't
|
||||
overlap content. Uses accent cyan for maximum visibility.
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Remove default outlines — :focus-visible handles it */
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
{
|
||||
"$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 }
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Reference in New Issue
Block a user