BLACKLINE — template brief

darkorganic

Live preview · scroll inside

Loading BLACKLINE — template brief

The complete build · watermarked until purchase

The concept

The black line painted on the floor of every swimming pool on earth. You follow it or you drift — that is the entire brand in one object. It gives the name, the palette (submerged teal and one hot cyan), the cursor (a lane rope whose beads stretch apart), the atmosphere (refracted caustics rippling across the whole page), and the copy position: *this is not a fitness app, it is a page of sets you print and tape to your bottle.* The site is a manifesto. One column, four numbered assertions in enormous display type, no cards, no tables, no stat grids, no feature rows. Every claim is argued in prose, and the only piece of data on the page is a single split time set at 260px. It is deliberately the least "web-page-shaped" build in the library.

Palette: deep
#061317
pool
#0B2027
tile
#122F38
foam
#E9F4F6
dim
#6E8B94
lane
#12B8C6
Typeface: Familjen Grotesk 700 for display. A Swedish grotesque with a slightly narrow, athletic set and real character in the G and R — disciplined without being a neutral corporate face. Deliberately not Inter, not Space Grotesk. Sora 200/300 for body. Geometric, very light at 200, which lets a 52ch paragraph sit under an 82px headline without competing. The manifesto form leans hard on body copy, so the reading face matters more here than in any other build.
Cursor — Lane-rope cursor: - Lane-rope cursor. Three beads. On hover the outer two slide apart and the middle one swells — a rope going taut. - Caustics canvas. Three interfering sine bands at different parallax rates (.05/.13/.24) stroked in translucent --lane, drifting on their own clock. Reads as refracted pool light and continues behind the whole document, not just the hero. - The heading opens like a shutter. Characters split, each with its own entrance (translate3d(0,60%,-280px) rotateX(-56deg) + 10px blur, staggered outward-in), its own idle sine on Y and Z, and a scroll-driven push measured from centre.
Layout

364 words · locked

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

Undeveloped