# Design Language for continu.st

## Aesthetics and Tone

continu.st is **the manifesto of an imaginary philosophical movement called Continuism** -- the conviction that nothing in nature, thought, or matter ever truly begins or ends; everything is the local intensity of a single unbroken line. The dot in `continu.st` is not punctuation; it is the only break the website permits, and even that break is grudging -- a tiny pebble in an otherwise unstoppable river. The aesthetic is **kinetic-typographic constructivism**: a Russian-avant-garde stage where the only actor is a single sentence, set on rails, performing the role of "everything." Imagine El Lissitzky's *PROUN* canvases re-imagined as a horizontally-scrolling teleprompter that the reader cannot pause; imagine Marinetti's *parole in libertà* finally given the runway it always needed; imagine a 90-minute Steve Reich phase composition translated into letterforms that drift one frame at a time out of alignment with themselves.

The tone is **manifesto-grand** crossed with **dreamy-ethereal** -- declarative without shouting, insistent without urgency. The site speaks in the register of a treatise that has been writing itself for 200 years and is in no hurry to conclude. Numbers are spelled out. Sentences are long. Periods are rare. Commas do most of the work. The reader is not "engaged"; the reader is **enrolled** in a lifelong subscription to the unbroken line, and is invited, gently, to keep going.

There is no homepage and no inner pages -- there is only **the line**, and the reader's position on it. The first letter the reader sees was already in motion before the page loaded; the last letter (if there is one) keeps moving after the tab is closed. Continuism, the site argues by being the site, is not a doctrine -- it is a *condition.*

## Layout Motifs and Structure

The layout is a **horizontal-scroll** ribbon overlaid with **timeline-vertical** annotations -- two motion axes locked in a 3:1 reciprocal ratio that makes the cursor trace a perpetual diagonal. There is no card grid. There is no centered hero. There is no full-bleed photograph. There is no bento. There are no sections in the conventional sense; the document is one **continuous typographic strip** approximately 47 viewport-widths long, with vertical "marginalia gulfs" hanging above and below the main line at irregular intervals like the staves of a musical score.

**Primary axis -- The Line (horizontal).** A single sentence runs left-to-right across the entire 47-viewport-width canvas. The sentence is the *Continuist Manifesto* itself, hand-set in a display weight at clamp(7rem, 18vw, 22rem), with letter-spacing that breathes -- expanding by +0.04em every 8 seconds and contracting back, so the sentence appears to inhale. The reader scrolls horizontally through this sentence using either trackpad-scroll, arrow keys, or by simply waiting (the sentence auto-drifts at 18 pixels per second when the reader is idle for more than 4 seconds). Auto-drift never fully stops; it merely *slows* during active reading, decelerating to 0.4 pixels per second so the line continues to move imperceptibly even under direct attention.

**Secondary axis -- The Marginalia (vertical).** Above and below the running sentence, vertical "gulfs" of supporting text appear at unpredictable intervals. These are footnotes, glosses, dissents, and small hand-set diagrams -- each gulf occupies a vertical channel 1.6 viewport-heights tall, anchored to a specific *word* in the running line. As the reader scrolls horizontally, each gulf rises and falls past the central horizon, the way dependent clauses rise and fall around a verb. Some gulfs above; some below; some both. The marginalia is not navigation; it is *texture.* The reader may ignore it entirely and still complete the manifesto.

**Anchor structures -- The Five Caesuras.** The 47-viewport-wide line is interrupted at five points by full-viewport **caesura panels** -- not "sections" but *breath marks*, each holding a single oversized glyph or composition: a giant period that refuses to terminate the sentence (the period spins slowly, never settling); a Lissitzky-style red-and-black geometric tableau labeled "ARTICLE I"; a vertical river of ellipses; a single black square whose interior contains a moving sentence visible only through the square's translucent edge; and finally, a closing caesura that loops the reader back to the sentence's beginning if they keep scrolling -- so that the line is, in fact, a *circle*, and Continuism's deepest claim ("nothing ends") is enacted by the architecture itself.

**The Status Line (footer-but-not-footer).** A persistent 1.4rem strip at the bottom of every viewport reports, in a delicate condensed mono, the reader's position on the line as a fraction (e.g., `Word 247 / Sentence I / Caesura ii / 31.4% of the unbroken line`). This is the only "navigation" the site offers, and it is read-only -- the reader cannot click it, only watch it tick.

