Design tokens

The complete token table used across mockups and (eventually) production console.

Color palette

: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.

4.1 KiB Raw Permalink Blame History