V16 · THE TRACE
One line runs through everything.
The Trace is a single motif that carries across every hero illustration, thumbnail, page rule, and empty state. Six archetypes, one visual DNA. Amplitude, frequency and sharpness change with context — the reader projects meaning.
01
Trace · Calm
flat sine · long wavelength · a system at rest
PARAMS
amplitude 20 · wavelength 640 · stroke 2.5px · cream
WHERE IT LIVES
About page · footer · empty states · quiet backgrounds · dashboard idle
02
Trace · Steady
ECG-like line · periodic pulse · watchful, responsive
PARAMS
baseline y=mid · pulse amplitude 35 · 3 pulses across · stroke 3px · cyan (CCPP)
WHERE IT LIVES
CCPP hero · practitioner-tier articles · SOC dashboards · monitoring UI
03
Trace · Acute
sawtooth peaks · high amplitude · short wavelength · under stress
PARAMS
amplitude 60 · wavelength 120 · sharp peaks · stroke 3px · magenta (ECCIS)
WHERE IT LIVES
ECCIS hero · incident-response articles · red-team content · SEV-1 alerts
04
Trace · Governance
slow deliberate swell · soft crests · sea-swell character
PARAMS
amplitude 70 · wavelength 1200 · smooth Bézier · stroke 3.5px · amber (EMSCG)
WHERE IT LIVES
EMSCG hero · board content · regulation articles · governance essays
05
Trace · Ascend
flat rising to the right · trajectory · earned momentum
PARAMS
y start 130 · y end 15 · one long rising Bézier · stroke 3.5px · cream
WHERE IT LIVES
career map · feature articles · course-progress UI · certification-earned
06
Trace · Halftone
same wave · dots instead of stroke · print-medium expression
PARAMS
sample every 22px · dot r 5 · amplitude 40 · wavelength 480 · cream
WHERE IT LIVES
article thumbnails · LinkedIn crops · quiet bands · pull-quote decoration
IN SITU
The Trace, tuned per programme.
Steady runs across CCPP. Acute runs across ECCIS. Governance runs across EMSCG. Same motif, three characters — that is the through-line.
CCPP · TRACE · STEADY · #1FE0FF
Lineworker at the base of vast infrastructure
ECCIS · TRACE · ACUTE · #FF3D8A
Operator inside the fortress they are testing
EMSCG · TRACE · GOVERNANCE · #FFB44A
Boardroom as the highest-scale infrastructure
USAGE
import Trace from '@/components/Trace';
// A CCPP hero-tuned trace
<Trace variant="steady" accent="cyan" height={160} />
// An ECCIS incident band
<Trace variant="acute" accent="magenta" height={180} strokeWidth={3} />
// A quiet halftone divider
<Trace variant="halftone" accent="cream" opacity={0.6} height={80} />
// Section gateway with a soft accent-tinted halo that fades to
// transparent at the edges — reads clean on any background.
<Trace variant="calm" accent="cream" height={100} plate="glow" />
// The site-wide hairline is already wired in _app.tsx —
// import TraceHairline if you need to render another one elsewhere.