# Design Language for scriptgrapher.com ## Aesthetics and Tone scriptgrapher.com is a tool for creative writers and screenwriters who want to visualize their story structure — not as a sterile timeline or a productivity grid, but as something that feels like unrolled kraft paper pinned to a warm cork board in a working writer's study. The aesthetic is **generative-organic**: the page is alive with slowly morphing blob shapes in the background that breathe and shift as the user scrolls, suggesting that story is a living, changing thing, never fixed, always gestating. The site does not feel like software. It feels like a creative space. The dominant mood is **warm, intimate, and approachable-casual** — a friend who happens to understand narrative structure, not a corporate product. The visual metaphor is ink on warm paper: the blobs are slightly translucent ink-wash shapes pooling into each other, and the typography is a variable font that stretches and contracts as if being written by hand at different speeds. Think: the sketchbook of a novelist who codes on the side. Burnt-orange ink blots. Loosely ruled paper. A sense of something being figured out, discovered in real time. ## Layout Motifs and Structure The page is built as a **vertical timeline** — a single scrolling column that traces the journey from "I have an idea" to "I have a finished script." This is not a marketing page with feature cards; it is a narrative scroll that unfolds one beat at a time, mirroring the screenwriting process itself. **Structural rules:** - **No horizontal navigation.** A single sticky header with only the logo (a fluid ink-blob lettermark) and a minimal "Sign in / Try free" text link — no hamburger menus, no nav bars. - **Timeline spine.** A thin burnt-orange vertical line (~2px, `#C85C28`) runs down the left third of the page on desktop, with circular node markers at each story beat. On mobile, the line centers and nodes reduce to small diamonds. - **Beat nodes.** Seven distinct content nodes, each offset alternating left and right of the spine (desktop), each containing a short story-driven paragraph + a generative blob illustration. The blobs are unique per node — their shape is seeded from a story beat keyword. - **Full-viewport opening scene.** The first viewport is a full-height stage: the domain name rendered as a massive, weight-variable heading (font-variation-settings interpolating from wght 200 to 900 on scroll), a single tagline line beneath it, and three large organic blobs in the background drifting with CSS `offset-path` animations. No hero image. No video. Just letterforms and living color. - **Timeline connector transitions.** Scrolling into each node triggers the node's blob to expand from a point along the spine, using CSS clip-path animation. The spine line draws itself progressively as the user descends — `stroke-dashoffset` on an SVG path driven by scroll position. - **Closing section.** The timeline terminates in a large end-node — a full-width warm cream panel with the sign-up form centered in it, no border, no button grid, just a single email input and a text link. **Grid:** 12-column, 1440px max-width container. Content lives in columns 2–8 on desktop. Blobs overflow into the gutter and beyond at will. ## Typography and Palette **Typography (Google Fonts only):** - **Display & UI — [Fraunces](https://fonts.google.com/specimen/Fraunces)** variable, axes: wght 100–900, opsz 9–144, WONK 0–1, SOFT 0–100. This is the voice of the site. It is a soft, optical-size-aware serif with a humanist warmth. At wght 900, opsz 144 it is a massive, ink-heavy slab. At wght 200, opsz 9 it becomes a hairline whisper. The hero heading interpolates between these extremes on scroll. All display headings set in Fraunces. - **Body — [Literata](https://fonts.google.com/specimen/Literata)** variable, wght 300–700, ital 0–1. A book-optimized reading typeface designed for long-form text. Body paragraphs at wght 400, 18px/1.75 on desktop. Pull-quotes set at wght 600 italic, tracking -1.5%. - **Labels & Captions — [DM Mono](https://fonts.google.com/specimen/DM+Mono)** 400/500. Small, functional, slightly warm. Used for node labels ("Beat 01 — Premise"), timestamps, and input field labels only. **Palette:** | Role | Hex | Description | |---|---|---| | Paper (bg) | `#F7F0E6` | Warm cream, like aged vellum or kraft — the ground for everything | | Burnt-orange primary | `#C85C28` | Deep, dusty terracotta — ink, accent, spine line, CTA | | Amber highlight | `#E8883A` | Lighter flame-orange — blob midtone, hover states | | Ink dark | `#2B1F14` | Near-black warm brown — body text, headings | | Pale peach | `#F2D5BE` | Whisper of orange — blob shadows, card wash | | Sage accent | `#7A8C6E` | Muted green-grey — the single cool note, used sparingly for secondary labels | | Cream white | `#FEFAF5` | Near-white, used for content panels sitting above the paper ground | All blobs use `#C85C28` and `#E8883A` at 30–55% opacity on the `#F7F0E6` ground, creating soft ink-wash color pooling. ## Imagery and Motifs **No photography. No icons. No stock illustration.** The entire visual system is built from two sources: variable typography and generative organic blobs. **Blob system:** Each blob is a closed SVG path with 6–10 control points, generated from a small JavaScript seeded-random function using a story-beat keyword as the seed. The same keyword always produces the same blob shape, but the blob animates: control points drift using `sin(time + offset)` oscillation, keeping the shape alive and breathing. Blobs are rendered inline in SVG, filled with `#C85C28` or `#E8883A` at 40% opacity, with a `filter: blur(32px)` applied to the SVG group to create the ink-wash softness. **Seven canonical blobs (one per timeline node):** 1. **Premise** — a wide, low, spreading ellipse-like form, suggests an open horizon 2. **Character** — a taller, more irregular form with a pronounced lobe suggesting a head 3. **Conflict** — two overlapping circles pushed apart, tension in the intersection 4. **Structure** — a three-lobed form, evenly spaced, like three acts 5. **Scene** — a small, focused, dense blob — a single contained moment 6. **Revision** — a blob mid-morph, mid-path, caught in transition 7. **Draft** — the largest blob on the page, almost a full background wash, suggesting completion **The spine motif:** The SVG spine line is stroked with `#C85C28`, `stroke-width: 2`, and has a subtle `stroke-dasharray` texture that resembles a pencil line rather than a clean rule. Nodes are SVG circles, 12px diameter, filled `#C85C28`, with an outer ring that animates in on scroll. **Border-animate pattern:** Every content node panel has a thin border (`1px solid #C85C280A` at rest) that transitions to `1px solid #C85C28` when scrolled into view — the border draws itself clockwise using `stroke-dashoffset` animation on an SVG `` overlay. This is the signature micro-interaction of the entire site. ## Prompts for Implementation Build scriptgrapher.com as a **single uninterrupted vertical timeline page** — one HTML file, one CSS file, one JS file. No frameworks. No build step required for the preview. **HTML structure:** ```
— sticky, minimal
— full viewport, blob-field, variable heading
— contains 7 .node elements
— SVG vertical line, drawn on scroll
— alternates .left / .right
— SVG blob, animated
— label + heading + body — the animated border rect
... (× 7)
— final panel, email input ``` **JavaScript behavior:** - `IntersectionObserver` on each `.node` at threshold 0.3: adds `.visible` class - `.visible` triggers: border-animate via CSS `animation: draw-border 0.6s ease-out forwards`, blob scale from 0.6 → 1.0 via CSS transform, node content fade+slide from translateY(24px) to translateY(0) - Scroll position (0–1 normalized) drives: hero heading `font-variation-settings` from `wght 200` to `wght 900`; SVG spine `stroke-dashoffset` from 100% to 0% - Blob oscillation: `requestAnimationFrame` loop, each blob's control points updated via `Math.sin(Date.now() * 0.0005 * frequency + phase)` per point. Amplitude: 8px. No GSAP. Vanilla JS only. **CSS variables (declare on :root):** ```css --paper: #F7F0E6; --orange: #C85C28; --amber: #E8883A; --ink: #2B1F14; --peach: #F2D5BE; --sage: #7A8C6E; --cream: #FEFAF5; --spine-width: 2px; --node-gap: 120px; ``` **Animation timing:** All transitions use `cubic-bezier(0.25, 0.1, 0.25, 1)` — no bounce, no spring. Organic ease, not mechanical snap. **AVOID in implementation:** - Hero sections with background images or videos - Card grids or feature comparison tables - Pricing blocks or stat counters - Horizontal scrolling - Any parallax on background images (the blobs animate independently of scroll position except for their entrance) - Full-screen overlays or modals - Testimonial carousels ## Uniqueness Notes Chosen seed: aesthetic: generative, layout: timeline-vertical, typography: variable-fluid, palette: burnt-orange, patterns: border-animate, imagery: organic-blobs, motifs: organic-blobs, tone: approachable-casual **Differentiators from the existing 465-design corpus:** 1. **Generative blobs as the ONLY imagery, used as ink-wash rather than tech-geometry.** The frequency report shows `generative-art` at 2% and `abstract-shapes` at 3%, but in every existing generative design they are used as tech-oriented particle fields, circuit traces, or geometric fractals. scriptgrapher.com uses generative forms as soft, warm, ink-pooling organic blobs — the generative aesthetic inverted from cold/tech to warm/tactile. The blobs serve the same role as a novelist's doodles in a notebook margin, not a data visualization. 2. **Variable font weight interpolated by scroll position as the primary animation.** `variable-fluid` typography appears at 6% in the corpus, but no existing design uses scroll position as the interpolation axis for `font-variation-settings`. The hero heading physically changes weight as the user scrolls — from a hair-thin whisper at the top to a heavy, ink-saturated slab as the user commits to reading. This makes the typography itself a navigation metaphor: entering the page is entering the story. 3. **Timeline-vertical layout with a hand-ruled spine SVG as the structural backbone.** `timeline-vertical` appears at only 4% in the corpus. scriptgrapher.com makes the timeline literal — it is the primary layout device, not a decorative flourish inside a centered column. The SVG spine draws itself as the user scrolls, making the act of reading the page identical to the act of writing a screenplay: you draw the story forward line by line. 4. **Border-animate as the primary node-entrance interaction (not parallax, not stagger).** `border-animate` appears at only 2% — the rarest pattern in the corpus. Instead of the ubiquitous parallax (75%) or stagger (50%), scriptgrapher.com makes the border itself the entrance event. Each content panel is defined by a border that draws itself clockwise into existence, the way a writer boxes a scene in their notes when they know it is right. The gesture is intimate and specific to the writing process. 5. **Burnt-orange / terracotta palette treated as ink, not fire.** `terracotta-warm` appears at 3% in the palette category. scriptgrapher.com takes terracotta out of its usual "warm Mediterranean lifestyle" context and uses it as the color of dried ink on cream paper — a scholarly, working color. Paired with `#F7F0E6` paper-cream and `#2B1F14` near-black-brown ink, the palette reads as a writer's materials (ink, paper, pencil) not as a lifestyle brand.