Verdigris Design System

Living Document ← Docs

Brand Specimen

Electrical Intelligence for the AI-Factory Era

The canonical visual identity for all Verdigris surfaces. Typography, color, spacing, and brand qualities rendered live from design tokens.

Brand Tone

Four Pillars

Precision
Exact, specific, and data-driven. No vagueness or hand-waving.
Visual: tight letter-spacing (-0.02em), tabular numbers, mono for data
Masterful
Expert, authoritative, and deeply knowledgeable. Command of the domain.
Visual: Inter's high legibility, 700-weight headings, confident hierarchy
Refined
Polished, elegant, and thoughtfully crafted. No rough edges.
Visual: generous whitespace, zinc-tinted neutrals, 0.625rem radius
Pioneering
Forward-thinking, innovative, and leading the industry.
Visual: OKLch color space, perceptual gradient interpolation, brand hue loop

Typography

Type Specimen

Display / H1
Lato 700
4rem / 64px
-0.02em
Electrical Intelligence
Display / H2
Lato 700
3rem / 48px
-0.02em
Sub-Cycle Visibility
Display / H3
Lato 700
2rem / 32px
Tokens Per Watt
Body / Large
Inter 400
1.25rem / 20px
Verdigris captures sub-cycle electrical data and applies physics-based analysis to detect instability invisible to traditional monitoring.
Body / Regular
Inter 400
1rem / 16px
AI workloads create sharp, fast electrical transients that turn hidden electrical weakness into systemic risk. Safe capacity — not theoretical capacity — is the bottleneck.
Body / Small
Inter 400
0.875rem / 14px
Deployed across all T-Mobile data centers in North America. Expanding with Verizon. Piloting with AWS and Supermicro.
Mono
JetBrains Mono
400
8kHz · 48hr early warning · oklch(0.75 0.1286 191.57)
UI / Button
Inter 600
1rem
Request Demo Learn More

Color

Brand Palette

Canonical values in OKLch. All other formats (HSL, hex, RGB) are generated by the build pipeline.

Brand Hue Loop (16 stops)
Verdigris
#0fc8c3
Mix 1
Mix 2
Mix 3
Midnight Purple
MP Step 1
MP Step 2
MP Step 3
Pastel Red
PR Step 1
PR Step 2
PR Step 3
Cyber Yellow
CY Step 1
CY Step 2
CY Step 3
Neutral Scale (zinc-tinted, hue ~286)
50
100
200
400
500
800
900
950

Full hue loop: Teal → Purple → Red → Yellow → Teal. 16 stops, interpolated in OKLch for perceptual uniformity.

Color Usage

Palette In Use

Applied examples showing how palette regions work in real page sections. 70% teal + neutrals, max 2 accent regions, never adjacent.

Correct — teal dominant, one earned accent (energy for detection)
Hero — trust region
Electrical Intelligence for AI Infrastructure
Teal accent on dark neutral — the default Verdigris expression.
Neutral section
Platform capabilities. Breathing room — no accent color needed.
Detection — energy region
Real-time fault detection. This section earned its accent — alerting content matches the energy palette.
Neutral section
Deploy at scale. Neutral background — not every section needs color.
Wrong — too many regions, no breathing room, adjacent colored sections
Teal tint
Purple tint (adjacent!)
Magenta tint (3rd region!)
Yellow tint (4th region — rainbow)
Dark mode tint reference — minimum perceptible opacities
15%
18%
12%
10%
8%
10%

Spacing

4px Grid

1 · 4px
2 · 8px
3 · 12px
4 · 16px
5 · 20px
6 · 24px
8 · 32px
10 · 40px
12 · 48px
16 · 64px
20 · 80px
24 · 96px
32 · 128px
Border Radius
sm md base xl full

Accessibility

Contrast Rules

PASS — Teal on dark (12.3:1)
Electrical Intelligence
Brand teal is safe on neutral.950 and darker backgrounds.
FAIL — Teal on white (2.9:1)
Electrical Intelligence
Brand teal as text on white fails WCAG AA. Use neutral.900 for text instead.

For Partners

Brand Assets

Color Values

Hex values for print, email, and Figma

npm install @verdigristech/design-tokens

Import from hex/colors.json · Pantone: PMS 3262 C

CSS Variables

OKLch (modern) or HSL (legacy) custom properties

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

Tailwind Preset

Drop-in preset for Tailwind CSS projects

import preset from '@verdigristech/design-tokens/tailwind'

Typography

Load via Google Fonts (free, OFL licensed)

Inter 400-700 · Lato 700 · JetBrains Mono 400

Logo Lockups

Recovered canonical SVG lockups for light and dark surfaces.

assets/logos/brand/logo-green.svg
Verdigris teal logo lockup on a light background
assets/logos/brand/logo-white.svg
Verdigris white logo lockup on a dark background

Banner Asset

Recovered canonical marketing-site banner defining approved Verdigris brand treatment.

assets/banners/verdigris-banner.avif
Recovered Verdigris banner asset used for editorial, news, and press surfaces