ZGI-owned visual language
Warm restraint for product ideas that need to feel trustworthy.
A practical ZGI system that blends near-white warmth, whisper-level elevation, functional blue, and compact product UI rules.
Prototype command center
Live visual sample
Action map
Brief
Structure
Prototype
Review
Design signal
Warm liftFoundation
Color system with usage boundaries.
ZGI uses a restrained palette: warm canvas for atmosphere, white for product work, one functional blue for interaction, and low-opacity borders for structure.
Warm near-white page canvas
Default page background; creates warmth without becoming beige.
Primary product surface
Cards, panels, tables, dialogs, and logo download containers.
Warm emphasis surface
Featured CTA blocks, empty states, guidance, and soft highlights.
Neutral control surface
Secondary buttons, segmented controls, neutral chips, and low-priority filters.
Functional ZGI Blue
Primary CTA, selected state, active link, focus accent, and progress.
Interactive blue hover
Hover/pressed state for primary blue actions only.
Primary button corner
ZGI CTAs use a restrained rounded rectangle, not a pill.
Primary text
Headlines, body emphasis, dark section background, and high-contrast controls.
Secondary text
Descriptions, supporting copy, table secondary values.
Muted warm gray
Metadata, captions, helper text, inactive labels.
Hairline boundary
Default dividers, card edges, grid lines, and module separation.
Strong boundary
Active borders, selected modules, and structural dividers.
Warm lift
Featured warm CTA or guidance surfaces only.
Tokens you can see, not just name.
Canvas
Page background
#fbfaf8Surface
Cards and panels
#ffffffWarm Stone
Featured guidance
#f5f2efCool Surface
Secondary controls
#eef0f3ZGI Blue
Actions and states
#0052ffBlue Hover
Primary hover
#578bfaText Main
Primary text
#0a0b0dWarm Gray
Metadata
#777169Typography
Mode-aware hierarchy
Display Hero
56px
300
1.05
Display Section
44px
300
1.08
Display Card
32px
400
1.15
Lead Body
18px
400
1.60
Buttons
Role-based action shapes
Primary CTA
Blue is action
Secondary Pill
Cool neutral
Warm CTA
Featured guidance
Operational preview
Dense but calm
North Star brief
Ready
3 screens
Design review
Data room flow
Draft
7 screens
PM review
AI insight panel
Live
12 states
Engineering
Onboarding path
Blocked
4 screens
Legal copy
Backend components
Console UI lives as its own component system.
The console system is extracted into reusable pieces: primary sidebar, secondary sidebar, toolbar, node library, workflow node, and backend table.
Workflow editor
Node library
Flow control
Condition Branch
AI capability
LLM
Data process
Document Extractor
Start
entry
Code Execution
result: number
Direct Reply
result
Recent backend surfaces
Workflow intake
Validated
12 nodes
2m ago
Research agent
Draft
8 nodes
18m ago
Knowledge sync
Running
5 jobs
Now
Component ownership
ConsoleSidebarConsoleSubnavConsoleToolbarNodeLibraryPanelWorkflowNodeRecentSurfacesTableSkill copy
Reusable agent instructions.
The full copy lives in docs/skills/zgi-premium-design. This preview keeps the core trigger and rules visible on the page.
Warm canvas and white product surfaces
Blue reserved for meaningful actions
Product UI stays compact and scannable
---
name: zgi-premium-design
description: Use when designing, implementing, or reviewing ZGI-branded product UI, landing pages, PM prototypes, dashboards, design-system pages, and logo/brand asset surfaces that need a clean financial-grade blue-and-white system: ZGI Blue as the singular accent, white and near-black section contrast, 8px rounded-rectangle CTAs, tight display typography, cool gray secondary controls, minimal shadows, and precise product trust.
---
# zgi-premium-design
Use this skill to create ZGI-owned interfaces with a clean, trustworthy, financial-grade product language. The design should feel precise, confident, technical, and calm: closer to a premium AI/finance product than a decorative SaaS landing page.
Visual theme:
- Primary background is white (#ffffff), with optional warm canvas (#fbfaf8) for broad page rhythm.
- ZGI Blue (#0052ff) is the singular brand accent.
- Near black (#0a0b0d) is used for text, dark feature sections, and high-contrast buttons.
- Cool gray (#eef0f3) supports secondary controls and neutral surfaces.
- Dark cards use #282b31 only inside deliberate dark sections.
- Borders use rgba(10,11,13,0.08) or rgba(91,97,110,0.2).
- Avoid gradients, glow blobs, glassmorphism, purple accents, and decorative blue backgrounds.
Buttons:
- Primary CTA: #0052ff background, white text, 8px radius, 44-56px height, 16px semibold label, hover #578bfa.
- Black CTA: #0a0b0d background, white text, 8px radius, used for high-contrast actions.
- Secondary button: white or #eef0f3 background, #0a0b0d text, 1px subtle border, 8px radius.
- Blue bordered action: transparent/white background, #0052ff text, 1px #0052ff border, 8px radius.
- Reserve pills only for chips, badges, segmented controls, and status tokens, not page-level CTAs.
Typography:
- Display hero: 80px desktop, weight 400-700, line-height 1.00, tight tracking.
- Secondary display: 64px / 52px, line-height 1.00.
- Section heading: 36px, line-height 1.11.
- Body: 18px, line-height 1.56; product UI body: 14px, line-height 1.50.
- Use strong type scale and whitespace before adding decoration.
Layout and surfaces:
- Alternate white sections with rare near-black sections for contrast.
- Use visible hairline borders and clean modular grids.
- Use generous whitespace on landing pages and compact density in product dashboards.
- Cards use white surface, 8-16px radius, subtle border, minimal or no shadow.
- Depth comes from contrast, borders, spacing, and typography, not heavy shadows.
Infra Grid variant:
- For AI infrastructure/developer pages, use visible hairline grid, 80-96px bold hero type, tight tracking, 0-4px CTA radius, and one blue dot-matrix accent.
Do not:
- Do not use blue decoratively.
- Do not introduce extra brand colors.
- Do not use pill CTAs for primary actions.
- Do not nest cards inside cards.
- Do not copy reference brand names or proprietary font names into UI copy.
Read references/design.md before choosing tokens, typography, buttons, dark sections, or responsive behavior.