# Design Language for bable.pro ## Aesthetics and Tone bable.pro is a **mid-century Scandinavian translators' bureau as a wall of vintage passport photographs** — imagine a small, lamp-lit office on the second floor of a 1957 Oslo trygdekontor (welfare office), where a polyglot family of in-house translators has, for sixty-eight unbroken years, photographed every visiting client and pinned the photo to a tall, honey-toned cork wall behind the secretary's desk. Each photo is a working "babble" — a captured voice, frozen mid-syllable, awaiting its caption. The wall is now this website. The babble is now public. The clients have moved on; the photographs remain, slightly browned at the corners, perfectly ordered, and quietly, drily, **playful**. The aesthetic is **scandinavian functional discipline filtered through a humorist's photo album**: the calm geometry, generous margins, and humble paper-stocks of post-war Nordic civic design (Aksel Andersen's labels, Arne Jacobsen's signage, the SAS in-flight magazines of 1959) — but applied to a body of imagery that is unmistakably *vintage portrait photography* with handwritten captions in three or four languages, each caption a half-pun, a tiny bilingual joke, or a deadpan misobservation. The site does not raise its voice. It does not flash. It does not aspirate. It pulses, very softly, *once*, when something on the wall has asked to be looked at — like a translator clearing their throat across a quiet office. **Mood lexicon:** *kaffepause*, dust on the brass spine of a Berlitz dictionary from 1962, a single tulip in a beaker of water on the windowsill, the sound of an Olivetti Lettera 22 typing the word "*tilbakemelding*" twice and then stopping, sunlight at 14:40 on a November Tuesday in Bergen, the playful seriousness of a child speaking three languages simultaneously to a confused but charmed grandmother. The tone is **playful** in the specific Nordic register: dry, self-deprecating, aware-of-its-own-archive, never zany, never pastel-cute, never emoji-loud. Every joke is whispered into the margin in pencil and then half-erased. ## Layout Motifs and Structure The site is a **portfolio-grid of 48 vintage passport photographs**, arranged on a single full-bleed honey-cork wall, **8 columns × 6 rows on desktop, 4 × 12 on tablet, 2 × 24 on mobile**. Every cell is a 5:7 portrait (the ratio of a 1958 Norwegian passport photo, *not* a modern 35mm). The grid never breaks, never staggers, never goes asymmetric, never bento-boxes. **Strict orthogonal grid is the entire structural argument** — the website is a *catalogue*, and Scandinavian catalogues do not flirt with diagonals. **Grid mechanics:** - **Outer margin:** a fixed `clamp(48px, 6vw, 96px)` of bare cork on all four sides — never collapses, never edge-bleeds. The cork field continues *behind* the photographs, not *under* them; each photo sits 4px above the cork on a faint cast shadow. - **Inner gutter:** exactly `18px` between photos on all axes. This gutter is *not* negotiable. It corresponds to the 18mm pin-spacing on a Swedish 1962 office cork board (`Bulletin BR-100`, Bröderna Andersson, Eksjö). - **Cell aspect:** 5:7 portrait, photographic crop edge at top, **handwritten caption strip below the image inside the cell**, taking the bottom 22% of the cell height. The caption strip is the same off-cream paper as the photo border — there is no visual "card." - **Pinning:** every photograph is pinned at the **top-center** with a single brass thumbtack drawn as a 9px circle (`#B58A3A`) with a 2px highlight at 11 o'clock. The thumbtack casts a 2px-offset shadow at 4 o'clock. No photo has more than one pin. (Real wall-pinners use four. Our archivist is confident; she uses one.) - **Reading order:** left-to-right, top-to-bottom, like a Nordic newspaper. The 48 photos are *not* shuffled, *not* randomized, *not* infinite-scrolled. The wall is finite and known. **No hero. No nav bar. No footer. No CTA.** The wall *is* the page. A small typed strip of paper is taped to the upper-left cork — three lines, set in `Barlow Condensed` at 11px, slightly off-square, reading: `bable.pro` / `Oversettelsesbyrået · est. 1957` / `48 portretter, ingen bestilling`. That is the only chrome. There is no menu. The site does not require one; you are looking at a wall. **A single 49th cell** exists, hidden in the lower-right corner, photographically empty: it is just a square of cream paper with a handwritten Norwegian phrase — `*den neste*` — and a pencilled question mark. It is the only cell that is *not* a portrait. It pulses, once, every 47 seconds, when no other cell is being attended to. (See *pulse-attention*, below.) **Scroll behavior:** there is *almost* no scroll on desktop above 900px tall — the entire 48-cell grid fits one viewport on a 1440×900 screen. On smaller heights, the wall scrolls vertically, but the brass pins remain *parallax-stationary at z = 0* while the photographs move at z = -1, producing a faint 3-degree-of-parallax effect that suggests the photos are pinned to a wall behind a window the visitor is gently descending past. This is the *only* parallax in the site, and it is honest: pins do not move because pins are in the wall, photos do not move because photos are pinned to the wall, but the *visitor* moves, and that is what scroll is. ## Typography and Palette **Type system (Google Fonts only):** - **Primary condensed face: `Barlow Condensed`** (variable, weights 200/400/600). Used for: the typed-strip wordmark, the year-pin labels under each photograph, the language-flag tags, and the pencil-style caption strips after they have been "translated" by hover. Barlow Condensed is the chosen face because it is the closest contemporary Google-Fonts revival of the **Helvetica Inserat / Akzidenz-Grotesk Schmalfett family** that dominated Scandinavian civic signage between 1957 and 1974 — Aksel Andersen's tax-form headers, the Oslo T-bane direction strips, the SAS departure-board condensed capitals. It carries the same slightly-too-tight letter-spacing, the same dense vertical rhythm, the same humble-but-disciplined municipal voice. Tracking is set to `+0.04em` at all caps and `-0.005em` at body, weight 400 default, 600 only for the wordmark. - **Handwritten caption face: `Caveat`** (variable, weights 400/600). Used *only* for the bilingual caption strips beneath each photograph. Caveat is sized at exactly **13.5px** with a `line-height: 1.18` and a `letter-spacing: 0.005em`, rendered in pencil-grey (`#5C4A38`) with a `text-shadow: 0 0 0.4px rgba(92, 74, 56, 0.3)` to simulate graphite-on-paper softness. The handwriting is constrained to two lines per cell: line 1 in one language, line 2 in another, separated by a single em-dash (`—`). - **Numeral / archive-stamp face: `JetBrains Mono`** (weight 300). Used *only* for the four-digit archive number stamped at the lower-left corner of each photo (`№ 0117`, `№ 0118`, …, `№ 0164`). JetBrains Mono in 300 weight reads as a 1958 typewriter struck through carbon paper, slightly off-register. Letter-spacing `0.08em`, transformed to `#7A6B58` at 70% opacity. **Never used anywhere else on the site.** The numerical voice is reserved for the archive. There are exactly three typefaces. There are no fallbacks beyond `system-ui, sans-serif` for the condensed face and `cursive` for the handwritten face. Fonts load with `font-display: swap` and a single preconnect to fonts.googleapis.com. **Palette: honeyed-neutral.** Eight named tones, mathematically derivable from a single base hue (HSL 38°), used in disciplined proportion: - **`--cork-honey: #C9A876`** — the dominant cork wall, 62% of pixel area. Renders with a 0.8% noise overlay at `#A88656` to simulate cork grain. - **`--paper-cream: #F2E6D0`** — every photograph's mat-board border (3px on all sides) and the typed-strip wordmark paper. 18% of pixel area. - **`--photo-sepia-warm: #B89870`** — the dominant tonal bias inside every photograph (all imagery is duotoned to this warm sepia, *not* black-and-white). - **`--photo-sepia-deep: #5C4530`** — the deep tone of the same duotone. The duotone gradient is precisely `linear-gradient` from `#5C4530` (shadow) to `#F2E6D0` (highlight), passing through `#B89870` (mid). - **`--ink-pencil: #5C4A38`** — handwritten captions and pencilled marginalia. Never pure black. - **`--brass-pin: #B58A3A`** — the 9px brass thumbtack. The single accent the eye lands on. - **`--brass-pin-glint: #E8C77E`** — the 2px highlight on the pin's 11-o'clock face. - **`--archive-fade: #7A6B58`** — the JetBrains-Mono archive numerals, 70% opacity. **Color discipline rules:** - **No pure black, no pure white anywhere.** The lightest paper is `#F2E6D0`; the deepest sepia is `#5C4530`. The site is incapable of pure contrast; the eye is never struck. - **No hue rotation.** Every color sits within 28°–48° of HSL hue. The site is monochromatic in the truest sense — a single warmed-honey light source falls across the entire wall. - **Brass is the only saturation.** `--brass-pin` is the *only* color above 50% saturation. It is used exactly 48 times (one per pin) plus 4 times in the wordmark stripe. Nowhere else. ## Imagery and Motifs **Primary imagery: vintage-photography, every cell.** 48 hand-rendered SVG-illustrated portraits in **vintage-passport-photography style**, each one a *fictional client* of the bureau, each one captured mid-syllable speaking a word in a specific language. The portraits are *not* AI-generated photo-textures and *not* photographs of real people; they are **drawn portraits in the style of 1957–1972 European passport photography**, each rendered as a 220×308px duotone SVG using only `--photo-sepia-deep`, `--photo-sepia-warm`, and `--paper-cream`. The duotone is achieved by an SVG `` filter applied to an inner halftone-pattern fill — no raster image is loaded. Each portrait carries the following fixed compositional rules (the bureau's house style): - **Frame:** 5:7 portrait, head-and-shoulders, sitter facing 7° left of camera, pupil-line 38% from top. - **Background:** flat `--paper-cream`, with a faint vertical gradient `2%` darker at the bottom — simulating the cyclorama paper of a 1960 photo booth. - **Lighting:** key light from upper-right (45° azimuth, 30° elevation), fill at 1:8 ratio. Ear shadows visible. No catch-light in the eye on cells facing direct camera; small catch-light at 2 o'clock on cells turned slightly. - **Wardrobe:** contemporary to the year stamped in the archive number. №0117 is from 1958 and wears a knitted cardigan; №0164 is from 2026 and wears a merino zip-neck. The wardrobe drift is gradual and quietly funny. - **Expression:** every sitter is captured **mid-word**. Mouths are slightly open. Some show teeth. One (cell №0143) is laughing. Two (cells №0121 and №0156) are blowing soft raspberries. The bureau photographs voices, not faces. **Caption motif (the actual content of the site):** Each cell carries a two-line bilingual handwritten caption in `Caveat`. Line 1 is the word the sitter is mid-speaking, in their declared language. Line 2 is the bureau's *playful translation* into Norwegian, English, or Japanese — and the playfulness is the entire editorial voice of the site. Examples (these are the actual on-page captions): - №0117 — *"saudade"* — `pencilled below:` "*hjemlengsel etter et sted som aldri var*" / "homesickness for a place that never was" - №0124 — *"Schadenfreude"* — "*den lille gleden*" / "the small joy" *(pencil-erased and rewritten three times, traces visible)* - №0131 — *"侘 wabi"* — "*det er fint at koppen er sprukket*" / "it is nice that the cup is cracked" - №0143 — *"hygge"* (sitter is laughing) — "*ja, ja, vi vet*" / "yes, yes, we know" - №0156 — *"komorebi"* — "*lyset gjennom bladene, fortsatt et ord vi misunner*" / "light through leaves, still a word we envy" - №0164 — *"untranslatable"* (most recent cell) — "*det fins ikke noe ord for det, men her er bildet*" / "there is no word for it, but here is the picture" The 48 captions are the soul of the site. Each is **a tiny essay in one and a half lines**, drily affectionate, never sarcastic, never internet-coded. They are the bureau's house humor. **Decorative motifs (vintage):** - **Pinned ephemera (3 pieces total, distributed across the wall):** - A single faded business-card slipped under cell №0119, showing only the corner with the words `…tjenester · Karl Johans gt. 14 · OSLO 2`. - A pressed four-leaf clover under cell №0138, drawn as a 26-vertex SVG path in `--photo-sepia-warm` with a faint shadow. - A torn corner of a 1968 train ticket from Trondheim → Bodø under cell №0152. - **Pencil marginalia (4 pieces total):** - A small pencilled arrow between cells №0123 and №0124, with the note `*samme person, fem år senere*` ("same person, five years later") — and indeed the two portraits are the same fictional sitter. - A pencilled checkmark beside cell №0140's caption (the bureau is satisfied with this translation). - A pencilled question mark beside cell №0151's caption (the bureau is *not yet* satisfied with this translation). - A small pencilled heart beside cell №0143 (the laughing one). - **Tape strips (2):** the upper-left wordmark strip, and a small piece of brittle masking tape across the lower-right "*den neste*" cell, holding it in place. There are no icons. There are no logos beyond the wordmark. There are no illustrations of objects (no laptops, no chat-bubbles, no globes, no language-flags as round country-flags). The motifs are entirely *the contents of a real cork wall*. ## Prompts for Implementation Build bable.pro as a **single static HTML page, one CSS file, one small ES module (≈8KB)**. No framework, no build step, no SPA, no service worker, no client-side router. Three external dependencies: a Google Fonts link for Barlow Condensed + Caveat + JetBrains Mono, and nothing else. The full page (excluding fonts) should weigh under 110KB; the 48 SVG portraits average 1.6KB each through aggressive path-flattening and shared ``. **Storytelling structure (single viewport, no narrative scroll):** The visitor arrives at a wall. The wall is already complete. There is no progressive disclosure, no scroll-revealed acts, no parallax acts. The "story" is *that 48 voices have been collected*, and the visitor walks past them as in a small gallery. The interaction is **looking, hovering, occasionally clicking**, never scrolling-as-narrative. **Sequence of subtle events, in ~20 seconds of arrival:** 1. **Page paint (0.0s):** the cork wall fades up from `#B89870` (slightly underexposed) to `#C9A876` over 1200ms. The 48 cells are already in place, all 48 brass pins are already in place, but every photograph is a faint shadow at 18% opacity. 2. **The wall develops (0.4s → 2.2s):** a `stagger` of 1800ms across the 48 cells, going *not* row-by-row but in a **dust-settle order** — a randomized but seeded order that simulates dust dispersing from the upper-left air vent. Each photograph fades from 18% to 100% with a 2px blur-to-clarity, simulating photographic paper coming out of the developer bath. (This is the most expensive animation in the site; it runs once.) 3. **Wall settles (2.2s):** all 48 photographs are present, all 48 captions are pencilled. The `*den neste*` 49th cell appears with a faint pulse-in. 4. **First pulse (after 4 seconds of inactivity):** one cell — chosen pseudorandomly from the 48 — emits a *single soft pulse* of `--brass-pin-glint` light from its thumbtack. The pin briefly brightens from `#B58A3A` to `#E8C77E` over 600ms in, 1100ms out, with a `box-shadow: 0 0 14px 4px rgba(232, 199, 126, 0.45)` glowing softly outward. This is the entire **pulse-attention** pattern. It happens roughly every 8–15 seconds, never on a metronomic schedule, never on the same cell twice in a row. It is the bureau's translator clearing her throat: *"have you noticed №0143?"* 5. **The 49th cell pulses too,** but only when *no other cell has been hovered for 47 seconds*. It is asking the visitor to consider the absence of the 49th portrait — the visitor themselves, perhaps. **Hover behavior on each cell:** - **Hover entry (mouse over a photograph):** - The cell's brass pin brightens to `#E8C77E` with a `transform: scale(1.08)` over 180ms with `cubic-bezier(0.34, 1.56, 0.64, 1)` (a tiny *spring* — the only spring in the site, used to suggest the pin sat slightly loose). - The photograph itself raises 6px off the cork on `transform: translateY(-2px) translateZ(0)` and gains a soft `box-shadow: 0 6px 14px rgba(60, 40, 25, 0.18)`. The photograph does **not** rotate, does **not** tilt-3d, does **not** flip — it lifts gently, like a thumb pulling the edge to look closer. - The handwritten caption strip below the photograph receives a `2px graphite-darken` — the pencil thickens slightly, as if the visitor is leaning in to read. - **Most importantly:** the bilingual translation on line 2 fades in from 0% to 100% opacity over 360ms. Until hover, line 2 is invisible — only line 1 (the original word in the sitter's language) is shown. **Hover is the act of translation.** Without the visitor, every cell shows only a foreign word. With the visitor's attention, the bureau supplies a translation, written in pencil, hesitant, sometimes funny. - **Hover exit:** all of the above reverses over 240ms. The translation pencil-fades back to invisible; the bureau is shy. **Click behavior:** A single click on any photograph causes the cell to **expand into a `magazine-spread` modal** that occupies a 2×3 grid-cell area centered on the clicked cell, pushing surrounding photographs gently outward by 18px. (This is the only "deformation" of the strict grid the entire site permits.) Inside the expanded cell: - The portrait scales to 2× and gains a faint photographic-paper border with deckled edges. - The caption expands into a four-line entry: line 1 (the word, set in Caveat 22px), line 2 (the playful Norwegian), line 3 (the playful English), line 4 (a pencilled bureau-note in 11px Barlow Condensed weight 400, italic, e.g. *"sitter declined coffee. spoke softly. left a thumbprint on the receipt."*). - The archive number expands to include a date stamp (`№ 0143 · 12. mars 1981`). - A small cross at the upper-right (a single 11px `Barlow Condensed` "×" in pencil-grey) closes the spread. **Esc closes too.** Outside-click closes too. The expanded spread is the *only* secondary view in the entire site. There are no other pages. There is no /about, no /contact, no /pricing, no /services. The bureau does not solicit business. The bureau is a wall. **Keyboard navigation:** - `Tab` cycles through the 48 cells in archive order (0117 → 0164), with the brass pin glowing as the focus indicator. There is no focus ring. The pin *is* the focus ring. - `Enter` opens the focused cell as a magazine-spread. - `Esc` closes a spread. - Arrow keys navigate the grid in expected `↑→↓←` orthogonal motion. **The condensed-typography typed strip (upper-left wordmark):** A small piece of cream paper, 188×72px, taped to the cork at the upper-left with two pieces of thin masking tape (drawn as `#E2D2B4` rectangles at 6° rotation). The strip carries three lines of Barlow Condensed: ``` bable.pro Oversettelsesbyrået · est. 1957 48 portretter, ingen bestilling ``` Translation (not shown on the site): "*The Translation Bureau · est. 1957 · 48 portraits, no commissions accepted.*" The wordmark asserts the entire editorial position in three lines: this is a translation bureau, it has been around since 1957, there are 48 portraits, and *we are not for hire*. The site is a museum of voices, not a service. **Avoided patterns (deliberately absent):** - No CTA, no "Get in touch," no "Hire us," no "Start a project," no email capture, no newsletter, no contact form, no service-list, no pricing, no testimonials, no logo wall, no client-marquee, no stats grid (no "*48 portraits / 12 languages / 68 years*" big-number block — the wordmark does this in lowercase prose). - No video, no autoplay audio. (The bureau is *quiet*.) However, on the magazine-spread of a clicked cell, a tiny pencilled `[lytt]` ("listen") link can play a 3-second WebAudio-synthesized chime — a single struck triangle at 1760Hz, fading over 2.4s — *not* a recording of the word, *not* an AI voice. The bureau will not pretend to play a voice it never recorded. - No dark mode. The cork wall does not have a dark mode. Honey is honey. - No cookie banner, no consent UI, no analytics, no third-party scripts beyond Google Fonts. - No emoji, no flag-icons, no language-pickers. The page is in Norwegian-with-translations, simultaneously, and that is the design. ## Uniqueness Notes **Differentiators from other designs in this codebase, each a deliberate departure from the patterns documented in the frequency analysis:** 1. **Scandinavian as catalogue, not as IKEA-flatpack-minimalism.** Scandinavian sits at 2% in the aesthetic frequency analysis — already rare — and within those rare implementations the convention is "*mid-century furniture meets sans-serif quietness*." bable.pro reclaims Scandinavian for **archival civic catalogue work** — the trygdekontor, the toll-booth label-press, the SAS in-flight magazine, the postal-service form-design tradition — the *bureaucratic* lineage of Nordic design rather than the *furniture-showroom* lineage. The site is unmistakably Scandinavian, but it is not a single chair on a white floor; it is a tax-form bound into a photo-album. 2. **Vintage-photography as the entire grid, not as a hero treatment.** Vintage-photography sits at 4% in the imagery frequency analysis, and almost every implementation uses one or two vintage photos as decorative hero-elements over a modern grid. bable.pro inverts this: **48 vintage portrait photographs *are* the grid**. The grid is not a container for vintage photography; the grid is *itself* a printed photographic catalogue. There is no "non-vintage" content layer. Every pixel that is not cork or pencil is a 1958–2026 sepia portrait. 3. **Pulse-attention as the only animation pattern, replacing the `parallax` 92% / `spring` 67% / `cursor-follow` 62% / `magnetic` 50% / `stagger` 65% stack entirely.** This site has *one* animation pattern: a brass pin briefly glowing once every 8–15 seconds. There is no parallax (except the single honest pin-vs-photo z-axis on scroll), no cursor-follow, no magnetic, no stagger (except the one-time dust-settle on page load), no spring (except a tiny pin-on-hover micro-spring). Pulse-attention is the *entire* motion vocabulary, used in exact opposition to the dominant 92%-parallax convention. The site is almost still, and the pulse is almost startling against the stillness. 4. **Honeyed-neutral as a *single-source-of-light* monochrome, not as a "warm earth-tone palette."** Honeyed-neutral sits at 7% in the palette frequency, and most implementations use it as a vague warm-brown fill alongside other accent colors. bable.pro treats honeyed-neutral as a **literal optical claim**: every color on the page sits within 28°–48° of HSL hue, derived from a single 14:40-November-Tuesday-Bergen-sunlight source. There is no second light source. There is no accent color outside the brass-pin family. The discipline is aggressive. 5. **The site is a museum-wall with no visitor flow.** Every other site in the corpus that uses portfolio-grid uses it to onboard a visitor toward an action — view a project, hire the studio, contact the artist. bable.pro's portfolio-grid has *no exit*. There is no "view all," no pagination, no "load more," no contact. The wall is finite (48 portraits) and the visitor's only available action is *to look* and *to read translations*. This is a deliberate refusal of the conversion-funnel logic that almost every portfolio-grid implementation assumes. The bureau is not for hire and the website is not soliciting business. 6. **Hover-as-translation is the central interaction metaphor.** Almost every site in the corpus uses hover for `hover-lift` (11%), `magnetic` (50%), `tilt-3d` (10%), or `cursor-follow` (62%). bable.pro repurposes hover into a *narrative act*: until you hover, the foreign word stands alone, untranslated; when you hover, the bureau pencils in a playful Norwegian-and-English translation; when you stop hovering, the translation fades back to invisibility. The interaction *is* the translation bureau's labor. No other site in the corpus uses hover as a content-revealing semantic act tied to its theme; most use it cosmetically. 7. **Three typefaces, each with a single non-overlapping job.** Barlow Condensed handles all UI prose; Caveat handles only the handwritten captions; JetBrains Mono is used *only* for the four-digit archive numbers. The discipline is total: no typeface ever does two jobs. Most sites in the corpus use 2 typefaces with overlapping jobs (heading + body); bable.pro uses 3 typefaces with **strictly disjoint** jobs, mirroring the bureaucratic discipline of the trygdekontor filing system. 8. **The 49th cell.** Every grid-based site in the corpus terminates the grid at its mathematical limit. bable.pro adds *one extra cell* — a deliberate incompleteness — that contains no portrait, only a pencilled question mark and the words *"den neste"* ("the next one"). It is the only cell that pulses in the absence of visitor attention. It is a quiet acknowledgement that the catalogue is alive and that the visitor is, perhaps, the next sitter. This narrative gesture is unique in the corpus. **Chosen seed:** *aesthetic: scandinavian, layout: portfolio-grid, typography: condensed, palette: honeyed-neutral, patterns: pulse-attention, imagery: vintage-photography, motifs: vintage, tone: playful* **Avoided patterns (from frequency analysis):** hand-drawn (94%), glassmorphism (68%), card-grid (65%), photography-modern (97%), gradient (94%), warm (92%), parallax (92%), mono-typography-as-default (95%), spring (67%), stagger (65%), cursor-follow (62%), magnetic (50%), full-bleed-hero (87%), centered-hero (81%), asymmetric (58%). Every one of these conventions is present in this codebase at majority frequency; bable.pro refuses each of them in favor of disciplined Scandinavian catalogue stillness with one exception: a single warm-honey monochrome (which honors the warm-palette tradition while inverting its usual chromatic exuberance into strict single-light-source discipline).