Verdigris Design System

Canonical Brand Visualizations

The Verdigris visual signature derives from the product: 8kHz electrical data made visible. These are not illustrations. They are data patterns that only an electrical intelligence company can produce.

Phase Portrait (Lissajous)
V-I relationship as XY figure. Each load type produces a unique shape. Primary brand mark.
Use: card icons, hero illustrations, loading states, favicon
Harmonic Spectrum
Frequency-domain bars showing harmonic content. 64 bars from 60Hz fundamental through the 32nd harmonic.
Use: section dividers (2-4px), card top borders, dashboard headers
Waveform Trace
Time-domain 60Hz signal with 3rd, 5th, 7th harmonics. Must show real harmonic structure, not a generic sine.
Use: section separators, ambient background, resolution comparisons
Resolution Comparison
Same electrical event at 1/min vs 8kHz. The fault is invisible at low resolution. The product story in one image.
Use: evidence sections, product demos, slide decks
Validated Operating Envelope
Three-band capacity chart. Gray nameplate, amber conservative-derated, teal validated-safe. Recovers the 20-40% of capacity that derating strands.
Use: AI Factory page evidence section. Specific to /industries/ai-factory.

Canonical Viz Catalog

Each canonical viz makes one argument and has a page-canonical home. Reuse policy is GENERAL (works on multiple page types), SPECIFIC (locked to one page; argument is page-specific), or EXCLUSIVE (a single page owns it and other surfaces must not borrow). Maturity follows the design-system graduation model.

Viz Argument it makes Canonical home Reuse policy Maturity
Phase Portrait (Lissajous) "Every load has a fingerprint." Brand mark; multiple pages General Rule
Harmonic Spectrum "Loads have measurable harmonic content." Section dividers; technology pages General Rule
Waveform Trace "Real 60Hz behavior, not generic decoration." /hardware/ev2 (canonical) Specific Rule
Resolution Comparison "8kHz sees what 1/min cannot." /platform/signals (canonical) Specific Rule
Validated Operating Envelope "Validated operating limits recover stranded capacity." /industries/ai-factory (Persuade x Web Page, Evidence section) Specific to /industries/ai-factory; not reusable elsewhere Experimental (graduates to Rule after 30 days)

Named Text Effects

Three specified effects for the Technology/Signal page (Demonstrate x Web Page composition cell). Exclusive to this page type. See interactive demos.

1. Measurement Bar Reveal
Characters materialize from 1px teal cursor bars. Oscilloscope measurement metaphor.
Duration: 800ms Stagger: 35ms/char Easing: ease-out Section: Hook, Close Max: 1 per page Legibility: within 600ms
2. Harmonic Typography
Large digits as clipping masks over three-phase waveforms. Text reveals the data.
Phases: teal / purple / yellow Speed: 1 cycle per 500ms Font: Lato 700, 5-12rem Section: Evidence Max: 1 per page Fallback: CSS gradient-clip
3. Waveform-to-Text Reveal
Heading starts as oscilloscope trace, resolves into text with palette sweep ending at section accent.
Duration: 1200ms Easing: ease-out Structure: 60Hz + harmonics Section: Turn only Max: 1 per page Legibility: within 800ms

Constraints

Attention Budget
Max 2 animated elements visible in any viewport. Ambient waveform counts when opacity > 10%.
Reading Constraint
Text legible within 600ms (<40 chars) or 800ms (40+ chars). Effects continue after but text resolves first.
Page Exclusivity
Named effects appear only on the Technology/Signal page (Demonstrate cell). Not on homepage or product pages.
Canvas Fallback
Every Canvas text has identical HTML fallback. Shown for reduced-motion. role="img" + aria-label required.
Synthetic Data
Must be labeled "Representative electrical data." Synthetic faults acceptable but not claimed as real measurements.
No Generic Waves
Waveforms must have real harmonic structure (3rd, 5th, 7th of 60Hz). A plain sine wave is not a brand element.
Documentation

Visual Signature

Overview

The Verdigris visual signature is a family of data-derived patterns that only an electrical intelligence company can produce. It is not a logo treatment, an illustration style, or a color scheme. It is the product’s data, made visible.

The full specification lives in foundations/composition.md under “Visual Signature” and the corresponding rules in rules/visual-rules.yml under composition.visual-signature, composition.canvas-text, composition.named-effects, composition.ambient-waveform, and composition.demonstrate-web-page.

Interactive Demos

See the Visual Signature Demo page for interactive Canvas demonstrations of the three named effects and the canonical visualizations.