The grid avoidance is deliberate. Card-grid (95% of the corpus), centered (90%), full-bleed (54%), and scroll-triggered (92% with parallax 60%) are the four most overused structural moves. continu.st refuses card-grid and centered entirely, uses full-bleed only at caesura panels (where it serves the breath-mark logic), and replaces conventional scroll-trigger-and-parallax with a *single continuous lateral scroll* that dissolves the very notion of "trigger" -- there is nothing to be triggered because nothing ever stops.

## Typography and Palette

**Typography (all Google Fonts, verified):**

- **Display / The Line:** **"Bodoni Moda"** at heavy weight (900) for the running manifesto sentence. Bodoni's extreme contrast between hairline and stem produces a typographic body that *flickers* when in motion -- the hairlines almost vanish at certain scroll velocities and re-emerge when the line slows, giving the sentence a respiratory shimmer. The choice is also a quiet wink at Italian Futurism's typographic ancestors. Set at clamp(7rem, 18vw, 22rem). Letter-spacing animates from -0.005em to +0.04em on an 8-second sine wave.

- **Display / Caesura glyphs:** **"Abril Fatface"** at 90vw for the giant period, the comma-shaped river-marker, and the article-numerals at the caesura panels. Abril's chunky didone register reads as monumental from across the room and dignified up close -- the visual equivalent of an architrave.

- **Marginalia / Gulf body:** **"Cormorant Garamond"** at 1.05rem for the vertical footnote gulfs, set with a measure of 28 characters per line so the gulfs read as narrow vertical rivers. Italics used liberally; small-caps for cross-references between gulfs.

- **Status line / Position read-out:** **"JetBrains Mono"** at 0.78rem, condensed via `font-stretch: 75%`, in a faint amber-grey so it sits at the threshold of legibility -- present, not insistent.

- **Annotation hand:** **"Caveat"** at 1.6rem for the rare hand-written dissent annotations that appear in the upper gulf, simulating a 19th-century reader's marginal corrections to the manifesto. These appear in red ink (the only red on the line itself) and feel like a different voice has crept onto the page.

**Palette:**

The palette refuses the corpus's overwhelming `gradient` (98%) and `warm` (97%) defaults. continu.st commits to a **printer's-ink + faded-paper** duotone foundation with two surgical accent colors used only at caesura panels. There are no gradients on the line. The page is set, like a manuscript, in solid colors.

- **Paper / Ground:** `#EFE9DA` -- a soft uncoated-rag cream, neither yellow nor white, the color of a 1923 manifesto pamphlet that has lived in a drawer.
- **Ink / Sentence:** `#0F0F12` -- a dense, just-off-black that prints as deeply saturated rather than absolute, so the Bodoni hairlines have somewhere to live.
- **Caesura-Red / Constructivist accent:** `#C8261C` -- the exact red of an El Lissitzky beating-the-whites poster, used for the Article numerals, the upper-gulf dissent annotations, and the rotating period at Caesura I.
- **Caesura-Cobalt / Cool accent:** `#1F3A8A` -- a deep printer's cobalt, used only for the geometric tableau at Caesura II and the river of ellipses at Caesura III.
- **Foxing / Page age:** `#C9B596` -- subtle paper-aging stains, used at extremely low opacity (4-9%) as irregular blooms across the cream ground, never repeating, generated procedurally with seeded turbulence so each visit shows a slightly different page.
- **Marginalia muted:** `#5C5648` -- a warm sepia-grey for the vertical gulf body text, sitting one step softer than the main ink so the gulfs read as *quieter* without being faint.
- **Status amber:** `#A89060` -- the JetBrains Mono status line, present but un-shouting.
- **Underprint shadow:** `#1F1A14` at 6% -- a single soft drop-shadow beneath each caesura glyph, suggesting the weight of letterpress impression.

Eight colors total, none of them gradient-blended, all of them flat printed inks. The page reads as a **physical manifesto**, not a screen.

## Imagery and Motifs

**Core visual motif: the continuous line as everything.** No photography. None. continu.st commits fully to a typographic-and-geometric universe -- the line is the photograph, the drawing, the diagram, and the body of the document, simultaneously. This places the site directly in opposition to the corpus default (photography 95%) and aligns with the underused **minimal** + **vector-art** + **paper-aged** combination.

