# Design Language for gabs.cx

## Aesthetics and Tone

gabs.cx is **a quiet stationery shop in a winter mall, where the only product on the shelves is small, round talking**. Imagine a Muji aisle at 11am on a Tuesday — the lighting is overcast-northern, the wood is unstained ash, the labels are taped on with washi — but the entire inventory is conversation: speech bubbles in small glass cubes, sentences printed on undyed muslin, half-thoughts floating in jars of tap water. The site is the catalogue. "gabs" is the merchandise. The .cx is the receipt curl at the bottom of the bag.

The mood is **approachable-casual** — the domain is short, the conversation it sells is informal, and the page never raises its voice. There is no excitement here, no neon, no gradient sunsets, no glassmorphic seafoam. There is the soft hum of the mall HVAC and the gentle stochastic *pulse* of a single bubble, somewhere in the layout, deciding to inflate to 1.04× and then deflate, the way a kettle sings before it whistles. That pulse is the only attention-grabbing event on the entire site, and it is rationed: two pulses every nine seconds, one bubble at a time, never two at once.

Inspirations: Kenya Hara's *White* (the book), the un-photographed unboxing videos of MUJI 2018–2019, Ryuichi Sakamoto's "1996" piano arrangements (each note allowed its own air), and the quiet dignity of a single rice ball wrapped in nori at a 24-hour combini. The site is **wabi-sabi adjacent** but more *modernist Japanese minimal* than *imperfect ceramic*: the bubbles are perfectly circular, but they are arranged like pebbles dropped from a child's pocket.

The tone of the copy is the tone of a friend who is not in a hurry — second person, lowercase, contractions allowed, exclamation points forbidden. "you've got something to say. that's the whole point." Sentences end with a period and a small bubble. The bubble breathes for half a second. The page moves on.

## Layout Motifs and Structure

The site is **hero-dominant** in a very strict sense: the entire first viewport — 100vw × 100vh — is a single composition, and *no scrolling is required* to receive the central message. Below the fold, the remaining content unfolds as a vertical *collage strip* that the visitor can choose to enter. The hero does not say "scroll for more" because Muji shelves do not say "more inside."

**Hero composition**: the viewport is divided into a 5×5 invisible grid of `(20vw × 20vh)` cells. Within this lattice, **seven speech bubbles of varying sizes** are placed at cells (1,2), (2,4), (3,1), (3,3), (4,5), (5,2), and (5,4) — a deliberate scatter that reads as casually-strewn but is, on a metric ruler, a translation of the seven-stone *fukinaoshi* arrangement from a Kyoto rock garden. The wordmark "gabs" is set in the absolute centre of cell (3,3) inside the largest bubble (a 38vmin diameter circle). The remaining six bubbles each contain one word, one emoji-shaped glyph, or a single ellipsis. Together they form a sentence-fragment poem that re-randomises on each page-load from a curated pool of 40 fragments: "hi.", "what's up", "ok so", "...", "y'know?", "right?", "anyway,", "listen", "nah", "for real", and so on.

**Below the hero**: a single vertical column of width `min(640px, 86vw)`, centred horizontally, with **enormous top padding of 32vh between the hero and the first below-fold element**. This blank zone is critical — it is the *ma* (negative space) that signals "the site is over unless you specifically want more." Within this column, content unfolds as a **collage paste-up**: scraps of paper at slight rotations (between -3deg and +3deg), washi-tape corners, ticket stubs, milk-carton-style "ingredient lists," and one small black-and-white photo per "scrap" — the photos are always of mundane objects (a tea bag, a 3.5mm jack, a city pigeon, a folded napkin) and never of people or product.

**Layout principles**:
- **Hero-dominant (10% of designs)**: chosen because the message is one bubble, not seventeen.
- **No card grid.** Cards are forbidden. The site rejects the 83% of designs that organise content into rectangles.
- **No dashboard, no sidebar, no bento-box.** A single column below a single hero. Information density is intentionally low.
- **Asymmetric within symmetry**: the hero grid is symmetric, but the bubble placement is asymmetric. The collage column is symmetric (centred), but each scrap is rotated asymmetrically.
- **Negative space as the dominant material.** At least 62% of any given viewport is unfilled cream paper. This is non-negotiable.
- **Breakpoints**: at <720px, the hero collapses to a 3×3 grid with three bubbles only (the wordmark plus two random fragments). The collage column becomes 92vw wide.

## Typography and Palette

**Typography** — chosen seed is **mono**, but mono is used in 95% of the design corpus, so the implementation must be deliberately distinct. The mono here is set with un-Silicon-Valley conventions: lowercase by default, generous letter-spacing of +0.06em, optical size axis pinned to display weights, and *italic forbidden in body copy* (italics only in handwritten annotations).

