# Design Language for continu.st ## Aesthetics and Tone continu.st is a meditation on unbroken time — the domain reads simultaneously as "continue still," "continuous," and a whispered Latin imperative to persist. The aesthetic is **ethereal retro-futurism**: the visual grammar of a 1960s science-fiction paperback cover reimagined through the light-diffraction of a prism held at dusk. Think Chris Foss airbrushed spacecraft dissolving into a Turner sky, or the moment a reel-to-reel tape deck catches evening light and turns briefly into something interstellar. The tone is **nostalgic-retro** but not sentimental — it does not mourn the past, it *extends* it forward. There is no irony here. The site sincerely believes the future was designed in 1967 and is still arriving. Surfaces feel slightly warm, as if backlit by cathode-ray glass. Type feels set with care, like a Letraset sheet applied to illustration board rather than typed into a text box. Negative space is generous and unhurried — the site breathes at the pace of a slow vinyl revolution. The prevailing mood is **suspended continuity**: things in the middle of becoming, never quite finished arriving, perpetually in transit. Visitors should feel they have entered a transmission mid-broadcast, one that has been running since before they tuned in and will continue after they scroll away. ## Layout Motifs and Structure The structural language is **orbital drift** — elements arranged as if caught mid-rotation around an invisible center of gravity, never quite symmetrical, never chaotically off-axis. The page is a single continuous vertical scroll with no tabs, no modal overlays, no hamburger menu — navigation consists of exactly three mnemonic anchors (`signal`, `frequency`, `horizon`) set as hairline text at the top-right, present but recessive, the way a shortwave dial is labeled. **Spatial logic:** A loose 12-column grid at 1440 px wide, but only 3–4 columns are ever occupied simultaneously. Content clusters in the left two-thirds; the right third breathes, occasionally hosting a floating geometric diagram or a rotated caption. On mobile the grid collapses to a single column with generous 24 px gutters; the orbital diagrams become full-bleed horizontal strips. **Section cadence:** Five full-viewport sections stacked vertically, each occupying 100 vh, each dissolving into the next via a parallax-depth transition where the background plane drifts at 0.4× scroll velocity while the foreground drifts at 1.0×. The sections are: 1. **Transmission** — wordmark and a slowly rotating triadic prism diagram, no other text except one line of coordinates in mono 2. **Signal** — the site's core proposition, set as a typographic essay, ragged-right, measure 560 px, with a marginalia column of handwritten-style annotation glyphs 3. **Frequency** — a full-bleed geometric abstraction (rotating concentric dodecagons) with one floating card of overprinted type 4. **Archive** — a sparse grid of date-stamps and single-sentence entries, styled like a broadcast log 5. **Horizon** — a full-screen geometric landscape silhouette with the wordmark repeated as a watermark at 4% opacity, and a single outgoing signal indicator **No hero CTAs. No pricing cards. No testimonial rails. No stat counters.** ## Typography and Palette **Typography system — two families, classical and monospaced, in conversation:** - **Display and headings:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), weights 300 and 600, italic for accent — set at 72–120 px for the wordmark, 36–48 px for section titles. Tracking at `-0.02em` on display sizes. Cormorant's extreme contrast between thick and thin strokes gives it a slightly anachronistic formality — it was designed to recall 16th-century punchcutters, which, placed against geometric space motifs, creates exactly the temporal dissonance the site wants. - **Body and captions:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond), weight 400 regular, italic for asides, set at 17–18 px with `line-height: 1.72`. Maximum measure 560 px (approx. 65 characters per line). Garamond's lowercase is warm and slightly wide, which counterbalances the cold geometry of the background motifs. - **Coordinates, log entries, and signal labels:** [Space Mono](https://fonts.google.com/specimen/Space+Mono), weight 400, set at 11–13 px, tracking `0.08em`. All caps for broadcast-log timestamps. This is the sole mono presence — it stands for signal, precision, the machine underneath the poetry. **Palette — triadic, built from a 1967 science-fiction color wheel:** The three hues sit at 120° intervals on the color wheel, then are aged and desaturated slightly toward the warm-amber midpoint of a cathode-ray phosphor: - `--void` `#0D0E1A` — deep blue-black, the dark ground behind everything; almost navy but starless - `--phosphor` `#C8F5E0` — a pale mint-green that glows faintly, the color of an oscilloscope trace at rest; used for subtle text highlights and diagram strokes - `--amber-broadcast` `#F0A84C` — warm amber-gold, the CRT warm-up color, used for the wordmark, signal indicators, and key display numerals - `--wine-frequency` `#8B2D5F` — deep magenta-violet, the third triadic arm; used for section dividers, overprint effects, and the parallax background accent plane - `--vellum-paper` `#EEE8D5` — warm off-white for body text and navigation labels; slightly yellowed like newsprint held near a lamp - `--signal-dim` `#3A4060` — a muted slate-indigo for secondary text and inactive navigation items Triadic skeleton: `#C8F5E0` (mint-green, ~165°), `#F0A84C` (amber, ~35°), `#8B2D5F` (magenta, ~315°) — three primaries equidistant on the wheel, all shifted warm and aged. ## Imagery and Motifs **All imagery is generative-geometric, never photographic.** The visual vocabulary is built entirely from SVG/Canvas drawn forms — no stock photography, no AI-generated images, no icons from libraries. **Primary motif — the rotating dodecagon diagram:** A 12-sided polygon with internal chords connecting every third vertex, drawn at 2 px stroke in `--phosphor`, slowly rotating at 0.3 rpm. This is the site's signature glyph — it appears in the hero, scaled to 80 vw and centered; it reappears at 160 px in the navigation area as a position indicator; and again at 40 px as a section ornament. The rotation is CSS `transform: rotate()` driven, so it degrades gracefully to a static form on reduced-motion systems. **Secondary motif — the prism dispersion field:** Three overlapping translucent ellipses, filled with `--phosphor`, `--amber-broadcast`, and `--wine-frequency` at 12% opacity, blurred via `filter: blur(80px)`. These drift independently at different parallax rates (0.2×, 0.35×, 0.5×) on scroll, creating a soft chromatic aberration effect in the background without any raster imagery. **Tertiary motif — broadcast coordinate grids:** A subtle SVG grid of 60 px × 60 px squares, stroked at 0.5 px in `rgba(200, 245, 224, 0.06)` — barely visible, but giving the dark ground a sense of mapped depth, like a radar screen at low gain. **Typography as decoration:** Section numbers are set as oversized `Cormorant Garamond` numerals at 320 px, weight 300, color `#C8F5E0` at 4% opacity — they underlie the section text as a dimensional layer, receding behind the content rather than sitting above it. **No icons from icon libraries. No photography. No gradients that weren't derived from the three triadic hues.** ## Prompts for Implementation Build continu.st as a **single-page vertical scroll** — no routing, no multi-page navigation, no JavaScript framework required beyond vanilla ES6 modules. The page should be implementable in a single `index.html` + `style.css` + `main.js`. **Background system:** The `--void` color (`#0D0E1A`) covers the full ``. The three prism ellipses are absolutely positioned `
` elements with `border-radius: 50%`, `mix-blend-mode: screen`, and `filter: blur(80px)`. They use CSS custom properties updated by a `requestAnimationFrame` scroll listener that maps `window.scrollY` to three independent `translateY` values — no IntersectionObserver needed for this effect. **Parallax implementation:** Each of the five viewport-height sections is a `
` with `position: relative; overflow: hidden`. Background motifs (the grid, the prism ellipses) are positioned inside a shared `
` that sits behind all sections using `position: sticky; top: 0`. The sticky background div moves with the viewport while content sections scroll over it — this is the CSS sticky parallax pattern, no JavaScript required for the parallax itself. **Dodecagon animation:** Draw the rotating dodecagon as an inline `` with `` and `` elements. Apply `animation: slowRotate 200s linear infinite` via a CSS `@keyframes` block. The chord lines connect vertices 1→4, 2→5, 3→6, etc., creating an internal star. At `prefers-reduced-motion: reduce`, set `animation-duration: 0s` and `animation-play-state: paused`. **Navigation:** Three anchor links (`#signal`, `#frequency`, `#horizon`) floated to the top-right in `Space Mono` at 11 px, `letter-spacing: 0.12em`, `text-transform: uppercase`, color `--signal-dim`. On hover, color transitions to `--amber-broadcast` over 200 ms. No sticky header — the nav is visible only in the initial viewport and fades to `opacity: 0` when the user scrolls past 20 vh (a simple scroll listener toggling a CSS class). **Section 1 — Transmission:** Wordmark `continu.st` in `Cormorant Garamond` 600 italic at 96 px, color `--amber-broadcast`. Below it, one line of coordinates: `38.7223° N 9.1393° W — ongoing` in `Space Mono` 12 px `--signal-dim`. The dodecagon SVG fills the right 40% of the viewport, centered vertically, rotating. The prism ellipses drift behind everything at their independent scroll rates. **Section 2 — Signal:** Body text set as a 560 px measure prose block, offset 15% from the left edge on desktop. EB Garamond 18 px, `--vellum-paper`. A 140 px right-margin column holds four to six handcrafted annotation marks — small SVG glyphs resembling frequency notation, not Unicode symbols. The large background numeral `01` sits at 4% opacity, base-aligned to the section's bottom. **Section 3 — Frequency:** Full-bleed section. The dodecagon at 100% of the shorter viewport dimension, centered, rotating. Over it, a single `
` card: `Cormorant Garamond` 36 px italic, two lines of text, white on a `rgba(13, 14, 26, 0.72)` frosted-glass background (`backdrop-filter: blur(12px)`). Card is offset to the left third, vertically centered. **Section 4 — Archive:** A sparse table of 8–12 rows. Each row: a `Space Mono` timestamp (`2019.11.04`, `2021.03.17`, etc.) in `--signal-dim`, followed by a single `EB Garamond` sentence fragment of 6–12 words in `--vellum-paper`. No borders — rows are separated by 2 px spacing only. Table is centered at 640 px width. Background numeral `04` at 4% opacity. **Section 5 — Horizon:** A full-viewport SVG landscape of abstract geometric silhouettes — overlapping trapezoids and rectangles in `--void` with 2 px `--phosphor` stroke — suggesting a skyline seen through radar. The wordmark `continu.st` is repeated 24× in a CSS `background-image` pattern at 4% opacity, 200 px tile size. A single `--amber-broadcast` dot pulses at 1 s interval (`animation: pulse 2s ease-in-out infinite`) in the lower-right quadrant — the outgoing signal indicator. **Avoid:** hero CTAs, pricing tables, testimonial carousels, stat counters, gradient backgrounds that mix more than two of the three triadic hues simultaneously, any CSS framework beyond custom properties, any font not listed above. ## Uniqueness Notes 1. **Triadic palette used as spectral physics, not as color-theory exercise.** The frequency report shows `triadic` at only 4% across the corpus, and no design uses it as a *literal prism dispersion metaphor* — the three hues represent wavelengths splitting from white light rather than a designer's arbitrary contrast choice. This grounds the abstraction in physics, not decoration. 2. **Nostalgic-retro tone executed entirely without photography or raster texture.** At 9% frequency, `retro` in the corpus almost universally relies on grain overlays, halftone dots, or aged-paper textures. continu.st achieves the same temporal mood through typeface anatomy (Cormorant Garamond's 16th-century rhythm), orbital geometry (pre-digital drafting-table aesthetics), and CRT phosphor color — all in vector/CSS, zero raster assets. 3. **The rotating dodecagon as a single signature glyph used at three scales.** The frequency report shows complex multi-element graphic vocabularies dominating the corpus. This design uses *one* shape, repeated at radically different sizes and opacities, as its entire iconographic system — an extreme application of the minimal-navigation seed that extends to the image layer, not just the navigation structure. 4. **Seed: aesthetic: ethereal, layout: minimal-navigation, typography: elegant-serif, palette: triadic, patterns: parallax, imagery: geometric-abstract, motifs: futuristic, tone: nostalgic-retro.** The specific combination of `elegant-serif` over a dark `--void` ground is rare — the corpus shows serif typography almost exclusively paired with warm-light or academic-paper backgrounds. Here the serif floats against deep space, which gives it an unsettled, temporal-suspension quality rather than a scholarly one. 5. **CSS sticky parallax without JavaScript — zero library dependencies.** The pattern at 94% in the corpus is almost universally implemented with GSAP ScrollTrigger or similar. This design specifies the pure-CSS sticky-background parallax technique, distinguishing it from every ScrollTrigger-heavy site in the corpus.