**Decorative inventory:**

- **The Phasing Line.** A second copy of the sentence is rendered behind the primary line at 16% opacity, slightly out of horizontal alignment by a few pixels, and drifts at a marginally different velocity -- so the two lines slowly fall in and out of phase, producing a Steve-Reich-style optical interference pattern. When the lines align, the sentence reads sharp; when they phase, the letters appear to "double" and shimmer. This is the central visual signature.

- **The Pinned Marginalia Gulfs.** Each vertical gulf above or below the line is rendered as a narrow column of body text *attached* to its anchor word by a hairline rule (1px, ink-color, 22% opacity) that runs from the top of the word's tallest ascender up to the gulf's first line. The rule is not straight; it is hand-drawn with a slight wobble, suggesting an annotator's pen.

- **Constructivist tableau (Caesura II).** A full-viewport composition of red and cobalt geometric blocks -- circles, axe-shaped wedges, stacked rectangles -- rotating slowly around an off-center pivot, in homage to *Beat the Whites with the Red Wedge.* The tableau is interrupted by the sentence, which continues moving across it without acknowledgment.

- **The River of Ellipses (Caesura III).** A vertical waterfall of 800+ ellipsis characters (`...`) flowing top to bottom at staggered velocities, set in cobalt against the cream ground. The ellipses do not represent omission; they represent **continuity made visible** -- the dots are the line itself, dis-attached from words, revealed in their pure metric form.

- **The Spinning Period (Caesura I).** A single oversized period (`.`) at 60vw, slowly rotating around its own center at 0.06 rotations per second. The period is the dot in `continu.st` made monumental, and its rotation visually argues that even this smallest of marks is itself in motion.

- **The Translucent Black Square (Caesura IV).** A solid black square occupying 70% of the viewport, with a 4% inner border of perfect transparency through which a fragment of the running sentence (faintly, ghostlike) remains visible -- the line has not actually stopped behind the square; the reader simply cannot see most of it. A Malevich quote ("The square is the face of the new art") hovers in the lower-right corner in 0.9rem Cormorant italic.

- **The Fleurons.** Three letterpress ornaments -- a printer's fleuron, a manicule (pointing hand), and a paragraph mark (¶) -- appear at low frequency in the marginalia gulfs. The manicule is the only "click-affordance" on the entire site, and it points to the next paragraph mark down the line. There are no other UI elements.

- **Page foxing.** Subtle blooms of `#C9B596` at 4-9% opacity drift across the cream ground as fixed-position elements that scroll *with* the line, simulating the foxing on the cream paper of a long-stored pamphlet. Generated once per visit using seeded turbulence so the page wears differently each time.

- **No icons, no buttons, no cards, no avatars, no rounded rectangles, no shadows except the single underprint at caesura glyphs.** The site's iconography is the alphabet itself.

## Prompts for Implementation

**Narrative architecture.** continu.st is a **single horizontally-scrolled HTML document** with a viewport-pinned status line. The DOM is structured as one `<main>` containing one giant `<article class="line">` whose content is the manifesto sentence, broken into `<span class="word">` elements (every word individually addressable for marginalia anchoring), and five `<aside class="caesura">` panels interleaved at narrative breath points. Vertical marginalia gulfs are absolutely-positioned `<aside class="gulf">` elements anchored to specific `<span.word>` elements via a small data-attribute mapping (`data-gulf-anchor="word-247"`).

**Motion is the layout.** The horizontal scroll is driven by the **CSS Scroll-Driven Animations API** (`animation-timeline: scroll(x)`), with a polyfill fallback for browsers that lack it. The browser's native scroll converts vertical wheel input into horizontal translation of the `<article.line>`. There is no JavaScript-driven scroll-jacking in the conventional sense; the wheel-to-horizontal mapping is performed by a thin event listener that translates `deltaY` into `scrollLeft` with eased momentum (cubic ease-out, 0.92 friction, max velocity 1800 pixels per second). Trackpad horizontal scroll, arrow keys, and `swipe` on touch devices are all honored natively.

