SPILLWAY — template brief

darkcalm

Live preview · scroll inside

Loading SPILLWAY — template brief

The complete build · watermarked until purchase

The concept

A spillway is the structure built so the dam does not fail — completely useless until the one night it isn't. That is the entire pitch for a retained on-call firm, and the clip is the thing itself: a spillway crest at night, water going over the lip past a steel handrail, no people, no colour. The site is written as one night, in four states — nominal, rising, spilling, receding — and the layout is built to show them: a fixed status board on the left that changes as the narrative column on the right scrolls past it. Values update, rows go live, a meter fills, the clock advances from 01:04 to 05:52.

Palette: night
#070809
rack
#0E1113
case
#171B1E
silver
#DCE3E6
grey
#697478
signal
#7CFF6B
Typeface: Big Shoulders Display 700 — the only condensed display face in the library, and that alone makes the hero read differently from all seven others before a single colour is considered. At 300px it looks like signage stencilled on plant machinery. **Public Sans 300/400/600** for body: a neutral civic face with no personality to fight the condensed caps, and it holds up in the small tabular readouts on the board. Deliberately not a monospace — Overburden already runs mono, and two mono-led builds would read as the same idea twice.
Cursor — The reactive board: - The reactive board (above) — the only place in the library where one region of the page is *driven* by the reading position of another. - Pulse cursor. A dot with a ring that expands and fades on a 1.9s loop — it beats whether or not you move the mouse, because the monitoring never stops. Filled solid on hover. - Spray canvas. ~170 fine vertical streaks, each a three-stop gradient along its own length so it fades at both ends, falling in three depth bands with a slight lateral drift. Not petals, embers, dust, caustics or light shafts. - Per-character heading — staggered outward-in entrance, idle sine, scroll offset from centre.
Layout

468 words · locked

█████ █ ███████████ ████ ███ **████████**, █ ████████ ███████ ████████████ ████████ ████. █ ████████ ██ ███ █████████ █████ ██ █ ███ ████ ███ ████ — ███████ █████ ███ █████ ██ █████. ████: █████████, ██████████, ███. ███████: `███████` ██████, `███████` █████, `███████` ████, `███████` ████ ██████ ████, `███████` ████, ███ ███████ ███ ██████ `███████` ████████ █████. **██ █████ ██████ ████████.** ████: ███ █████████ ███████ ███ — █ █████████ ████ — ███ ███████, ██████ ████ ███/███/███ ███ ████. ███ █ █████████.
 **████** — █ ██████ ██████ █████. ██████████ ███████ ████████ "████████" █████ ████ █████ ███ ████ ██████, █████ ███████ ████ `█████████: █████(█ ██% █ █)` ██ █ ███████ █████ ██ █ ████████ ██ █████ ████ ███████ ███ ████ ██████ ███ ████████ ███ ██████ ██████████. ███ ███████ ██ ██████████, ██ ████ ███ ██████ ████ `████████████: ██████` ███ ███ `█████████(█) ████████(█.██)` — ███ █████ ████ █████ ██ █████ ██████ ████ ██ █ █████ █████████. ███ █████ █████ ████████████ ██ ███ ███ █████; ██████ █████ ███████ ███ ████████ ███ ███████ ██████ █ █████████ ████████ █████. █████ ███ ████████ ████ ████████████ █████, ████ ████████ ██ ████ `███████████(█,██%,-█████) ███████(-█████)` ████ ████, █████████ ███████ ████ ██████, ████ ████████ ██ ████ ████ ██ █ ███ █ ████ █ ████████████ ███████ ████. █████ █████ ██ ██████████ ██ ████ ██████ ██████, ██████████ ██████████. **██ ███████ ██ ███ ████.**
 **████ — █████ █████/██████, ███ ███ █████ ████ ██ █████.** █████ ██████ ███ `████████████: █████ ███`. ███ ████ ██████ ██ █ `████████:██████` ██████ █████: █ ██████ ████ █ █████, █ █████ █████ ████ ██ █████████ ████, █ ████████ ████, ████ ████ ██ ███████ ███████ (████ █████ █████, ██████, █████ ████, █████████ ██ ██████), ███ █ ████ █████ ███. ███ █████ ██████ ██ ████ ███ ███████ — █ █████████ █████, ██ █████████ █████████ ████████, ███ ██████████, ███ █ ████████ ████ █████ ██████ ████████████ ██ █████.
 ████ ████ ████████: ██ `████████████` ████ `██████████: "-██% ███ -██% ███"` █████ ██ █████████ █████ ████████ ███ ██████ ████ ██ ███ ████████, ███ █████ ███ *██████* █████ █████ — █████, █████ ████, ████, ███ ████ ███████, █████ ████ ███ ███████████ ██ ███ ██████, ███ ███ █████ █████. ████ ██████: ███████ ██:██, ██████ ██:██, ████████ ██:██, ████████ ██:██. ████ ███ ████████ █████ █████ ███ █████ ████ ██████ ████████████. ██████████ ███ ██████ ████ ███ ██ ███ ███████ ██████ ██████ ██████ ████ ████████.
 ██████ ███ █████ ████, █ ██████ ██ ~███ ████ ███████ ███████ — ████ █████ ██ █ ████████ ████ ████ █ ██████████ ████████ █████ ███ ██████ ██ ██ █████ ██ ████ ████ — ██ █████ █████ █████ ██ █████████ ██████ ███ ████████ █████, ████ █ ██████ ███████ █████. ██████ ██████: █ ███ ████ █ ████ ████ ███████ ███ █████ ██ █ ██████████ █.██ ████, ██████ █████ ██ █████. ██████████ `█*█*(███*█)` ██ █████ ████. ████ `████████████` ████████ ████ ████████ ███ █████ ███ █████ ███ █████, ████ █ `███████:██████` ████████.

Undeveloped