# Design Language for diplomacy.bar ## Aesthetics and Tone diplomacy.bar is **a back-channel waterfront negotiation room where the wall is signed in spray paint and the spray paint is signed by ambassadors.** Picture a converted customs warehouse on the Adriatic — long sash windows facing a saltwater inlet, shipping ledgers from 1962 still bolted to the floor, a single 14-meter glass partition standing inside the hall. Over forty-three years, every diplomat, sherpa, technical negotiator, ceasefire mediator, fisheries arbitrator, and back-channel emissary who has used this room for **off-the-record talks** has left exactly one mark on that glass partition: their initials, a date, and a small inked sigil — sometimes a cipher, sometimes a maritime flag, sometimes a private joke between two delegations who hadn't spoken in twenty years. The marks accumulate like coral. The site is the catalogue of that glass. The aesthetic is **graffiti reframed as protocol.** Not subway-car wildstyle, not Banksy-stencil agitprop, not 90s skateboarding zine, not throwie-bombing. This is the graffiti of **the diplomatic margin**: the *para* of the signature, the dated note in the bottom-right of a ratified map, the chalk arrow on a back-stairwell wall that tells the deputy where the principals are smoking, the felt-tip annotation on a ministerial briefing folder that reads only `OK — but Wednesday`. Every spray-painted gesture on this site is a piece of negotiation choreography that survived the meeting. The wall is the record. The record is unsigned by design and signed by accumulation. The tone is **professional** in the strictest registry sense — the 5% professional bracket, not the 24% warm-inviting bracket — but professional inflected by **maritime weather**: salt haze, mid-morning Adriatic light, the hush of a customs hall after the ferry has left, the precise un-hurry of two delegations agreeing to disagree until lunch. Diplomacy here is **slow water and quiet hands**. No urgency, no triumph, no closure theatrics. The reader is treated as a counterpart, not an audience. Every line of copy reads like a personal letter from the protocol officer: composed, dry, observant, and terminating in a courteous half-step backward. The total mood is **the moment after the camera flash** — the official photograph has been taken, the principals have left for the dinner, and the mediator is alone in the hall, looking at the wall and recognising signatures from every previous round. Calm, slightly cold, slightly damp, faintly luminous. A site that has the dignity of a state document and the secret intimacy of a service stairwell. ## Layout Motifs and Structure The structural commitment is **hero-dominant (8% in the registry — claimed and held)**, not the conventional scrolling timeline of full-bleed (92%) or the card-grid (79%) of feature blocks. The entire site is composed of **one enormous hero plate followed by a single recessed annex**, in roughly an 88/12 vertical proportion. The hero plate is the **glass partition** — full-bleed, 100vw × 100vh on first paint, sticky for the first two scrolls, and only reluctantly yielding height to the annex below. There is no traditional header, no logo bar, no nav strip. The site begins with the partition and the partition is the site. **The Glass Partition (Hero, 100vh sticky for 220vh of scroll).** The single most important structural decision is that the partition fills the hero and **the partition is composed of seven horizontal strata of fogged coastal-blend glass**, each stratum 14.28vh tall, each one tilted along its own micro-axis (±0.4°) so the entire partition reads as **slightly imperfect plate glass**. Across these seven strata, **forty-three accumulated graffiti marks** are distributed in a non-uniform but compositionally weighted scatter: some clustered (a pair of initials + a date inside 8cm of glass — clearly the same conversation), some isolated (a single sigil 60cm from any neighbour — clearly a deliberate spacing). Each mark is a tiny SVG glyph composed of three to nine strokes in coastal-blend coral or oxidised teal, with a faint paint-drift halo and one drip pixel to acknowledge the medium. **The viewer's cursor is a soft crystalline lens** (a 280px-radius radial gradient, mostly translucent, faintly refractive) and only the marks **inside the lens** become legible — the rest fade to glass-fog. The page is read by **moving the cursor across the partition like a hand on a windowed page.** No click, no nav, no jump links — the lens is the entire reading interface for the hero. **The Magnetic Recess (Annex, 12% of vertical real estate).** Below the partition, a single horizontal annex band — 100vw × 36vh — contains the **dossier ledger**: a slim, monospaced index of dates and case numbers. There are no headlines here, no images, no buttons. Each row is **magnetic (patterns: magnetic, 70% — claimed because the implementation is unusual)**: as the cursor approaches a row from above, the row drifts upward by 4–8px, the case number rotates 0.3° toward the cursor, and the matching graffiti glyph in the partition above gains a subtle aura. The magnetism is **bidirectional and informational** — pointing at a dossier row reveals which mark on the wall corresponds to that conversation, and pointing at a mark on the wall ripples a corresponding row in the ledger below. The site is one organism with two surfaces, top and bottom of the same plate of glass. **Spatial Grid.** A **7-column asymmetric grid** governs every surface: columns 1–3 are the *quiet margin* (always at least 38% empty, holding only one or two marks per stratum), column 4 is the *meridian* (the ceremonial vertical line where the ratification dates collect), columns 5–7 are the *negotiated zone* where most marks cluster (because in diplomatic photography the principals always sit slightly right of centre relative to the camera). Spatial relationships between marks encode meaning — a horizontal pair within 6vw of each other implies *the same round of talks*; a vertical pair within 4vh implies *successive sessions of the same dossier*; a diagonal pair implies *successor states or successor envoys*. The grid is invisible but it is what makes the wall feel like a record rather than a graphic. **No second page. No footer. No CTA strip.** The site terminates in a single low-contrast italic line beneath the annex: *Marks are accepted by appointment. Quiet hands.* That is the entire footer. The reader leaves the site by closing the tab, the way a visitor leaves the customs hall. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`Commissioner`** (variable: weight 100–900, optical size, slant 0–14) — the principal typeface, serving the **commissioner-versatile (4% in the registry)** typography mandate. Commissioner is Kostas Bartsokas's 2020 humanist sans designed explicitly for **multilingual diplomatic and governmental correspondence** — drawn for the World Health Organisation, the Council of Europe, and OSCE-style multilateral documents. Its name is literally *the diplomatic typeface*. Used here at four sizes: **9.5pt / 14pt** for the dossier ledger rows (weight 320, tracking +0.04em — the precise weight of a 1980s Selectric typewriter ribbon on cream paper), **11pt / 16pt** for legends and metadata (weight 380), **22pt / 28pt** for the seven stratum titles etched faintly into the upper-left corner of each stratum (weight 240, slant 4°, optical size 28 — the sloped, slightly thinning *informal acknowledgement* register), and **clamp(54pt, 7.4vw, 96pt)** for the single oversized site-title that sits in the top-left of the partition in weight 200 and reads simply `D I P L O M A C Y · B A R` with hair-thin letterspacing (tracking +0.32em). Commissioner is never set above weight 480 on this site — boldness would betray the room. - **`Reenie Beanie`** (humanist handwritten) — the secondary typeface, used **exclusively for the forty-three graffiti marks** that bear textual content (initials, dates, half-words). Reenie Beanie is Sorkin Type's nearly-illegible felt-tip script — irregular baseline, variable x-height, an actual hand. It is rendered at **18–34pt with `paint-order: stroke`** so the strokes drift slightly outside the fill, simulating the bleed of a Pilot V5 marker on glass. Not used for any UI text. Not used in the ledger. Not used in body copy. It only appears as **trace** — the residue of a person who was here once. - **`JetBrains Mono`** (mono, weight 400/600) — the tertiary typeface, used **only for the case numbers in the dossier ledger** (e.g. `D-1987-04-Trieste/iii`) and for the four-digit ratification dates that appear in the meridian column. Tracking +0.06em, weight 400, never bold. The monospace here serves not the **mono (96% in the registry)** mandate as nostalgia or terminal-aesthetic, but as the **register of a stamped diplomatic protocol**: every case number is a record-keeping artefact, and record-keeping artefacts are monospaced because they must align in archive folders. **Palette — coastal-blend (2% in the registry, claimed):** The palette is a precise **coastal-blend** drawn from a single recurring memory: the Adriatic sky at 9:40 a.m. in November, when the haze has not yet lifted off the water and the customs hall windows are still cool to the touch. | Role | Hex | Use | |------|-----|-----| | **Glass Fog** | `#D7DCD6` | The base wash of every stratum of the partition — a pale silvered grey with the faintest seafoam undertone. The *unread* state of the wall. | | **Tide Line** | `#A8B7B3` | The mid-tone of the partition — used for the soft horizontal edges between strata, for the dossier ledger background, and for the 38% margin of every grid column. | | **Customs Cream** | `#EFE6D2` | The warm cream of the customs-hall stationery — used for body text in the ledger, for the four-digit ratification dates, and for the half-italic footer line. The single warm note in an otherwise cool palette, the colour of a hand resting on the edge of a folder. | | **Sigil Coral** | `#C36A57` | The first graffiti ink — a desaturated coastal coral, the colour of a Mediterranean shipping flag faded by sun. Used for roughly half of the forty-three marks, for the cursor-lens accent ring, and for the magnetic hover-rotation indicator on the dossier rows. | | **Oxidised Teal** | `#2E5B5E` | The second graffiti ink — the colour of patinated copper at the edge of a quay railing. Used for the other half of the marks, for the seven stratum labels, and for the entire dossier ledger background at 88% opacity. | | **Salt Black** | `#0E1418` | The colour of the partition's internal bevels and of the site title. Never pure black. Always cooled by the sea. | | **Brackish** | `#5A6E70` | The mid-grey-teal used for all secondary metadata, for the meridian column rule, and for any line that needs to be *present without being heard*. | These seven values are the entire palette. There are no gradients in the conventional **gradient (97% in the registry)** sense. Every blend on the page is a **physical glass-haze blend** — performed by stacked translucent layers with `mix-blend-mode: multiply` (for the inks soaking into the glass) and `mix-blend-mode: screen` (for the morning haze lifting off the water). The cursor-lens performs an additional `backdrop-filter: blur(2.4px) saturate(1.08)` so that the act of reading slightly wets the glass. ## Imagery and Motifs The visual world is built from four motif families, hand-composed from SVG, CSS gradients, and a small amount of WebGL — **zero photography (98% in the registry — its exclusion is the structural deviation)**, zero stock illustration, zero anime line-art, zero icon library. Diplomacy is not a stock photograph. **1. Glassmorphic Cards (imagery: glassmorphic-cards, 8% in the registry — claimed).** The seven strata of the partition are themselves **glassmorphic cards** in the strict registry sense — but they are not the conventional iOS-frosted `backdrop-filter: blur(20px)` rectangles floating over a hero photograph. They are **massive, full-width, edge-to-edge plates** of physically simulated armoured glass. Each stratum has: a 1.2px inner highlight along the top edge (the way light catches the upper bevel of a sash window), a 0.4px inner shadow along the bottom edge (where the silicone bead has yellowed), a faint vertical hairline 18% in from the left (the seam between two glass panels), and a soft 3px outer drop-shadow in Salt Black at 14% opacity (the partition is freestanding in the hall — it casts a small floor-shadow onto the next stratum below). The frosting is non-uniform: slightly heavier where the marks cluster (because graffiti collects condensation), slightly clearer in the quiet margin (because that area of the room is closer to the open windows). Glassmorphism here is **a load-bearing architectural element, not a hover-effect**. **2. Crystalline Sigils (motifs: crystalline, 9% in the registry — claimed).** The forty-three accumulated marks are **crystalline sigils** — not freehand wildstyle graffiti, not stencilled propaganda, but small geometric ciphers built from **3 to 9 straight strokes** that share the construction logic of mineral crystal lattices. Each sigil is on a hexagonal or rhombic lattice (the hexagonal close-packed arrangement of NaCl, the rhombic faces of calcite). A typical sigil is composed of: two diagonal strokes establishing the lattice axis, three or four orthogonal strokes filling the unit cell, and one terminal cap stroke that signs the mark (a tiny serif, a cross-tick, a circular dot). The crystalline rule is what stops the wall from reading as visual noise — every mark **has a reason for every line**, the way a diplomatic communiqué has a reason for every comma. Some sigils encode known diplomatic flag semaphores at 30° rotation (Vienna Convention article numbers, Kellogg–Briand date-stamps, the OSCE compass rosette). The literate reader will find them. The non-literate reader will see only that the wall is composed. **3. The Cursor Lens (a custom motif, not in the registry).** The reader's cursor is replaced — for the duration of time spent over the partition — by a **280px-radius soft crystalline lens**. The lens is a stacked composition: an outer 1px ring in Sigil Coral at 28% opacity (the bezel), a 3px inner ring of Customs Cream at 12% opacity (the meniscus of the polishing cloth), a radial gradient from full-transparent at the centre to glass-fog at 240px (the lens itself), and a `backdrop-filter: blur(2.4px) saturate(1.08) brightness(1.04)`. The lens **lifts the fog from whatever it covers** — within the lens, the underlying graffiti becomes legible, the stratum label becomes readable, the case-number-to-mark correspondence reveals itself. Outside the lens, the glass remains fogged. The entire reading experience of the hero is performed by **moving the lens**, the way a forensic archivist moves a magnifying glass across a sheet of stamps. There is no click. There is no scroll-jacking. Just the lens and the wall. **4. The Maritime Margin (motifs: crystalline + nature, hybrid).** Along the right edge of the partition, in the unused 7th column, runs a **vertical 8px-wide ribbon of crystalline pattern** — a fractal Penrose-tile fragment in Brackish at 18% opacity, generated once via SVG and never re-rendered. It reads simultaneously as: a salt-crystal accumulation along a window frame, the geometric edge-pattern of an OSCE protocol cover, and the kind of tessellated end-paper used in 19th-century treaty bindings. Functionally, it acts as the **scroll progress indicator** for the 220vh of partition: as the reader scrolls, a 14vh tall portion of the ribbon brightens from 18% to 92% opacity. It is the only animation on the site that is not driven by the cursor. **No icons. No avatars. No flags as flags.** The forty-three marks contain **encoded** flag-semaphore references but no flag is ever rendered as a flag. The site refuses the iconography of the postcard-diplomacy register (clasped-hand silhouettes, dove illustrations, stylised globe with longitude lines, neoclassical pillar). Those tropes are how diplomacy is sold to the public; this site is how diplomacy is practised in the back room. ## Prompts for Implementation Build diplomacy.bar as **one HTML document, one CSS file, one ES module, one tiny WebGL shader, and zero photographs.** The asset budget is: `partition.svg` (the layered glass strata, 28kb), `sigils.svg` (the forty-three crystalline marks as a single sprite-sheet, 22kb), `penrose-margin.svg` (the right-edge crystalline ribbon, 6kb), and `noise.png` (a 256×256 tiling salt-haze texture overlay at 6% opacity, 4kb). No web fonts beyond the three Google Fonts. No analytics. No third-party widgets. The whole thing must feel like a **single sealed object**, the way a state document feels. **Storytelling shape.** The narrative arc has three quiet movements: - *First movement (0–60vh of the hero).* The reader arrives. The partition is fogged. Only the site title and the seven stratum labels are visible, faint. The cursor materialises as the lens. The reader's first instinct is to move the lens — and the moment they do, the first three graffiti marks become legible. The lens is taught entirely by being used. - *Second movement (60vh–180vh of the sticky hero).* The reader explores the wall. As they scroll, the partition appears to **rise past them** at 0.7× scroll speed — they are descending past a tall pane of glass. The crystalline ribbon on the right brightens stratum by stratum. Marks reveal themselves, cluster, encode, recede. There is no instructional copy. The wall teaches itself the way a museum case teaches itself when you walk along it. - *Third movement (180vh–220vh, transition into the annex).* The partition releases its sticky position and the dossier ledger emerges from below. The cursor's lens softly ages out — its bezel dims from Sigil Coral to Brackish over 0.8s — and the cursor returns to a normal arrow over the ledger. The bidirectional magnetism between marks above and rows below begins. This is the mediator-alone-in-the-hall moment: the meeting is over, the record is now legible, the reader is reading. **Animation principles.** - **Magnetism is informational, never decorative.** Every magnetic motion (4–8px row drift, 0.3° rotation, 280ms ease-out-quart) is the mechanical answer to a question the reader is asking with the cursor. There is no random hover-bobble, no idle attention-pulse, no scroll-triggered fade-in of decorative elements. **`prefers-reduced-motion` reduces the magnetism amplitude to 0px and the rotation to 0°** — the wall stays still and remains fully readable. - **Spring + magnetic + parallax are layered.** The lens has a subtle spring trail (mass 0.8, stiffness 220, damping 26) so it slightly overshoots the cursor, like a magnifying glass with a small amount of optical play. The partition has a 0.7× parallax against scroll. The ledger rows have magnetic rise. **Three patterns, each doing one job, none competing for the reader's attention.** - **Transitions are slow.** Default duration is 480ms with `cubic-bezier(0.16, 0.5, 0.2, 1)`. Nothing snaps. Nothing pops. The room is decorous. - **No autoplay video. No carousels. No modals. No popovers. No CTAs. No newsletter form. No pricing block. No stat-grid (`347+ Successful Mediations`). No testimonial wall. No `Start Now` button.** The site is a record, not a funnel. The closest the site comes to a conversion event is the half-italic footer line *Marks are accepted by appointment* — and that line has no link, no email, no contact form. The reader who needs to leave a mark already knows how. **Implementation specifics.** - **The Lens.** Implement with a CSS `mask-image` of a radial gradient and `backdrop-filter` on a fixed-position pseudo-element that follows `pointermove` with a spring solver in JS. On touch devices, the lens follows touch and persists for 1.4s after touchend. The lens is the entire reading interface — it must work on first paint, with no warm-up, and at 144Hz on capable devices. - **The 43 sigils.** Authored once in Figma, exported as a single inline SVG `` sheet, instanced via ``. Stroke-width 1.4px, `vector-effect: non-scaling-stroke`, paint in Sigil Coral or Oxidised Teal per stratum allocation. Each sigil has a `data-case` attribute matching a `data-case` on its dossier-ledger row. The bidirectional magnetism is wired through a single `MutationObserver`-free pub-sub of cursor proximity events. - **The seven strata.** Authored as seven absolutely positioned `
` elements inside the sticky hero, each with its own `transform: rotate(var(--micro-tilt))` reading from a CSS custom property in the range -0.4° to +0.4°. The fogging non-uniformity is achieved by a subtle conic gradient overlay per stratum, generated once at build time. - **The crystalline ribbon.** A single SVG with 240 Penrose tiles, masked to a 8px column, brightness driven by `IntersectionObserver` against the partition strata. Static otherwise — Penrose patterns are non-periodic; once authored, they should never animate. - **The salt-haze noise.** A 256×256 PNG tile at 6% opacity over the entire viewport, fixed-position, slow vertical drift of -3px/s. This is the only ambient motion on the site. It is what keeps the room from feeling embalmed. **Copy register.** Every line of copy is **professional**, dry, observant, and slightly cooler than ambient. Rules: no exclamation marks, no first-person plural except in the footer, no superlatives, no calls to action, no marketing verbs (*unlock*, *empower*, *transform*, *accelerate*). Permitted verbs: *receive, mark, register, attend, observe, decline, agree, table, hold.* The reader is addressed as a counterpart, not a customer. The longest single sentence on the entire site does not exceed 22 words. Most sentences are 9–14 words. The footer is exactly five words: `Marks are accepted by appointment.` Then on a new line, smaller and italic: `Quiet hands.` **What this site is not.** It is not a directory of diplomats. It is not a service offering mediation. It is not an academic journal of negotiation theory. It is not a memoir. It is not a portfolio. It is not a cocktail bar (the `.bar` TLD here is read in the **railing/threshold/bar-sinister** sense — *the bar at the door of the negotiation room*, the line one crosses to enter, the horizontal mark on the heraldry — not in the cocktail sense). The site is a **catalogue of marks left on a wall by people who agreed in private to not say what they agreed about.** ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused patterns surfaced by frequency analysis: 1. **Graffiti reframed as diplomatic protocol residue, not as street-art rebellion.** The 5% of CMassC sites that have used the graffiti aesthetic reach reflexively for one of three things: subway-car wildstyle wordmarks, Banksy-stencil agitprop critique, or 90s skate-zine chaos. diplomacy.bar instead stages graffiti as **the marginalia of statecraft** — initials and date-sigils left on a glass partition by negotiators after closed sessions. The graffiti is geometric, crystalline, restrained, signed. It carries the formal dignity of a treaty signature page while remaining unmistakably **a hand on a wall**. This collapses two categories that no other site in the registry has put into contact: graffiti and protocol. 2. **Hero-dominant layout (8%) committed to a single sticky 220vh partition with no second hero.** Most hero-dominant sites in the registry use the hero as an opening salvo before transitioning to a card-grid (79%) or full-bleed scroll (92%) of feature blocks. diplomacy.bar refuses the transition. The hero **is the entire site** for the first 88% of vertical real estate, and the only thing that follows is a thin annex. There are no cards. There are no features. There is no second hero. The hero is not an introduction to the content — it is the content, and it is read by moving a lens across it. 3. **Cursor-as-lens reading interface — not a cursor-follow effect, an entire reading mechanic.** Cursor-follow appears in 80% of the registry as a small decorative spotlight or glow that trails the cursor over an otherwise readable page. diplomacy.bar inverts this: **the page is unreadable by default**, fogged glass, and the cursor lens is the only way to read it. This is a deeper commitment than any cursor-follow site in the registry. It also gives `prefers-reduced-motion` and keyboard-only readers a fallback that is genuinely different rather than degraded — a tab-driven progressive un-fogging where focus on a stratum un-fogs that stratum entirely. 4. **Coastal-blend palette (2%) inflected by maritime-customs memory rather than by beach-resort cliché.** The two existing coastal-blend sites in the registry skew toward beach-house pastel or Mediterranean travel-blog warmth. This palette refuses both. It is the **November Adriatic at 9:40 a.m. in a customs hall** — silvered glass-fog, oxidised quay-rail teal, faded shipping-flag coral, customs-stationery cream. Cool, slightly damp, slightly damp-warm where the cream sits. The palette has the temperature of a hand resting on the edge of a folder, not the temperature of a beach towel. 5. **Commissioner (4%) used in its native diplomatic register.** Commissioner was literally drawn for multilateral organisations (WHO, OSCE, Council of Europe). Most uses of it in design contexts treat it as a generic humanist sans. diplomacy.bar **honours its origin** — the typeface is being asked to do exactly the work it was drawn to do, which is to set quiet, multilingual, multi-weight diplomatic correspondence with restrained dignity. The optical-size and slant axes are used as documentary registers (sloped slant for *informal acknowledgement*, smaller optical size for *archive metadata*) rather than as decorative variation. 6. **Crystalline motif (9%) as a constructive grammar for the graffiti, not as an ornamental decoration.** Crystalline elsewhere in the registry tends to mean faceted hero backgrounds, gem-icon decorations, or holographic shimmers. Here, crystalline is **the construction rule for the forty-three sigils** — every mark on the wall is built on a hexagonal close-packed or rhombic lattice, so the graffiti is *literally crystalline* at the level of stroke logic. The crystalline-ness is structural and invisible to the casual reader, but it is what gives the wall its unified composition. 7. **Magnetic pattern (70%) implemented as bidirectional information transfer between hero and annex.** Magnetic in 70% of the registry means *button hover-attraction* or *cursor-pull on cards*. diplomacy.bar uses magnetism as a **two-way semantic link**: pointing at a graffiti mark in the hero ripples its corresponding row in the annex ledger, and pointing at a row in the ledger auras the corresponding mark above. The site is one organism with magnetic coupling between its top and bottom surface. No other registry site does this with magnetism. 8. **Glassmorphic-cards (8%) as a load-bearing architectural element, not as a UI hover-state.** Glassmorphism in the conventional 68% of registry sites is a stack of small floating frosted rectangles over a hero photograph. Here, the glassmorphic surface is **the entire 14-meter partition** — full-width, full-height, structurally non-decomposable. It has the weight of architecture, not the weight of an iOS card. 9. **Professional tone (5%) treated as reticent observation, not as corporate authority.** The 5% of professional-tone sites in the registry tend to read like a McKinsey deck. This site reads like a **protocol officer's letter**: composed, dry, slightly self-effacing, terminating in a courteous half-step backward. The professional register here is not the register of corporate competence; it is the register of *the person who knows what was actually decided in the room and is choosing not to say.* 10. **Footer is five words and contains no link.** The vast majority of sites in any registry treat the footer as a structural sitemap. diplomacy.bar's footer is `Marks are accepted by appointment. Quiet hands.` — and that is all. There is no contact form, no email, no social links, no copyright stamp, no language switcher, no privacy policy. The site refuses to terminate in a service interface. It terminates in a closing line, the way a letter does. **Chosen seed (from assignment):** aesthetic: graffiti, layout: hero-dominant, typography: commissioner-versatile, palette: coastal-blend, patterns: magnetic, imagery: glassmorphic-cards, motifs: crystalline, tone: professional. **Avoided patterns from frequency analysis:** hand-drawn (96%), photography (98%), full-bleed (92%) as the conventional scrolling timeline, card-grid (79%), gradient (97%) as conventional CSS gradient, warm palette (96%), parallax (95%) as decorative effect, mono (96%) as nostalgic terminal-aesthetic, humanist (46%) as default body face, warm-inviting (24%) and pastoral-romantic (29%) tones, vintage motif (25%), tech motif (14%), nature motif (18%). Each of these was actively declined or radically re-inflected in service of the design.