- **Display / wordmark**: **"JetBrains Mono"** (Google Fonts), weight 400 (regular, never bold), size `clamp(72px, 14vmin, 160px)` for the central "gabs" wordmark. The wordmark is set in **all-lowercase** (`gabs`), letter-spacing +0.04em, and rendered with the **slashed zero** stylistic set explicitly disabled — this is critical because we want the typeface to feel domestic, not technical. The wordmark sits in the largest hero bubble.
- **Bubble fragments**: **"DM Mono"** (Google Fonts), weight 400, size `clamp(18px, 2.4vmin, 28px)`. DM Mono is selected because it has a softer terminal than JetBrains Mono and reads more like a handwritten sticky-note than a code editor.
- **Body / collage scraps**: **"Inconsolata"** (Google Fonts), weight 400, size 17px, line-height 1.6. Inconsolata's slightly humanist x-height is the right voice for paragraphs that wish to be read but do not wish to be loud.
- **Annotations on collage**: **"Caveat"** (Google Fonts), weight 400, size 14–18px, rotation -2deg to +2deg per snippet. Caveat is the *only* non-mono face permitted on the site, used exclusively for handwritten margin notes (e.g., "from the back of a napkin, 11pm") and never for primary content. This restraint preserves the mono identity while admitting the collage motif.

**Palette** — chosen seed is **muted**. Eight tokens:

- `--paper`         **#F2EEE6**  (the dominant background — undyed Japanese hosho paper, slightly warmer than #F5F1E8)
- `--paper-cool`    **#E8E5DD**  (the cool secondary paper, used for collage scraps)
- `--ink`           **#2B2A28**  (the body type colour — not pure black; warm carbon)
- `--ink-soft`      **#5C5A55**  (secondary text and metadata)
- `--bubble-shell`  **#C9D6D2**  (the resting bubble outline — a muted pale teal, like seaglass left in fog)
- `--bubble-fill`   **#FBFAF6**  (the inside of every bubble — a hair brighter than `--paper`, so bubbles glow softly without contrast)
- `--washi`         **#D4B896**  (the warm tan of washi-tape and ticket stubs)
- `--accent-pulse`  **#D9594A**  (the **only saturated colour on the site** — a muted brick-red that appears for 700ms inside a bubble during its pulse, then recedes)

The accent-pulse is rationed to ≤ 2 occurrences per 9 seconds and is never used for buttons, links, or static decoration. It exists solely as a heartbeat. This is what makes the palette **muted with one held breath of red**, and is the design's most concrete expression of the **pulse-attention** pattern.

## Imagery and Motifs

The site uses **collage** (8% of designs) as its primary imagery device, with **bubble-playful** (2% of designs) as the structural motif. There is no photography of people, no product shots, no UI screenshots, and no decorative gradients.

**The bubble vocabulary**:
- Bubbles are circular (not the iMessage-style stadium shape). The circle is intentional: a *ball* of conversation, not a *banner*.
- Each bubble has a 1.5px outline in `--bubble-shell` and a fill of `--bubble-fill`. No drop shadows. No gradients. No glassmorphism. The bubbles sit on the page like ink-printed paper cut-outs.
- A single **tail** is permitted on the central wordmark bubble only — a small triangular notch at the 7-o'clock position, 12px wide, pointing toward the lower-left margin and intentionally clipped by the viewport edge so it reads as "off-page."
- **Bubble sizes follow a 5-tone scale**: 38vmin (hero), 18vmin, 12vmin, 9vmin, 6vmin. No bubble is ever sized outside this scale.
- **Pulse animation**: every 4–5 seconds, a single bubble (chosen by a deterministic but seemingly-random rotation) inflates from `scale(1.0)` to `scale(1.035)` over 380ms with `cubic-bezier(0.22, 1, 0.36, 1)`, holds for 90ms, then deflates over 280ms. During the held 90ms only, the bubble's fill briefly tints toward `--accent-pulse` at 8% opacity. The interior glyph does not scale. This is the **pulse-attention** pattern in its purest form.

