# Design Language for alth.ing ## Aesthetics and Tone The domain **alth.ing** is read as the Old Norse word **Alþingi** — *the all-thing*, the open-air assembly that the Icelanders convened on the Þingvellir lava plain in the year 930. It is the oldest surviving parliament word in any living language, and it literally means *every-thing-meeting*: the place where every free person, every grievance, every law, every quarrel, and every saga arrived in one body and was spoken aloud, on a rock, under the sky. Bolted to **.ing** (a present-participle TLD), the URL becomes a verb that refuses to finish: **alth-ing** — *all-thinging*, the act of gathering everything that exists, without a stop. The site is therefore a **futuristic Þingvellir** — a thousand-year-old assembly imagined as if it had skipped industrial civilization entirely and re-emerged in a quiet, post-AGI century where parliaments were drawn by hand on burgundy vellum and indexed by satellite. The aesthetic is **hand-drawn futurism on dried-blood paper**: every sigil, schematic, antenna array, and constituency map is rendered as if a 25th-century field cartographer were sitting on a basalt outcrop with a sable-hair brush, a glass nib, and a single bottle of wine-dark iron-gall ink, drafting the proceedings of an assembly that has not yet been called. Tone is **minimal** but never thin. Minimal here means *one voice, slowly* — the cadence of a single speaker who has the floor of the Lögberg (the Law Rock) and is in no rush. There are no exclamations, no marketing verbs, no "discover," no "unlock." The page speaks the way the Lawspeaker once spoke: a third of the laws each summer, from memory, into the wind, with long pauses for the wind to carry them. The mood is **convocational**: the visitor has not arrived at a product — they have arrived at a meeting that is already a thousand years old and that will continue without them, and the courtesy of the page is to let them stand at the back and listen. The dried-blood burgundy ground is non-negotiable. It is the color of oxidized iron-gall ink on uncoated stock, of the inside of a stave-church beam, of the wax that seals a writ. Every other color on the page must defer to it. The page does not glow — it is **lit from inside the ink**, the way a candle behind vellum casts a tea-bronze halo. There are no neon accents, no glassy chrome, no holographic gradients; the futurism comes through in the *subjects* drawn on the page (orbital constituencies, cold-fusion legislatures, satellite vote-counters) rather than through flashy surface treatment. ## Layout Motifs and Structure The page is built on an **asymmetric** spine that the eye reads diagonally — from upper-left to lower-right, the way the Norse read a stave. There is no symmetric hero, no centered wordmark, no balanced two-column. Every section sits **off-axis** by a deliberate offset (typically 11.5% of viewport width on desktop, 4% on mobile) and the offset alternates direction section-to-section, so the spine appears to *breathe sideways* as the visitor scrolls. **Macro structure (top to bottom, six leaves):** 1. **The Lögberg (`100svh`).** A near-empty leaf. The wordmark `alþ.ing` sits at coordinates (12% from left, 38% from top). To its lower-right, in the negative space, a single hand-drawn SVG of a basalt outcrop is path-drawn over 2.6 s with a 1.25 px nib stroke in `#F5E9D7` cream-of-vellum on the burgundy ground. Below the rock, in 14 px sans-grotesk: *"a meeting that began in 930 and has not adjourned."* Nothing else. No nav, no menu, no CTA. The visitor must scroll. 2. **The Þingvellir Plain (`160svh`).** A long leaf rendered as a hand-inked **constituency map** of an imaginary planetary parliament. The map is asymmetric: continents drift to the right margin, ocean bleeds off the left edge, a compass rose sits in the lower-left at 30% scale. The constituencies are not Earth's nations — they are 144 districts named in a Norse-Icelandic-by-way-of-Voyager-1 register: *Kepler-Goðar, Eyjafjallajökull-Synod, L2-Halo Riding, Bering Lögrétta, Hellas Quarter, Subsurface-Europa Hreppr*. Each constituency is a hand-drawn polygon traced with `path-draw-svg` as the visitor's scroll position passes it; the polygons fill in slowly with a 14% cream wash. Hovering a constituency reveals a marginal annotation (drawn as a hand-lettered tag on a dotted leader line). 3. **The Lawspeaker's Recitation (`120svh`).** A single column of text, 38ch wide, set 11.5% from the left margin. The Lawspeaker (an unnamed narrator) recites the **Althing's standing orders** in present-participle, fragmentary lines, each line revealing on `path-draw-svg` underline as it scrolls into view. The lines are not bulleted — they are joined by a single thin red ink-line that snakes between them down the column, drawn as one continuous SVG path that updates as you scroll. 4. **The Marginalia Field (`180svh`).** A asymmetric scatter of **schematic field-drawings**: a satellite vote-counter cross-sectioned, an antenna array calibrated in Old Norse runes, a wax-and-quartz seal, a hand-drawn data-flow diagram showing how the assembly's verdicts propagate to L2-Halo via cold-line semaphore. Each schematic is a mixed-media composite — photographic basalt fragment + hand-inked overlay + scanned wine-stained margin. They are placed off-grid: one at (8%, 14%), one at (62%, 31%), one at (24%, 58%), one at (78%, 79%), one at (15%, 92%). Each draws in via `path-draw-svg` over 1.8–2.4 s. 5. **The Verdict Tablet (`100svh`).** A single hand-drawn SVG of a rune-stone, off-center to the right (centered at 68% from left), inscribed with a fictitious unanimous verdict from *the assembly that has not yet been called*. The runes draw in one stroke at a time, slow, as if being chiseled. The verdict is in the present participle: *"…being equal under the wind, being held by the same horizon, being heard before being judged…"* 6. **The Adjournment that Refuses to Adjourn (`80svh`).** A near-empty leaf. A single hand-drawn line of cream ink — one continuous unbroken `path-draw-svg` of variable wobble — runs across the leaf from the lower-left corner to the upper-right corner of the page. At its upper-right end, a single sans-grotesk caption: *"the assembly does not close. it merely runs out of light."* The line continues off-screen, undrawn, implying the meeting is still going. **Spine details.** A **hairline vertical rule** of `#5A1A28` (one shade darker than the ground) runs the full height of the page at 11.5% from the left edge, broken every 14vh by a hand-drawn stitch-mark. This rule is the assembly's **time-axis** — the vellum's fold. The asymmetric offsets are measured against it. ## Typography and Palette **Typography is sans-grotesk** — the page is set entirely in two grotesque sans families chosen for their *quiet authority* rather than their fashion. Both are on Google Fonts. - **Display: [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)**, weight 500 for the wordmark `alþ.ing` (uses the thorn glyph as a real character, not an image), weight 600 for leaf-titles set at clamp(2.4rem, 5.6vw, 5.6rem). Tracked at -0.012em. The lowercase `g` and `a` carry the futurist edge; the lowercase `þ` in *alþ.ing* survives because Space Grotesk has a full Icelandic glyph set and renders thorn cleanly at any size. Line-height 1.04. - **Body: [Inter](https://fonts.google.com/specimen/Inter)**, weight 400 for running text at 16/24 px, weight 500 for emphasis, weight 350 (variable axis) for the Lawspeaker's recitation column to give it a hushed, almost-italic-but-not-italic timbre. Optical-size axis pulled to 14 for body, 28 for marginalia. Tabular numerals on for all timestamps and constituency numbers. No italic — emphasis is by weight and color, never slant. - **Marginalia/Field-tags: Inter** at 11/14, all-caps, tracked +0.16em, color `#C49B6F` parchment-gold, used only for the dotted-leader hover annotations on the constituency map. There is **no monospace**, no serif, no handwritten font. The hand-drawn quality lives in the **SVG line-work**, not in a script font. This is the non-obvious part of the seed: hand-drawn aesthetic + sans-grotesk type. The page looks hand-drawn because the *drawings* are; the *words* are crisp and modern, the way an architect letters their own hand-inked drawings in a clean grotesque. **Palette — deep-burgundy with seven companions.** - `--ground: #4A0E1F` (oxblood vellum, oxidized iron-gall on burgundy paper — the page background, every leaf) - `--ground-deep: #2E0710` (the ground in shadow, used for the inside of the constituency polygons after wash, and for the type-shadow under the wordmark) - `--rule: #5A1A28` (one stop above ground; the hairline vertical rule and section dividers) - `--ink: #F5E9D7` (cream-of-vellum, the primary ink color for body text and SVG line-work — *not* white, never white) - `--ink-faint: rgba(245,233,215,0.42)` (faint ink, used for the constituency wash, secondary annotations, and the time-axis stitch-marks) - `--gold: #C49B6F` (parchment gold, used only for marginalia tags and the wordmark's understroke) - `--wine: #7A1F2E` (a wine-dark accent one stop *warmer* than ground, used for the snaking ink-line through the recitation column and for the verdict-tablet rune-glow) - `--candle: #E8B47A` (the tea-bronze halo behind the Lawspeaker's column at peak scroll, applied as a `radial-gradient(ellipse 60% 40% at 11.5% center, var(--candle) 0%, transparent 70%)` at 8% opacity) The palette is **warm-monochrome by default and gradient by accident**: every value lives on a single line from `--ground-deep` to `--candle` through `--ground → --rule → --wine → --gold → --ink-faint → --ink`. There is no blue, no green, no cyan, no purple. The futurism is *not* expressed through neon — it is expressed through the *content* of the drawings (orbital constituencies, satellite vote-counters) inked in the same wine-dark vocabulary. ## Imagery and Motifs Imagery is **mixed-media** — every illustrative asset on the page is a deliberate composite of three layers: 1. **A photographic ground** (low-opacity, 18–24%): macro shots of basalt grain, of vellum fiber, of dried wine on linen, of iron-gall ink pooling in a glass nib, of frost on Þingvellir lava. These are duotoned to `--ground` and `--gold` and used as *underlayers* — the way an illuminator would size a vellum leaf before drawing. 2. **A hand-inked SVG line-layer**: the actual drawing — constituency polygons, antenna schematics, rune-stones, the basalt outcrop, the snaking ink-line, the marginalia flora. All drawn at 1.0–1.5 px nib-weight in `--ink`, all path-drawn on scroll using `path-draw-svg` with `stroke-dasharray` animation. Wobble is preserved (the lines are *deliberately not vector-perfect*) — a 0.6 px sine-jitter is baked into each path so the line breathes. 3. **A scanned-margin texture** (low-opacity, 6–10%): wine-stains, candle-wax drips, finger-smudges, fold-creases. These sit on top of the line-work as a `mix-blend-mode: multiply` overlay, giving every drawing the look of having survived a long winter in a wooden chest. **Motif vocabulary — futuristic, but rendered as if drawn in 1024 by a scribe who has never seen a screen:** - **Orbital constituencies.** Imaginary parliamentary districts that span Earth, near-Earth orbit, the L1/L2/L4/L5 Lagrange halos, the Lunar farside, the Subsurface-Europa hreppr (parish), and the Kepler-Goðar (Kepler-godhood) deep-space chapter. Each is hand-drawn as an irregular polygon with a fictitious population count (in tabular Inter numerals) and a one-line constituency motto in Old-Norse-by-way-of-future register. - **Satellite vote-counters.** Mechanical drawings of vote-counting satellites cross-sectioned the way a 16th-century instrument-maker would draw an astrolabe. Gears labeled in runes; crystal oscillators drawn as faceted hexagons; antenna-arrays calibrated in *thingmót* (assembly-meets) per orbit. - **The Lögberg itself.** A hand-drawn basalt outcrop, repeated at three scales across the page (full-height in leaf 1, thumbnail in the marginalia field, micro in the footer). Rendered as a single open SVG path with deliberate mis-strokes. - **Stave-runes.** A custom alphabet of 18 hand-drawn runes used for section numerals, leaf-counts, and the verdict-tablet. The runes are real Younger Futhark glyphs (ᚠ ᚢ ᚦ ᚬ ᚱ ᚴ ᚼ ᚾ ᛁ ᛅ ᛋ ᛏ ᛒ ᛘ ᛚ ᛦ) drawn by hand in `--ink` and used sparingly as ornament. - **The snaking red-wine line.** A single continuous SVG path that threads through the recitation column, around each fragment, and out into the next leaf. It is the *Lawspeaker's voice made visible* — one breath, one line, no break. - **Wax-and-quartz seal.** A circular hand-drawn motif used as the page's only "logo" element, positioned in the lower-right of the footer at 48 px. It is drawn as if pressed into wax, with a quartz inclusion at center. There are **no stock photos, no 3D renders, no AI-generated images, no icon fonts, no FontAwesome.** Every visual element is hand-drawn or hand-composed. ## Prompts for Implementation Build alth.ing as a **single, slow, six-leaf field journal** — the visible record of an assembly that has been in continuous session since the year 930 and is now extending into the orbital century. The page is read top-to-bottom, slowly, the way one reads the proceedings of a parliament: with patience, with deference, and with an awareness that one is a guest in a room that does not need one. **Do not implement:** modals, tooltips on click, dropdowns, mega-menus, search bars, sticky headers, hamburger menus, side-drawer nav, hero CTAs, "Get Started" buttons, pricing tables, stat grids, feature cards, social proof rails, testimonial sliders, newsletter signup modals, cookie banners (handle compliance via a single ground-colored line at page-foot), customer-logo bars, comparison tables, FAQ accordions, "Why Us" sections, badge clusters, App Store / Play Store buttons, language switchers presented as flags, or anything that looks like SaaS marketing furniture. None of these belong inside a parliament. **Do implement:** - **A six-leaf scroll narrative** matching the macro structure above. Each leaf is sized in `svh` (small viewport height) so mobile chrome does not break the geometry. The leaves are not separated by visible dividers — they are separated by the *changing offset* of the asymmetric spine and by long paragraphs of negative space. - **`path-draw-svg` everywhere.** Every line in every drawing must animate in by `stroke-dasharray` / `stroke-dashoffset` on scroll-trigger using IntersectionObserver. Stagger entrance: long lines (the snaking recitation line, the constituency-map outlines) over 2.4–3.2 s; short lines (rune-marks, marginalia flora) over 0.8–1.2 s. Use `cubic-bezier(0.22, 1, 0.36, 1)` (an elastic-out close to a natural pen-lift). Wobble must remain — do not smooth the paths in code. - **A scroll-driven Lawspeaker line.** The continuous wine-colored SVG path that snakes through the recitation column must lengthen as the visitor scrolls. Use `getBoundingClientRect()` to compute the visible extent of the column and update `pathLength` accordingly. The line never retracts on scroll-up; it only grows. (This represents the irrevocability of spoken law.) - **Asymmetric spine that breathes.** The 11.5%-from-left vertical rule must be present on every leaf, but its *position relative to content* alternates: leaves 1, 3, 5 push content to the right of the rule; leaves 2, 4, 6 push content to the left. The rule itself is fixed; the content swings around it. - **A constituency-map hover layer.** On the Þingvellir Plain leaf, mouse-hovering any of the 144 polygons reveals a marginal annotation (drawn as a hand-lettered Inter-caps tag on a dotted leader line) at the page's right margin. The leader line draws on enter (200 ms) and erases on leave (400 ms). On touch devices, tapping a polygon pins its annotation; tapping elsewhere unpins. Up to one annotation visible at a time. - **A verdict-tablet that chisels.** On the Verdict Tablet leaf, the runes do not fade in or path-draw smoothly — they appear in **discrete chisel-strikes**, one stroke at a time, each stroke 80 ms apart, each stroke a tiny `transform: translate(±0.4px, ±0.4px)` jitter that settles in 120 ms. Sound is optional but if implemented must be *user-initiated only* — no autoplay. - **A continuous adjournment line.** The final leaf's single unbroken cream line must be implemented as one SVG path drawn over 4.4 s on enter, with `stroke-linecap: round` and a mild noise-jitter applied via `feTurbulence` filter (baseFrequency 0.6, numOctaves 2, displacementScale 0.8). The line must visibly extend past the right edge of the viewport; do not clip it cleanly. - **Photographic underlayers via `` with duotone CSS filter.** Each mixed-media composite uses `filter: sepia(1) hue-rotate(330deg) saturate(1.4) brightness(0.45)` on the photographic layer to push it onto the burgundy palette. Cache aggressively; never cross-fade. - **No JavaScript framework.** Plain HTML, CSS custom properties for the palette, vanilla JS for IntersectionObserver and scroll-progress only. No React, no Vue, no Svelte. The page should be readable with JS off (animations skipped, all SVGs revealed at full opacity, asymmetric layout preserved). - **Storytelling above all.** The visitor should leave feeling they have *attended a meeting* — not browsed a page. Every word, every line-stroke, every hover-annotation should reinforce the conceit that the assembly is real, ongoing, and that the page is its current minute-book. ## Uniqueness Notes Three or more deliberate differentiators from every other site in the registry, with frequency-analysis context. 1. **Hand-drawn aesthetic paired with sans-grotesk typography (instead of handwritten type).** The frequency report shows hand-drawn aesthetic at 77% (heavy) but typically married to handwritten type (40%). Of the 27 designs, exactly **one** uses sans-grotesk (3%), and that pairing — *hand-drawn drawings with crisp grotesque words* — appears in zero other designs. alth.ing's hand-drawn quality lives entirely in the SVG line-work; the words are set in Space Grotesk and Inter with engineering-drawing crispness. This is the architect's-fieldbook pairing: hand-inked schematic, machine-precise lettering. It is the explicit antidote to the "scrapbook with a marker font" trap that swallows most hand-drawn designs. 2. **Deep-burgundy as the entire substrate, not as an accent.** The frequency report shows deep-burgundy at 3% (one prior design). alth.ing makes deep-burgundy the *page-ground itself* — every leaf, every section, every viewport is `#4A0E1F`. There is no white, no off-white, no light mode. The palette is a single warm monochrome line from oxblood to candle-bronze. Of the 27 designs in the registry, none use a saturated burgundy as the full-page substrate; the closest is burgundy-cream which still treats burgundy as an accent against cream. This commits. 3. **A futurist subject rendered in pre-industrial hand.** The motif vocabulary is *futuristic* — orbital constituencies, satellite vote-counters, Lagrange-halo districts, Subsurface-Europa parishes — but every drawing is rendered as if by a 12th-century scribe with iron-gall ink. Of the 27 designs, futuristic motifs appear in roughly 3% (one prior), and tech/sci-fi motifs are typically rendered with neon, chrome, glassmorphism, or holographic surfaces. alth.ing inverts that: the *future* is the subject, the *medieval* is the medium. This is a combination present in zero other designs. 4. **A six-leaf parliamentary minute-book structure rather than a marketing landing page.** No hero, no CTA, no pricing, no stat grid, no feature cards, no testimonial slider, no FAQ. The page is structured as the *proceedings of an assembly* — Lögberg, Þingvellir Plain, Recitation, Marginalia Field, Verdict Tablet, Adjournment — and the visitor is a guest at the back of the room. This narrative form is unique in the registry. 5. **Asymmetric spine that breathes.** The vertical rule at 11.5% is fixed, but content alternates which side of it it swings toward, producing a sideways breath as the visitor scrolls. Asymmetric layout is at 48% in the registry, but it is almost always implemented as a single static off-center frame; the alternating-swing approach (a *symmetric anti-symmetry*) does not appear elsewhere. 6. **A continuous wine-colored ink-line as the Lawspeaker's voice.** A single SVG path that grows monotonically with scroll, threading through a column of fragmentary recitation and never retracting — implementing the irrevocability of spoken law. This is `path-draw-svg` (25% in registry) used as a *narrative spine*, not as an entrance flourish. Other designs use path-drawing for decorative reveals; alth.ing uses it as the page's controlling metaphor. 7. **The thorn glyph (þ) as a first-class typographic element.** The wordmark `alþ.ing` uses a real Icelandic thorn from Space Grotesk's extended Latin — not a stylized ascender, not an image. This is the only design in the registry whose wordmark depends on a non-Anglo glyph for its identity. **Avoided patterns (per frequency analysis):** - Avoided **photography** (88%) — replaced by mixed-media composites with photographic underlayers held to 18–24% opacity and duotoned to the burgundy palette. The visitor never sees a "real photo" as the dominant layer. - Avoided **full-bleed** + **centered** (88% / 88%) as the layout default — replaced by an asymmetric-spine that explicitly refuses to center. - Avoided **vintage motifs** (81%) — although the medium is medieval, the *subject* is futurist (orbital constituencies, satellite vote-counters), so the page does not read as nostalgia. - Avoided **warm + gradient** palette default (96% / 92%) — alth.ing is warm but **not** gradient-based; it is a flat single-substrate burgundy with hand-inked accents that read as monochrome variation, not as gradient surfaces. - Avoided **mono typography** (92%) — sans-grotesk only, with no monospace anywhere on the page. - Avoided **handwritten typography** (40%) — hand-drawn quality lives entirely in the SVG drawings, never in the words. - Avoided **parallax** (85%) — scroll behavior is monotonic and direct; the only scroll-coupled animation is the Lawspeaker's growing line, which is a content event, not a depth-illusion. **Chosen seed (per assignment):** `aesthetic: hand-drawn, layout: asymmetric, typography: sans-grotesk, palette: deep-burgundy, patterns: path-draw-svg, imagery: mixed-media, motifs: futuristic, tone: minimal`.