# BRIEF — srikanth.work rebuild (v2)

## Revision note

v1 of this rebuild pursued a print-grade editorial direction — paper
texture, serif type, margin annotations. Direct feedback: "boring...
make it look graphical and out of the world." This brief replaces v1.
The requirement to be a genuinely different direction from the
*original* dark/kinetic site still stands, but the read is now: keep
the energy and the dark canvas the original site had, and push the
graphics far past what it did — real generative motion, not decoration
around text.

## Concept: THROUGHPUT

Throughput is the metric an OMS lives and dies by — orders processed
per unit time through a network of systems. The concept for this site
is that metric made visible: a live network of nodes and routes with
light constantly moving through it, because the subject has spent
twenty years building the systems that make that light move faster
and more reliably. The page isn't decorated with a network graphic —
the page *is* one.

## Art direction

Deep-space dark canvas, not flat black — a near-black void with soft
indigo depth, lit by three neon signal colors. The hero is a real
generative 2D-canvas network: nodes for the systems (OMS, WMS, AI
decisioning, storefront, fulfillment), edges for the routes between
them, and packets of light continuously traveling those routes. That
same node/route/pulse vocabulary recurs through the page: a glowing
connector down the experience timeline, glow-bordered project cards,
an orbiting tag cluster for competencies. Every section should feel
like it's plugged into the same live system the hero renders.

## Palette (exact hex)

| Token | Hex | Use |
|---|---|---|
| `--void` | `#05070D` | Page background |
| `--void-2` | `#0C1120` | Elevated surfaces, card base |
| `--void-3` | `#141A2E` | Hover/active surface |
| `--glass-border` | `rgba(255,255,255,0.09)` | Card borders |
| `--text-primary` | `#F3F6FC` | Headings, primary text |
| `--text-soft` | `#A6B0C3` | Body copy |
| `--text-faint` | `#78839A` | Labels, captions |
| `--ai` | `#33E1FF` | Cyan — AI & intelligence |
| `--ecom` | `#FF3FA4` | Magenta — e-commerce |
| `--supply` | `#3CF2A6` | Emerald — supply chain / OMS / WMS |

Contrast checked against `--void`, measured (not eyeballed) via a
luminance script: `--text-primary` 18.6:1, `--text-soft` 9.2:1,
`--text-faint` 5.3:1, `--ai` 12.8:1, `--ecom` 6.2:1, `--supply` 13.9:1
— all clear 4.5:1. The gradient headline text (`--ai → --ecom →
--supply`) was checked at its darkest mid-blend points too: worst
case ~7:1, still comfortably clear even though large display type
only requires 3:1. Signal colors on dark glass surfaces are used at
full saturation only for small accents (glows, borders, icons, tags)
and at reduced opacity for large fills, so nothing reads as a wall of
neon.

## Typefaces

**Space Grotesk** (variable, geometric grotesk) for every heading and
body word — confident, technical, built for screens, reads as
engineering-brand rather than editorial. **JetBrains Mono** for every
piece of system chrome: nav, labels, stats, tags, the live "packets in
transit" counter. The pairing is the same logic as a real ops
dashboard: a clean display face for the narrative, a monospace face
for the telemetry. Two typefaces, no third face anywhere.

## Signature technique: generative canvas network

A hand-written, dependency-free 2D canvas (`assets/network.js`, no
Three.js, no WebGL — a real-time particle/graph system is enough to
earn "generative" without the CDN risk or performance cost):

- Nodes placed across the hero canvas, colored by domain (AI /
  e-commerce / supply chain), sized by a simple force-relaxed layout
  so they don't overlap.
- Edges connecting each node to its nearest 1–3 neighbors, drawn as
  soft glowing bezier-ish arcs.
- Packets — small bright points — travel the edges on a loop, trail
  fading behind them, at staggered intervals so the network never
  looks static.
- Resizes with the viewport (devicePixelRatio aware), pauses to a
  single static frame under `prefers-reduced-motion`, and the whole
  thing is decorative (`aria-hidden`) with real content layered on
  top in HTML, so nothing about the page depends on canvas support.
- The same node/route/pulse vocabulary is reused as CSS-only
  (non-canvas) motifs elsewhere: a glowing vertical connector threading
  the experience timeline, animated gradient borders on project cards.

## The one thing this site must prove

That this is a person who can make a system's internal motion —
orders, packets, signals moving through a network — visible and
beautiful, not just describe it in a bullet point. The graphics aren't
decoration bolted onto a résumé; they're the same mental model he
applies to OMS architecture, rendered as something you can watch move.