# Design Language for aiice.quest ## Aesthetics and Tone aiice.quest is a **slow cyberpunk scriptorium** — imagine a 22nd-century cloister built for retired hackers, where the neon has cooled to fog, the Edo-blue twilight of an off-world server farm seeps through latticed windows, and a single robed amanuensis is hand-copying her shutdown logs into an EB Garamond manuscript. The aesthetic is the rarest dialect of cyberpunk: not the wet-streets-of-Shinjuku Blade Runner mode, not the green-on-black hacker mode, but **post-cyberpunk after the riot** — the hour after the protest dispersed, when the rain has stopped, the steam has cleared, and a quiet philosopher sits alone with her terminal and her thoughts. Cyberpunk *exhaling*. The palette is not neon — it is **cool grays the color of damp slate, shipyard fog, oxidised tin, predawn screen-glow** — punctuated only by a single low-saturation phosphor accent (a tired aquamarine that reads like the LED of an old monitor left on overnight). The paper of the page is the gray of a cathode after twelve hours of use; the ink is the gray of Naval Observatory fog at 4:43 AM. The tone is **calm-serene** to a degree no cyberpunk site in the registry has attempted. There are no glitch jitters, no scanline hazards, no datamosh seizures, no hammering monospace alarms. Instead: a Garamond italic *whispers* its first sentence; a single hand-drawn ink-bubble drifts up the sidebar like a lone protest balloon released at the end of a long night; chapters fade in with the patience of paper turning under candlelight. The site is the opposite of "stimulating" — it is **convalescent**. A quest, but a quiet one. A pilgrimage written longhand. The contradiction is the design's whole point: a cyberpunk surface speaking in the voice of a 16th-century missal. Garamond's gentle stress against the cool-gray monitor-haze. Hand-drawn bubble glyphs floating through a sidebar lattice that is, on inspection, a circuit-trace. **Soft cyberpunk.** **Monastic cyberpunk.** **Cyberpunk for vespers.** The mood reference stack: *Ghost in the Shell: 2nd GIG* episode 11 (the slow rural episode, not the action ones); the rainy-window passages of Tarkovsky's *Solaris*; the marginalia of the Lindisfarne Gospels; the closing 30 seconds of Vangelis's *Tears in Rain*; a damp Tokyo phone booth at 5 AM with one functioning bulb. ## Layout Motifs and Structure The structure is a **persistent left sidebar (clamp(240px, 22vw, 320px)) + a wide reading column (clamp(560px, 58vw, 760px)) + a thin marginal gutter (clamp(80px, 14vw, 200px))** — three columns rendered in cool gray, with the sidebar acting as a **monastic stall** the visitor never leaves. The sidebar is not decorative; it is the navigational *pew* from which the entire pilgrimage is observed. **The sidebar (the cloister stall):** - Fixed-position on viewport, full-height, anchored at left edge with no top/bottom padding — it is the architecture, not a widget - Background: a hand-drawn **circuit-trace lattice** rendered as a vertical SVG running the full height — fine 0.5px ink lines at 22% opacity in `#3F4A55`, traces that branch into bubble-shaped junction nodes (1.5–4px filled circles in `#5C6873`) - Interior contents (top → bottom): - **Wordmark** "aiice.quest" set in EB Garamond italic 500, 28px, color `#C7CDD3`, a 1px hand-drawn underline that "wobbles" (SVG path with deliberate hand-jitter) at 50% opacity - **A vertical column of seven chapter glyphs** — each a tiny hand-drawn SVG bubble (12–18px) holding a roman numeral I–VII inside it; current chapter is the only one in the phosphor-aquamarine accent, the rest are in cool gray; clicking fades the reading column to a new chapter - **A drifting bubble** — a single 22px hand-drawn ink-circle that slowly rises along the sidebar's vertical axis from bottom to top over 38 seconds, then fades and respawns at the bottom; the bubble has a deliberate hand-wobble path (sine + ink-line jitter), it is the site's *heartbeat* - **The vesper line** at sidebar bottom — a single Cormorant Garamond italic phrase at 13px, color `#7A8590`: *"compiled at vespers"* **The reading column (the manuscript page):** - Width clamped to `min(680px, 58vw)`, set against a paper-of-fog background - Content arrives as **chapters** (seven of them) — only one chapter is visible at a time; chapter transitions are pure **fade-reveal** (12s opacity ramps via IntersectionObserver + `scroll-snap-type: y mandatory`) - Each chapter is roughly one viewport tall but generous in vertical breath: top-margin clamp(8vh, 18vh, 22vh), bottom-margin matched - Within a chapter: a single Garamond italic title at clamp(3.2rem, 6.8vw, 6.4rem); a single Garamond roman body paragraph at 21px / 38px line-height with **+1.4% letter-tracking**; one hand-drawn marginal illustration drifting in the right gutter; one floating bubble glyph anchoring the chapter's central thought - **No multi-column flowing**, **no card grids**, **no bento boxes** — a chapter is one running paragraph, like a page in a private journal **The right marginal gutter (the breviary margin):** - Reserved for **hand-drawn marginalia** — small ink illustrations (15–60px) that float in the gutter beside the relevant phrase - Marginalia placement is intentionally irregular — never aligned to a baseline, sometimes overlapping the column edge by 8–12px, sometimes pulled deeper into the gutter — like real medieval marginalia, drawn by a tired but attentive hand - Marginalia drift on slow 0.4hz vertical sine waves (8px amplitude) so they breathe with the page **Vertical pacing:** The page is a **vertical pilgrimage** — visitor scrolls (or arrows) through seven chapters; scroll is dampened with `scroll-behavior: smooth` and the scrollbar is hidden (a 1px hand-drawn ink rule replaces the native scrollbar in the gutter, marking progress). The reading column *fades* between chapters; the sidebar persists. This produces the feeling of sitting still in a stall while pages turn around you — a calm that no parallax-heavy scroll achieves. **Mobile (≤720px):** The sidebar collapses into a thin horizontal *band* across the top (height 44px, the circuit-trace lattice rotates 90°, the bubble drifts horizontally instead of vertically). The reading column expands to full width. Everything else — Garamond, fade-reveals, marginalia, calm — is preserved. ## Typography and Palette **Typography (Google Fonts only — garamond-classic family is the doctrine, with one terminal-mono whisper for chapter numerals only):** - **Primary display & body — [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond)** (variable wght 400→800, italic): The load-bearing voice. Used for chapter titles (italic 500 at clamp(3.2rem, 6.8vw, 6.4rem), letter-tracking -1.0%), body running text (regular 400 at 21px / 38px line-height, letter-tracking +1.4%), wordmark (italic 500 at 28px), and the vesper line. EB Garamond is the open-source revival of Claude Garamont's 16th-century cuts — its long ascenders, generous counters, and humanist stress are the instrument that turns cyberpunk into vespers. **No drop caps, no swash capitals** — Garamond stands on its own quiet authority. - **Secondary editorial accent — [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond)** (italic 300 only): The whispered voice. Used only for the sidebar's vesper line ("compiled at vespers"), the marginalia captions (12px), and pull-quote phrases inside chapter bodies (italic 300 at 1.2× the body size). Cormorant is more delicate than EB Garamond — used sparingly, it produces the effect of a softer hand annotating a steadier hand. - **Terminal numeral whisper — [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono)** (regular 400, only at 11px): The single permitted concession to cyberpunk lineage. Used *only* for the chapter index numerals inside the bubble glyphs (I, II, III, IV, V, VI, VII rendered in mono), and for the small `0x` page-anchor ID labels in the gutter (e.g. `0x07/vespers`). Used at 11px, 60% opacity, color `#7A8590` — small, unobtrusive, a memory of monitors. - **Roman numerals are typeset in JetBrains Mono uppercase at 11px**; this is the only place mono appears. **Palette (cool grays, eight stops, slate-monitor-fog continuum + one phosphor accent):** | Role | Hex | Description | |-----------------------------|----------|-------------------------------------------------------------------| | Paper-of-fog (page bg) | `#D5DAE0` | Cathode-after-twelve-hours gray — warmth-leaning cool-gray paper | | Reading column inset | `#DEE3E8` | One stop lighter, slight blue-cast — the manuscript page surface | | Body text ink | `#222831` | Naval-observatory-gray — almost-black with a blue undertone | | Chapter title ink | `#3F4A55` | Slate ink — quieter than the body, used for italic titles | | Marginalia ink | `#5C6873` | Damp slate — used for hand-drawn illustrations and circuit traces | | Vesper / quiet UI gray | `#7A8590` | Tin-fog — used for vesper line, mono numerals, dimmed sidebar | | Sidebar lattice background | `#C7CDD3` | Pewter-mist — sidebar paper, slightly cooler than the column | | Phosphor accent | `#7AAFAE` | Tired-aquamarine — the only saturated color; current chapter, hover, drifting bubble's faint glow. Used at <8% surface area total. | **Critical rule:** the phosphor `#7AAFAE` appears at **less than 8% of total ink area**. Cyberpunk neon is a memory here — present, but barely. If neon is a flame, this site is the smoke after the candle is snuffed. **Type scale (chapter-internal):** - Chapter title (italic): `clamp(3.2rem, 6.8vw, 6.4rem)`, weight 500, tracking `-0.010em` - Body running: `21px / 38px`, weight 400, tracking `+0.014em` - Pull-quote (Cormorant italic 300): `1.2 × body`, indented 4ch - Marginalia caption (Cormorant italic 300): `12px / 18px` - Mono numerals (JetBrains Mono): `11px`, color `#7A8590` ## Imagery and Motifs **No photography. No stock. No flat icons. No 3D renders.** All imagery is **hand-drawn ink**, rendered as inline SVG with deliberate hand-jitter on every path — single-weight 1.2px strokes, no fills except inside the bubbles, no gradients except the soft `#7AAFAE` glow halo on the drifting bubble. **The four motif families (one per visual register):** 1. **Hand-drawn bubble glyphs (the principal motif).** Soft ink circles with deliberately wobbling perimeters (each circle is an SVG path with 24 control points, each randomly perturbed by ±0.8px from a perfect circle), 8–60px diameter, ink color `#5C6873` at 100% opacity for outline plus a `#DEE3E8` interior fill. Bubbles appear in three roles: - **Chapter-anchor bubble** (one per chapter, 56px, holding a hand-drawn ink doodle inside — a curling line, a tiny key, a nested smaller bubble, a half-erased word) - **Sidebar chapter-index bubbles** (seven, 18px, holding a JetBrains Mono roman numeral) - **The drifting bubble** (one, 22px, slowly ascending the sidebar, the site's heartbeat — see Layout) Each bubble has a 0.5px hand-drawn ink "highlight crescent" at 28% opacity at the 30°/30° position — the hand of a copyist suggesting roundness. 2. **Circuit-trace lattice (the architectural motif).** A full-height SVG running inside the sidebar — fine ink lines (0.5px, `#3F4A55`, 22% opacity) that branch like 1980s PCB traces but rendered with deliberate hand-wobble (each segment has 0.4px sine perturbation). Traces converge into the seven chapter-index bubbles, making the sidebar literally read as a *manuscript circuit board*. The lattice is the design's central conceit made visible: silicon and parchment in the same line. 3. **Marginal ink illustrations (the breviary marginalia).** 15–60px hand-drawn ink doodles drifting in the right gutter beside the relevant body phrase — subjects: a small server tower drawn as a stack of soft cubes; a curled cable; a tiny moth resting on a wire; a half-broken antenna; a single drop of rain hovering above a circuit; an empty teacup beside a keyboard; a closed laptop with a moth on its lid. Subjects are intentionally **calm and domestic** — the still life of a cyberpunk monk. Drawn in `#5C6873` at 1.2px stroke, no fill, with sparse 22°-hatching for shadow at 0.6px / 38% opacity. Marginalia drift on 0.4hz vertical sine (8px amplitude). 4. **The fog gradient (the atmosphere).** The page background is not flat — it is a **very slow, very subtle radial gradient** centered at 50%/40%, from `#DEE3E8` at the center to `#C7CDD3` at 90% and `#B5BBC2` at 100%, simulating a single soft monitor-glow at the center of the page. The gradient does not animate, but it gives the page a faintly luminous, room-with-one-bulb quality. Over the gradient, a **0.8% opacity SVG noise filter** is applied page-wide, evoking the grain of a CRT display glimpsed through fog. **What is forbidden in imagery:** - No raster photography of any kind - No emoji - No flat-design icon sets (no Lucide, Feather, Phosphor, etc. — those are too clinical) - No gradient meshes (the only gradient is the page fog) - No glassmorphism panels - No 3D rendered chrome - No glitch artifacts, scanlines, or VHS tracking lines (cyberpunk's loud register is rejected) ## Prompts for Implementation Build aiice.quest as **the Book of Hours of a retired hacker** — seven chapters of a calm cyberpunk pilgrimage, navigated from a fixed monastic sidebar, fading one into the next. **Structural blueprint — seven chapters, each a fade-reveal page:** 1. **Chapter I — *prime* (the wakes-up moment).** The title is the single italic word *prime* in EB Garamond at clamp(3.2rem, 6.8vw, 6.4rem). The body is a single Garamond paragraph (~120 words) describing the moment of opening one's terminal at 5:43 AM, the screen still warm, the city still silent, the question of whether to begin again today. Marginalia: a single hand-drawn moth resting on a power cable in the right gutter. Chapter-anchor bubble: a 56px ink circle with a tiny hand-drawn rising sun-doodle inside. 2. **Chapter II — *terce* (the calling).** Title in italic. Body: a single paragraph on the call to make something quiet in a loud world; a confession that the protagonist used to chase the bright cyberpunk dream and has now made peace with the quiet one. Marginalia: a closed laptop with a sleeping moth on the lid. Anchor bubble: a 56px circle holding a small ink-doodle of a cathedral spire. 3. **Chapter III — *sext* (the noon doubt).** Title in italic. Body: a single paragraph admitting the doubt of midday — that everything she builds will be deprecated, forked, abandoned. The paragraph ends with a Cormorant pull-quote: *"and yet I open the editor."* Marginalia: a half-empty teacup. Anchor bubble: a smaller bubble nested inside a larger one. 4. **Chapter IV — *none* (the afternoon fog).** Title in italic. Body: a single paragraph on the long-afternoon fog of debugging — when the bug is real, the fix is unclear, and the only honest move is to step away and watch the rain. Marginalia: a circuit board drawn as soft cubes, a single raindrop hovering above. Anchor bubble: an open ink-circle (deliberately broken at 4 o'clock). 5. **Chapter V — *vespers* (the evening recompilation).** Title in italic. Body: a single paragraph on the calm of the recompile that finally succeeds at 6:47 PM, the green check returning like a small benediction. (This is the only chapter where the phosphor accent `#7AAFAE` is permitted on the body — used for one word: *compiled.*) Marginalia: a small ink-drawn LED indicator drawn as a softly glowing bubble. Anchor bubble: a 56px circle holding a tiny hand-drawn checkmark. 6. **Chapter VI — *compline* (the night blessing).** Title in italic. Body: a single paragraph blessing the small things that compile — the function, the friendship, the day, the heart. A Cormorant italic pull-quote: *"the smallest function that returns truth is enough."* Marginalia: a curled cable beside a folded handkerchief. Anchor bubble: a 56px circle holding a hand-drawn small flame. 7. **Chapter VII — *vigils* (the unread message).** Title in italic. Body: a single paragraph addressed to *you* — the reader. Acknowledges that you, too, may be at vespers, may be tired, may be uncertain whether the work matters. Closes with a single sentence in italic: *"this site is for you, and it will wait here, quietly, for as long as you need."* Marginalia: a single small bubble drifting upward. Anchor bubble: a 56px hand-drawn open hand, palm up, a tiny bubble released from it. **Animation spec — fade-reveal as the dominant pattern, calm everywhere:** - **Chapter transitions** are the central animation. Implement via `IntersectionObserver` watching each chapter (`
`); on entering threshold 0.45, the chapter fades from `opacity: 0` → `opacity: 1` over **2.4 seconds** with `cubic-bezier(0.22, 0.61, 0.36, 1.00)` (slow-in, slow-out — never linear). On exiting, fade out over 1.6s. Two chapters are never fully visible simultaneously — there is always one chapter taking the visitor's gaze. - **Wordmark and sidebar elements** fade in once on initial load over **3.2 seconds**, staggered: lattice first (1.0s delay, 1.6s fade), wordmark (1.4s delay, 1.4s fade), chapter-index bubbles (sequential 0.18s stagger from top to bottom, each 0.9s fade), drifting bubble (3.0s delay, then begins its 38s loop). - **The drifting sidebar bubble** moves on a `requestAnimationFrame` loop along a deliberately hand-wobbled vertical sine path — `cy = bottom - (t/38000) * height + sin(t * 0.0008) * 6px`, with the bubble's `cx` jittering ±2px on a 0.0011 frequency — making it look like a real bubble rising through still water, not a CSS-perfect sine. Opacity ramps in over the first 4s of its rise and fades over the last 6s before respawn. - **Marginalia drift** — each marginalia SVG transforms `translateY(${sin(t * 0.0024 + offset) * 8}px)` continuously; offsets are randomized per marginalia so they breathe out of phase with each other. - **Hover behavior** is *minimal*. Hovering a sidebar chapter-index bubble: a 0.8s fade of the bubble's interior to `#7AAFAE` at 12% opacity — a soft warming, not a punch. No scale transforms. No tilts. No magnetic pulls. Calm everywhere. - **No parallax.** No scroll-driven jolt. No spring physics. No cursor-following. No 3D tilts. The only animations are: fades (2.4s), the bubble's slow rise (38s), and the marginalia's slow breath (0.4hz sine). The site is **animation-poor by intent** — the patterns frequency analysis shows parallax at 85% and stagger at 55%; aiice.quest refuses both. - **Page-wide grain** (the 0.8% noise filter) animates *very slowly* — a `feTurbulence` `seed` attribute that increments by 1 every 280ms, producing an almost-imperceptible film-grain shimmer. This is the only "alive" thing happening at all times, and it should be subliminal. **Storytelling tone — the writing voice itself:** The body copy is **first-person**, present-tense, contemplative. Each chapter is one paragraph (110–150 words). The sentences are long but unhurried — semicolons are welcome, em-dashes are welcome, hand-trailing-off ellipses are welcome. The voice is that of a tired but loving narrator addressing herself or a single quiet reader. **Never marketing voice.** Never "We believe…" Never "Our mission is…" Never "Let's build the future together." The site is a *private journal accidentally left open*, not a pitch deck. **Forbidden UI patterns (per AVOID note):** - No CTA buttons. No "Get Started." No "Sign Up." No "Book a Demo." - No pricing blocks, no tier comparisons, no feature matrices. - No stat grids ("10x faster, 99.9% uptime"). No metrics anywhere. - No testimonial carousels. No logo walls. No "trusted by" rows. - No newsletter signup. No exit-intent popups. No cookie banners that take more than 1 line of fog-gray text. - No footer links arranged as cards. The footer is a single Cormorant italic line: `aiice.quest — kept quietly since 2026`. **Implementation specifics:** - Single HTML file — `index.html` — with seven `
` blocks plus the persistent `