Design Skill

---
name: zgi-design
description: Use when designing, implementing, or reviewing any ZGI product interface — landing pages, dashboards, consoles, workflow builders, AI tools, and brand surfaces. Applies ZGI Blue as the only functional accent, white/near-black section rhythm, 8px CTA radius, tight display typography, cool gray secondary controls, hairline borders over shadows, 8-state component model, and progressive disclosure interaction patterns.
---

# zgi-design

## Direction

ZGI interfaces should feel trustworthy, precise, calm, and product-ready. Closer to a premium AI/finance tool than a decorative SaaS landing page.

## Core Principles

1. Blue is functional only. Use #2A6FDB for primary CTAs, active navigation, selected nodes, focus rings, and progress. Never as decorative fill, gradient, or background wash.
2. White first, near-black for contrast. Default to #ffffff surfaces. Use #0a0b0d sections sparingly. Warm canvas #fbfaf8 for broad page rhythm.
3. 8px on CTAs, flexible elsewhere. Primary buttons always border-radius 8px. Full pills (9999px) only for chips, badges, segmented controls, and status tokens.
4. Borders over shadows. Depth from 1px solid rgba(10,11,13,0.08) borders, contrast, spacing, and type scale. Shadows only for dialogs, menus, and floating overlays.
5. Type scale before decoration. Use size, weight, and line-height for hierarchy. No gradient text, novelty fonts, or type effects.
6. Density is intentional. Compact (32-36px rows), standard (36-44px), or comfortable (44px+) chosen by user expertise and task frequency.

## Color Tokens

Token         | Value                    | Role
ZGI Blue      | #2A6FDB                  | Primary action, active state, focus, selected, progress
Hover Blue    | #578bfa                  | Hover/pressed for blue actions
Pure White    | #ffffff                  | Primary surface, cards, panels
Warm Canvas   | #fbfaf8                  | Page background, subtle bands
Warm Surface  | #f5f2ef                  | Featured guidance, warm CTA, empty states
Cool Surface  | #eef0f3                  | Secondary buttons, segmented controls, active fills
Near Black    | #0a0b0d                  | Primary text, dark sections, high-contrast CTAs
Text Secondary| #4e4e4e                  | Descriptions, supporting copy
Text Muted    | #777169                  | Metadata, captions, helper text
Dark Card     | #282b31                  | Cards inside dark sections
Border Subtle | rgba(10,11,13,0.08)      | Default dividers, card edges
Border Strong | rgba(10,11,13,0.16)      | Active borders, selected modules
Focus Ring    | rgba(42,111,219,0.35)      | Keyboard focus

## Typography

Showcase: Display Hero 80px/300/1.00, Secondary 64px, Third 52px, Section 36px/400/1.11, Body 18px/400/1.56, Button 16px/600, Caption 14px/700.

Product UI: App Title 32px/600/1.15, Section Title 20px/600/1.30, Panel Title 16px/600/1.35, Body 14px/400/1.50, Table Text 13px/500/1.45, Label 13px/500/1.30, Micro 11px/650/1.25.

## Button Grammar

Primary: #2A6FDB bg, white, 8px, 44-56px — main CTA, hover #578bfa.
Black: #0a0b0d bg, white, 8px, 44-56px — high-contrast action.
Secondary: #eef0f3 bg, #0a0b0d, 8px, 40-48px — alternative action.
Blue Bordered: transparent bg, #2A6FDB text, 1px #2A6FDB border, 8px, 40-48px.
Operational: #eef0f3 bg, #0a0b0d, 8-12px, 32-36px — toolbars, filters.
Destructive: #dc2626 bg, white, 8px — irreversible, never inherit accent.

## Interaction Principles

8 states every component must define: default, hover, active/pressed, selected, focus (rgba(42,111,219,0.35) ring), disabled (keep in layout), loading, error. Never use color alone for state.

Feedback: Every action needs immediate visible result — loading within 100ms, active rail on navigation, ring on node select, inline validation on submit.

Disclosure hierarchy: primary sidebar (global) > secondary sidebar (object) > toolbar (actions) > panels (detail). No rare config in primary nav.

Consequence: Low (filter/copy) = immediate. Medium (draft save) = immediate + undo. High (publish/delete/revoke) = confirmation required. One high-consequence action primary per surface.

Density: Compact 32-36px/13px (expert, monitoring). Standard 36-44px/13-14px (production). Comfortable 44px+/14-16px (onboarding).

Focus: Tab order sidebar > subnav > toolbar > canvas. Icon-only needs aria-label + tooltip. Disabled maintains size.

Errors: Node = near output. Form = under field. Table empty = inside body. System = global banner only.

## Component Rules

Cards: 12-24px radius, #ffffff bg, 1px rgba(10,11,13,0.08) border, no shadow, never nest.
Inputs: 40-44px height, 8px radius, rgba(10,11,13,0.16) border, #2A6FDB on focus, 3px ring.
Chips: 22-32px height, 9999px radius, #eef0f3 default, 12-13px/600, semantic color for state meaning only.
Segmented: 9999px container + active segment, #eef0f3 bg, active = white + shadow, 36-40px.
Tables: 44-52px rows, 13px text, 11-12px headers, name weight 600, status semantic only.

## Console Rules

Shell: primary sidebar 220px, secondary 168px, toolbar 56-64px.
Active nav: #eef0f3 fill + #2A6FDB text + optional 2px left rail.
Toolbar: one primary blue action (Publish/Run). Debug/Inspect = white outline.
Nodes: 200-240px, 12px radius, white bg, #2A6FDB selected border.
Grid: 20px, alpha 0.045.

Accent variants (one per surface): ZGI Blue #2A6FDB (default), Graphite Cyan #0891b2 (data/logs), Emerald Audit #059669 (compliance), Violet Agent #6d5dfc (AI agents), Amber Review #d97706 (approval).

## Do / Don't

Do: #2A6FDB for action/selection/focus only. 8px on all CTAs. rgba(10,11,13,0.08) as default border. All 8 states per component. Dark sections sparse.

Don't: Blue decoratively. Pill CTAs for primary buttons. Shadows on cards. Extra brand colors. Nested cards. Gradient text or glows. Color as only state indicator.