# Design Language for gabs.wiki ## Aesthetics and Tone gabs.wiki is **a soft-rubber neon control panel for a clandestine knowledge cell** — imagine a 2031 fan-zine encyclopedia that runs on a bioluminescent gel-pad rather than a screen, and was assembled by a teenage collective of researchers who are equal parts librarians and saboteurs. The aesthetic is **neomorphism crashed into electric-neon** — pillowy, pressed-foam UI surfaces lit from inside by acid-bright runtime indicators, the way a deep-sea jellyfish shows its organs through translucent flesh. Every surface looks pinched, squeezed, or extruded from the same continuous gel substrate; the "cards" are not cards but **swollen, slightly sticky slabs** that you suspect would dent and slowly recover if you pressed them. The voice is **edgy-rebellious** without being macho about it. It's the tone of a wiki that knows its sources are leaked, its definitions are arguments, and its categories are political. Headings sneer slightly. Citations are footnoted in a font one degree too playful to be solemn. Disagreements between authors are not hidden — they are exposed as small, throbbing orange "dissent dots" next to disputed terms. The reader is treated as a co-conspirator, not a customer. Nothing on the page apologises, nothing markets itself, nothing converts. The mood reference is **a chemistry-set glow stick snapped at 3am inside a Soviet rubber typewriter**. It is playful and dangerous at once: the **rounded letterforms** soften the threat the **electric palette** otherwise projects, like a kitten with a switchblade. Where most neomorphic UIs aim for "calm, premium, Apple-adjacent," gabs.wiki deliberately weaponises the same shadows by wrapping them around **toxic-citrus and hot-magenta accents** that no respectable neomorphism mood-board would tolerate. The result is the visual equivalent of bubblegum that tastes faintly of solvent. Inspirations, named explicitly so they are not generic: the rubberised housing of a 1986 Casio CZ-101 synthesizer; the gel-button remote of a Bang & Olufsen Beolink 1000; Aphex Twin's *Drukqs* liner notes; the inflated-3D logos of mid-2000s Adobe; the laminated rave flyers stapled outside a Sheffield squat in 1999; the hospital-strength cyan of a Geiger counter at idle; the way a freshly-pressed gummy bear looks under a UV nail lamp. ## Layout Motifs and Structure The composition is a **dashboard** — but not a dashboard of metrics. It is a **dashboard of articles, dissent, and rumour**, structured like a **rebel research-cell mission console** rather than a SaaS reporting tool. The dashboard format is chosen deliberately: 32% of the corpus uses dashboards, but virtually none cross dashboard with neomorphism + neon-electric + edgy-rebellious. We are reclaiming the dashboard from KPI culture and giving it back to zinemakers. **The grid (1440px container, 12-column, 28px gutters):** - **Top-left: the "Hot Edit" pad** — one large, slightly-pulsating neomorphic slab (424×268px) showing the most recently amended article. Inside the slab: a 64px circular **organic-blob avatar** of the editor (no photographs — only generated blobs, see Imagery), a title set in oversized playful-rounded type, the diff-count as a glowing acid-yellow numeral, and a 6px **dissent-bar** at the bottom whose width = % of contributors disputing the edit. - **Top-right: the "Dissent Console"** — a 4-row stack of compact neomorphic pill-cards, each row a contested term with two **neon-electric chips** facing off (one cyan, one magenta), the chip widths proportional to the citation count for each side. Hovering a chip blurs everything else on the page (`backdrop-filter: blur(14px) saturate(0.4)`) — the **blur-focus** pattern weaponised as an attention amplifier. - **Centre band: the "Article Substrate"** — a wide, low neomorphic trough (full container width, 380px tall) carrying the current article's body text on a horizontally-scrollable rail. Articles do not scroll vertically. They scroll *across*, like a teleprompter for a heretic. Long-form text is paginated into "panels" of ~520px each, separated by **organic-blob seams** that visually melt into the trough's inner shadow. - **Bottom-left: the "Rumour Mill"** — a tiled 3×2 grid of small neomorphic chiclets, each holding a 32-character single-line rumour with a glowing **truth-meter ring** around the chiclet's edge. The ring's hue smoothly maps from acid-cyan (verified) through citron (contested) to hot-magenta (debunked). - **Bottom-right: the "Cell Roster"** — six contributor blobs, each an organic-blob avatar embossed into the dashboard substrate, with a faint pulsing aura whose size = the contributor's recent edit volume. Hovering a blob causes the rest of the dashboard to blur and that contributor's edits to **light up** across every other panel simultaneously. - **Floating overlay: the "Console Bar"** — a long, pill-shaped neomorphic floating bar at the very bottom of the viewport (full width minus 96px margins, 64px tall), housing search, a `JOIN CELL` toggle, and a tiny **lava-lamp-style organic-blob** that drifts back and forth as a live "edit pulse" indicator. **Spatial logic:** every surface is either *recessed into* the substrate (inset shadows, the article trough, search input) or *extruded from* the substrate (the chiclets, the dissent chips, the avatars). There are exactly **two depth layers**, and they alternate like a quilted vinyl seat. There is no `box-shadow: 0 1px 3px rgba(0,0,0,0.1)`; every shadow is a **paired** shadow (dark below-right, light above-left) that simulates a 25° top-left lightsource hitting matte rubber. The substrate itself is `#1B0F2A`, **not** the typical pale-grey of safe neomorphism — we are doing **dark neomorphism with neon accents**, which is a register virtually unrepresented in the corpus. Mobile (below 720px): the dashboard reflows into a single vertical column, but the neomorphic depth and the blur-focus interactions are preserved. The horizontally-scrolling article trough remains horizontal, becoming a swipeable carousel — never a vertical text dump. ## Typography and Palette **Typography (Google Fonts only — no inventions):** - **Display + Wordmark — "Fredoka"** (weights 400, 500, 600, 700). A **playful-rounded** geometric sans with terminal swells that feel pneumatically inflated. Used for the wordmark `gabs.wiki` at clamp(3.6rem, 8vw, 6.4rem), letter-spacing -0.018em, optical-sizing on. Used for article titles at 44px, dashboard panel labels at 22px small-caps, and the dissent-chip values at 18px tabular. Fredoka is the visual signature of the site; it is what makes the neon palette feel impish rather than corporate-cyberpunk. - **Body — "DM Sans"** (weights 400, 500, 700). A neutral, slightly-rounded humanist sans that doesn't fight Fredoka. Used for article body at 17px, leading 1.58, set in `#E8E4F2` on the dark substrate, with `text-rendering: optimizeLegibility` and `font-feature-settings: "ss01" on, "cv11" on` for the slightly more idiosyncratic single-storey 'a'. Body lengths are kept under 64ch even in horizontal-scroll mode. - **Mono / Citations — "JetBrains Mono"** (weights 400, 600). Used for footnote markers, hash-tags, edit-IDs, and the diff-counts on hot-edit pads. Set at 13px, letter-spacing 0.04em. Citations are formatted as `[#a0f3 — 2031.04.18]` in mono, glowing faintly cyan. **Palette — "neon-electric on rubber-substrate":** - `#1B0F2A` — **substrate-deep** (dashboard background; the rubber the whole site is moulded from) - `#241638` — **substrate-raise** (the lighter side of every neomorphic shadow pair) - `#120820` — **substrate-recess** (the darker side of every neomorphic shadow pair, also the inner-shadow colour for inset wells) - `#00F0E4` — **acid-cyan** (primary neon — verified citations, "for" dissent chips, edit-pulse, drift highlights) - `#FF2DA0` — **hot-magenta** (counter-neon — disputed terms, "against" dissent chips, debunked-rumour rings, error states) - `#F4FF52` — **citron** (warning + contested + the hot-edit diff numeral; the "hazard" hue) - `#9B5BFF` — **electric-violet** (link hover, console-bar accent, the lava-blob) - `#E8E4F2` — **bone-white** (body copy, primary readable text) - `#7A6F94` — **smoke-lilac** (secondary text, metadata, footnote bodies) Gradient usage is restrained: the only real gradient is the **truth-meter ring**, which interpolates `#00F0E4 → #F4FF52 → #FF2DA0` along its arc. No mesh gradients elsewhere — the page resists the warm-gradient default of the corpus (97% warm, 97% gradient) with **cool-substrate + spot-neon** instead. Contrast notes: bone-white on substrate-deep is intentionally just-below-AAA-display so the neon accents *carry* importance. The neon hues are reserved for glowing live-state — they never appear as block-fills, only as borders, rings, glyph-fills, and 8px-radius soft glows. ## Imagery and Motifs **No photography, anywhere on this site.** This is a deliberate inversion of the corpus's 99% photography rate. gabs.wiki is built entirely from **organic-blobs** (imagery 9%, motifs vanishingly rare in combination), inline SVG, and CSS-extruded forms. **Five motif families:** 1. **Contributor Blobs.** Each contributor is represented by a procedurally-generated organic blob — a closed Bézier loop of 7–11 anchor points, perturbed by a low-frequency noise field seeded by the contributor's username hash. Blobs are 3-tone: a **substrate-raise** core, a **substrate-recess** inner shadow giving them the embossed-into-the-rubber feel, and a 1.5px stroke in a single neon hue (the contributor's "tag colour"). Blobs subtly **breathe** — radius animates ±2% over a 4.2s ease-in-out, each contributor's breath at a different phase so the dashboard always pulses gently like a tide-pool of softly inflating creatures. 2. **The Lava-Blob.** One single, large organic blob lives in the floating console bar. It drifts horizontally, lazily, on a path interpolated by Catmull-Rom through five waypoints; its shape morphs continuously via path-morphing between four target silhouettes. Hue cycles through the four neons over a 90s loop. It is the site's heartbeat — it never stops, and removing it would make the page feel dead. 3. **Dissent Dots.** Tiny solid-fill circles in hot-magenta with a 4px outer-glow, attached as superscripts to any disputed term. They throb at 0.8Hz. Click-through reveals an inline neomorphic well containing the dissent thread. 4. **Truth-Meter Rings.** Conic-gradient SVG rings around the rumour-mill chiclets. The arc fill maps to verification status; the ring's stroke is 3px and sits inset 2px from the chiclet's edge so it appears as a glowing seal pressed into the rubber. 5. **Substrate Seams.** Where two neomorphic surfaces meet, they are joined by a hand-drawn-feeling SVG seam — a single Bézier path with `stroke-dasharray: 2 6` in `#120820`, suggesting that the dashboard was sewn together from rubber panels. Seams appear at the article trough's edges, around the console bar, and between the rumour-mill rows. They are *never* straight rectangles — they always bow, lean, or curl. **Iconography:** all icons are custom 24×24 inline SVG, drawn at 2px stroke-width with rounded caps and rounded joins, on a 24-grid. Icons match Fredoka's pneumatic feel: every tip is a soft circle, no sharp arrows, no glyphs ever inherit Material/Feather/Lucide silhouettes wholesale. The "edit" glyph is a **gummy pencil**, the "search" glyph is a **bubble loupe**, the "join cell" glyph is a **handprint pressed into rubber**. **No stock photography, no illustrations of people, no flat-design icons, no isometric scenes, no gradient-mesh backgrounds.** The visual world is closed: rubber substrate, glowing lines, breathing blobs, and tactile typography. ## Prompts for Implementation Build gabs.wiki as **one HTML document, one CSS file, one ES module** — no framework, no build step, no router, no service worker, no analytics, no fonts beyond the three Google Fonts. Total uncompressed payload target: **under 110KB**, with the lava-blob path-morphing and the contributor-blob breathing being the heaviest runtime cost (and even those are <2ms per frame on a 2018 MacBook). **The page is a control panel for a story, not a product page.** Resist every instinct to add a CTA, a hero with a "Sign up free" button, a pricing table, a stat-grid of "1.2M articles — 47K contributors — 99.9% uptime," a testimonials carousel, or a feature-bullet list with checkmark icons. None of these belong. The dashboard *is* the story. Reading the dashboard for sixty seconds should leave the visitor with the distinct feeling that they have **eavesdropped on a working research-cell** rather than landed on a marketing surface. **Animation philosophy — kinetic but never frantic.** Every motion respects `prefers-reduced-motion`, and where motion is allowed: - **Contributor blobs breathe.** ±2% radius, 4.2s ease-in-out, phase-offset per contributor. Implemented via an SVG `` on each path's `d` attribute interpolating between two pre-baked silhouettes; no JS for the breath itself. - **The lava-blob drifts and morphs.** A single requestAnimationFrame loop interpolates the blob's translation along a Catmull-Rom path and its silhouette via path-morphing. Hue shifts every 22.5s. - **Dissent dots throb.** CSS keyframe `transform: scale(1) → scale(1.18) → scale(1)` over 1.25s, infinite, and a paired `box-shadow` pulse. No JS. - **Blur-focus is the headline interaction.** Hovering or focusing any neomorphic surface (chip, chiclet, blob, hot-edit pad) applies `backdrop-filter: blur(14px) saturate(0.4) brightness(0.7)` to the *rest* of the dashboard via a sibling-overlay technique, while the focused surface gets a subtle `transform: translate3d(0, -2px, 0) scale(1.012)` and an intensified neon ring. This is the page's signature — the substrate falls out of focus the way reality does when you're concentrating on one rumour. - **Truth-meter rings sweep on first paint.** Each ring's conic gradient is masked by an SVG arc whose `stroke-dasharray` is animated from 0 → full circumference over 800ms with a 60ms stagger between chiclets. The dashboard "comes online" panel by panel. - **Hot-edit pad pulses on new edit.** A live edit (in a real implementation, a server-sent event; for the static page, a scheduled mock) triggers a 320ms `box-shadow` flash in citron and a one-shot 6% scale bump on the diff-numeral. The pad never moves position. - **The wordmark `gabs.wiki` types itself in on load.** 92ms per character with a blinking violet cursor; no full-screen loader. The dashboard panels fade in from blur(20px) → blur(0) with a 80ms stagger, immediately after the wordmark settles. **Cursor behaviour.** A custom cursor — a small acid-cyan ring 22px diameter, 1.5px stroke, with a 4px solid dot at its centre — replaces the default cursor at desktop sizes. On hover over neomorphic surfaces the ring expands to 36px and gains a magnetic snap toward the surface's centroid (light spring, k=140, d=18). On text it collapses to a thin vertical caret. **No magnetic-button effects on neomorphic chips themselves** — the chips are physical objects, the cursor is what reaches for them. **Horizontal article scrolling.** The article trough uses `overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 64px`. Each panel is `scroll-snap-align: start`. A small **page-pip indicator** (mini neomorphic dots) sits below the trough showing position. Keyboard: ←/→ navigate panels, Space advances. On wheel, vertical scroll is converted to horizontal *only inside the trough* (use `wheel` event with `passive: false`, prevent-default, `scrollLeft += deltaY`). Outside the trough, wheel scrolls the page normally. **Sound.** None. Absolute silence. The visual identity carries the entire presence. **Storytelling spine — what the visitor sees on first paint:** 1. The wordmark types itself in. 2. Panels swirl into focus, blur-to-clear, staggered. 3. The lava-blob begins drifting. 4. The hot-edit pad shows an edit from "11 minutes ago" with a citron diff-count of `+247 / -88`. 5. The dissent console immediately shows two contested terms with chips already colour-charged. 6. The rumour mill's rings sweep into place. 7. The cell roster blobs start breathing in offset phases. 8. Within ~2.4s, the page is "alive" — and it stays alive, indefinitely, even if the user does nothing. The dashboard does not wait for engagement; it is already engaged. **Forbidden in implementation:** feature lists with checkmarks; pricing blocks; numeric stat grids ("1M+ users"); testimonial cards with quoted strangers; "trusted by" logo bars; cookie-consent modals styled inconsistently with the dashboard (if a banner is required, it must be a neomorphic pill in the corner, not a top-strip); any element copied from a Tailwind UI / shadcn template wholesale; any instance of the phrase "Get started"; any blue-link blue. ## Uniqueness Notes This design is intentionally distinct from the 200 designs already analysed in the registry. Concrete differentiators: 1. **Neomorphism × neon-electric is unprecedented in this corpus.** Neomorphism appears in 3% of designs, and where it appears it is universally pale-grey, calm, premium, Apple-adjacent. Crossing it with **dark substrate + neon-electric accents (5%) + edgy-rebellious tone (2%)** produces a dark-rubber-glow register that does not exist elsewhere in the registered work. The combination is the design's primary signature. 2. **Dashboard reclaimed from KPI culture.** Dashboard layout sits at 32%, but in the corpus it is overwhelmingly used for SaaS reporting, crypto telemetry, or data-viz front-ends. gabs.wiki uses the dashboard *as a cultural-knowledge console* — a research-cell control surface, not a metrics surface. The "panels" are dissent, rumour, edits, and contributors, not MRR / DAU / retention. 3. **Playful-rounded typography (4%) on a dark neon ground.** Fredoka almost always lands on warm pastel children's-product surfaces. Here it carries the **edgy-rebellious** tone (2%) instead — a juxtaposition that softens the threat just enough to feel sly rather than aggressive. The pneumatic letterforms make the neon legible-and-fun rather than legible-and-cold. 4. **Organic-blobs as the entire avatar system.** Imagery sits at 99% photography in the corpus; gabs.wiki replaces it with **procedurally-generated breathing blobs** (organic-blobs imagery 9%, organic-blobs motifs as a recurring system: rare). No photographs anywhere. Contributors are not faces; they are pulsing rubber masses with their own colour-tags. 5. **Blur-focus (6%) elevated to the central interaction.** Most sites use blur as a hero-overlay decoration. Here it is the **attention engine**: hovering anything blurs everything else, making the act of reading feel like turning a knob on a focus dial. The rest of the dashboard literally retreats from the user's attention. 6. **Horizontal article scrolling on a dashboard.** Articles ride a horizontally-scrolling teleprompter trough rather than expanding the page vertically. This breaks the corpus's 93% full-bleed + 83% centered + 78% stagger reflexes and forces the page to behave like a console rather than a long-form blog. 7. **Two-layer-only depth.** Every surface is either pressed into or pulled out of the substrate — there is no z-axis stack of cards floating at varying heights. This austere depth-policy keeps the neomorphism legible on a dark ground (where soft shadows can otherwise muddy out) and gives the page its quilted-vinyl coherence. 8. **No CTAs, no pricing, no stat-grid, no testimonials, no "trusted by" bar, no hero with sign-up button.** The page refuses every product-surface convention. This is a wiki for a research-cell, and it never sells itself. 9. **Cool-substrate palette in a corpus that is 97% warm.** The deep-violet rubber `#1B0F2A` is a deliberate refusal of the warm-gradient default that nearly every other registered design has accepted. **Chosen seed (from assignment):** `aesthetic: neomorphism, layout: dashboard, typography: playful-rounded, palette: neon-electric, patterns: blur-focus, imagery: organic-blobs, motifs: organic-blobs, tone: edgy-rebellious`. All eight axes are individually underused in the corpus (between 2% and 32%), and their combination is, to the best of the frequency analysis's knowledge, unprecedented. **Avoided overused patterns from the frequency analysis:** hand-drawn aesthetic (96%), photography imagery (99%), full-bleed layout (93%), card-grid layout (84%), centered layout (83%), warm palette (97%), gradient palette (97%), mono typography (95%), parallax pattern (95%), cursor-follow pattern (85%), spring animation (83%), stagger animation (78%, used sparingly here only on initial panel reveal), magnetic interaction (77%, used only on the cursor itself, never on chips). Where any of these patterns was structurally necessary, it was reinterpreted away from its corpus default.