ZGI UI

Components, blocks, and create tools for AI consoles.

A public-facing UI framework for ZGI products: design tokens, console blocks, interactive previews, frontend usage patterns, and create-ready templates for AI workflow tools.

Reading language

Theme palettes

ZGI Blue

Theme color tokens

Current palette values used by the live preview and create templates.

Primary brand

Create

Generate a ZGI console from product intent.

Create is the product-facing entry point for frontend teams. Pick a console preset, preview its layout, copy the command, and start from a tested ZGI shell instead of a blank dashboard.

Templates

Default shell for agents, knowledge, files, and workspace settings.

Configuration

ZGI Console

Density

Radius

Base color

Blue

Theme

Light

Command

Blue

pnpm dlx zgi-ui create --template console-shell

Preview

A generated console shell with cards, forms, lists, and status surfaces.

StandardZGILight

ZGi

ZGI Console

Default shell for agents, knowledge, files, and workspace settings.

Agent Health

98%

12 workflows validated

Knowledge Sync

24k

documents indexed

Monthly Spend

$840

12% below budget

Workflow release

Configure validation, publish policy, and handoff rules before creating the project.

Launch checklist

ZGI Console

Console shellReady

Localized navigationReady

Theme tokensReady

Interaction statesReview

Design rationale

The detailed rules behind the console.

ZGI console UI is designed for repeated operational work: fast orientation, compact decision-making, low visual noise, and a consistent relationship between state and color.

RoleSizeWeightLineWhen to use

Page display

44-64px3001.05

Only for framing the system, not inside dense console surfaces.

Section heading

28-36px3001.08-1.12

Use when explaining component families or design philosophy.

Console title

14-16px6001.3

Object identity, node titles, table card titles.

Navigation item

13-16px5001.4

Sidebars and subnav; prioritize scan speed over display character.

Metadata

12px5001.35

Save state, timestamps, node output type, chips.

Category label

10-12px6001.2

Uppercase labels with 0.12em tracking for grouping.

Button grammar

Primary actions are filled with the active theme accent. Secondary actions are white with hairline borders. Utility controls use soft fills. Destructive actions should use semantic red, not the theme accent.

Shadow philosophy

Backend UI should feel stable, not floating. Default depth is a 1px border. Only selected workflow nodes get a soft state ring because selection must survive a gridded canvas.

Interaction states

Default

White surface, muted text, no shadow. The console starts quiet so work content stays dominant.

Hover

Use canvas-tinted fill and text darkening. Avoid blue hover unless the element is already interaction-critical.

Active

Use soft accent fill, accent text, and optional 2px rail. The same grammar applies across nav and nodes.

Selected

Use accent border plus a low-opacity focus ring. Selection needs to be visible on a busy grid.

Disabled

Reduce opacity and preserve layout size. Never collapse controls because it shifts muscle memory.

Depth levels

Level 0

Page canvasNo shadow. Use warm/off-white surface to reduce glare.

Level 1

Sidebars and panelsHairline border: rgba alpha around 0.08-0.10.

Level 2

Cards and tablesBorder plus radius only. Avoid stack shadows in dense backend UI.

Level 3

Selected/focused nodeAccent ring at 8-12% opacity. This is state depth, not decorative depth.

Interaction philosophy

Every interaction should reduce uncertainty: users must know what is clickable, what has changed, what is currently selected, and what will be committed.

State feedback

Every click should answer “what changed?” within the same surface: active rail, selected ring, status chip, or disabled affordance.

Progressive disclosure

Keep primary navigation shallow. Place advanced actions in the local toolbar or panel only after the user enters the object context.

Reversible actions

Preview, debug, and inspect should be secondary. Publish, run, and create are primary because they change system state.

Keyboard and focus

Focus rings must be visible on white, gray, and grid backgrounds. Never rely on color alone; use shape, border, or rail.

Density and fatigue

Compact mode is for experts and monitoring. Comfortable mode is for onboarding, review, and low-frequency workflows.

Error handling

Errors should sit next to the object they affect. Global banners are reserved for system-wide failures or lost connectivity.

Collapsible sidebar model

Sidebar collapse is a workspace optimization, not a hiding trick. It should preserve orientation while returning width to the canvas.

Manual collapse

Offer a visible control in the sidebar header or shell edge. Use it when users need more canvas space for workflow editing, tables, logs, or split panels.

Automatic collapse

Below tablet width, collapse the primary sidebar into an icon rail and move secondary navigation into a drawer or top object switcher. Do not squeeze labels.

Collapsed memory

Keep logo/workspace mark, active destination icon, unread/error badges, and a clear expand affordance. The user should still know where they are.

Temporary reveal

Hover, focus, or keyboard shortcut may reveal a flyout. The flyout overlays the canvas and closes after selection, escape, or outside click.

Persistence

Remember the user choice per workspace on desktop. Reset only when viewport rules require a different layout.

Do not collapse

Keep sidebars expanded during onboarding, destructive review, permission setup, or when labels are required to disambiguate similar destinations.

Skill spec

Console component rules.

ComponentPurposeRule

ConsoleShell

Real product frame with ZGI header, open sidebar, and page-level work area.

56px top bar, 224px primary sidebar, white surfaces, 1px structural borders.

ConsoleSidebar

Primary navigation rail for workspace-wide destinations.

220px width, white surface, active left border + cool gray fill.

ConsoleSubnav

Object-level secondary navigation for the active app or agent.

168px width, one primary creation action, 8px item radius.

AgentCard

Repeated object card for intelligent agents and workflows.

Black 52px identity tile, blue-tinted border, status chip top-right, action menu bottom-right.

MemberTable

Permission and workspace membership list.

Light-blue table header, 52px rows, circular avatars, role control, destructive icon at the far edge.

ProviderCard

Model vendor configuration card.

Logo left, toggle top-right, 2-3 line description, no decorative image or heavy shadow.

BillingCard

Financial summary and point-package cards.

Large numbers, restrained hierarchy, full-width primary action, price and points are visually separated.

PluginCard

Marketplace item card for system capabilities.

Icon tile, title, subtitle, author metadata, 3-column desktop grid.

ConsoleToolbar

Current object identity, save state, validation, debug, and publish actions.

Border bottom, compact 13-14px text, publish is the only themed primary action.

NodeLibraryPanel

Workflow node picker grouped by capability.

12px panel radius, 8px node item radius, icon bg uses the theme soft accent.

WorkflowNode

Canvas module with ports and selected state.

12px radius, selected blue border + 3px soft focus ring.

RecentSurfacesTable

Compact table for backend object status.

13px rows, subtle dividers, no heavy card shadow.

Dialog

Focused edit surface for local object configuration.

Trigger, content, title, description, footer actions, and close affordance.

AlertDialog

Blocking confirmation for irreversible or high-risk operations.

Use only when the next action changes permissions, credentials, deletion, or production state.

Sheet

Side panel for inspection, audit history, and secondary object detail.

Preserves workbench context while revealing supporting data.

Popover

Small contextual editor for filters, display options, and scoped controls.

Dismissable, anchored, and lighter than a modal.

Components, blocks, and create tools for AI consoles.

Generate a ZGI console from product intent.

Templates

Configuration

Command

Preview

Workflow release

Launch checklist

The detailed rules behind the console.

Interaction philosophy

Collapsible sidebar model

Small components with clear ownership.

Atomic console states for direct reuse.

Console component rules.