ZGI Design
Design rules for ZGI UI
A compact, engineering-led system for AI agent consoles, workflow builders, model configuration, and operational dashboards. The public Markdown source is embedded below for team copy/paste and AI-assisted implementation.
ZGI Blue
#0052ff
Primary action, active state, focus, and key signals.
Control Radius
4px
Buttons, inputs, tabs, badges, and compact controls.
Panel Radius
6px
Cards and product panels stay precise and compact.
Focus Ring
2px
Every interactive element keeps a visible focus state.
Markdown Source
Same content as /design.md, presented here for copying.
# 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.