Canonical design tokens for every EdgeBits surface: the marketing site (website/), Edge UI (edge/ui/), Edge Manager UI (edge-manager/ui/), and the docs site (docs/). One typography system, one primary color, one neutral scale. Product surfaces differ only in a secondary complement used sparingly (top rule, icon tint) — the 90% of every page is shared.
Stance: Industrial, editorial, not AI-template. No glassmorphism, no mouse-follow gradients, no emoji, no section-tag pills.
The mark is Σθ — capital sigma and lowercase theta, typeset in Roboto Mono 500 at tight tracking (-0.04em). Mono, not proportional — reads as "terminal-rendered" and reinforces the code-centric industrial brand. Uses the same mono stack already loaded for code, so no extra font dependency. Wordmark and body stay on Plus Jakarta Sans.
Meaning: Σ is the aggregate operator — an edge node sums sensor readings. θ is a parameter, a bit of state. Together: aggregate of parameters — literally what the product does. Color is always --brand-primary via currentColor, so it auto-swaps light/dark with no separate asset.
Scales via font-size — no raster assets, no DPI thresholds. Live text, pixel-perfect at every size because it's the typeface doing the work.
Suffix sits after a thin divider in Roboto Mono 12/400, muted. Names are sentence-cased, not uppercase.
Mark color swaps with theme automatically. In dark mode, the mark shifts to teal-400 for AA contrast — no separate asset needed.
Primary deep teal shared across all products. Each product adds a complement used only for a 3px top rule, icon accent, or chart highlights — never as dominant UI color.
Industrial material references — not AI-template colors. Used sparingly as a 3px top rule, icon tint, or chart highlight. Never as dominant UI color. 90%+ of every product surface remains shared (teal + neutral). The complement is a 5-second signal to tell you which product you're in.
On-prem, shop floor, machine-adjacent. Graphite/steel feel.
Supervisory, fleet oversight. Same hue family as teal primary — cooler, deeper.
Insights, reports. Warm industrial — kiln, rust, earth. Not amber, not neon.
Plus Jakarta Sans for everything UI (400 / 500 / 600 / 700 / 800). Roboto Mono for code, CLI output, and numeric data (400 / 500). No third font.
edgebits-edge pipeline list --output json
Minimal component vocabulary. Borders over shadows. Radius 6px for controls, 10px for cards.
:root)Light mode defaults. Dark mode overrides live under [data-theme="dark"] — see the <style> block at the top of this file for both.
/* Brand primary (shared across all products) */ --brand-primary: #0f766e; /* teal-700 */ --brand-primary-hover: #115e59; /* teal-800 */ --brand-primary-soft: rgba(15, 118, 110, 0.08); /* Product complements (industrial materials — sparingly: 3px top rule, icon tint, chart highlight) */ --brand-edge: #475569; /* slate-600 — steel */ --brand-manager: #0e7490; /* cyan-700 — deep water (teal family) */ --brand-analytics: #9a3412; /* orange-800 — sienna/rust (not amber) */ /* Neutral (warm) */ --bg: #fafaf8; --bg-subtle: #f2f1ee; --bg-card: #ffffff; --border: #e5e3de; --text: #1a1a1a; --text-secondary: #5c5c5c; --text-muted: #8a8a8a; /* Typography */ --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'Roboto Mono', 'SF Mono', monospace; /* Radius */ --radius-sm: 4px; --radius: 6px; --radius-lg: 10px;