# Design Language for scriptswirl.com ## Aesthetics and Tone scriptswirl.com is the digital pattern-book of an imaginary **ornament foundry** — a quiet workshop where engravers cut, file, and catalogue calligraphic flourishes: spencerian tails, drop-cap vines, copperplate hairlines, the curling "swash" terminals that finish a capital letter the way a violin finishes a phrase. The aesthetic is **art-deco ornate luxury under glass** — not the gold-rush, jazz-poster version of deco, but the *engraver's-proof* version: ink on cream rag paper, a single warm metallic for the leafing, fan-rays and stepped chevrons used structurally rather than decoratively, and an obsessive devotion to the *line itself* — its weight modulation, its symmetry axes, its negative space. The tone is **opulent-grand but hushed** — a curator's velvet-rope confidence, never loud. Think the colophon page of a 1920s limited-edition folio: every margin measured, every rule hand-ruled, the whole thing whispering "this took a long time." Where most sites in this corpus chase warmth-and-friendliness, scriptswirl is cool-headed and ceremonial — it treats a swirl the way a jeweler treats a facet. The visitor is not a "user" but a *reader of proofs*, invited to watch each flourish be drawn, stroke by stroke, in front of them. ## Layout Motifs and Structure The page is a **single vertical "proof sheet" — seven horizontal plates stacked like pages of an engraver's sample album**, each plate a full-viewport-height band. There is **no card grid, no bento, no dashboard, no hero-then-features stack.** Instead each plate is governed by a **central vertical mirror axis**: art-deco compositions are bilaterally symmetric, and scriptswirl makes that axis literal — a 1px hairline rule runs down the exact center of every plate, and flourishes unfurl outward from it in mirrored pairs. - **Plate margins** are deliberately enormous — a 13% outer margin on all sides, framing each plate in a stepped double-rule border (thick rule, 6px gap, thin rule — the classic deco frame), with tiny solid squares at the four corners. - **The fold-line:** between plates, a thin engraved divider band shows the plate number in roman numerals (I · II · III…) flanked by two mirrored fan-ray bursts. This band acts as a "turn the page" gesture. - **Navigation** is a slim **vertical brass ruler pinned to the left margin** — seven notches, each etched with a roman numeral; the active notch grows a small inlaid diamond. No top bar, no hamburger, no logo lockup, no footer nav. - **Asymmetric exception:** Plate V deliberately *breaks* the mirror — a single flourish drawn off-axis, captioned "the unbalanced terminal" — to teach by counter-example. The hairline axis is still drawn, but the ornament ignores it. - Type sits in a **narrow centered measure (max 38rem)** within each plate; the flourishes occupy the wide outer zones the text leaves empty. ## Typography and Palette **Type system (Google Fonts only):** - **Display / plate titles — `Cormorant Garamond` (weights 300, 500; also its italic).** A high-contrast, blade-thin Garamond revival whose hairlines visually rhyme with copperplate penmanship. Plate titles are set in small caps, letter-spaced `0.18em`, often only two or three words ("The Spencerian Tail", "Vine & Drop-Cap"). - **Ornamental swash specimen face — `Pinyon Script`.** Used *only* for the giant living specimen glyph on each plate (a single capital letter with an extravagant swash), and nowhere else — it is the "artwork," not the UI. - **Body / captions / engraver's notes — `Spectral` (weights 300, 400; italic for asides).** A screen-tuned serif with enough warmth to read as "fine printing" yet enough clarity for paragraphs of process notes. Set at 1.05rem, line-height 1.75, color the warm ink below. - **Micro-labels, ruler numerals, plate numbers — `Cinzel` (weight 400).** A capitals-only Roman-inscriptional face; gives the brass ruler and divider bands their carved-into-stone authority. Tracked `0.24em`, ~0.7rem. **Palette (engraver's-proof, warm but restrained — six values):** - `#F4EEE2` — **rag paper** (page ground; very slightly warm bone, not white) - `#EAE0CC` — **deckle shadow** (plate insets, the cooler cream of a page edge in shadow) - `#1E1B16` — **iron-gall ink** (primary text, hairline rules, the drawn flourishes) - `#5A5246` — **sepia note** (secondary text, captions, the engraver's marginalia) - `#A6822E` — **leaf-brass** (the single metallic accent — corner squares, the active-notch diamond, swash highlights; used at <8% area, never as a fill) - `#8A2B22` — **vermillion proof-mark** (a single oxblood red, reserved for the "first impression" stamp, the off-axis warning on Plate V, and one struck-through correction mark — appears exactly three times on the whole site) Gradients are essentially absent — the only gradient permitted is a faint 4% radial vignette on the paper ground (`#F4EEE2` → `#EAE0CC`), simulating uneven lamplight on a flat sheet. No glassmorphism, no neon, no glow. ## Imagery and Motifs **No photography. No stock illustration. Everything is drawn as live SVG line-work** — the entire site is, in effect, one large engraving. 1. **The seven specimen flourishes** — each plate centers on one master flourish, built as a single (or mirrored-pair) bezier path with *variable stroke width* faked via paired offset paths filled in iron-gall ink: (I) the **closing swash terminal** on a capital Q; (II) the **spencerian "bird's-wing" flourish**; (III) the **drop-cap vine** wrapping a square initial; (IV) the **interlace knot** (two ribbons over-under, deco-modular); (V) the **off-axis unbalanced terminal** (the counter-example); (VI) the **fan-ray sunburst rule** used as a section break; (VII) the **colophon cartouche** — a stepped-chevron frame enclosing the foundry's mark. 2. **Stepped-chevron borders & corner squares** — the deco frame on every plate; corners carry a tiny solid leaf-brass square, like an inlay. 3. **Fan-ray bursts** — three to nine thin radiating lines from a point; used in divider bands and at the head of Plate VI. Strictly geometric, compass-drawn feeling. 4. **The brass ruler** — left-margin nav rendered as an engraved measuring rule with hairline tick marks every few millimeters and roman numerals at the notches. 5. **Construction guides** — on hover over a specimen, faint 0.5px leaf-brass guide-lines appear: the mirror axis, the x-height line, the slant grid, the circle-and-tangent armature the flourish was "built on" — then fade. This is the site's signature interaction: showing the *scaffolding* behind the curl. 6. **Proof-marks** — a small letterpress-style "1st impression" stamp in vermillion, slightly off-register, lower-right of Plate I; a struck-through "corrected" annotation near Plate V. 7. **Tail-piece ornaments** — between paragraphs of engraver's notes, tiny centered fleurons (a 3-leaf deco sprig) act as section dividers within text. ## Prompts for Implementation Build scriptswirl.com as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. The page is a slow, ceremonial scroll through seven engraved plates. There is **no CTA, no pricing table, no stats grid, no testimonials, no email capture, no FAQ accordion, no logo wall, no newsletter bar, no chatbot, no cookie banner, no contact form.** If a section feels like marketing, delete it; this is a pattern-book, not a landing page. **Storytelling spine — seven plates, vertical scroll:** 1. **Plate I — "The Terminal."** Title fades up in Cormorant small caps. Below it, the giant Pinyon Script `Q` sits centered; then its closing swash *draws itself* — `stroke-dasharray` / `stroke-dashoffset` animation, ~2.4s, eased like a pen accelerating then settling. When the stroke completes, the vermillion "1st impression" stamp thuds in (a 120ms scale-from-1.15 + slight rotation). A short Spectral note explains what a terminal swash is. This plate teaches the reader *how the rest of the site behaves*. 2. **Plate II — "The Bird's-Wing."** Mirrored pair: two spencerian flourishes draw simultaneously outward from the center hairline, like wings opening. Engraver's note on symmetry. On hover, the construction armature (the two tangent circles each curl was struck from) ghosts in. 3. **Plate III — "Vine & Drop-Cap."** A square initial letter; a vine flourish grows around it on scroll — path-draw keyed to scroll progress *within* the plate (the vine is 0% drawn when the plate enters, 100% when it's centered). Note on historical drop-caps. 4. **Plate IV — "The Interlace."** Two deco ribbons weave over-and-under. The over/under is faked with carefully ordered path segments + a 2px paper-colored "gap stroke" where one ribbon passes behind. Subtle: on hover, the front ribbon lifts 2px with a soft shadow (the *only* depth effect on the site). 5. **Plate V — "The Unbalanced Terminal."** The hairline axis draws, but the flourish ignores it — drawn deliberately off-center, lighter, hesitant. A vermillion struck-through "corrected" mark and a Spectral note: *"An ornament that forgets its axis forgets its job."* Teaching by counter-example. 6. **Plate VI — "Rules & Rays."** A fan-ray sunburst rule draws from a single point, line by line, staggered ~60ms apart. Below: a row of three classic deco section-rules, each a small drawn specimen. Note on the ornament as *punctuation* for a page. 7. **Plate VII — "Colophon."** The stepped-chevron cartouche assembles (sides slide in, then the top chevron caps it), enclosing the foundry's mark. A final Spectral paragraph signs off like a colophon: paper, ink, type, "set and struck, MMXXVI." The brass ruler's last notch glows its diamond. No "sign up" — just a quiet end-mark fleuron. **Motion rules:** - **Path-draw is the heartbeat.** Every flourish enters by drawing itself (`stroke-dasharray`), never by fading or sliding wholesale. Easing: a custom cubic-bezier that feels like a nib — slight initial hesitation, smooth acceleration, gentle deceleration into the terminal. Respect `prefers-reduced-motion`: show flourishes fully drawn, no animation. - **Scroll, don't parallax.** Reject multi-layer parallax. The one scroll-linked effect is the Plate III vine drawing in proportion to scroll position within that plate. - **Hover = reveal the scaffolding.** The construction-guide ghost-in (0.5px leaf-brass armature lines: mirror axis, slant grid, tangent circles) is the signature micro-interaction. ~400ms in, ~600ms out. No cursor-follower blob, no magnetic buttons, no tilt-3d cards. - **Stagger** the fan-rays on Plate VI and the ruler notches on first load — that's the extent of stagger. - **Stillness is a feature.** Between interactions the page is dead still — a flat sheet under lamplight. The vignette never moves. **Build notes:** All flourishes are hand-authored SVG paths inline in the HTML (no external SVG files needed). Use `vector-effect: non-scaling-stroke` so hairlines stay hairline. Type loaded via `` to Google Fonts (Cormorant Garamond, Pinyon Script, Spectral, Cinzel) with `display=swap`. Total page weight target is small — it's mostly text, rules, and ``. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Art-deco rendered as the engraver's-proof, not the jazz poster.** The 5%-of-corpus deco sites lean gold/black/glamour/Gatsby. scriptswirl strips deco down to its *structural* grammar — bilateral symmetry, stepped chevrons, fan-rays, hairline contrast — on warm rag paper with a single restrained brass. It reads as a 1920s typographic specimen folio, not a speakeasy. 2. **The mirror axis is a literal drawn element of every section** — a 1px hairline down the center of all seven plates, with content unfurling in mirrored pairs from it, and one plate (V) that deliberately violates it as a teaching counter-example. No other site uses a visible compositional axis as a recurring motif. 3. **Path-draw SVG is the *entire* visual content, not a garnish.** Where path-draw-svg appears in ~47% of the corpus, it's almost always a decorative underline or a small accent. Here every flourish — the actual subject matter of the site — is born by drawing itself, and the signature hover reveals the geometric *armature* (tangent circles, slant grid) the curl was constructed on. The site is, literally, one large self-drawing engraving. 4. **Anti-marketing on purpose.** No CTA, pricing, stats, testimonials, email capture, logo wall, or contact form anywhere — it's a pattern-book / colophon, ending on a fleuron rather than a conversion. 5. **Near-zero gradient, zero glassmorphism, zero photography** — bucking the 94%-gradient / 83%-glassmorphism / 98%-photography conventions. The only gradient is a 4% lamplight vignette; all imagery is iron-gall-ink line-work. **Chosen seed/style:** `art-deco ornate luxury` — *aesthetic: art-deco, layout: ma-negative-space (mirrored-axis proof sheet), typography: art-deco-display (Cinzel) + serif-revival (Cormorant Garamond / Spectral), palette: warm-earthy (engraver's-proof rag & ink), patterns: path-draw-svg, imagery: line-illustration, motifs: sharp-angles (stepped chevrons & fan-rays), tone: opulent-grand.* **Avoided (per frequency analysis):** glassmorphism (83%), hand-drawn aesthetic (94%), card-grid layout (92%), full-bleed photography (98%), warm gradient (94%), cursor-follow (89%), spring/magnetic/tilt-3d interactions, dashboard/bento layouts. Path-draw-svg (47%) is retained but re-cast as the site's core medium rather than an accent.