**The collage vocabulary** (below-fold strip):
- **Washi-tape corners**: each scrap has 1–2 tape strips, drawn in SVG at the corners. Tape is `--washi` at 78% opacity, with a single-pixel dashed darker edge to imply translucency over paper.
- **Ticket stubs**: rectangular scraps with one perforated edge (12px circular notches every 14px), printed with mono receipt-style copy. Used for testimonial-like fragments.
- **Pigeon, tea bag, 3.5mm jack, folded napkin** — five low-contrast black-and-white photographs, each ~480px wide, each used exactly once on the page, each placed inside a scrap. They are the *only* photographs on the entire site.
- **Hand-drawn arrows**: tiny ink-pen arrows in `--ink-soft`, drawn in SVG with stroke-dasharray to imply the strokes were hesitating. Used to point from one collage scrap to the next.
- **Postcard stamps**: a single decorative "stamp" scrap in the lower-quarter of the strip, perforated edges, postmarked with the current UTC date. The stamp is the only place on the site where the dynamic date appears.

**Forbidden imagery**: no SVG icons that resemble UI controls (no settings gears, no chevrons, no hamburger menus). No isometric illustrations. No 3D renders. No photography of laptops, hands, coffee cups, or workspaces. No emoji except inside bubbles (and even then, sparingly: at most one bubble in the hero contains a single emoji).

## Prompts for Implementation

Build this as a **single-page paper artefact with two registers** — the silent hero, and the murmured collage below it. Implementation language: vanilla HTML, hand-written CSS with custom properties, and ≤ 60 lines of vanilla JavaScript for the pulse scheduler and the fragment-shuffle. No framework. No bundler beyond a build-time minifier. Total transferred bytes ≤ 180KB including the four Google Fonts (each weight loaded via `font-display: swap` and preloaded).

**Hero scene-build**:

1. Use CSS Grid for the hero: `grid-template: repeat(5, 20vh) / repeat(5, 20vw)`. Place each `.bubble` element with `grid-row` / `grid-column`. The bubbles are positioned via grid; the *circle shape* is achieved with `border-radius: 50%`. Sizing is done with `aspect-ratio: 1` and a width set in `vmin`.
2. The wordmark uses a CSS variable `--gabs-text` so that JavaScript can swap the inner text on load if the user clicks the wordmark — clicking "gabs" cycles through six lowercase synonyms (`gabs / chats / talks / gab / yaps / gabs`) over 1.2s with a typewriter-effect transition. This is the only interactive element above the fold.
3. The pulse scheduler picks a bubble at `setTimeout` intervals drawn from a Poisson-like distribution with mean 4.5s and minimum 2.8s. The selected bubble cannot be the same as the previous two. The wordmark bubble is selected with 35% weight; the others split the remaining 65% uniformly. The pulse animation is implemented with the Web Animations API, not CSS keyframes, so it can be cancelled mid-flight if the user clicks elsewhere.
4. **Reduced-motion fallback**: if `prefers-reduced-motion: reduce`, the pulse becomes a 200ms colour-only fade (no scale change), and the rate drops to one pulse every 12 seconds.

**Below-fold collage**:

1. Use CSS `flex-direction: column` with `gap: 18vh` between scraps. Each scrap is its own `<article>` with `transform: rotate(var(--rot))` where `--rot` is a custom property set per element to a value drawn from {-3deg, -2deg, -1deg, 1deg, 2deg, 3deg}.
2. The first scrap is **always** a ticket stub with the text "the conversation continues, if you want it to." The visitor's scroll past this scrap is the only "engagement" the site measures. There is no analytics beacon — the scroll depth is logged only to localStorage and never sent.
3. Washi-tape corners are inline SVG, sized to 36–52px on the long edge. Each tape strip has a `filter: drop-shadow(0 1px 0 rgba(43,42,40,0.06))` that is the *only* shadow used anywhere on the site.
4. Hand-drawn arrows between scraps use the `path-draw-svg` pattern (27% of designs, but here used minimally — only on three specific transitions). The path animates its stroke-dasharray from 0 to its full length over 1.4s, triggered when the previous scrap enters the viewport via IntersectionObserver.
5. The postcard-stamp at the very bottom is the only element bearing the current date, formatted as `YYYY · MM · DD` in DM Mono. The postmark is a circular 48px arc with the text "gabs.cx · cx" set on a path.

**Storytelling mandate**:
- The site does not tell the visitor what gabs.cx *does*. The site enacts what gabs.cx *is*: a quiet shop selling small talk, where the only sales pitch is that one bubble, somewhere, is breathing. If a visitor stays on the hero for 30 seconds without scrolling, a single new bubble fades in at cell (1,4) containing the word "stay" — and remains. This is the only delayed-reveal on the site. It does not pulse. It just appears, and stays, until the visitor leaves.
- No CTA buttons. No "sign up." No "get started." No "learn more." Below the collage strip there is one single underlined link, in `--ink`, that reads simply "say something." It mailto-links to `hi@gabs.cx`. There is no form, no chatbot, no widget.
- No pricing. No stat-grid. No feature-comparison table. No "trusted by" logo wall.
- No newsletter modal. No cookie banner beyond a single static line of text in the footer scrap that says "no cookies; this is a paper site." (Strictly true: no `Set-Cookie` headers, no localStorage beyond the silent scroll-depth.)

