---
version: alpha
name: ZGI Design
description: ZGI UI design tokens and interface rules for AI agent consoles, workflow builders, and operational dashboards.
colors:
  brand: "#0052ff"
  brand-hover: "#0049e6"
  ink: "#0a0b0d"
  stone: "#777169"
  background: "#ffffff"
  surface: "#fbfaf8"
  secondary: "#eef0f3"
  border: "rgba(10, 11, 13, 0.08)"
  input: "rgba(10, 11, 13, 0.12)"
  destructive: "#dc2626"
spacing:
  1: 4px
  2: 8px
  3: 12px
  4: 16px
  6: 24px
  8: 32px
  10: 40px
  16: 64px
  24: 96px
radius:
  control: 4px
  panel: 6px
  overlay: 8px
  full: 9999px
components:
  button:
    radius: 4px
    smallHeight: 28px
    defaultHeight: 32px
    largeHeight: 36px
    iconHeight: 32px
  card:
    radius: 6px
    shadow: none
  focus:
    ring: 2px
    color: "#0052ff"
---

# ZGI Design

ZGI UI is a design system for AI agent consoles, workflow builders, model/provider configuration, and operational dashboards. The visual language is precise, quiet, and engineering-led: neutral surfaces carry structure, ZGI Blue carries intent.

## Principles

- Use ZGI Blue for decisive actions, active states, focus, and primary chart signals.
- Use neutral surfaces, borders, and spacing for most hierarchy.
- Keep controls compact and stable. This is a console, not a marketing page.
- Prefer real product context in examples: agents, workflows, providers, usage, keys, datasets.
- Avoid decorative gradients, oversized rounded buttons, heavy shadows, and one-off color choices.

## Colors

ZGI Blue is `#0052ff`. Use it sparingly for the primary action, active navigation, focus rings, and key data signals. Most interface structure should come from `background`, `surface`, `border`, and muted text.

## Spacing

Use a 4px scale: `4, 8, 12, 16, 24, 32, 40, 64, 96`.

## Radius

- Button, input, select, textarea, badge, tabs trigger: `4px`
- Card and panel: `6px`
- Popover, menu, dialog: `8px`
- Avatar, pill, progress track: `9999px`

## Buttons

- `sm`: `28px`
- `default`: `32px`
- `lg`: `36px`
- `icon`: `32px`

Use one solid blue primary button per local decision area. Use `secondary`, `outline`, `soft`, and `ghost` for supporting actions. Use `destructive` only for irreversible actions.

## Elevation

Prefer borders and tonal surfaces over shadows. Default cards should have no shadow. Demo shells may use a subtle shadow such as `0 12px 40px rgba(10, 11, 13, 0.06)`.

## Focus

All interactive elements must have a visible `2px` `:focus-visible` ring mapped to ZGI Blue.

## Voice

Use specific actions: `Deploy Agent`, `Run Workflow`, `Revoke Key`. Avoid vague labels like `OK`, `Submit`, and `Confirm`.

## Component Checklist

- Uses ZGI Blue only for action, active, focus, or state.
- Uses 4px radius for controls and 6px for cards/panels.
- Uses compact button heights.
- Uses border/surface before shadows.
- Has visible focus state.
- Uses realistic ZGI product copy.