114 lines
4.1 KiB
Markdown
114 lines
4.1 KiB
Markdown
# Design tokens
|
|
|
|
The complete token table used across mockups and (eventually) production console.
|
|
|
|
## Color palette
|
|
|
|
```css
|
|
:root {
|
|
/* Backgrounds */
|
|
--bg: #000000;
|
|
--cell: #0A0E12;
|
|
--cell-2: #141a20;
|
|
--cell-3: #1d2630;
|
|
|
|
/* Primary navigation chrome */
|
|
--ink: #66CCFF; /* dominant cyan */
|
|
--ink-2: #99CCFF; /* secondary text/hint */
|
|
--bar: #66CCFF;
|
|
--bar-dim: #224466;
|
|
|
|
/* Domain colors (per VLAN / per AI type) */
|
|
--cam: #6699FF; /* cameras / VLAN-10 — royal blue */
|
|
--hai: #CC99CC; /* compute / VLAN-20 — mauve */
|
|
--iot: #99CC99; /* health / OK — green */
|
|
--mgmt: #CCCC99; /* management / VLAN-30 — olive */
|
|
--wan: #66CCCC; /* WAN / external — turquoise */
|
|
|
|
/* Semantic */
|
|
--warn: #99FFFF; /* warnings — bright cyan */
|
|
|
|
/* Brand (isolated from semantic UI) */
|
|
--brand: #9FCB3A; /* Blocao green — logo only */
|
|
|
|
/* Text on ink-colored backgrounds */
|
|
--hai-text: #000;
|
|
}
|
|
```
|
|
|
|
## Typography
|
|
|
|
| Use | Font | Weight | Size range |
|
|
|---|---|---|---|
|
|
| Primary sans (titles, buttons, labels) | Antonio | 400, 500, 600, 700 | 9-26px |
|
|
| Mono (data, timestamps, code, IDs) | JetBrains Mono | 400, 500, 700 | 8-13px |
|
|
|
|
Both fonts loaded from Google Fonts. Antonio chosen for its compressed letterforms (LCARS-like), JetBrains Mono for its clarity at small sizes.
|
|
|
|
## Spacing
|
|
|
|
LCARS-style asymmetric padding. Common values:
|
|
|
|
- Pill height: 36-40px.
|
|
- Card border-radius: 12-14px (asymmetric corners on chrome elements: `border-radius: 0 28px 28px 0` etc).
|
|
- Content padding: 12-18px inside cards.
|
|
- Section gap: 6-12px.
|
|
|
|
## Border treatments
|
|
|
|
- **Chrome elements** (rail, topbar): solid color blocks with asymmetric rounded corners.
|
|
- **Content cards**: rounded corners (12-14px), border-left accent in domain color.
|
|
- **Dotted dividers**: `border-bottom: 1px dashed var(--cell-3)` for sections within a card.
|
|
|
|
## Animation patterns
|
|
|
|
- **Pulse** (status dots, "live" indicators): 2s ease-in-out, opacity 0.4 → 1.
|
|
- **Flow lines** (SCADA connections): `stroke-dasharray: 4 8; animation: 1.6s linear` shifting `stroke-dashoffset`.
|
|
- **Cursor blink** (input fields): 1.1s.
|
|
- **Panel transitions**: avoid. View switches are instant.
|
|
|
|
## Iconography
|
|
|
|
Symbols used as text glyphs (no icon font, no SVG sprite):
|
|
|
|
- `▸` / `◂` — section chevrons, "open"/"close".
|
|
- `◆` — emphasis, brand moment, identified marker.
|
|
- `●` / `◯` — running / paused indicators.
|
|
- `✓` / `✗` — pass / fail.
|
|
- `⊕` — secure / encrypted.
|
|
- `↑` / `↓` — bridge direction (out / in).
|
|
- `↑↑` / `↓↓` — fast-forward / rewind in player.
|
|
|
|
Custom SVG only for: Blocao logo (the blockhouse mark), the SCADA component renderings in SYNOPSIS.
|
|
|
|
## Domain color usage
|
|
|
|
| Color | Use cases |
|
|
|---|---|
|
|
| `--ink` (cyan) | Default text, active rail pill, chrome accents |
|
|
| `--cam` (royal blue) | CAMS view, VLAN-10 references, camera-related events |
|
|
| `--hai` (mauve) | FRIGATE view, Cell device, edge AI inference |
|
|
| `--iot` (green) | OK status, health passing, "good" states |
|
|
| `--mgmt` (olive) | GITOPS view, VLAN-30, system management, deferred topics |
|
|
| `--wan` (turquoise) | WAN view, external connections, hub references |
|
|
| `--warn` (bright cyan) | Warnings, alerts, attention-needed |
|
|
| `--brand` (lime green) | Logo, brand chip, brand moments only |
|
|
|
|
Pattern: when navigating to a view, the chrome of the topbar shifts to that domain's color. CAMS makes the topbar accent royal blue; FRIGATE makes it mauve. Reinforces "what mode am I in".
|
|
|
|
## Accessibility considerations
|
|
|
|
- All foreground text against `--bg` or `--cell` meets WCAG AA at the size used.
|
|
- Status is never communicated by color alone — always paired with shape (✓/✗) or text label.
|
|
- Animations respect `prefers-reduced-motion: reduce` (currently CSS-only; full implementation in production).
|
|
|
|
## Tooling
|
|
|
|
Tokens will be exported to:
|
|
|
|
- `tokens.css` — CSS custom properties (current).
|
|
- `tokens.json` — for design tools and JS imports (planned).
|
|
- `tokens.figma.json` — for Figma library sync (planned).
|
|
|
|
These live in `packages/design-tokens/` of the future code monorepo.
|