# Design Language for gabs.news ## Aesthetics and Tone gabs.news is a **whimsical-creative maximalist newsroom that thinks it is a 19th-century private library at midnight, except the books glow.** The conceit: every "story" is a marginal annotation in some larger, vanishing book, and the reader is a curious interloper who has slipped past the velvet rope into the librarian's office. The visual register pairs the dust-and-walnut warmth of an old reading room (foxed paper, tobacco-stained leather, cracked spines, the smell of pencil shavings you can almost see) with the impossible: every gilt letter, every page-edge, every spine-stamp is gently radioactive, leaking a soft neon halo as if the books themselves were lit from within by a borrowed phosphorescence. This is not cyberpunk — there are no terminals, no scanlines, no chrome — and it is not pure dark-academia either. It is the moment in a children's book where the librarian opens a drawer and the contents hum. The mood is **playfully erudite**: the site speaks in footnotes, asides, marginalia, and the occasional crossed-out word. Headlines wear serifs the size of theatre marquees. Captions whisper in 11pt italic. Pull-quotes have hand-drawn brackets. There is a cat curled somewhere — you will find it. The tone of voice mirrors a curator who has had two glasses of port and now wants to tell you, urgently, about a typo in the 1873 edition. Maximalist, but never frantic; densely layered, but never noisy. Every surface is doing something — bearing a watermark, a stamp, a star-marginalia, a faint grid of ruled lines — and yet the eye always knows where to land, because the typographic hierarchy is brutal and confident. Inspirations: the endpapers of Edward Gorey, the layered chaos of an Alvin Lustig book jacket, the warm gloom of the Morgan Library reading room, the deadpan wit of *The Believer* magazine's marginalia, Sister Corita Kent's ruled-paper screenprints, and a single, very specific memory of a thrift-shop encyclopedia whose gold foil titles caught a neon storefront sign and seemed, briefly, to be plugged in. ## Layout Motifs and Structure The site is built on a **persistent left sidebar** — a vertical "card catalog drawer" that is always present, always scrolling at a different rate than the main reading column, and which functions as both navigation and ambient companion. This sidebar is roughly 320px wide on desktop, anchored flush-left, and is rendered to look like a stack of index cards seen edge-on, with hand-typed tab labels poking up at irregular intervals. Clicking a tab does not navigate away — it pulls a card *forward* in 3D, layering it over the catalog stack with a soft scale-hover lift, and the card's contents reflow into the main reading area to its right. The drawer never collapses, never slides off-screen. It is the spine of the site, and it should feel like furniture: heavy, present, slightly worn. The **main reading column** to the right of the drawer is laid out as a **scrollable bound codex** — a single deep column, max-width approximately 720px on a 1440px viewport, surrounded by generous *inner* margins (think 200px on each side of the text block) that are NOT empty. Those margins are alive with **marginalia**: hand-drawn arrows, asterisks, "see also" notes, miniature illustrations, page numbers in a different typeface, and the occasional smudged thumbprint. The marginalia is genuine content (related links, footnotes, asides) but is sized down to 11–13px and rotated 1–3 degrees off-axis to feel handwritten. Long-form articles use **drop caps** the size of a fist (clamp(4rem, 8vw, 7rem)) in display-bold serif, often overlapping the second and third lines of body text the way a Victorian frontispiece would. Between sections, the page does not use horizontal rules. Instead, it uses **printed dingbats** (decorative ornaments — fleurons, asterisms, manicules — pulled from a custom SVG ornament set) that bloom on scroll. The page is divided not into "sections" but into "chapters," each prefixed by a hand-stamped chapter number in a circle and a roman-numeral folio in the upper margin. Section transitions occasionally include a **double-spread "plate"** — a full-bleed illustrated divider that breaks the column entirely, suggesting the moment in an old book where you turn the page and find a tipped-in color plate. These plates are where the neon-glow imagery lives most aggressively. A small **"erratum strip"** runs along the bottom 32px of the viewport — a marquee-style ticker (*not* an aggressive newsticker, but a slow-moving line of typewritten corrections to articles, in monospace, that only a careful reader will notice). Above this, the foreground page floats with a soft drop shadow on a subtly textured backdrop, as if a single sheet has been lifted from a larger pile. Mobile collapses the sidebar into a **bottom drawer** that pulls up like a real drawer (with a brass-handle SVG affordance), and the marginalia migrate inline as collapsible footnote chips marked with daggers and double-daggers. ## Typography and Palette **Typography (all Google Fonts, verified available):** - **Display / Headlines**: `Abril Fatface` — a high-contrast didone display serif with theatrical thick/thin transitions. Used at clamp(3.5rem, 8vw, 9rem) for hero headlines, drop caps, and chapter numerals. This is the show pony: tracked tight, set in deep ink-black with a 1px cyan offset shadow that creates a faint chromatic fringe (the "neon-glow" motif applied subtly to type itself). - **Secondary Display / Subheads**: `Playfair Display` (variable, with optical-size axis pushed to display) — used for kickers, deck text, and the occasional all-small-caps section label. Lighter weight, more readable, the well-mannered cousin to Abril Fatface. - **Body / Reading**: `Lora` — a transitional book serif designed explicitly for long-form on-screen reading. Set at 19px / 32px line-height in the main column, with proper old-style figures and discretionary ligatures enabled (`font-feature-settings: "onum", "dlig"`). Generous indents on paragraph starts (1.5em) — no blank lines between paragraphs, just like a real book. - **Marginalia / Hand**: `Caveat` — a casual handwritten script. Used exclusively for margin notes, "see also" arrows, and the cat's occasional commentary. Sized down to 13px, color-shifted to a faded sepia. - **Monospace / Errata**: `JetBrains Mono` — used only for the bottom errata ticker, the date stamps in the sidebar, and any "version control" affordances. Tracked wide. - **Stamp / Cataloguing**: `Special Elite` (a typewriter face) — used for sidebar tab labels, library stamps ("PROPERTY OF GABS.NEWS / DO NOT REMOVE FROM READING ROOM"), and the chapter-card metadata. **Palette — "muted-vintage with phosphorescent leaks":** - `#f4ead5` — *Foxed Paper.* The dominant page background. A warm cream that suggests a book that has spent a decade by a sunny window. NOT white. Never white. - `#2b1d14` — *Walnut Ink.* The body text and primary line color. A near-black with strong brown undertones, the color of a fountain pen run dry on cream paper. - `#7a3b2e` — *Tobacco Leather.* The sidebar drawer's primary surface tone, also used for chapter numerals, drop caps, and primary call-out borders. Reads as oxblood-meets-cognac. - `#a8956b` — *Tarnished Brass.* Accent color for hairline rules, brass handles, page-edge gilt, and the underlines beneath links (which are double-underlines in this color, never single). - `#d9b27c` — *Pressed Marigold.* The "older highlight" color — used for blockquote backgrounds, sidebar card backs, and the soft wash behind featured marginalia. Like dried flower petals pressed in a book. - `#5c4a3a` — *Pencil Shadow.* Secondary text, captions, dingbats, and footnote markers. Warm grey-brown, never neutral grey. - `#e8e4d4` — *Onion-Skin Overlay.* Translucent layer color used for inner-margin tints and the subtle ruled-paper grid background. **The phosphorescence (neon-glow) — used surgically, not pervasively:** - `#7df9ff` — *Library Cyan.* The "haunted" glow color. Applied only to: (a) the chromatic fringe behind display headlines, (b) gilt edges of plate illustrations, (c) the cat's eyes, (d) hover-state outlines on cards, and (e) the underlines on currently-active sidebar tabs. Never used as a background, never used at full opacity (capped at 0.55). - `#ff7eb6` — *Dye-Bleed Pink.* The secondary glow, used for footnote markers (daggers, double-daggers), the erratum ticker accent, and one hidden Easter-egg surface per page. Even more restrained than cyan — appears on roughly 3% of surface area. The two neon colors should never appear on the same element. They alternate by chapter, like ribbons in a missal. ## Imagery and Motifs The visual content of gabs.news is built around **the bookplate, the marginalia, and the haunted gilt edge.** Every image asset on the site descends from one of three families: **1. Engraved Plates (re-imagined).** The "tipped-in" full-bleed plates between chapters are SVG illustrations rendered in the style of 19th-century scientific engravings: cross-hatched, monochrome line art on cream — fish anatomy, celestial charts, clockwork diagrams, plant taxonomies, hand-drawn maps of imaginary cities — but with one small element of each plate filled with the neon-glow cyan or pink, as if a single component had been replaced with something modern and alien. A botanical plate of a fern, but the spore-bearing sori are little points of cyan light. A celestial map, but one star is unmistakably a working LED. These plates are the most maximalist surfaces on the site and are the places where the "library that hums" thesis is most legible. **2. The Card Catalog Vocabulary.** Every navigational and metadata element draws from the visual language of the manila index card, the Dewey decimal label, the date-due slip stamped in purple ink, the perforated tab, the typed call number. These are rendered as crisp SVG — never as raster textures — and are layered with believable wear: a faint coffee ring, a paper-clip rust mark, a corner-fold. The sidebar drawer is the fullest expression of this. Card-stock has a visible *fiber texture* (a noise overlay at 4% opacity, warm-tinted). **3. Hand Marginalia (custom SVG).** A small library of original SVG marginalia: a manicule (the pointing-finger symbol) drawn in three orientations, a fleuron, an asterism (three asterisks in a triangle), an obelus (dagger), a diple (pointing arrow), hand-drawn brackets, a curling underline, a checkmark, a star. These are inlined as SVG and animate on scroll: the manicule's finger taps once when its paragraph enters the viewport. The asterism rotates 30 degrees as the cursor passes. The fleuron blooms — its petals path-draw over 600ms. **Recurring motifs and Easter eggs:** - **The Reading-Room Cat.** A small SVG cat — about 60px tall — appears once per page, curled in an unexpected corner: behind a drop cap, on top of the sidebar drawer, sleeping in the gutter between marginalia. Its eyes are closed by default. On cursor proximity (within 200px), the eyes open as two pinpricks of `#7df9ff`. It does nothing else. Find the cat, and the cat finds you. - **Ruled paper substrate.** Behind every long-form chapter, the background carries a near-invisible horizontal rule pattern at the body line-height — like notebook paper. At ~3% opacity. You don't see it. You feel it. - **Stamp impressions.** Each chapter has a circular library stamp embossed in the upper margin — partially smudged, slightly off-register, in a faded sepia. The stamp text is the publication date in a circular path, with the chapter's call number in the center. Each chapter has a *different* stamp. - **The flickering letter.** In every Abril Fatface headline, exactly one letter has its 1px cyan offset shadow gently animated (0.3s breathing fade between 0.15 and 0.55 opacity). The letter is chosen pseudorandomly per page-load. The effect should be barely perceptible — readers should wonder if they imagined it. - **Foxed-paper noise.** A subtle, paper-fiber noise texture overlay (SVG turbulence filter or a 2KB tiled PNG) is applied at 6% opacity to the entire page background, warmer in the corners than the center, simulating age-darkened edges. - **Dingbat dividers.** Between subsections, an SVG fleuron sits centered with hairline brass rules extending left and right. On scroll into view, the fleuron's centerlines path-draw and the side rules unfurl like ribbons from the fleuron outward. - **Page-edge gilt.** The right edge of the main reading column carries a 2px vertical strip in `#a8956b` (Tarnished Brass), with a faint cyan inner glow — as if you're seeing the gilded edge of a closed book peeking from the side. On mobile, this migrates to the top of the page. ## Prompts for Implementation **Narrative arc.** The site should be experienced as walking deeper into a private library. The opening should establish atmosphere before content — the user lands in the foyer, not the index. There is no hero CTA. There is no pricing block. There are no statistics. There is no "trusted by" logo wall. There is no newsletter modal. *None of these things exist in this library.* What exists: a heavy door (the loading state), a librarian's desk (the sidebar drawer that is always present), and an open book (the reading column). **1. The Opening Sequence (The Reading Room Threshold).** On initial page load, the viewport is `#2b1d14` (Walnut Ink) — nearly black, with the foxed-paper noise texture barely visible. After 400ms, a single pinprick of `#7df9ff` appears at center, expanding over 1.2s into a circular reveal (a clip-path animation) that wipes outward to expose the page beneath: the cream paper, the sidebar drawer, the headline. Concurrently, the Abril Fatface masthead types itself in (per-letter stagger of 50ms) with each letter's 1px cyan fringe blooming on appearance. Once complete, the cyan fades to its idle 0.15 opacity. Total intro: ~1.8 seconds. No spinner, no progress bar. **2. The Sidebar Drawer (always present).** Render the drawer as a stack of perspective-rotated cards (CSS `transform: perspective(1000px) rotateY(-8deg)`). The cards stagger backward into depth. Each card has a typed tab label sticking up. On hover of a tab, the tab rotates forward 12 degrees and scales to 1.05 (the **scale-hover** pattern, applied with a slight spring overshoot — `cubic-bezier(0.34, 1.56, 0.64, 1)`). On click, the card pulls forward to z-index dominance, its content rendering into the right column. The drawer maintains its own scroll position independent of the page. Use `position: sticky` on a containing flex parent, NOT `fixed` — the drawer should respect the document, not float over it. **3. The Reading Column (the codex).** Single column, generous margins, drop caps, marginalia in the gutters. On scroll, marginalia elements fade in with a 1–3 degree rotation and a slight position offset (left margin items drift in from -8px X; right margin items from +8px X). Use IntersectionObserver, not scroll listeners. Ornaments between sections path-draw their SVG strokes (`stroke-dasharray` / `stroke-dashoffset` animation) over 800ms when entering the viewport. **4. Plate Pages (the chapter dividers).** Every 3–5 chapters, insert a full-bleed plate page that breaks the column. These are immersive moments: the engraving fills the viewport, the title card overlays in Abril Fatface, and the neon-glow accent breathes. On scroll past, the plate fades back into the page rhythm. Implement with `position: sticky; top: 0; height: 100vh;` for a parallax-like pinning effect during scroll. **5. Hover and interaction language (scale-hover everywhere).** The dominant interaction pattern is **scale-hover with subtle rotation**. Cards in the sidebar lift to 1.05 and tilt 1.5 degrees. Marginalia ornaments scale to 1.15 on hover. Headlines do not scale on hover but their cyan fringe intensifies (opacity 0.15 → 0.55 over 200ms). Links in body copy do not change color on hover — instead, their double-underline animates with a leftward sweep, the brass color brightening to marigold. Cat eyes open within a 200px proximity. All transitions use `cubic-bezier(0.34, 1.56, 0.64, 1)` for the slight spring overshoot that suggests something physical and slightly imperfect. **6. The erratum ticker.** A bottom strip (32px tall) runs across the viewport at the very bottom edge. Inside, monospace text scrolls leftward at 30px/second — fictional "corrections" to articles ("In our previous chapter, the typesetter substituted *fewer* for *less*; the editor regrets nothing." — "The cat is, in fact, a calico, and was misdescribed."). This is decorative humor, not load-bearing UI. Pause on hover. Pink underline accents on dagger marks. **7. Cat behavior.** The cat is rendered as inline SVG. Its position per page is determined by a deterministic hash of the page URL so it is consistent on reload but unpredictable across pages. On cursor proximity (use a single global mousemove listener, throttled to rAF), the cat's eyes open: two `` elements with their `r` attribute animated from 0 to 2 over 240ms. When the cursor leaves proximity, the eyes close (r animates to 0). **8. Animation discipline.** Despite the maximalist visual density, the *movement* of the site should be restrained. No element should be in continuous motion EXCEPT the erratum ticker and the breathing flicker letter. Everything else animates only on event (scroll, hover, proximity, click). The site should feel **calm in motion**, *busy in stasis* — the inversion of a corporate site, which is calm in stasis and busy in motion. **9. What does NOT appear.** No CTAs above the fold. No "request a demo" buttons. No statistics callouts ("10M+ readers"). No pricing tables. No comparison grids. No newsletter signup modal. No cookie banner styled like a UI element (legal text, if needed, lives discreetly in the bottom marginalia). No social-share floating bar. No "related articles" carousel. The site is a reading experience and a small wonder, not a conversion funnel. **10. Color application discipline.** The neon glows (`#7df9ff` and `#ff7eb6`) must never occupy more than ~5% of any given viewport's pixel surface. They are jewels. The vintage palette does the heavy lifting. If a designer ever feels the urge to make a button cyan: the answer is no. Cyan is for ghosts, gilt, and cats' eyes only. ## Uniqueness Notes **Differentiators from other designs in the collection:** 1. **The "haunted library" thesis.** No other design pairs a muted-vintage book-scholarly aesthetic with surgical neon-glow phosphorescence as its core conceit. Most book-scholarly designs lean fully dark-academia-mysterious-moody (very common) or fully cottagecore-warm. This site invents a third thing: a warm, cream-paper, cognac-leather library that has been *haunted by a single phosphorescent ghost*. The neon is rare, deliberate, and narratively specific — it represents the books leaking their own contents. 2. **Maximalist density without maximalist motion.** Maximalist aesthetic appears in 0% of existing designs (per frequency analysis), making this site genuinely novel in the collection. But beyond rarity, the implementation is contrarian: the visual surface is dense, layered, and ornamented (marginalia, stamps, dingbats, plates, ruled paper, foxing, gilt edges), yet the kinetic surface is restrained. Most maximalist sites in the wild compensate for visual density with frantic animation. This one does the opposite — it earns its density through stillness. 3. **The persistent perspective sidebar drawer (rare layout).** Sidebar layout appears in only 7% of designs, and none implement it as a 3D perspective stack of index cards with scale-hover-rotation behavior. The drawer doubles as both navigation and atmospheric prop — it is the single most distinctive structural element of the site, and it never collapses or hides on desktop. 4. **Display-bold typography (only 2% of collection).** Abril Fatface as a primary display face — at the genuinely theatrical sizes called for here (clamp up to 9rem) — is virtually absent from the existing collection's design language. Combined with the chromatic-fringe cyan offset, the headlines become a signature motif unique to gabs.news. 5. **Scale-hover as the dominant interaction grammar (1% of collection).** Most sites in the collection lean on scroll-triggered (39%) or parallax (28%). gabs.news lets scale-hover do the heavy lifting — every interactive element responds to direct hover with a spring-eased scale and slight rotation, giving the site a tactile, page-turning, finger-pressing quality that is genuinely rare in the collection. 6. **Marginalia as first-class content.** No other site treats the page margin as a primary content surface. Footnotes, "see also" arrows, hand-drawn brackets, and the reading-room cat populate the gutters — these are not decoration sitting on top of content; they ARE content. The 720px column with 200px live margins on each side is a layout commitment few other sites in the collection make. 7. **The cat.** No other site has a cat. The cat is a complete and load-bearing differentiator. **Chosen seed (from assignment):** - aesthetic: **maximalist** (0% — completely unused in collection) - layout: **sidebar** (7% — underused) - typography: **display-bold** (2% — underused) - palette: **muted-vintage** (0% — completely unused) - patterns: **scale-hover** (1% — underused) - imagery: **neon-glow** (rare in collection, never paired with vintage) - motifs: **book-scholarly** (2% — underused) - tone: **whimsical-creative** (4% — underused) Every single seed dimension is in the bottom quartile of usage frequency, with two dimensions (maximalist, muted-vintage) being entirely absent from the existing 200 designs. This site occupies genuinely unclaimed territory. **Avoided patterns (per frequency analysis):** - AVOIDED corporate aesthetic (39% — most overused). - AVOIDED card-grid layout (40% — most overused). The reading column is single-column codex, not cards. - AVOIDED centered layout (38%) — content is left-anchored beside the sidebar. - AVOIDED gradient palette (41%) and warm palette in its generic gradient form (41%) — the muted-vintage palette uses flat, layered, paper-tinted color, not gradients. - AVOIDED scroll-triggered as primary motion grammar (39%) — scroll triggers exist but are secondary to scale-hover. - AVOIDED parallax (28%) — only the chapter plates use sticky-pinning, and even that is more "page-flip" than parallax. - AVOIDED mono-as-primary typography (39%) — JetBrains Mono is used only for the erratum ticker and metadata stamps; the primary voice is serif. - AVOIDED photography (40% — most overused imagery type) — there is zero photography on the site. All imagery is engraved-plate SVG, custom marginalia SVG, and typographic ornament. - AVOIDED mysterious-moody tone (23%) — the tone is whimsical and warm, not brooding. The library is haunted by friendly ghosts.