Getting Started
Principles
Six rules that apply to every ZGI surface — landing pages, consoles, dashboards, and AI tools. When in doubt, these take precedence over local decisions.
Blue is functional only
Use #2A6FDB for primary CTAs, active navigation, selected nodes, focus rings, and progress indicators. Never as decorative fill, gradient, or background wash.
Do
Primary button, active nav item, selected node border, focus ring
Don't
Blue panel background, decorative blue text, blue gradient
White first, dark for contrast
Default to white surfaces (#ffffff). Use #0a0b0d sections sparingly — one or two per page max. Warm canvas #fbfaf8 creates page rhythm without introducing color.
Do
White cards, warm canvas page bg, one dark hero section
Don't
Dark background for the entire page, multiple dark sections
8px on CTAs, flexible elsewhere
All page-level buttons use border-radius 8px. Cards 12–24px. Feature containers 24–32px. Full pills (9999px) only for chips, badges, and segmented controls.
Do
Button 8px, card 16px, chip 9999px
Don't
Pill-shaped primary buttons, sharp 0px CTA corners
Borders carry depth
Use 1px solid rgba(10,11,13,0.08) for all card and panel edges. Reserve box-shadow for dialogs, floating menus, and overlays. Never on standard cards.
Do
1px border on cards, shadow only on dialogs and dropdowns
Don't
box-shadow on static cards, multiple shadow levels on the same page
Type scale before decoration
Build hierarchy with font size, weight, and line-height. Avoid gradient text, novelty fonts, and display effects. The scale does the work.
Do
80px/300 hero, 36px section heading, 14px product body
Don't
Gradient text, animated type effects, mixed decorative fonts
Density is a deliberate choice
Compact (32–36px rows), standard (36–44px), or comfortable (44px+). Decide by user type and task frequency. Changing density must not reduce hit target clarity.
Do
Compact for monitoring dashboards, comfortable for onboarding
Don't
Mixing density modes arbitrarily within the same view