What Is a Brand Visualization

A brand visualization derives from real electrical engineering concepts and could only belong to Verdigris:

  • Phase portraits (V-I Lissajous figures) showing load fingerprints
  • Harmonic spectra showing frequency content of electrical loads
  • Waveform traces with real 60Hz + harmonic structure
  • Resolution comparisons (1/min vs 8kHz)

What Is NOT a Brand Visualization

  • Generic sine waves with no harmonic content
  • Particle systems not derived from electrical data
  • Abstract gradient meshes
  • Network/node graphs that don’t represent circuit topology
  • Waveforms used as decoration without connection to content

The Three Named Effects

These are exclusive to the Technology/Signal page (Demonstrate x Web Page composition cell). They do not appear on any other page.

1. Measurement Bar Reveal

Characters materialize from 1px teal cursor bars. The oscilloscope-to-text metaphor: measurement becomes meaning.

  • 800ms total, 35ms stagger per character, ease-out
  • Use on: H1 in Hook section, optionally reprised in Close
  • Text must be fully legible within 600ms

2. Harmonic Typography

Large digits where the letterforms are windows into three-phase waveforms scrolling behind them.

  • Phase A: teal, Phase B: purple, Phase C: yellow
  • One 60Hz cycle per 500ms
  • Use on: key stat numbers in Evidence sections
  • Reduced-motion: CSS background-clip: text with gradient

3. Waveform-to-Text Reveal

Section heading starts as a continuous oscilloscope trace, resolves into readable text.

  • 1200ms total, ease-out
  • Palette sweep terminates at the Turn section’s accent color
  • The trace must be a continuous sinusoidal with harmonics, not per-character noise
  • Use on: H2 at the Turn section only
  • Text must be fully legible within 800ms

Validated Operating Envelope

A circuit-by-circuit capacity chart with three stacked bands that argue: validated operating limits recover the 20-40% of capacity that conservative derating strands.

Visual treatment

  • Gray band (top): Nameplate / breaker rating. The published ceiling.
  • Amber band (middle): Conservative-derated (60-80% of nameplate). What operators actually run because they cannot trust the ceiling.
  • Teal band (just below nameplate): Measured-safe envelope. Verdigris-validated using 8kHz electrical data.

The chart shows 12 circuits side-by-side as bars so the recovered capacity (the gap between amber and teal) is read as a fleet-wide pattern, not a single anecdote.

The argument it makes

“Validated operating limits recover the 20-40% of capacity that conservative derating strands.” This is the argument the AI Factory page makes; the viz is the evidence form of that argument. If you remove the viz, the page loses its proof.

Page-canonical home

/industries/ai-factory (Persuade x Web Page, Evidence section). Executive audience. The viz must appear in the Evidence section because the recovered-capacity claim is what the rest of the page hinges on.

Reuse policy: SPECIFIC

This viz is locked to /industries/ai-factory. The capacity-recovery framing is unique to AI workloads where stranded headroom is a CapEx problem; reusing the viz on other pages would dilute its argument or import the wrong frame onto a different audience.

Compare:

  • WaveformTrace is locked to /hardware/ev2 (proves real 60Hz harmonic structure)
  • ResolutionComparison is locked to /platform/signals (proves 8kHz vs 1/min)
  • Phase Portrait is general (works as brand mark across surfaces)

Code reference

Implementation: verdigris/www/client/src/components/visualizations/ValidatedOperatingEnvelope.tsx

Maturity

Experimental. Graduates to Rule after 30 days on /industries/ai-factory with no surfaced violations or stakeholder objections (per the graduation model in CLAUDE.md).

Ambient Waveform Layer

A persistent 60Hz sine wave behind dark-background sections. Dark sections only – off on light backgrounds.

See foundations/composition.md for the opacity and harmonics table by section role.

Canvas Text Rules

When using Canvas to render text (via Pretext or similar):

  1. HTML fallback required (same font, weight, size, color)
  2. prefers-reduced-motion: reduce shows HTML fallback, hides Canvas
  3. Canvas element must have role="img" and aria-label
  4. Never render body copy to Canvas – display headings only
  5. Not in the critical rendering path – fonts first, Canvas after
  • Composition – full Visual Signature spec, Demonstrate cell, ambient waveform
  • Animation Guidelines – Three Gates, duration decision tree
  • Motion – duration tokens, easing curves
  • Color – palette semantics, the 16-stop gradient
  • Visual Rules – machine-consumable rules