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

Which color comes from the palette. How much comes from the section's importance. Color gives text room to breathe. The accented section is where the eye goes first.

Electrical Intelligence
AI-Grade Power Monitoring
Full expression — dark bg, brand teal, CTAs. Hero and footer only.
Technology
Supporting — teal label, white bg. Present but quiet. Text breathes.
Data quality
Neutral.200. No color. Makes the accent hit harder.
Detection
Earned accent — tint + label + border. The conversion point. Eye goes here first.
Results
White, teal label. The page settles.

Full → Supporting → Breathing → Accent → Supporting. Palette semantics & research basis →

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.753 0.1279 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
  • Composition – How color, type, and spacing compose (purpose x surface matrix)

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.