Tokens

Color

13 tokens. One functional accent. The entire system's visual identity is built on restraint — blue earns its presence by appearing only where it has a job.

Brand

ZGI Blue is the only functional accent. Never decorative.

ZGI Blue

#2A6FDB

Primary action · active state · focus ring · progress · selected node border

Hover Blue

#578bfa

Hover and pressed state for all blue actions

Surface

White-first. Near-black sparingly. Warm canvas for page rhythm.

Pure White

#ffffff

Primary surface, cards, panels, modals

Warm Canvas

#fbfaf8

Page background, broad section rhythm

Warm Surface

#f5f2ef

Featured guidance, warm CTAs, empty states

Cool Surface

#eef0f3

Secondary buttons, segmented controls, active fills

Near Black

#0a0b0d

Primary text, dark section background, high-contrast CTAs

Dark Card

#282b31

Cards and elevated surfaces inside dark sections

Text

Three tiers of text. Weight and size carry hierarchy — never color alone.

Primary

#0a0b0d

Headlines, body copy, CTAs, all primary readable text

Secondary

#4e4e4e

Descriptions, supporting copy, secondary labels

Muted

#777169

Metadata, captions, helper text, timestamps

Semantic

Swiss earth-tone semantics. Desaturated, warm-base. Never neon, never decorative.

Active

Success

#2D5F3F

Sage green · running · completed · healthy

Active

Info

#2A6FDB

Rhine Blue · the only anchor · informational · link

Active

Warning

#92652B

Burnt amber · paused · review · pending

Active

Error

#8B2828

Deep crimson · failed · invalid · destructive

Border

Borders carry depth. No shadows on static cards — ever.

Border Subtle

rgba(10,11,13,0.08)

Default card edges, section dividers, table rows

Border Strong

rgba(10,11,13,0.16)

Active borders, focused inputs, selected module outlines

Focus Ring

rgba(42,111,219,0.35)

Keyboard focus — 3px ring on all focusable elements

Alerts & Notifications

Banner / Toast / Inline patterns. White background + 3px left accent border + semantic icon. Neutral text keeps legibility high.

Banner

Build completed successfully

All 36 routes pre-rendered in 7.2s.

New version available

Refresh to load v2.1.4 — 12 changes since your last visit.

Workflow paused for review

A guardrail flagged 2 outputs. Review before continuing.

Deployment failed

Build returned exit code 1 — check the inspection logs.

Toast

Saved

Workflow draft saved 2s ago

Synced from Cloudflare

Latest tokens pulled to local env

Approaching quota

83% of monthly LLM tokens consumed

Auth expired

Session ended — re-login to continue

Inline

Valid email format

Use a memorable name — visible to teammates

Password should include at least one number

This domain is already taken

Token anatomy

Semantic	Background	Accent / Icon	Title / Body
Success green-600	`#ffffff`	`#16a34a`	`#0a0b0d / #6b7280`
Info blue-600	`#ffffff`	`#2563eb`	`#0a0b0d / #6b7280`
Warning amber-600	`#ffffff`	`#d97706`	`#0a0b0d / #6b7280`
Error red-600	`#ffffff`	`#dc2626`	`#0a0b0d / #6b7280`
Neutral zinc-500	`#ffffff`	`#71717a`	`#0a0b0d / #6b7280`

Usage rules

Blue is functional only

#2A6FDB appears on CTAs, active nav, selected nodes, focus rings, and progress. Never as decorative fill, gradient, or background wash.

Borders over shadows

Use 1px rgba(10,11,13,0.08) for card and panel edges. Reserve box-shadow for dialogs, menus, and floating overlays only.

Semantic color for state only

Green/red/amber communicate success/error/warning. Never use them for brand color or decorative accent.

Dark sections are sparse

#0a0b0d backgrounds appear once or twice per page — hero or CTA only. Overuse destroys the contrast signal.