**The auto-drift.** A `requestAnimationFrame` loop maintains a baseline horizontal velocity of 18 px/s when the reader is idle for >4 seconds, decelerating to 0.4 px/s when scroll-input has been received in the last 250ms. Auto-drift never fully stops -- this is a load-bearing design decision: continu.st must *always be moving*, even when the reader is not. The minimal residual velocity (0.4 px/s) is below the conscious threshold but verifiable by leaving a tab open for thirty seconds and noting the changed status-line read-out.

**The phasing line.** The "phantom" 16%-opacity duplicate of the sentence is rendered as a second `<article class="line line-phase">` positioned absolutely at the same coordinates, with `animation-timeline: scroll(x)` applied at a very slightly different ratio (0.998 of the primary). This produces the slow-drift phase relationship without any explicit JavaScript timing. CSS variables drive the phase delta so it can be tuned in DevTools live.

**The breathing letter-spacing.** A simple CSS animation on the `<article.line>` element animates `letter-spacing` between -0.005em and +0.04em on an 8-second sinusoidal cycle (use `animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1)` to approximate sine). The breathing applies to the line and its phase-twin equally, but their breath cycles are offset by Pi/3 radians, so the two lines breathe in slightly out-of-phase counterpoint.

**Marginalia gulf reveal.** As each `<span.word>` enters the viewport, an `IntersectionObserver` (rootMargin tuned for the long horizontal canvas) raises the gulf attached to that word from beneath/above with a slow vertical translation (700ms ease-out cubic), and lowers it again as the word exits. Gulfs do not stack -- only one gulf is fully visible at a time per channel (above, below); incoming gulfs displace outgoing ones via a brief crossfade.

**Caesura behavior.** Each caesura panel is a 100vw x 100vh anchor in the horizontal flow. As a caesura enters the viewport, the auto-drift slows to 0.0 px/s for the duration of caesura visibility, allowing the reader to dwell. When the reader scrolls out of the caesura, auto-drift resumes its 18 px/s baseline. The five caesuras are: (i) the spinning period -- a single SVG circle with a `<text>` period rotating via `animateTransform`; (ii) the constructivist tableau -- absolute-positioned divs forming the red/cobalt geometric composition, each rotating around shared off-center pivots via individual CSS keyframes; (iii) the river of ellipses -- 800 `<span>`s with staggered `animation-delay` values cascading vertical translations; (iv) the translucent black square -- a single `<div>` with `box-sizing: border-box`, transparent inset border, behind which the line remains visible; (v) the loop-back -- when the reader reaches the end of the canvas, a single line of Cormorant italic invites the reader to "begin again," and a smooth scroll animation returns them to the start at 18 viewport-widths per second, after which they may continue manually.

**Loop closure.** The site does not "end." When the reader reaches the right edge of the canvas, the auto-drift continues into a duplicate copy of the first 1.5 viewport-widths (placed seamlessly at the end), so the sentence appears to wrap around without a visible cut. After the duplicated overlap, the scroll position is silently reset to the matching position at the canvas's true beginning -- the reader has no way to detect this happened. Continuism is enacted in the architecture: the line is a circle whose seam is invisible.

**Accessibility-respecting motion.** When `prefers-reduced-motion: reduce` is detected, all auto-drift, breathing letter-spacing, phase-line drift, caesura rotations, and ellipsis cascades are suspended. The site degrades to a static, scrollable manifesto where motion is reader-initiated only. (This is mentioned for completeness; per the brief, accessibility is not a focus, but the implementation is trivial and preserves the manifesto on slower devices.)

**Foxing generation.** A single seeded SVG `<filter>` with `feTurbulence` produces the cream-paper foxing pattern. The seed is derived from `Date.now()` modulo a large prime at first paint, so each visit shows different stains. The filter is applied to a fixed-position overlay div at 6-9% opacity, blended via `mix-blend-mode: multiply`.

**Status line update.** A single rAF loop reads `window.scrollX`, computes the current word index by binary-searching the precomputed array of word-x-offsets, and updates the status line text. The line scrolls past at most one word per 12 frames at typical drift speeds, so the read-out is steady without flicker.

**Strict avoidances.** No CTA blocks. No pricing. No statistics counters. No testimonials carousel. No newsletter signup. No "Get Started" buttons. No hero photograph. No card grid. No bento. No section-snap scroll. No parallax in the conventional sense (the phase-line is a different kind of layered-depth -- typographic interference, not visual parallax). The site is a manifesto that the reader walks through; it is not a product page.

