Patterns

Console Layout

Shell dimensions, navigation rules, and accent variants for backend consoles, workflow builders, agent editors, and operational dashboards.

Shell layout

Primary

●

Flow 1

Flow 2

Flow 3

Node — Selected

border: #2A6FDB

Primary sidebar (220px) · Secondary sidebar (168px) · Canvas with 20px grid

One accent per console surface. Do not mix accents. Each variant applies to active nav, selected nodes, focus, and primary action only.

ZGI Blue#2A6FDBDefault brand console

Graphite Cyan#0891b2Data pipelines, logs, monitoring

Emerald Audit#059669Compliance, validation, audit

Violet Agent#6d5dfcAI orchestration, model config

Amber Review#d97706Approval queues, annotation

Primary sidebar width220px (range: 196–280px)

Secondary sidebar width168px (range: 144–220px)

Toolbar height56–64px

Nav item height36px standard (compact: 32px)

Nav item radius8px

Nav text14px / weight 500

Active item bg#eef0f3

Active item text#2A6FDB

Active left rail2px solid #2A6FDB (optional)

Canvas grid20px, alpha 0.045

Node width200–240px

Node radius12px

Full console component reference

Sidebar items, workspace cards, toolbar grammar, node library, workflow nodes, and compact tables are documented in the Console UI reference.