# Design Language for JJUGGL.dev ## Aesthetics and Tone JJUGGL.dev is **a Warm Cyberpunk Scriptorium** -- a developer's playground rendered as if a 22nd-century hacker collective took over a sun-warmed terracotta library in Bologna. Forget the rain-slicked Tokyo neon of conventional cyberpunk: this is cyberpunk filtered through ochre-stained vellum, where mechanical keyboards rest on hand-glazed clay tile, and split-flap displays announce git commits in burnt sienna characters. The future is not dystopian here; it is **optimistic, scholarly, and earthen** -- a place where juggling ideas (jjuggl) is the developer's craft, performed in the soft glow of a desk lamp filtered through curtains the color of paprika. The aesthetic deliberately collides three worlds that should not meet: (1) the scan-line shimmer and HUD telemetry of cyberpunk circuitry, (2) the leatherbound, gold-leaf-stamped solemnity of a 17th-century technical scriptorium, and (3) the warm, sun-drunk Mediterranean palette of fired clay rooftops. The result is **hopeful brightness, not chrome despair** -- a dev who codes by candlelight and CRT alike, juggling APIs the way a medieval scribe juggled illuminated manuscripts. Every interaction should feel as if the developer is being welcomed into a private terracotta-walled atelier where great craftspeople have always worked: confident, generous, sunlit. Joy, not edge. The voice is **the optimistic master craftsperson** -- precise but generous, technical but warm, futuristic but rooted in centuries of bookmaking tradition. JJUGGL.dev addresses developers not as users to convert, but as fellow scribes joining a long lineage. Tone words: kindled, ochre, glow, scriptorium, kiln, marginalia, stack, juggle, manuscript-as-codebase. ## Layout Motifs and Structure The page is constructed as a **rigid vertical split-screen** -- a `50/50` partition holding for the entire viewport height of every section, never collapsing into stacks until below `720px` viewport width. The left column is **the Manuscript Folio** (terracotta-stained, slightly textured, scholarly), the right column is **the Terminal Window** (deep oxblood-black, monospaced, scan-lined). Both columns scroll **independently in parallax** at slightly different rates (left column at `1.0`, right column at `0.92`), so the manuscript and the code drift relative to each other like two open books on a slanted desk. This is the spine motif: every section is a two-page spread. A persistent `2px` solid border in `#C9622E` runs along the inner spine of the split, with **animated diagonal hatching** (using `background-image: repeating-linear-gradient` at `45deg`, advancing `1px` per frame via `@keyframes` translating a `background-position` offset). This border is the binding-thread of the manuscript -- it is alive, perpetually being stitched. Section transitions feature **border-animate accents**: when a new section enters the viewport, its outer rule extends from a `0%` width to `100%` over `900ms` with `cubic-bezier(0.16, 1, 0.3, 1)`, drawing itself like a pen-stroke across a fresh page. The vertical rhythm uses **folio-numbered sections** (Folio I, Folio II, Folio III...) rendered in the outer margins as Roman numerals at `clamp(3rem, 6vw, 5.5rem)`. Inside each folio, the left manuscript side hosts narrative prose blocks of `max-width: 32ch` (the medieval column width), while the right terminal side hosts code-blocks, command transcripts, and live readouts in a `48ch` monospace measure. There is no centered hero, no dashboard grid, no card-shop aesthetic -- only the two facing pages, infinitely deep. A **margin-marginalia layer** floats between columns: tiny hand-drawn arrows, manicules (the pointing-hand glyph), and diagonal callout strokes connect a paragraph on the left to a code symbol on the right, drawn in `#3A1F0F` ink at `1px` stroke. These marginalia animate in on scroll using `path-draw-svg`, but are kept sparse -- one or two per folio. ## Typography and Palette **Display Font:** "Bebas Neue" (Google Fonts) -- the condensed, all-caps, industrial-display sans, set at `clamp(3.5rem, 9vw, 8rem)`, `letter-spacing: 0.04em`, `line-height: 0.92`, used for folio titles and headline interjections. Bebas's narrow vertical proportions echo a condensed manuscript heading and a CRT scan-line at once. Used sparingly -- only for top-of-folio titles and a single full-width marquee per page. **Manuscript Body Font:** "EB Garamond" (Google Fonts) -- a digitization of Claude Garamont's 16th-century romain, set at `1.0625rem`, `line-height: 1.65`, `font-feature-settings: "onum", "liga"` for old-style figures and ligatures. Used for all narrative prose on the manuscript (left) column. **Terminal/Code Font:** "JetBrains Mono" (Google Fonts) -- weight 400 and 600, at `0.95rem`, `line-height: 1.55`, used for all right-column code, command lines, and HUD telemetry. Ligatures enabled. **Marginalia Font:** "Caveat" (Google Fonts) -- a casual handwritten script at `1rem`, `font-style: italic`, used only for hand-drawn marginalia, manicule labels, and diagonal callouts. Weight 500. **Palette (Terracotta-Warm cyberpunk -- earthen, not neon):** - **Vellum** `#F4E3C8` -- the parchment of the manuscript column; warm cream, never pure white. - **Terracotta** `#C9622E` -- primary accent: borders, folio numerals, headline color, the binding-thread. - **Burnt Sienna** `#A14224` -- secondary accent: sublines, inline code, manicule strokes. - **Paprika Glow** `#E58A4C` -- highlight glow used in animated borders and HUD pulses. - **Oxblood Black** `#2A0F0A` -- terminal column background; cyberpunk's "void" warmed with red-brown undertone, never `#000000`. - **Phosphor Amber** `#F4A24C` -- terminal text color; the warm-CRT amber of a 1980s monochrome monitor. - **Ink Brown** `#3A1F0F` -- manuscript body text; never black, always brown like iron-gall ink. - **Tile Gold** `#D9A24E` -- rare accent: link hover, decorative caps, gold-leaf flourishes. The palette deliberately avoids cyberpunk's customary cold cyans and magentas. The "neon" of this design is achieved through warm phosphor amber and paprika glow against oxblood black -- the cyberpunk silhouette, drenched in afternoon Bolognese sun. ## Imagery and Motifs **Custom Illustrations -- Hand-Drawn Codex Engravings.** A consistent set of 8-12 SVG illustrations rendered as if pulled from a 17th-century technical engraving but depicting modern dev concepts: a scholar juggling six glowing API spheres, a quill writing a `git commit` in cursive, a mechanical typesetting press whose movable type spells `console.log`, an anatomical cross-section of a CPU rendered as if it were a heart in a Vesalius plate, a scribe bent over a CRT illuminated like a lectern manuscript. All are drawn in `#3A1F0F` line-work on `#F4E3C8`, with selective `#C9622E` and `#D9A24E` flat fills. Stroke weights `0.75px` to `2px`, no gradients, no photo-realism. These illustrations sit at the top of each folio as the illuminated capital, occupying `220px` to `360px` square. **Book-Scholarly Motifs.** The design is saturated with the iconography of the manuscript tradition: **drop-caps** (the first letter of each folio's first paragraph rendered at `5.5rem` in EB Garamond, with a hand-drawn flourish), **manicules** (the pointing-hand symbol used as a scroll-cue indicator), **gold-leaf rules** (thin `1px` `#D9A24E` horizontal lines flanking section headings), **Roman folio numerals** (Folio I through Folio VII), **catchwords** (the medieval practice of repeating the first word of the next page at the bottom-right of the current page -- here used as a scroll-trigger preview of the next section's headline), **paragraph pilcrows** (¶) in `#C9622E` opening each prose block, and **marginalia annotations** in handwritten Caveat italic. **Cyberpunk overlays, warmed.** A subtle `mix-blend-mode: multiply` scan-line texture overlays only the terminal column (`background-image` of horizontal `1px` lines at `4px` intervals at `4%` opacity in `#000000`). A faint **CRT bloom** halos any `.glow` text in the terminal column (achieved with a stack of three `text-shadow` declarations in `#F4A24C`, `#E58A4C`, and `#C9622E` at increasing blur radii). No glitch displacement, no chromatic aberration -- the cyberpunk here is gentle, like sunlight on a powered-on monitor. **Border-Animate as Living Binding.** Every framed element -- folio cards, code-block frames, illustration plates -- has an animated terracotta border that is perpetually being "drawn." Achieved by an SVG `stroke-dasharray` running a `300` length pattern that translates `-300` to `0` over `4s linear infinite`, giving the impression that an invisible scribe is endlessly re-stitching the binding thread. ## Prompts for Implementation **Full-Screen Narrative: "FOLIO I -- THE SCRIPTORIUM OPENS"** The page opens not with a CTA but with a **single sustained tableau**. The left half of the screen is `#F4E3C8` vellum, perfectly empty for the first `2.5 seconds` save for a single hand-drawn quill (custom-illustration SVG, `180px`) descending from the top with a `5s` `cubic-bezier` ease, leaving a Bebas Neue word -- "JJUGGL" -- written in Terracotta `#C9622E`, all caps, drawing itself character by character via `stroke-dasharray` over `2.4s`. Beneath, in EB Garamond italic, the subtitle: "_a developer's scriptorium, in seven folios_". The right half is the oxblood-black terminal, beginning empty, then a typewriter-effect prompt appears: `~/jjuggl.dev $ ▮` -- the cursor blinks Phosphor Amber. After the quill finishes writing, a single command types itself: `> open folio-01`, and the terminal fills with a stream of warm-amber console output (a fictional commit log of the scriptorium being founded -- `0001 INIT scriptorium`, `0002 ADD vellum`, `0003 STITCH binding`). **FOLIO II -- THE JUGGLER'S THESIS** (split-screen narrative, ~120vh deep). Left column: a Bebas Neue headline "WE JUGGLE", followed by EB Garamond prose (max-width 32ch) explaining JJUGGL.dev as a developer's craft-collective, with a custom-illustration drop-cap "W" rendered as a scholar juggling six glowing API spheres. Right column: a real-time-feeling terminal log of "juggled" packages -- a list scrolling slowly upward, each line `JetBrains Mono`, `#F4A24C`, with one line per second highlighted by a paprika-glow border-animate sweeping across it. Marginalia between columns: three tiny manicule glyphs (`#3A1F0F`, `12px`) pointing from prose phrases to corresponding terminal lines, the connection drawn as hand-stroked diagonal SVG paths drawing themselves on scroll. **FOLIO III through VII** continue the split-screen rhythm with the same two-column logic but rotating roles: in Folio IV the terminal shows live `git log` output; in Folio V an animated diagram (custom-illustration mechanical press) types out movable-type letterforms; in Folio VI the terminal becomes a HUD displaying fictional system telemetry in warm amber; in Folio VII a closing colophon names the scribes (the project's contributors), set as a true medieval colophon with red-and-gold drop-cap, signed off with a quill-flourish illustration. **AVOID at all cost:** CTA-heavy hero blocks, pricing tables, three-column feature grids, stat-grids, customer-logo strips, testimonial cards, dashboard-style data widgets, generic SaaS gradients, neon cyan/magenta cyberpunk clichés, Matrix-style green-on-black, glassmorphic frosted cards, hover-to-flip cards, particle-field backgrounds, photographic stock imagery, or any layout that reduces to "centered single column." **Animation philosophy:** Every animation is a **scribe's gesture** -- a stroke being drawn, a page turning, a binding being stitched, a quill descending. No bouncy springs, no elastic exits, no shake-error juddering. All easing curves use `cubic-bezier(0.16, 1, 0.3, 1)` (a slow, confident decelerating ease, like ink settling). Border-animate is the dominant interaction pattern: every focusable element gets a terracotta stroke that draws itself on focus and un-draws on blur. Total inline JS ≤ 60 lines: an IntersectionObserver to trigger folio entry, a typewriter-effect for the terminal, and a scroll-rate parallax delta between the two columns. No frameworks, no libraries. **Storytelling priority:** The site does not "convert"; it **welcomes**. A reader should leave with the feeling that they have been admitted into a private workshop, not that they have been sold a service. The narrative arc across the seven folios: *opening → thesis → craft → log → press → telemetry → colophon*. JJUGGL.dev is the manuscript; the visitor is the next scribe. ## Uniqueness Notes 1. **Cyberpunk warmed into terracotta** -- the seed combination of `aesthetic: cyberpunk` (5%) with `palette: terracotta-warm` (0%) is essentially unprecedented in the cohort. This design refuses every cold-neon cliché of the cyberpunk genre and replaces them with Bolognese rooftop ochre, Phosphor Amber CRT glow, and oxblood (never pure black). The "punk" survives only as warmth and scan-lines. 2. **Book-scholarly motifs** (1%) **fused with terminal HUD** -- manicules, drop-caps, Roman folio numerals, pilcrows, and catchwords are the native iconography of pre-1700 manuscripts, vanishingly rare in the cohort. Pairing them with a live-feeling terminal column produces a "developer scriptorium" register that is not present in any other site I have surveyed. 3. **Optimistic-bright tone** (4%) **applied to cyberpunk subject matter** -- where 99% of cyberpunk websites lean dystopian, JJUGGL.dev is hopeful, generous, and sunlit. The dev is a craftsperson, not a hacker-against-the-system. 4. **Custom-illustration imagery** (2%) executed as **17th-century technical engravings of modern dev concepts** -- there is no photography, no stock vector art, no isometric icons, no glassmorphic chrome. Every visual is a hand-drawn line-engraving in iron-gall brown on vellum, depicting CPUs as anatomical hearts and APIs as juggled spheres. 5. **Persistent rigid 50/50 split-screen** (10%) **as a manuscript spread**, never collapsing on desktop, with the two halves scrolling at slightly differential parallax rates -- the spine of an open book that is also a CRT-and-manuscript dual-display. Most split-screens are momentary hero devices; here the split is the entire site, every folio. 6. **Bebas-bold display** (3%) **set against EB Garamond body and JetBrains Mono terminal** -- a three-font system that simultaneously evokes industrial signage, 16th-century printing, and modern code, none of which is conventionally used in cyberpunk. 7. **Border-animate as binding-thread metaphor** (5%) -- the perpetually-stitching SVG dasharray border is reframed as the thread that holds the codex together, not as a generic UI shimmer. **Avoided patterns from frequency analysis:** centered layout (99%, the default trap), photography (99%), warm gradient palette in its lazy form (69%), parallax used as a mere scroll trick (69%), stagger animations (97%), and humanist body type without scholarly specificity (39%). Also avoided: nature motifs (76%) and tech motifs of the conventional circuit-board kind (15% / 11%) -- the motifs here are scholarly-codex, not nature-tech. **Chosen Seed/Style:** aesthetic: cyberpunk, layout: split-screen, typography: bebas-bold, palette: terracotta-warm, patterns: border-animate, imagery: custom-illustration, motifs: book-scholarly, tone: optimistic-bright. Inspirational seed phrase from `seeds.json`: "cyberpunk data-viz dashboard" -- reinterpreted as a scholar's data-viz codex.