# Design Language for alth.ing ## Aesthetics and Tone alth.ing is a **zen-glitched parliament of the open air** — a digital rendering of Þingvellir, the Icelandic rift valley where the world's oldest legislature has been held in the open since 930 CE, between two grinding tectonic plates. The domain literally writes "althing" across the dot — a Nordic council, a sum total, a *thing* in the old Germanic sense (an assembly). The site treats this etymology as load-bearing: every screen is a *moss-floored gathering*, half nature reserve, half low-bandwidth broadcast that keeps cutting and recovering. The aesthetic register is **zen** — Japanese-rooted contemplative restraint, *ma* (negative space) as a compositional verb, *kanso* (simplicity), *yugen* (subtle profound grace) — but cross-wired with **glitch-art** imagery and an **energetic** tone. This is the central paradox: monks in a server room. The energy is not the dopamine-pop of startup landings; it is the *kinetic stillness* of wind on a glacial lake — flat surface, immense current beneath. Visitors should feel they have walked into a clearing where something old is happening *right now*, where birch leaves are scan-lined into a tape error, where the dial-tone of stillness is broken every fourteen seconds by a pastel chromatic-aberration shudder, then resumes. Mood references (do not literally copy, but absorb): - The opening seconds of Andrei Tarkovsky's *Stalker* — long stillness with an electric undercurrent - 2010s Nicolas Jaar live sets — minimal techno that feels like meditation - Ryoji Ikeda's *test pattern* installations — but pastel, not monochrome - Hilma af Klint's late temple-paintings — pastel mystic geometry, but glitched - An unmaintained Hokkaido shrine where the omikuji tree has caught a CRT The site is **not** trying to sell anything. It is trying to seat you on the moss. ## Layout Motifs and Structure A strict **stacked-sections** vertical scroll: nine full-viewport-height *clearings*, each a horizontal band that occupies 100vh and is internally centered with generous *ma* breathing room (32% top/bottom padding minimum on desktop). The frequency analysis shows `stacked-sections` is essentially absent from the corpus — most sites here choose `full-bleed` (84%) or `asymmetric` (56%) — so this rigid horizon-stack is itself a uniqueness move. Each clearing is a **thingstead** — an Old Norse word for an open-air assembly site — and is named, numbered I–IX, and bounded above and below by a 1px line in `#C9D1B8` (lichen) that is the *rift line* between plates. The visitor walks the rift downward. **The nine thingsteads (top → bottom):** - **I. Almannagjá** — the masthead clearing. Wordmark `alth.ing` set lowercase, immense, tracked, centered on pure pastel paper. A single 4-line statement of arrival. No nav, no CTA, no menu icon. The only affordance is a thin vertical bar of 9 dashes on the right edge marking the rift descent. - **II. Lögberg (Law Rock)** — a single sentence held in the middle of the void, set 6vw, weight 350, with a 0.6s glitch-shudder that fires once per 14s. This is the site's manifesto. - **III. Vellir (Plains)** — a horizontal field of 12 short kennings (skaldic compounds: *moss-counsel*, *rift-quiet*, *frost-vote*, etc.), staggered into view as the section enters the viewport. Each kenning is a tiny linguistic gathering. - **IV. Þingbrekka (Slope of the Assembly)** — a slowly-tilting 0.8° text block on a pastel salmon ground, three paragraphs of zen-political prose about *gathering as a verb*. - **V. Drekkingarhylur (Drowning Pool)** — an inverted clearing: dark sage-green background, single luminous birch silhouette, glitch-distorted into 4 stacked replicas with 1px chromatic split. A meditation on what gatherings refuse. - **VI. Snorrabúð (Snorri's Booth)** — a long-form passage, single column 540px wide, reading-grade typography, marginalia in the right gutter set 11px. The only "writing-heavy" clearing. - **VII. Öxará (Axe River)** — a clearing animated by a single horizontal line of pastel-dyed water that flows left→right at 2px/s, never stopping. Above the river: three poems. Below: three silences (intentional 30vh empty space). - **VIII. Botnar (The Bottom)** — a 9-glyph pastel-glitched colophon grid: rune-like marks built from broken CRT segments. Hovering one shows its meaning as a whispered tooltip. - **IX. Útþing (Outer Assembly)** — a quiet sign-off clearing. One line: *"the assembly does not end. it disperses."* Plus an unstyled mailto link. Nothing else. The grid system is **8pt baseline** with a **5-column logical grid** (golden-divisible: 1-2-1-2-1 fractional units) used only inside Snorrabúð (VI) and Botnar (VIII). All other thingsteads are vertically composed, single-axis, with horizontal alignment varied per clearing (centered I, II, IV, IX; left-aligned VI; staggered III, VIII; full-row V, VII). ## Typography and Palette **Typefaces — Google Fonts only:** - **Space Grotesk** (variable 300–700) is the primary `sans-grotesk` voice. The frequency analysis flags `sans-grotesk` at 6%, qualifying as underused. Used for: the wordmark `alth.ing` (weight 350, tracked +80, lowercase, never capitalized), all section numerals (I–IX, weight 500), the Lögberg manifesto (weight 380, 6vw on desktop), and all body text in Snorrabúð (weight 400, 17px, 1.7 leading). Space Grotesk's slightly humanist proportions warm the zen restraint just enough to keep it from feeling clinical. - **Inter Tight** (variable 100–900) for the kennings and marginalia. Weight 200 for kennings (small caps, tracked +120, 13px), weight 300 italic for marginal annotations. - **Noto Serif Display** for *one* element only: the colophon glyph captions in Botnar (weight 300, italic, 12px). Used as a single grace note of seriffed counter-melody. (Noto Serif Display is a Google Font.) No mono. No display-bold. The frequency analysis shows `mono` typography at 94%; this site rejects it on principle — the Þing was oral. **Palette — pastel, eight colors, hex specified:** - `#F2EBDC` — *birch-paper*, the dominant background of clearings I, II, III, IV, VI, VIII, IX. Soft warm off-white, the color of unbleached hanji paper held to morning light. - `#E8D9C8` — *moss-flax*, secondary surface for Vellir (III) and inset cards in Snorrabúð. - `#C9D1B8` — *lichen*, the 1px rift-lines between every clearing and the kenning underlines. - `#A8B89C` — *pale-juniper*, tertiary accent, used sparingly for hovered links and the Öxará river flow. - `#3E4A3C` — *deep-sage*, the inverted-clearing background of Drekkingarhylur (V) and the foreground ink for body text on birch-paper. - `#F4C8B8` — *salmon-thaw*, the tilted-ground of Þingbrekka (IV) only. A single warm intervention. - `#B8A8C9` — *lavender-glitch*, the chromatic-aberration-left ghost on every glitch event. - `#8AC9D1` — *frost-glitch*, the chromatic-aberration-right ghost. Together with lavender-glitch they constitute the only "color flash" the site permits, and only for 0.6s every 14s. The palette is intentionally **cool-shifted pastel** rather than the warm-pastel that dominates the archive (`pastel` at 18% in frequency, `warm` at 90%). No gradient. No mesh. No duotone photo. Flat surfaces only — *kanso*. ## Imagery and Motifs **Primary imagery: glitch-art** (frequency `glitch-art` = 4%, severely underused). Treated with discipline: - Every glitch is **scheduled**, not random. A 14-second metronome (the duration of a slow exhale × 2) governs all aberration events sitewide. At t=14s, t=28s, t=42s… the page allows itself 0.6s of misalignment: chromatic-split (lavender-glitch left + frost-glitch right by 2px), a 1px scanline drift, and a faint birch-leaf bitmap tearing across two stacked rows of the active thingstead. Then everything resumes its still surface. - **Birch-leaf raster sprites** are the central motif: hand-traced silhouettes of 7 leaves (silver birch, downy birch, bog birch, dwarf birch, paper birch, river birch, and one Korean white birch as a quiet diasporic note), rendered as 64×64 1-bit bitmaps then upscaled to 256px with nearest-neighbor crispness, intentionally pixel-edged. These appear once per clearing as *the only image* in that clearing. - **No photography.** The frequency analysis shows `photography` at 96% — refusing it is itself a position. The site is illustrated in monk-strokes only. - **Generative noise**: a 3% opacity SVG noise layer fixed to the viewport, regenerated per session (seed = `Date.now() % 9301`). It does not animate; it is the air. **Nature motifs** (frequency 18%, mid-band; we use it intensely but in a non-cliché register): - Birch (already covered, as the assembly tree). - **Moss tessellation**: a 32×32 pixel pastel-green moss-tile pattern used as the background of one clearing only (VI / Snorrabúð), at 4% opacity. It is meant to be barely visible — like sitting on real moss rather than depicted moss. - **Rift lines**: every 1px lichen line is conceptually a tectonic seam. - **River flow**: the Öxará animation — a single 1px-tall pastel-juniper line oscillating its left-offset from -10vw to +110vw across 8 seconds, looping. Pure CSS. - **Wind-as-stagger**: the kennings in Vellir (III) enter on scroll with a stagger pattern (50ms between letters, but staggered *per kenning* not per character — the wind moves by gathering, not by syllable). Frequency analysis shows `stagger` at 62%, which is overused; we keep it because it is in the planned seed, but we re-interpret it as *wind rustling a row of grasses* rather than the standard "list cascade." Direction: each kenning enters from a slightly different y-offset (-12px to +12px, deterministic per index), so the row appears to *breathe* into place rather than march. **No icons. No illustrations of buttons. No photographic stock. No 3D render. No emoji.** The visual world is paper, lichen, birch, water, and the occasional licensed glitch. ## Prompts for Implementation Build this as a **single-page, single-document, scroll-only narrative**. No SPA, no router, no React, no Next, no build step. Vanilla HTML, vanilla CSS (custom properties + container queries), and a single ~6KB JavaScript file. Total page weight target: under 80KB before fonts. The site should run on a 2010 ThinkPad on hotel WiFi. **Storytelling spine — the descent of the rift:** The visitor enters at Almannagjá (I) at sunlight (`--ground: #F2EBDC`) and walks downward through nine clearings. The CSS custom property `--ground` is animated on scroll via `IntersectionObserver`: each clearing announces its own ground color when it crosses 50% viewport, and the `body` background is interpolated over 1.4s ease-in-out to that color. The descent is *almost* monochromatic — only Þingbrekka (IV, salmon-thaw) and Drekkingarhylur (V, deep-sage) break the birch-paper register, like geological strata interrupting the soil profile. **The 14-second pulse:** Sitewide, a `setInterval` (or, better, `requestAnimationFrame` with a high-resolution clock) fires a `glitch` custom event every 14000ms. The active thingstead listens and responds with its assigned glitch micro-choreography. This pulse is the site's heartbeat. It does not pause when the tab loses focus (use `Page Visibility API` to keep the rhythm even off-screen, so when the user returns it is still in cadence — the assembly continues without you). The 14s value is exposed as `--breath` and is the duration unit for *every* timed transition on the site (transitions are 14s/40 = 350ms, 14s/100 = 140ms, etc.). Nothing is timed in arbitrary milliseconds; everything is a fraction of one breath. **Stagger as rustle, not cascade:** When Vellir (III) enters viewport, kennings appear one at a time with a 50ms inter-item delay, but each item's transform begins at `translate3d(0, var(--rustle), 0)` where `--rustle` is a deterministic value computed from `index * 31 % 24 - 12` (range −12 to +12 px). The opacity transitions 0→1 over 350ms; the translate transitions to 0 over 700ms with a custom cubic-bezier `(0.16, 1, 0.3, 1)`. The visual result is grasses settling, not a list flying in. **Glitch implementation:** Each glitch event applies, to the active thingstead's content container, a 0.6s composition: - frame 0–80ms: `text-shadow: -2px 0 #B8A8C9, 2px 0 #8AC9D1` (chromatic split) - frame 80–200ms: add `clip-path: inset(0 0 50% 0)` to top-half wedge, `inset(50% 0 0 0)` to bottom-half wedge, with a 1px translateX in opposite directions (the *tear*) - frame 200–600ms: linear ease back to `text-shadow: none` and clip-path removed. Pre-built variants exist for the eight thingsteads that allow glitches (Snorrabúð (VI) is exempt; reading is sacred, glitches break the eye-track). **No CTAs, no buttons, no pricing, no stat-grids, no testimonials, no logos-as-trust-bar, no newsletter modal, no cookie banner that demands attention.** The site is not a product surface. There is *one* mailto link in IX. There is *no* footer with social icons. The Althing was a place; this is a place. **Scroll behavior:** Allow native scroll. Do not hijack. The reading rhythm is the visitor's own breath; the 14s metronome is the only imposed cadence. On scroll-stop > 4s within a thingstead, the rift line above and below glows from `#C9D1B8` to `#A8B89C` over 2.8s and back — a tiny acknowledgment that the visitor has chosen to stay. **Reduced motion:** If `prefers-reduced-motion: reduce` is set, glitches are replaced with a 0.4 opacity dim of the active container for 400ms. The Öxará river stops flowing. The 14s metronome continues — but as a silent emit-only event with no visual consequence. The rhythm is preserved; the noise is withheld. **Korean / Icelandic glyph note:** If Korean text appears (e.g., a quoted *si jo* poem in Snorrabúð), it is set in **Noto Sans KR** (Google Fonts) at weight 300, never bolder, with letter-spacing −0.01em. If Icelandic text appears (e.g., the kennings or thingstead names), Space Grotesk handles all Icelandic diacritics natively. No fallback fonts needed; both faces are linked from the `` with `rel="preconnect"` to `fonts.gstatic.com`. **File layout:** ``` sites/alth.ing-v1/ ├── index.html # all nine thingsteads, semantic
per clearing ├── style.css # ~12KB, custom-properties driven ├── breath.js # ~6KB, the 14s metronome + glitch dispatcher + scroll observer └── leaves/ # 7 birch SVG glyphs, each ~1.4KB, hand-traced ``` No images served as PNG/JPG. No webfonts self-hosted (let Google Fonts cache work for the visitor). ## Uniqueness Notes Differentiators this design commits to. No other site in the corpus should duplicate them. 1. **Stacked-sections as a strict spine.** The frequency analysis shows `stacked-sections` is essentially unrepresented (it does not appear in the top printed bands of layout). The dominant patterns are `full-bleed` (84%), `centered` (76%), `asymmetric` (56%). Committing to nine 100vh clearings stacked along a single vertical axis — with no parallax, no full-bleed dominance, no asymmetric breakouts — is a strong negative position. 2. **Zen aesthetic at 2% frequency.** Only one other site in the analyzed 50 uses `zen`. We claim it firmly, and we cross it with `energetic` tone (8% frequency) and `glitch-art` imagery (4% frequency) — a triple-underused stack that is structurally hard to land. The combination is the design's whole proposition: stillness that contains current. 3. **The 14-second breath as universal time-unit.** Every transition, every loop, every animation duration on the site is a rational fraction of 14000ms. This is not stylistic flourish — it is structural. The 14s comes from the average human breath cycle paced for contemplation (~4.3 breaths per minute, longer-than-resting). Other sites time things in arbitrary 200ms / 300ms / 400ms ticks; this one is pulse-locked. 4. **Glitch as scheduled punctuation, not chaos.** Every glitch fires on the metronome — 0.6s of aberration, then resumed silence. Other glitch-aesthetic sites in the corpus (the ones at the 12% `glitch` aesthetic band) use glitches as decorative noise. Here, glitches are *liturgical* — they happen at known times, like a temple bell. 5. **Pastel palette without warm dominance.** Frequency analysis: `pastel` 18%, `warm` 90%, suggesting most pastels in the archive are warm-pastels (peach, cream, blush). This palette is **cool-shifted** (lichen green, frost cyan, lavender) with only *one* warm intervention (salmon-thaw at thingstead IV). The warm/cool inversion is rare in the corpus. 6. **Birch as the only illustrated motif.** No icon library. No isometric kit. No 3D. No photo. Seven hand-traced birch leaves and one moss tile, in 1-bit bitmap upscaled with nearest-neighbor — that is the entire visual library. The `nature` motif (18% in archive) is committed to a single botanical species, refusing the generic "leaves and rocks" palette other nature-tagged sites adopt. 7. **The Þing-as-page metaphor.** No other site in the archive can adopt this without losing meaning: the domain *literally* names a Nordic deliberative assembly (`althing`), and the layout is *literally* the open-air clearing where that assembly meets. The rift between plates, the Lögberg, the Drowning Pool — these are not decorative names; they are the structural skeleton. 8. **Refusal of conversion-oriented affordances.** No CTA, no signup, no pricing, no "Get Started," no testimonial carousel, no logo bar, no stats counter, no cookie banner, no chatbot bubble. One mailto link in clearing IX. The frequency analysis does not measure this directly, but a glance at the corpus confirms most sites carry at least one of those conversion patterns. This site carries none. **Chosen seed (planned):** `aesthetic: zen, layout: stacked-sections, typography: sans-grotesk, palette: pastel, patterns: stagger, imagery: glitch-art, motifs: nature, tone: energetic`. **Avoided patterns (from frequency analysis):** `hand-drawn` aesthetic (92%), `photography` imagery (96%), `mono` typography (94%), `gradient` palette (92%), `parallax` patterns (92%), `warm` palette (90%), `full-bleed` layout (84%), `centered` layout (76%), `card-grid` (56%), `cursor-follow` (54%) — none of these appear in this design.