# Design Language for scriptswirl.com ## Aesthetics and Tone `scriptswirl.com` is a **writer's sky at 3am** — the rare hour when the atmospheric haze thins just enough to catch the aurora, and every color is somehow both intensely present and impossibly soft. The site is for screenwriters, novelists, copywriters, and anyone who traffics in words-as-craft. It does not celebrate *productivity*. It celebrates the *feeling inside the act of writing*: the moment a sentence clicks, the strange calm of a blank page that hasn't failed you yet. The aesthetic is **editorial-aurora**: the structural confidence of a literary magazine (wide margins, deliberate whitespace, strong typographic hierarchy) fused with the luminous unpredictability of northern lights rendered through organic-blob morphology. Nothing is rigid. Every edge that could breathe, breathes. The palette is cold and deep — midnight blue atmospheric gradients pierced by soft green-cyan auroral glows and warm ivory text — evoking the sensation of typing by window-light while something vast and cold moves across the sky outside. Tone is **approachable-casual**: like a fellow writer who happens to be very good, sharing their process without condescension. No "unlock your potential" language. No urgency. Copy is short, direct, and slightly literary — the kind of sentence that sounds effortless because someone rewrote it four times. Mood reference: a Penguin Modern Classics paperback left open on a table in a cabin in Iceland in February. ## Layout Motifs and Structure The page is a **slow vertical scroll of cinematic panels**, each one a distinct atmospheric moment rather than an information block. There are no card grids, no feature lists, no pricing tables. The structure is: - **Hero panel** (100vh): full-screen with a centered prose fragment — not a headline, not a CTA — just a single suspended sentence in large type, set against a deep aurora-blue void. The aurora blob drifts slowly behind the text using CSS custom properties animated on a staggered 12s/17s/23s cycle (prime numbers to avoid visual periodicities). A faint organic blob in #A8E6D0 bleeds from the upper-right corner. - **Drift panels** (3–4 total, each ~80–120vh): each panel enters via a **parallax-reveal** — the background layer scrolls at 0.35× speed while the text layer scrolls at 1.0× speed, creating depth without the jarring effect of full parallax. The panel text is always left-aligned, set in a 52ch column anchored to the left third of the viewport on wide screens. The right two-thirds is occupied by a slowly morphing blob SVG (clip-path: polygon with CSS `d` animation via keyframes). - **Interstitial quote rails**: narrow full-width strips (height ~140px) with a single pull-quote centered, set in italic display type, sitting on a subtle aurora-gradient strip that runs left-to-right at a 2° diagonal. - **Closing panel** (100vh): text anchored bottom-center, with the aurora blob now filling most of the viewport at 15% opacity — the sky has gotten brighter as you scrolled through, creating a sense of narrative arrival. Scroll-triggered reveals use **IntersectionObserver** with a 0.15 threshold. Elements enter with `opacity: 0 → 1` and `translateY(32px → 0)` over 640ms with a cubic-bezier(0.22, 1, 0.36, 1) ease-out. No element slides in from left or right — only from below, like words rising to the surface. No sticky header. The site is navigation-free. There is one link: a subtle text link at the very bottom. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display / hero text — `Plus Jakarta Sans`** (wght 300, tracking -0.02em, 5.5vw on desktop, 10vw on mobile). The weight is deliberately light — not whisper-thin, but unburdened. At large sizes it reads as editorial confidence without aggression. The light weight also allows the aurora colors to breathe through without competing. - **Body / drift panel prose — `DM Sans`** (wght 400, line-height 1.75, max-width 52ch). DM Sans is warmer and slightly more casual than Inter, which suits the approachable-casual tone. It handles long-form prose better than display grotesks. Size: 19px desktop, 17px mobile. - **Pull-quote italic — `Plus Jakarta Sans`** (wght 300–400 italic, 1.6rem, tracking +0.01em). Same family as display to unify the system. The italic cut reads as momentary interiority — a thought surfacing mid-flow. - **Utility / small labels — `DM Sans`** (wght 500, 0.75rem, tracking +0.06em, all-caps). Used sparingly for dates, category tags, and the single nav link. **Palette (6 values):** - `#0A0F1E` — Abyss. The page background. Not pure black; a deep indigo-blue that reads as midnight sky rather than void. All panels share this base. - `#12193A` — Deep Current. Secondary surface color for interstitial strips and subtle panel separations. - `#A8E6D0` — Aurora Mint. The primary accent. Used for aurora blobs at 25–60% opacity, for hover states on the bottom link, and as the glow color in `text-shadow` on hero text (2px spread, 8px blur, 20% opacity). - `#7EC8D4` — Polar Cyan. Secondary auroral tone. Applied to blob gradients and to the CSS `conic-gradient` that underlies the closing panel blob. - `#E8E2D5` — Warm Ivory. All body text and headings. A touch of warmth against the cold sky prevents eye fatigue and echoes aged paper — connecting back to the editorial reference. - `#2A3A6A` — Stratosphere. Used for the subtle diagonal interstitial gradient strip and for blob-border glows at very low opacity (4–8%). **Aurora blob rendering:** Blobs are inline SVG with `` applied via SVG filters. They use a radial gradient from `#A8E6D0` at center (opacity 0.6) to `#7EC8D4` at 60% to transparent. The blur creates a soft corona effect without any JavaScript. CSS `animation: blobDrift 23s ease-in-out infinite alternate` on `transform: translate()` and `border-radius` using clip-path polygon morphing. ## Imagery and Motifs The site has **no photography**. The registry shows photography at 86% — scriptswirl.com opts out entirely. Instead: - **Aurora blobs**: organic SVG shapes rendered as soft glowing masses in #A8E6D0 and #7EC8D4, placed behind text at 15–60% opacity. Each panel has one primary blob and one satellite blob (30% smaller, offset by ~180°, animating on a different cycle). Blobs are not decorative chrome — they are the atmospheric environment through which the reader moves. - **Typographic texture**: In the hero panel, the word "SCRIPT" appears in very large type (22vw) behind the main sentence, in #12193A (barely-visible against the background), creating a textured depth layer that rewards attention. This is the only "background text" treatment and does not recur. - **Diagonal gradient rails**: Interstitial strips use a CSS `linear-gradient(92deg, #2A3A6A 0%, #12193A 50%, #2A3A6A 100%)` — subtle, directional, like light catching the underside of a cloud. These are 140px tall and serve as visual punctuation between panels. - **No icons**. No illustrations. No border decorations. The motif vocabulary is strictly: blobs, type, gradient rails, and whitespace. - **Cursor**: The default cursor is replaced by a small `•` (CSS `cursor: none` with a JS-tracked pseudo-cursor div, 6px × 6px, background #A8E6D0, border-radius 50%, `mix-blend-mode: screen`). On hover over the bottom link, the cursor blooms to 24px over 200ms. ## Prompts for Implementation Build the page as **a single uninterrupted scroll through four atmospheric panels**, each one a different kind of silence a writer experiences. The scroll should feel like turning pages in a dark room — not frantic, not dramatic, just deeply present. **Implementation vows:** **Vow 1 — The scroll is the narrative.** Use IntersectionObserver to trigger opacity/translateY reveals. Never auto-scroll, never snap-scroll. The reader moves at their own pace. Each panel must be fully readable before the next becomes visible — no overlap of text layers. **Vow 2 — The blobs are weather, not decoration.** Each blob is an independent CSS animation. Use `animation-duration` values of 17s, 23s, and 31s (prime numbers) so the blobs never synchronize into a repeating pattern. Apply `will-change: transform` only to blobs (not text) to keep GPU compositing lean. **Vow 3 — Typography is the content.** Every line of copy must be written as if it belongs in a good essay. No bullet lists. No headers that begin with verbs ("Discover," "Explore"). The four panels should read as connected prose paragraphs — a sustained thought rather than a pitch deck. **Vow 4 — Color restraint.** Use #A8E6D0 and #7EC8D4 ONLY in blobs, hover states, and text-shadow glows. Never use them as fill for any solid element. The aurora is luminous because it exists in atmosphere, not because it is painted on a surface. **Implementation specifics:** - CSS: custom properties for all colors and animation durations on `:root`. Blob morphing via `@keyframes` on `border-radius` percentages (8 keyframes per blob) plus `translate` drift. - JS: IntersectionObserver for scroll reveals (threshold: 0.15). Cursor tracking with `requestAnimationFrame`. No other JS needed. - HTML structure: `
` with four `
` children, each `position: relative`. Blobs are `position: absolute` children with `z-index: 0`. Text containers are `position: relative; z-index: 1`. - No framework. Vanilla HTML/CSS/JS. - Font loading: `` for Google Fonts, load only `Plus Jakarta Sans:300,400i` and `DM Sans:400,500`. Subset to Latin. - Avoid: backdrop-filter blur on any text container (hurts legibility at 19px on dark). Avoid: box-shadow glow on text. Stick to text-shadow for aurora-glow effect on hero. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: editorial, layout: parallax-sections, typography: sans-grotesk, palette: ethereal-blue, patterns: scroll-triggered, imagery: organic-blobs, motifs: aurora-lights, tone: approachable-casual. **Differentiators from every other design in the registry:** 1. **No photography in an editorial site.** The registry shows editorial designs at 52% but photography at 86% — nearly all editorial sites use photography. `scriptswirl.com` is a rare editorial design that achieves visual richness purely through aurora blobs, typographic texture, and gradient rails. This inverts the expected formula. 2. **Navigation-free single-column scroll.** The registry shows parallax at 75% but almost all parallax sites retain conventional navigation. `scriptswirl.com` eliminates the header entirely — there are no internal links, no menu, no logo. The sole navigation element is a plain-text link at the bottom. This is anti-commercial editorial, closer to a literary magazine's "About" page than a SaaS site. 3. **Prime-number animation cadence.** Most scroll-animated sites use round-number durations (2s, 5s, 10s) which creates subtle periodicities visible at the corner of the eye. Using 17s, 23s, 31s ensures the blobs never synchronize — the aurora feels genuinely organic rather than patterned. This is a technical differentiator that produces a perceptual one. 4. **Ethereal-blue palette at 2% frequency.** The registry shows `ethereal-blue` at only 2% usage — making this palette choice genuinely rare. The specific hex combination (#0A0F1E, #A8E6D0, #7EC8D4, #E8E2D5) does not appear in any analyzed design. The use of warm ivory (#E8E2D5) against the cold blue-mint palette — borrowed from aged paper rather than pure white — is a deliberate tension that keeps the cold sky from feeling sterile. 5. **Typographic ghost layer.** The oversized "SCRIPT" letterform behind the hero sentence is a non-repeating textural device not found in other designs with parallax or scroll-triggered patterns. It is used once and never again, which prevents it from becoming a cliché within the page itself.