## Uniqueness Notes

**Differentiators from other designs in the portfolio:**

1. **A single continuous sentence as the entire site.** The 70-design corpus contains many text-forward sites, but none of them stake their architecture on the literal claim of *one running sentence as the whole document.* concepts.news (the closest typographic neighbor, also avant-garde) uses the dictionary lemma as its structural unit -- discrete, repeatable, vitrine-shaped. continu.st refuses that discreteness entirely. The architectural claim is unprecedented in the corpus: the document IS the line, and the reader is somewhere on it.

2. **Horizontal-scroll-driven (28% of corpus) combined with a closed-loop architecture.** Of the 28% of designs that use horizontal-scroll, none implement a seamless looped horizontal canvas where the line is, materially, a circle. The loop-closure mechanism (duplicate the first 1.5 viewport-widths at the canvas's right edge, silently reset scroll position during overlap) is a structural enactment of Continuism's central thesis and is not present elsewhere.

3. **Constructivist-typographic palette with no gradients.** Against the corpus default of `gradient` (98%) and `warm` (97%), continu.st sets only flat printer's inks on uncoated cream paper. The Lissitzky red and the Malevich-cobalt are surgical accents at caesura panels, not pervasive washes. This palette discipline is shared by approximately 2% of the corpus.

4. **Bodoni-Moda displayed at oversized weight as the load-bearing typographic body.** Bodoni-style didones appear in 0% of the corpus by name. Most editorial designs reach for Playfair, Cormorant, or Old Standard. Bodoni Moda's hairline-to-stem contrast is essential to the breathing-letter-spacing effect (the hairlines flicker at velocity), and no other design exploits this property.

5. **Phase-line typographic interference as the primary motion signature.** No other design in the corpus uses a slightly-offset duplicate of the running text as its core motion signature. The Steve-Reich-influenced phase relationship is a unique kinetic-typography move and replaces the corpus's overused parallax (60%) with a typographic alternative.

6. **No photography. At all.** Photography is in 95% of the corpus. continu.st joins the small (~5%) cohort of photo-free designs, and within that cohort, it is the only one that justifies the absence as a *philosophical claim* (Continuism rejects the discrete image in favor of the continuous line) rather than as a stylistic preference.

7. **Auto-drift as a load-bearing design decision.** The 18 px/s baseline horizontal drift, decelerating to 0.4 px/s under active reading but never to 0, is unique. It enacts the manifesto thesis at the level of browser behavior: the line is always moving because Continuism says it is. No other design in the corpus has motion that *cannot be paused.*

**Avoided patterns from frequency analysis:** card-grid (95%), centered (90%), full-bleed except at caesuras (54%), gradient palette (98%), warm palette default (97%), photography (95%), scroll-triggered conventional parallax (92% / 60%), corporate aesthetic (92%), mono typography as primary body (91%) -- all explicitly refused or used surgically only.

**Underused patterns leaned into:** horizontal-scroll (28%), kinetic-animated typography (11%), counter-animate (15%, used only in the status line read-out), path-draw-svg (35%, used for marginalia connector rules), elegant-serif (10%, used at caesura glyphs via Abril Fatface), minimal imagery (48% but rarely committed-to without supporting photography), vector-art (1%), paper-aged (1%) -- all chosen to put the design in an underused corner of the style space.

**Chosen seed:** `kinetic typography hero` -- the seed in `seeds.json` that explicitly names typographic motion as the protagonist. Adjacent seeds considered and rejected: `experimental type layout` (already realised by concepts.news as typo-archival surrealism, would duplicate); `motion heavy interactive` (too generic, doesn't specify type); `horizontal scroll gallery` (correct axis, wrong content -- "gallery" implies discrete works, contradicting the unbroken-line thesis); `parallax storytelling journey` (corpus-saturated). `kinetic typography hero` carries the right charge: typography is the hero, motion is the medium, and the hero is a single sentence rather than a slogan.
<!-- DESIGN STAMP
  timestamp: 2026-04-29T22:58:40
  domain: continu.st
  seed: didones appear in 0
  aesthetic: continu.st is **the manifesto of an imaginary philosophical movement called Cont...
  content_hash: 1c90499f24ab
-->