Verdigris Design System

Design System

Verdigris Visual Identity

Canonical tokens, guidelines, and visual rules for all Verdigris surfaces. Every color, font, and spacing value in one place.

Brand Palette

Verdigris
#0fc8c3
Midnight Purple
Pastel Red
Cyber Yellow
50
200
500
900
950

Full color system →

Palette Semantics

Colors have meaning. 70% teal + neutrals, max 2 accent regions per page. Color is earned, not automatic.

Trust · Technology
Electrical Intelligence for AI Data Centers
Brand teal anchors 70%+ of the page. The default register.
Neutral · Platform
Platform capabilities. No accent needed — every element earns its place.
Neutral · Data quality
Teal label, neutral background. Gentle tonal shift — white to neutral.100, not dark to light.
Energy · Detection
Real-time fault detection. The one dark accent moment — earned, not automatic.
Trust · Results
Proof points. Teal accent, light background — restraint over variety.

Dark hero → light content flow → one dark accent → light exit. Full palette semantics →

Typography

Electrical Intelligence
Lato 700 · Display
Verdigris captures sub-cycle electrical data and applies physics-based analysis to detect instability invisible to traditional monitoring.
Inter 400 · Body
8kHz · oklch(0.75 0.1286 191.57) · 48hr early warning
JetBrains Mono 400 · Code / Data

Full type scale →

Components

Energy Intelligence
Sub-cycle electrical monitoring for AI data centers.
Stranded Capacity
Identify megawatts that exist on paper but aren't usable.

All components →

For Partners

Brand Teal
#0fc8c3
PMS 3262 C
Fonts
Inter · Lato · JetBrains Mono
Google Fonts (OFL)
Package
@verdigristech/design-tokens
v0.4.0 · npm

Full brand specimen →

Documentation & Developer Resources

Foundations

  • Color – Palette, OKLch rationale, WCAG, dark mode
  • Typography – Scale, font stacks, weight rules
  • Spacing – 4px grid, radius, breakpoints
  • Motion – Animation philosophy, specs, reduced-motion
  • Accessibility – WCAG AA requirements
  • Dark Mode – Strategy, Patina hue shift
  • Elevation – Shadow and z-index systems

Categories

Status reflects documentation completeness. Partial means guidance exists today, but examples, source assets, or templates are still being filled in.

Tokens (JSON)

Install

npm install @verdigristech/design-tokens

@import '@verdigristech/design-tokens/css/oklch';

import designPreset from '@verdigristech/design-tokens/tailwind';

See CONTRIBUTING.md for how to add tokens, docs, or examples.