# Design Language for scriptgrapher.com ## Aesthetics and Tone scriptgrapher.com is the workshop of an instrument that **reads a screenplay and draws its skeleton** — every scene a node, every character entrance an edge, every act a tightening or loosening of the lattice. The site does not "demo a product." It performs a single, long act of reading: a script unspools, and as it unspools, a graph crystallizes around the words. The aesthetic is **experimental editorial typography colliding with the dry diagram-language of dependency graphs** — think the marginalia of a director's annotated script taped over a graph-theory chalkboard, then re-drawn by a typesetter who refuses to leave any line at rest. The tone is **whimsical-creative but technically literate**: playful in the way a kinetic poem is playful, never in the way a mascot is playful. Type is the protagonist. Words slide, re-flow, re-rag, get caught on graph nodes like leaves on a fence, snap into screenplay format, then dissolve back into a paragraph. Nothing here is "above the fold" in the marketing sense — the fold is a *page break* in a screenplay, FADE IN over FADE OUT, and the whole site is paginated like a shooting script (each section is "PAGE 14.", "PAGE 27.", numbered top-right in courier). The mood: a writers'-room whiteboard at 2am, but rendered with the restraint of a Swiss specimen sheet. Ink-on-bond, with exactly one wire of living color running through the diagram like a highlighter that someone left uncapped. ## Layout Motifs and Structure **Broken-grid built on the screenplay's own measurements.** The base grid is literally the US-Letter screenplay layout: a 1.5in left margin, a 1in right margin, 12pt Courier line height — these become the CSS custom properties (`--script-left: 1.5in`, `--line: 1.6em`) that govern the entire page. Body text sits in that narrow screenplay column, ragged-right, but **the graph spills outside it** — nodes and edges are absolutely positioned in the wide gutters and bleed off both sides, so the reading column feels like a spine the diagram is wrapped around. The page is **one continuous immersive scroll of nine "pages,"** each numbered like a script page (`14.`, `27.`, `41.` — non-sequential on purpose, as if torn from a longer document). Transitions between pages are *cuts*: a hard horizontal hairline labeled `CUT TO:` in the right margin, the kind of edit a screenplay uses to jump location. There is **no top navigation bar**. Navigation is a slim **right-margin "scene strip"** — a vertical run of tiny rectangular cards (like a film strip stood on end, or the scene-card wall of a writers' room), each card a 3-letter slugline abbreviation (`INT`, `EXT`, `FLB` for flashback…); clicking one scrolls to that page. The strip is the only chrome. No footer in the conventional sense — the document ends on `FADE OUT.` and a single courier line: `THE END — but the graph keeps running.` **Spatial logic:** as you scroll, the graph **assembles**. Page 14: three lonely nodes, no edges. By page 41: a dense web. The reading column stays put; the diagram around it grows. On the widest viewport the graph reaches almost edge-to-edge; on narrow viewports it collapses into the margins as faint ghosted node-circles behind the text, so the screenplay column is *always* legible and *always* primary. Asymmetry everywhere — no centered hero, no symmetric three-up cards, ever. Each "page" has its single dominant element placed off-axis: a 40-node cluster pinned to the lower-left, a single oversized character name set in the upper-right gutter at 11vw, a stage-direction paragraph indented to an absurd degree because that's where its node sits. ## Typography and Palette **Type system (Google Fonts only) — three voices, all working hard:** - **The script voice (monospace, fixed):** `Courier Prime` — the screenwriting-community redraw of Courier, designed specifically for screenplays. Used for *everything that pretends to be the script*: sluglines (uppercase, `letter-spacing: 0.04em`), dialogue, parentheticals, page numbers, the `CUT TO:` / `FADE OUT.` transitions, and all node labels in the graph. This is the trunk the whole site grows from. - **The expressive display voice (variable):** `Fraunces` (variable — optical size and weight axes both animated). Fraunces is a "soft-serif with wonk" — it has a `SOFT` and `WONK` flavor and an optical-size axis that goes from delicate text to fat squashed display. Used for the **kinetic headlines**: a single word per page, set huge (8–13vw), that morphs its optical-size and weight as it scrolls into frame — `THREADS` arriving thin and tall, settling fat and inky. It is the only "art" type on the page and it is *always* in motion or just-finished-moving. - **The annotation voice (humanist sans):** `Newsreader` — wait, that's a serif; use **`Spline Sans`** instead: a clean humanist grotesque for the *marginalia* — the tiny explanatory captions that the system writes about its own graph ("3 scenes share this location", "character ARLO disappears for 22 pages"), set at 11–12px in the right gutter, almost like footnotes a script supervisor pencilled in. Quiet, factual, never shouty. **Palette — bond-paper monochrome with one uncapped highlighter:** - `#F4F1E9` — **Bond.** A warm typewriter-paper off-white. Page background. Faintly grained. - `#1B1A17` — **Ribbon Ink.** Near-black with a brown undertone, like an old typewriter ribbon. All body text, all script type, all node outlines. - `#8A8578` — **Pencil.** Warm graphite gray. Marginalia text, hairlines, the `CUT TO:` labels, inactive scene-strip cards, edges in the graph when "dormant." - `#E84E1B` — **Highlighter / Live Wire.** A hot scorched orange — the *only* saturated color on the entire site. Used for: the single currently-active graph edge as you scroll (one edge "lights up" at a time, tracing a path), the active scene-strip card, the morphing display word's first stroke, and the cursor's trailing line. It is a scalpel of color; if it appears twice in one viewport that is one time too many. - `#C9C3B0` — **Carbon.** A muted sage-tinged neutral for ghosted/background nodes and the immersive graph's "future" structure (the parts not yet assembled), drawn at low opacity so you can see the lattice it's *going* to become. - `#2E3A2C` — **Marginalia Green.** A deep ink-green used sparingly for one thing only: the page-number badges (`14.`) and the `FADE IN` / `FADE OUT` bookends, so the document's "frame" reads as a different ink than its "content." ## Imagery and Motifs **No photography. No stock anything. Everything is drawn live in SVG/Canvas from the screenplay metaphor:** 1. **The Script Graph itself** — the hero motif and the only "image" on the site. Nodes are *not* circles by default: each node is a tiny **scene-card rectangle** (≈ 64×40px) with a 1px Ribbon-Ink border, a slugline in 7px Courier Prime inside (`INT. KITCHEN — NIGHT`), and a folded-corner dog-ear like an index card. Edges are **hand-wobbled bézier curves** (a 1px stroke with a subtle hand-jitter filter so they look pencilled, not plotted) — character-presence edges curve gently, causal/plot edges are sharper. As the page scrolls, edges *draw themselves* stroke-by-stroke (path-draw animation), and exactly one edge at a time burns Highlighter-orange and animates a small dot travelling along it — "the read-head." 2. **Re-ragging paragraphs** — body text that physically re-flows on scroll: a normal prose paragraph, as it enters, *unwraps into screenplay format* — the prose lines reshuffle, a character name pops up centered-ish, dialogue indents, a parenthetical drops in `(beat)`. Then on scroll-out it re-knits back into prose. The text is the animation. 3. **Margin pencillings** — Spline Sans captions in the right gutter, each connected to its graph node by a 0.5px Pencil leader-line that draws itself like a callout in an annotated script. Occasional hand-drawn underlines and circled words in Highlighter, as if a director marked up the page. 4. **Page-break perforations** — between sections, a horizontal row of tiny Pencil tick-marks like the tractor-feed holes on continuous-form paper, plus the `CUT TO:` / `MATCH CUT:` / `SMASH CUT TO:` label, rotating which cut-type appears. 5. **The Title Plate** — first screenful: a screenplay title page rendered exactly to format — `scriptgrapher.` centered in Courier Prime, `written by` line below, `FADE IN:` at the bottom-left — except the underline beneath the title is actually a flattened graph that, after a 1.2s beat, *unfolds upward* into the first three nodes. The title page becomes the graph. 6. **Cursor as read-head** — the pointer trails a thin Highlighter line; when it passes over a graph node the node's slugline briefly types itself out (typewriter effect, with the Courier carriage-return *clack* implied visually by a 1px horizontal jolt). ## Prompts for Implementation Build scriptgrapher.com as **one HTML document, one CSS file, one ES module** — no framework, no build step. It is a ~90-second scroll-read of a screenplay whose structure assembles into a graph around it. There is **no pricing block, no feature grid, no stats counter, no testimonial carousel, no logo wall, no email capture, no signup CTA, no FAQ accordion, no cookie banner, no chatbot**. If the page needs to "convert," it converts by being so absorbing that the reader scrolls to `FADE OUT.` **Narrative structure — nine numbered "pages," vertical immersive scroll:** 1. **Title Page (`1.`)** — Courier title plate, `FADE IN:`, the underline-graph that unfolds into 3 lonely nodes. The display word `FADE IN` set in Marginalia Green. 2. **Page 14 — "READING"** — prose paragraph re-rags into a screenplay scene as it enters. Display word `READING` in Fraunces, arriving thin/tall (optical-size low), settling fat/inky. Three nodes drift in from the left gutter; one Pencil edge draws between two of them. 3. **Page 19 — "SCENES"** — the scene-card node anatomy is shown by zooming one node large in the right gutter while the script column explains what a scene becomes. Margin captions with leader-lines appear. 4. **Page 27 — "CHARACTERS"** — a character name set at 12vw in the upper-right gutter; as you scroll, character-presence edges fan out from it to every scene that character appears in, drawing one by one, the active one burning orange with a travelling dot. 5. **Page 33 — "THREADS"** — multiple plot threads as differently-curved edge families; the graph is now ~20 nodes, getting dense. Display word `THREADS`. 6. **Page 41 — "WEIGHT"** — pacing visualization: nodes resize by scene length, the lattice visibly bulges where the second act sags. A `MATCH CUT:` perforation precedes it. 7. **Page 52 — "FLASHBACK" (`FLB`)** — a deliberate non-linear jump: the scroll *cuts backward* visually (a `SMASH CUT TO:`), the page background dips one shade darker, a subgraph from "earlier" re-lights. Demonstrates the tool handling non-linear structure. 8. **Page 60 — "THE WHOLE THING"** — full assembled graph reaches near edge-to-edge, ~45 scene-card nodes, edges settling, the read-head dot doing one final lap of the critical path in Highlighter-orange. The script column here is the shortest — almost silent — letting the diagram speak. 9. **End Page (`THE END.`)** — `FADE OUT.` in Marginalia Green, the graph collapses back down into a single flat line — the way it started — then the courier line `THE END — but the graph keeps running.` and a single Highlighter underline that keeps very slowly, infinitely, redrawing itself. **Motion rules:** - **Scroll is the timeline.** Almost all animation is scroll-driven (IntersectionObserver + scroll progress), not autoplay. The reader controls the read-head. - **Path-draw SVG** for every edge appearing — staggered, with hand-jitter. - **Variable-font morph** on the Fraunces display word per page — interpolate `opsz`, `wght`, and `SOFT`/`WONK` axes against scroll progress. - **Spring/elastic** only on the scene-card nodes settling into place — a gentle overshoot, like index cards being slapped onto a corkboard, never bouncy-cartoon. - **Typewriter effect** strictly limited to: node-label reveal on cursor-hover, and the title-page byline. - **Stagger** the margin captions and their leader-lines. - Respect `prefers-reduced-motion`: graph appears fully assembled, words appear at final axis values, no read-head dot — but the screenplay column and its re-ragging are *static-formatted* (just shows the screenplay format directly), so the story still reads. **Texture & feel:** a faint paper grain via SVG `feTurbulence` over the Bond background at ~3% opacity. All hairlines are true 1px (or 0.5px where the device allows) in Pencil. Type renders with `-webkit-font-smoothing: antialiased` off where possible to keep the Courier crisp. The whole thing should feel like *reading*, not *browsing*. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **The layout grid IS a screenplay page.** No other site here derives its CSS custom properties from US-Letter screenplay typesetting measurements (1.5in margin, 12pt Courier line). The "broken grid" here isn't an arbitrary collage break — it's a *document* being annotated, with the diagram living in the real physical margins of a script. Section numbering uses non-sequential script page numbers (`14.`, `27.`, `41.`), which I have not seen used elsewhere. 2. **Type is the literal content-animation, not decoration.** Most kinetic-typography sites animate headlines as flourish. Here the *body prose physically re-rags into screenplay format and back* as the central interaction — the text reformatting IS the demo of what the product does (it reads scripts). Combined with the read-head cursor, the reader is cast as the "head" travelling the graph. 3. **One single saturated color, used as a scalpel.** Against the 98%-warm / 94%-gradient corpus, this is a flat, gradient-free, bond-paper monochrome with exactly one hue (`#E84E1B` Highlighter) that is *rationed* — at most one orange element per viewport, always meaning "the thing currently being read." Plus one secondary ink (Marginalia Green) reserved only for the document's "frame" type. No gradients anywhere. 4. **Scene-card nodes, not circle nodes; pencilled béziers, not plotted edges.** The graph rejects the generic data-viz force-graph look: nodes are dog-eared index cards with 7px courier sluglines inside; edges have a hand-jitter filter so the diagram looks *drawn by a writer*, not generated by D3. 5. **A backward cut.** Page 52 deliberately scrolls the visual *backward* (a `SMASH CUT TO:` flashback) — using scroll choreography against the reader's expectation to demonstrate non-linear structure. Most immersive-scroll sites only ever move forward. **Chosen seed / style:** `experimental type layout` — realized as *aesthetic: avant-garde + editorial; layout: broken-grid + immersive-scroll; typography: expressive-variable + mono; palette: monochrome + high-contrast; patterns: path-draw-svg + scroll-triggered + typewriter-effect; imagery: generative-art + line-illustration; motifs: grid-lines + flowing-curves; tone: whimsical-creative.* **Avoided patterns from frequency analysis:** no glassmorphism (83%), no hand-drawn-cute aesthetic in the saccharine sense (94%), no card-grid (92%), no centered hero (80%), no warm gradient palette (98%/94%), no parallax-as-default (90%), no cursor-follow-blob, no photography (98%), no full-bleed gradient mesh, no counter-animate stat blocks. Embraced underused territory: monochrome palette (15%), broken-grid (12%), typewriter-effect used sparingly (15%), path-draw-svg as the structural mechanic (47% but rarely as the *spine*), expressive-variable type (3%), whimsical-creative tone (7%).