# Design Language for continu.st ## Aesthetics and Tone continu.st is a watercolor field-notebook for the idea of *continuity* — a manifesto that treats persistence, iteration, and gentle becoming as the fundamental art of being online. The visual world is built like a botanist's wet-on-wet study: every section is a single, slow watercolor wash that bleeds into the next, never fully drying, always inheriting pigment from what came before. There is no hard CTA, no dashboard, no chrome. Instead there is a soft, layered atmosphere — the feel of opening a hand-bound sketchbook on a sunlit table at 7am, the paper fibers visible, the cobalt still pooling in the trough of a brushstroke. The art-deco display type cuts cleanly across this damp, organic ground. It is the dry counterweight: tall, geometric, gilded — Chrysler-Building-at-dawn lettering placed onto Turner-sky paper. The collision is the entire idea. Continuity is what happens when a hard, eternal form (the deco letterform) sits patiently inside a soft, drifting medium (the wash). Tone is **optimistic-bright** without being saccharine: morning-light optimism, the kind that knows the sun came up yesterday too and intends to come up tomorrow. Sentences should feel like a friend handing you a still-warm mug. **Mood references:** J.M.W. Turner's late watercolor sketches; Yves Klein's *Anthropometries* without the violence; Erté plates printed on cold-press paper; Hilma af Klint's *Ten Largest* dialed to 30% opacity; the inside cover of a 1928 *Vogue* left in a windowsill; a Polaroid of a fountain pen leaking onto a daffodil. ## Layout Motifs and Structure The page is a **layered-depth diorama** — six translucent paper-planes stacked in z-space, each carrying its own watercolor wash and a single deco motif. The viewport sits in front of plane 1; the parallax depth of plane 6 is roughly 800px back. As the visitor scrolls, the planes drift at different rates, the way pigment drifts at different rates through wet paper. Nothing snaps. Everything bleeds. **Spatial system:** - Twelve-column grid, but treat columns as **suggestion lines**, not walls. Content routinely crosses two or three columns asymmetrically and lets a margin of one column breathe like an unpainted edge of paper. - Vertical rhythm uses a **golden-section ladder** (1, 1.618, 2.618, 4.236rem) instead of a flat 8px grid — the spacing itself should feel hand-measured. - Each section is a **wash-card**: a free-floating shape (never a rectangle — instead, irregular soft-edged blobs clipped via SVG `feTurbulence` masks) holding its content. Wash-cards overlap their neighbors by 60–120px so the boundaries blur. - A **deco frieze**, ~24px tall, runs as a thin gold geometric band between every two sections — chevrons, stepped pyramids, sunrise rays. This is the only hard-edged horizontal element on the page, and it acts like a gilded book-rib holding the soft pages in place. **No** hero/feature-grid/pricing/CTA composition. The journey is a slow vertical scroll through six numbered "leaves" of a watercolor manifesto: *I. The First Stroke*, *II. The Second Stroke (Which Inherits)*, *III. Bleed*, *IV. Drying Patience*, *V. The Frieze*, *VI. Tomorrow's Wash*. Each leaf is roughly 100vh and is one complete idea, drawn long. ## Typography and Palette **Typography (all Google Fonts):** - **Display & section headings:** *Limelight* — a single-weight art-deco display face with skyscraper proportions. Used at 96–180px, letter-spaced to 0.04em, in the gilded color. Reserve it for the leaf-numerals (I, II, III…) and the section titles. - **Sub-display / pull-quotes:** *Poiret One* — thin geometric deco sans, used at 28–48px in the deep indigo wash color, italicized through CSS `transform: skewX(-6deg)` for a more confident art-deco swing. - **Body prose:** *Cormorant Garamond* (regular 400, italic 400) at 19/30px — a high-contrast romantic serif that reads beautifully against a watercolor backdrop. The italic carries every "you" and "we." - **Annotations / captions / nav:** *Spectral SC* small-caps at 13px tracked +0.18em — feels like the engraved labels under museum glass. **Palette (analogous, blue-violet → cobalt → cerulean → soft-teal, plus gold accent):** | Token | Hex | Role | |---|---|---| | `--paper` | `#FBF6EC` | Base — cold-press paper, slightly warm | | `--paper-deep` | `#F0E6D2` | Deeper paper, used in valley shadows of washes | | `--violet-bleed` | `#4F3F8A` | Deepest analogous note — bottom of every wash | | `--cobalt-pool` | `#2E5BBA` | Mid-wash pigment, primary "ink" color | | `--cerulean-rise` | `#5B8FD9` | Mid-tone, dominant atmospheric color | | `--teal-thin` | `#7FB8C7` | Lightest analogous edge, where pigment fades | | `--gold-leaf` | `#C9A24A` | Deco accent — friezes, leaf-numerals, hairlines | | `--gold-foil` | `#E8C97A` | Hover/sheen state of gold | | `--ink` | `#1B1F3A` | Body text — almost-black, slightly violet | The palette is **analogous** by intention: violet–cobalt–cerulean–teal sit within ~60° of each other on the wheel, which is what gives a real watercolor wash its harmony. The lone non-analogous element — gold — is treated like gilt on a bookplate: tiny doses, never as fill, always as line. ## Imagery and Motifs - **Wash backgrounds** generated in SVG: each section uses a single `` filled with a `linearGradient` between two analogous palette tokens, then masked through an `` + `feDisplacementMap` filter to produce true wet-on-wet edges. No raster watercolor PNGs anywhere — all generative. - **Noise texture** layered globally as a fixed-position SVG `` at 8% opacity, multiply blend mode. This is the cold-press paper grain. Re-seeded once per page-load so it never feels stamped. - **Geometric-shape motifs** as page furniture: gold hairline chevrons, stepped ziggurats, sunburst rays, half-circles, fan-shells, lozenge-diamonds. These appear at deco-typical 30°/60°/90° angles only. Each leaf has exactly **one** governing shape (Leaf I = sunburst, II = chevron, III = wave, IV = lozenge, V = fan, VI = ziggurat). - **Deco friezes** rendered as SVG `` tiles at the boundary between leaves — a 24px-tall band of gold stepping shapes, opacity 0.7, sitting on the paper. - **Hand-numerated marginalia:** Roman numerals I–VI in *Limelight* drop-cap-style at the start of each leaf, painted gold, with a single watercolor blot bleeding from beneath them. - **No photography.** No stock illustration. No icon font. The page is entirely SVG washes + type + a few hairline gold geometries. - **Cursor:** a soft circular wet-brush trail (radius 22px) of `--cobalt-pool` at 0.18 opacity, with a ~600ms decay — leaves a faint pigment path that fades, like a real wet brush on real paper. ## Prompts for Implementation **Story arc — implement as a six-leaf scroll manifesto:** 1. **Leaf I — *The First Stroke*.** Open on near-empty paper. *Limelight* "I" in gold drops in. After 700ms, a single cobalt wash-blot blooms outward from beneath the I (animated via SVG `path` morphing the turbulence seed across 1.4s with an ease-out-cubic). The opening sentence in *Cormorant Garamond* italic fades in inside the wash: *"Continuity is not a streak. It is a wash that has not yet dried."* 2. **Leaf II — *The Second Stroke (Which Inherits)*.** As the user scrolls in, a second wash (cerulean) bleeds into the cobalt of Leaf I — they overlap at the boundary. The text discusses how every act today inherits pigment from yesterday's act. 3. **Leaf III — *Bleed*.** Three small wash-blots drift slowly across the leaf at different parallax speeds (layered-depth in motion). Pull-quote in *Poiret One*: *"Forgive the blur. Continuity blurs."* 4. **Leaf IV — *Drying Patience*.** The wash here is the most muted (teal-thin, paper-deep). Fewer words. A single deco lozenge in gold sits centered. The argument: continuity requires the discipline of waiting for paint to dry before the next stroke. 5. **Leaf V — *The Frieze*.** A wide deco frieze of stepped gold chevrons unfurls horizontally across the entire viewport (SVG `stroke-dasharray` path-draw, 2200ms). This is the page's structural spine: the dry, eternal pattern that the wet washes hang on. 6. **Leaf VI — *Tomorrow's Wash*.** A blank cold-press wash-card titled *VI* with only the body text *"This page is unfinished on purpose. Reload tomorrow."* On reload, the noise-texture re-seeds, the wash positions shift by ±40px, and one new gold geometric motif is randomly chosen — so the page is **literally** a different watercolor every visit. **Animation grammar:** - **Hover-lift** is the only hover affordance. Wash-cards on hover lift 12px on the z-axis, gain a soft `box-shadow: 0 28px 48px -16px rgba(46,91,186,0.22)`, and the noise-texture inside them shifts opacity from 8%→14%, as if the paper is being held closer to the light. 360ms cubic-bezier(0.22,1,0.36,1). - **Wash-bleed transitions** between leaves: as a leaf's `IntersectionObserver` triggers, that leaf's SVG turbulence `baseFrequency` animates from 0.018 → 0.008 over 1800ms, simulating pigment diffusing into wetter paper. - **Layered-depth parallax** via `transform: translate3d(0, calc(var(--scroll) * var(--depth)), 0)` where `--depth` ranges from 0.05 (back) to 0.32 (front) across six z-planes. - **Path-draw on the deco friezes** when they enter viewport. `stroke-dasharray` from 0 to full length, 1600ms ease-out, gold color. - **Type entrance** uses a watercolor-bleed mask: text appears behind a slowly-shrinking turbulence-clipped mask so each word seems to soak into existence rather than fade. ~900ms per heading. **Constraints (DO NOT):** - No CTA buttons. No "Get Started," no pricing, no stat-grids, no testimonials, no logo cloud. - No square-cornered cards. Every container is either a turbulence-edged wash-blot or has no visible boundary at all. - No icon library. No stock photos. No JS animation library — all motion is CSS transitions, CSS `@property` registered custom-property tweens, and tiny vanilla `requestAnimationFrame` loops for the parallax and cursor trail. - No dark mode. Continuity here is solar — there is morning, and there is more morning. **Sectional content:** - Six leaves only. Each leaf gets ~60–120 words of *Cormorant Garamond* italic body and one *Limelight* heading. That is the entire page. - A footer-frieze — gold deco band, 32px — runs across the bottom with one *Spectral SC* line: `CONTINU.ST · A WASH IN PROGRESS · MMXXVI`. ## Uniqueness Notes **Differentiators (vs other designs in this repo):** 1. **All-SVG generative watercolor.** No raster textures, no Photoshop washes, no PNG sprites — every wash is a live `feTurbulence`+`feDisplacementMap` filter that re-seeds on reload. The site is *literally* a different painting every visit. 2. **Art-deco type as the dry counterweight to wet paint.** Watercolor designs in this repo (the 8% who use it) lean cottagecore or pastoral-romantic; this one collides Erté/Limelight skyscraper-deco letterforms with Turner-sky washes. That collision is specific and absent from any other design here. 3. **Six-leaf manifesto structure** instead of hero/features/CTA/pricing. The page is a slow read, not a funnel — a watercolor zine of six rumination-leaves you scroll through like a sketchbook. 4. **Analogous palette in the violet→teal corridor with one gold gilt accent.** Most warm-gradient designs in the repo (96% use warm palettes) live in the orange/terracotta corridor; this one stays in the cool analogous side and uses gold as line, never fill. 5. **Layered-depth via six parallax z-planes** with per-plane turbulence seeds — a depth strategy specific to watercolor diffusion, not the typical hero-parallax pattern. 6. **Hover-lift as the *only* hover affordance**, used at 13% in the repo, here treated as "lifting paper toward the light" with a noise-texture opacity shift — not the usual card-shadow tilt. **Avoided patterns from frequency analysis:** - Avoided **photography** (98%), **gradient palettes** (96%), **mono typography** (96%) — none used. - Avoided **full-bleed** generic layout (90%) and **card-grid** (76%) — replaced with turbulence-edged free-floating wash-cards. - Avoided **cursor-follow magnetic-spring** stack (66–77%) — cursor here is a wet-brush pigment trail with decay, not a magnetic dot. - Avoided **glassmorphism** (69%) and **hand-drawn aesthetic** (96%) — this is a *painted* aesthetic, not drawn; soft turbulence-edges, not pencil hatching. **Chosen seed (from assignment):** aesthetic: watercolor · layout: layered-depth · typography: art-deco-display · palette: analogous · patterns: hover-lift · imagery: noise-texture · motifs: geometric-shapes · tone: optimistic-bright.