**Performance and craft details** (visual, not measured):
- Fonts are subsetted to Latin-1 plus the small-circle Unicode glyphs used by the bubble fragments. No icon fonts.
- All SVG is hand-written, not exported from Figma. The path coordinates are rounded to integers because the site is paper, and paper does not have 0.5px lines.
- The cursor on the hero is a custom 14×14 SVG dot in `--ink-soft`. On hover over a bubble, the cursor expands to a 22×22 ring outline. No magnetic snap; the bubbles do not want to be pressed.

## Uniqueness Notes

This design occupies a deliberate vacancy in the registry's frequency map. Five concrete differentiators from the existing 190 designs:

1. **Muji aesthetic is at 1%.** Of the analysed designs, only ~2 sites have used the muji vocabulary. This site commits to it fully — undyed paper, ash-wood neutrality, ration-strict colour, lowercase mono, no decoration — rather than as a flavouring on top of another aesthetic. The mall-store-on-Tuesday-morning specificity is unique in the corpus.

2. **Bubble-playful motif at 2% paired with muji at 1%.** The bubble-playful motif appears in only ~4 sites, and to my survey of the corpus, it has never been paired with a muji aesthetic — bubbles in the existing sites are paired with playful, dopamine, or seapunk registers. Quiet bubbles, breathing once every five seconds in a beige room, are the central conceit and are not duplicated elsewhere.

3. **Pulse-attention pattern at 2%, used as the *only* animation pattern.** Most designs that use pulse-attention combine it with parallax (95%), cursor-follow (84%), and stagger (77%). This site explicitly **forbids parallax, cursor-follow, magnetic, and stagger**, retaining only pulse-attention plus a single path-draw-svg occurrence. The pulse-attention is not a supporting effect; it *is* the design.

4. **Hero-dominant + no card-grid + no dashboard.** Card-grid appears in 83% of designs and dashboard in 30%. This site has zero cards, zero dashboards, and a single hero. The collage strip below the fold is *paper scraps*, not a card grid — there is no shared border-radius, no shared shadow, no shared dimensions, no responsive auto-fit-minmax.

5. **Mono typography rendered un-technically.** Mono is at 95% of designs and is the most over-used typography token in the registry. This site uses mono in a way no other site does: lowercase-only, italic-forbidden, paired with **Caveat** for handwritten marginalia, and explicitly disabling stylistic alternates (slashed zero, dotted i) so the typeface reads as *domestic stationery* rather than *developer terminal*. The mono here is the receipt-printer at a stationery shop, not the IDE.

6. **One saturated colour, rationed.** The palette holds eight tokens but only one (`--accent-pulse #D9594A`) is saturated, and it is permitted on screen for at most 700ms at a time, ≤ 2 times per 9 seconds. No other surveyed design rations a single hue this strictly. Compared to the 97% of designs using `gradient` and `warm` palettes simultaneously, this site uses neither — it is flat-colour, cool-paper, with one held breath of red.

**Avoided patterns from frequency analysis**:
- Photography (98%) — replaced with five mundane-object black-and-whites.
- Gradient palette (97%) — flat colour only.
- Parallax (95%) — forbidden.
- Cursor-follow (84%) — replaced with a static custom dot.
- Spring (82%) — replaced with one cubic-bezier curve used for the pulse only.
- Card-grid (83%) — forbidden; replaced with collage paste-up.
- Centered (82%) — partial; the hero centres the wordmark but the bubbles are scattered.
- Magnetic (76%) — forbidden; bubbles do not attract the cursor.
- Stagger (77%) — forbidden; the only timed event is the lone pulse.
- Hand-drawn aesthetic (96%) — explicitly avoided in favour of muji-precise circles.
- Glassmorphism (67%) — explicitly avoided; bubbles are flat printed-paper, not frosted glass.

**Chosen seed (from assignment)**: aesthetic: muji, layout: hero-dominant, typography: mono, palette: muted, patterns: pulse-attention, imagery: collage, motifs: bubble-playful, tone: approachable-casual.
<!-- DESIGN STAMP
  timestamp: 2026-05-10T01:07:31
  seed: seed
  aesthetic: gabs.cx is **a quiet stationery shop in a winter mall, where the only product on...
  content_hash: acd2553ebc58
-->