# Design Language for archaic.works ## Aesthetics and Tone archaic.works is the cataloguing journal of a Nordic philological institute that digitises pre-Roman cultural fragments — runestones, birch-bark transcripts, Sami drum membranes, Greenlandic ivory annotations — and then watches them slowly corrupt under the institute's own scanning equipment. The site **is** that journal. Each card on the wall is a single artefact entry, captured at the precise moment its bitstream began to fray. The archive does not lament the corruption; it studies it. The aesthetic is **scandinavian-scholarly with a controlled glitch infestation**. It takes the disciplined, breath-holding restraint of a Stockholm museum vitrine — wide cream margins, a single object per panel, captions set in 7pt condensed type, a single thin rule beneath each label — and lets a deep-burgundy decay creep in through the seams. The decay is *legible*: it has rules, scan-lines, RGB displacement vectors, and parity bits printed in the corner of each glitched card. Nothing here is "vintage filter chic." Every artefact is logged, measured, and footnoted, even as it disintegrates. The **tone is scholarly-intellectual** — measured, footnoted, curious without being precious. Body copy reads like a museum wall label written by a soft-spoken curator who has read too many corrupted floppy disks. Headlines are not slogans; they are accession numbers and Latin epigraphs. There is no marketing voice anywhere on the site. There are no exclamation marks, no "Welcome to," no "We are passionate about." Instead: *"Folio MMXIV/03-rune. Recovered from substrate decay 2023-11-04. Glitch vector preserved at curator's request."* The mood is the hush of a heated archive room at 02:00 in Uppsala in February. A single brass desk lamp. The smell of ozone from the scanner that broke last Tuesday. Outside, the snow muffles the world; inside, the archive hums and quietly forgets itself. ## Layout Motifs and Structure The site is **a single vertically scrolled card-grid wall** containing exactly **eighteen catalogue cards**, arranged in a strict 3-column × 6-row grid on viewports ≥1100px, collapsing to 2 columns then 1 column at narrower breakpoints. The grid is the entire site. There is no hero, no nav bar, no footer, no sidebar, no cookie banner, no contact form. Above the grid sits a 320px-tall **masthead band** carrying only: the wordmark `archaic.works` set in 96px condensed, a 1pt burgundy hairline, and the volume number `VOL. XII / FOLIO INDEX` in 9pt mono. Below the grid sits a 220px **colophon band** containing only the institute's fictitious imprint set in 9pt. That is the entire vertical sequence: masthead → 18-card grid → colophon. One scroll, one wall, eighteen artefacts. **Grid behaviour and rhythm.** - The grid uses CSS Grid with `grid-template-columns: repeat(3, minmax(0, 1fr))`, a 32px `column-gap`, and a 48px `row-gap`. The vertical gap is intentionally larger than the horizontal one — this is a Scandinavian typographic instinct, giving each row room to breathe like a museum vitrine on its own pedestal. - Every card occupies a **portrait 4:5 aspect ratio**, locked via `aspect-ratio: 4 / 5`. No card breaks ratio. No card spans columns. The discipline is absolute. - Within each card, the internal layout is **rigorously identical**: a 24px inner padding frame, a 1pt burgundy hairline rule traced 12px inside the padding, a centred artefact image area occupying the upper 62%, and a typographic caption block in the lower 38%. The caption block follows the museum-label hierarchy: accession code → epigraph → body note → parity-bit footer. - Cards are numbered `01 / XVIII` through `18 / XVIII` in a 7pt mono badge in the upper-right inner corner. The roman-numeral denominator is constant; the cardinal numerator changes per card. This single repeated typographic gesture is the site's metronome. **Asymmetric inflection within the grid.** Five of the eighteen cards (positions 03, 07, 10, 14, 17) are **glitched cards** — their image area is RGB-displaced, their hairline rule is broken into three segments at 7px, 14px, and 21px lengths, and a 9pt mono `[CORRUPTED]` stamp tilts 6° clockwise across the lower-left of the caption block. The other thirteen cards are pristine. The eye learns to scan for the glitched five as it descends, like spotting damaged manuscripts in a stack of clean ones. This is the only break from symmetry, and it is rhythmic, not random. **No full-bleed, no parallax, no cursor follow.** The grid is static against a single cream field. The cards do not scroll at different speeds. The mouse is the mouse — no aurora trail, no magnetic snap, no spotlight halo. Movement is reserved exclusively for the underline-draw and glitch-redraw mechanics described in the Implementation section. ## Typography and Palette **Type stack — three families, all condensed-axis or scholarly:** - **Display / wordmark / accession codes:** *Oswald* (Google Fonts), weight 500, with `font-stretch: condensed` instinct via the family itself. Used at 96px in the masthead, 13pt for the in-card accession badges (`MMXIV / 03 / RUNE`), and 9pt for the `[CORRUPTED]` stamps. Tracking is set tight, `letter-spacing: 0.02em` for headlines and `0.16em` for the small-caps badges. - **Body / scholarly captions:** *Cormorant Infant* (Google Fonts), weight 400 with italic 400 for epigraphs. Used at 12pt for body notes inside cards, 14pt for the colophon's institutional address. Cormorant's slightly soft, slightly bookish serif tempers the harsh condensed display and reads like a 1970s Nordic exhibition catalogue. - **Code / mono / parity bits:** *Space Mono* (Google Fonts), weight 400. Used at 7pt for card numerators (`01 / XVIII`), parity-bit footers (`PB: 0xA4F1 / CRC32: 9F2D`), and the masthead's `VOL. XII / FOLIO INDEX` line. **Type rules.** Headlines never exceed two lines. Body captions never exceed four lines. Parity-bit footers are always exactly two lines: one with the hex parity, one with the CRC. This typographic uniformity is what makes the underline-draw and glitch-displacement legible against a stable background. **Palette — six colours, deep-burgundy anchor, scandinavian-cream field:** - `#FBF6EC` — *vellum cream* — primary page background and card field. Warm, with a hint of gallery wall dust. Never pure white. - `#5A1B2A` — *deep burgundy* — primary ink. Used for body text, hairline rules, accession codes, and the underline-draw mechanic. This is the burgundy of a 1973 Stockholm museum binding. - `#2C1117` — *garnet ink* — display-weight text and the masthead wordmark. Just dark enough to anchor the eye but never black, never harsh. - `#8E2A3E` — *bruised crimson* — exclusively for the RGB-shift red channel in glitched cards and for the `[CORRUPTED]` stamps. Never appears in pristine cards. This colour signals decay. - `#3F5D6E` — *fjord slate* — exclusively for the RGB-shift blue channel in glitched cards and for hyperlink underline-draws. The only cool tone on the entire site, used surgically. - `#D4B85F` — *birch-leaf gold* — a single accent used only in the colophon's institute crest, the masthead's hairline accent, and the underline-draw's terminal serif. Never more than 2% of the visible page area at any time. The palette **forbids gradients** entirely. Every fill is a flat hex value. The only "gradient" in the site is the per-pixel chromatic aberration of the glitched cards, and that is achieved through layered SVG filters, not CSS gradients. ## Imagery and Motifs **Artefact illustration system.** Every card image is a **monochrome inked plate** rendered in `#5A1B2A` ink on `#FBF6EC` vellum. The plates depict *imagined* archaic cultural artefacts: a runestone fragment with a partially-effaced inscription, a Sami drum membrane with a single circular pictogram, a birch-bark scrap with a tally of moons, an antler amulet with a coiled serpent, a ground-stone adze with a chip flaked off the bit, a fragment of a Greenlandic ivory needle case with a face carved into the cap. The plates are **inline SVG** — not raster, not PNG, not JPG — so the underline-draw mechanic can target individual paths inside the artefact illustration. Stroke weight is consistent at 0.6pt for outline, 0.3pt for hatch shading, 1.2pt for the artefact's primary silhouette. Hatching follows the museum-plate convention: parallel diagonal lines at 60°, never crosshatched. **Cultural motifs — used as quiet repeating ornaments, not as caricature:** - A **bind-rune monogram** (a stacked composition of three Younger Futhark runes that read `arc · haic · works` as a single ligated mark) appears once in the masthead and once in the colophon. Never repeated within the grid. This is the site's signature. - A **Sami sun-and-noaidi-drum diagram** in the lower-right of the colophon, 64px wide, drawn in 0.4pt hairline. - A **Greenlandic tupilak silhouette** as the favicon, no larger than 32×32px, in `#5A1B2A`. - A **borg-mound contour line** running along the masthead's lower hairline rule — the rule itself is not straight but follows a low-amplitude topographic curve sampled from the actual contour of Anundshög, exaggerated to 2px peak-to-trough. **Glitch-art treatment for the five corrupted cards.** Each glitched card's artefact plate is processed at render time with three stacked SVG `` filters that displace the R-channel +3px right, the G-channel +0px, and the B-channel −2px down. A single horizontal scan-line (1px tall, `#5A1B2A` at 22% opacity) sweeps slowly across the image area on a 14-second loop. A 7pt mono badge in the lower-left corner reads `Δ-CHRO: R+3 / B-2 / SCAN: 14s` — the actual displacement vector is *labelled*, treating the corruption as data, not as decoration. This is the scholarly inflection: even the decay is footnoted. **No photography. No stock imagery. No icon library.** Every visual mark in the site is either an inline-SVG inked plate or a typographic glyph. There are no photographs of museums, no flat-lay product shots, no headshots, no AI-generated photoreal imagery. The archive only contains things the archive itself drew. ## Prompts for Implementation Build archaic.works as **a single static catalogue page** — one HTML file, one CSS file, one ES module of JavaScript — that opens as the index of an imagined eighteenth volume of a Nordic philological journal. Treat the page as a 3-minute scholarly browse through an exhibition wall, not a marketing landing page. There is no CTA, no sign-up, no pricing block, no testimonial row, no "join the newsletter," no contact form, no chatbot, no cookie banner, no dark-mode toggle, no language toggle. There is the masthead, the eighteen-card grid, and the colophon. That is the entire surface area. **Storytelling structure (top-to-bottom, single scroll):** 1. **Masthead band.** On load, the page is a stable cream field. The wordmark `archaic.works` writes itself into existence in 96px Oswald, garnet ink, over 1.6 seconds via a left-to-right reveal. Beneath it, the topographic hairline rule draws itself from the left edge to the right edge over 1.4 seconds, tracing the Anundshög contour. The volume strap `VOL. XII / FOLIO INDEX` fades in last at 240ms after the rule completes. Total intro choreography: ~3.2 seconds. Then stillness. 2. **The eighteen-card grid.** Cards do **not** animate in on scroll. They are present from page load. The grid is a museum wall; the wall does not assemble itself. What *does* animate is the **underline-draw mechanic** described below. Cards 03, 07, 10, 14, and 17 are glitched on render and remain glitched permanently — their RGB-displacement and 14-second scan-line loop run continuously regardless of scroll position. The remaining thirteen cards are pristine and never glitch. 3. **The colophon.** A 9pt Cormorant Infant block reading: *"Compiled at the Institute for Archaic Substrate Decay, Folio MMXIV. Plates inked on vellum. Corruption preserved at curator's request. No artefact in this volume exists outside the volume."* Below: the bind-rune monogram, 48px, garnet ink. Below: a single 9pt mono line reading `archaic.works / vol. xii / fin.` That is the page's terminal punctuation. **Underline-draw mechanic — the soul of the interaction.** The site's only interaction is the **underline-draw**. When the cursor enters a card's caption block, the burgundy hairline rule beneath the accession code does not "appear" — it **draws** from the left edge to the right edge over 460ms, with a `cubic-bezier(0.22, 1, 0.36, 1)` easing, terminating in a 4px birch-leaf gold serif tick. When the cursor leaves, the rule undraws right-to-left over 380ms — slightly faster than the draw, as a piece of typographic etiquette: drawing is deliberate, undrawing is a polite withdrawal. This is implemented via SVG `stroke-dasharray` and `stroke-dashoffset`, never via CSS `width` transitions, so the line behaves like an actual ink stroke. The serif tick at the line's terminus is a separate `` that fades in at 280ms after the line completes. **Glitch redraw on glitched cards only.** On the five glitched cards, the underline-draw mechanic is corrupted: when triggered, the rule draws normally for 280ms, then **stutters** — it splits into three segments (lengths 7px, 14px, 21px), each segment offset by a per-segment RGB displacement matching the card's image-area filter. After 220ms of stutter, the segments collapse back into a single rule and complete the draw to the right edge. The terminal serif tick is missing on glitched cards. This stutter is a one-shot animation per hover; it does not loop. **Animation directives — what is permitted, what is forbidden:** - **Permitted:** masthead reveal (load, once), topographic-rule draw (load, once), underline-draw (per-card hover, repeatable), glitch-stutter underline (per-glitched-card hover, repeatable), continuous 14-second scan-line loop on the five glitched cards (always running), cursor changes to `cursor: text` over caption blocks and `cursor: zoom-in` over image areas. - **Forbidden:** parallax (the 93% convention), cursor-follow trails (the 58% convention), spring/elastic snap-backs, magnetic hover (the 41% convention), card-flip, tilt-3d, scale-on-hover, fade-reveal-on-scroll, stagger-reveal-on-load, typewriter-effect on body copy, counter-animate, blur-focus, ripple, lottie. None of these appear anywhere. **CSS engineering notes:** - Establish a single `:root` with the six palette tokens: `--vellum`, `--burgundy`, `--garnet`, `--crimson`, `--fjord`, `--birch-gold`. No other colours exist in the stylesheet. - The grid uses `display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px;` and collapses to 2 then 1 column at 880px and 580px breakpoints respectively. The 4:5 card aspect is locked with `aspect-ratio: 4 / 5;`. - Card hairlines and underlines are SVG, not CSS borders. SVG paths inherit `stroke: var(--burgundy);` and target `stroke-dashoffset` for the draw mechanic. The serif tick is a separate sibling path with its own `opacity` transition. - The five glitched cards apply a single class `card--corrupted`. Their image area wraps the inline-SVG plate in a `` referencing a single `` chain in a hidden `` sprite block at the document root. - The 14-second scan-line is a 1px-tall absolutely-positioned `::before` pseudo-element, animated via `@keyframes scan { 0% { top: 0%; } 100% { top: 100%; } }` with `animation-timing-function: linear; animation-iteration-count: infinite;`. - Type uses a single Google Fonts request bundling Oswald 500, Cormorant Infant 400 + italic, Space Mono 400. No additional weights, no additional families. Font-display: swap. - The bind-rune monogram is inline SVG with three composed `` elements traced from Younger Futhark glyph contours, ligated at the stem. - Use no JavaScript framework. The single ES module attaches one `mouseenter`/`mouseleave` listener per card via event delegation on the grid container, toggles a `data-state="hover"` attribute, and lets CSS handle the underline-draw via `transition: stroke-dashoffset` on the SVG paths. The scan-line is pure CSS keyframes. **Content directives — what fills the eighteen cards.** Each card carries: (a) a roman-numeral position badge, (b) an inked-plate SVG of an imagined archaic artefact, (c) an accession code (e.g. `MMXIV / 07 / DRUM-MEM`), (d) a single-line Latin or Old Norse epigraph in italic Cormorant (e.g. *"vox in pelle dormiens"*), (e) a four-line scholarly body note describing the artefact's recovery, substrate, and condition, and (f) a two-line parity-bit footer in Space Mono. Glitched cards additionally carry a `[CORRUPTED]` stamp and a `Δ-CHRO` displacement-vector badge. Write all eighteen cards as if you were a Nordic curator with a quiet sense of humour about your own institute's failing equipment. **AVOID — explicit anti-patterns for this build:** - No CTA buttons. No "Get Started," "Learn More," "Sign Up," "Join Now." - No pricing tiers. No plan-comparison block. No feature-comparison matrix. - No stat grid ("18 artefacts / 12 corrupted / 6 pristine" — this would *flatten* the discipline of the catalogue into a marketing brag). - No testimonial carousel. No logo wall. No "as seen in." - No hero-with-product-screenshot. No gradient hero. No blurred-photo hero. - No newsletter signup. No chatbot bubble. No live-chat widget. - No icon library. No FontAwesome, no Heroicons, no Lucide. Every glyph is hand-drawn SVG. - No photography. No raster imagery. No background videos. - No dark-mode toggle. The cream field is the only field. - No language toggle, no currency toggle, no region selector. - No social-share buttons. No Twitter card preview block. (The page is a journal folio, not a viral asset.) - No "Made with" footer credit, no "Powered by" badges. - No emoji anywhere in the visible page. Curators do not emoji. ## Uniqueness Notes **Three-plus differentiators against the existing sixty-design corpus:** 1. **Scandinavian + glitch-art is a near-empty intersection.** The frequency report shows `scandinavian` aesthetic at 1% (one prior site) and `glitch-art` imagery at 5% (three prior sites). No prior design combines them. archaic.works is the first to treat Nordic museum discipline as the *substrate* against which RGB-displacement decay is studied, rather than treating glitch as standalone style or scandinavian as standalone minimalism. 2. **Card-grid stripped of every CTA, stat, and hero convention.** `card-grid` layout sits at 60% in the corpus, but card-grids are almost universally deployed for product cards, feature blocks, or testimonial walls. archaic.works uses card-grid as a museum vitrine wall — eighteen catalogue entries, no purchase intent, no "Learn More" links, no calls-to-action of any kind. The grid is the destination, not a stepping stone. 3. **`scholarly-intellectual` tone at 3% in the corpus, paired with `deep-burgundy` palette at 3%.** Both are rare; their combination is unprecedented in the existing designs. The voice is footnoted-curatorial, not corporate, not playful, not energetic — a deliberate refusal of the warm-inviting (18%) and pastoral-romantic (15%) tones that dominate. 4. **`condensed` typography at 15% with `underline-draw` patterns at 21% — both moderately used, but never combined with this aesthetic frame.** archaic.works marries Oswald's tight condensed display to a stroke-dasharray underline-draw that reads as an inked museum-label rule, not as a marketing micro-interaction. The underline is the only interactive flourish on the entire site. 5. **Aggressive refusal of the dominant `parallax` (93%), `cursor-follow` (58%), and `spring` (63%) patterns.** None appear. The site's stillness is a deliberate counter-statement to the corpus's interaction-heavy default. Movement is rationed: one masthead reveal, one underline-draw per hover, one perpetual scan-line on five corrupted cards. Everything else holds its breath. 6. **The site's metadata is the site's content.** Glitched cards literally label their own corruption vectors (`Δ-CHRO: R+3 / B-2 / SCAN: 14s`). Parity bits, CRC32 hashes, and accession codes are not chrome around the content — they *are* the content. This footnoted-decay treatment is unique in the corpus. **Chosen seed (from assignment):** *aesthetic: scandinavian, layout: card-grid, typography: condensed, palette: deep-burgundy, patterns: underline-draw, imagery: glitch-art, motifs: cultural, tone: scholarly-intellectual.* **Patterns avoided per frequency analysis:** - `hand-drawn` aesthetic (93% — saturated). Avoided entirely; archaic.works uses inked-plate SVG with strict museum-plate stroke conventions, not hand-drawn marker style. - `glassmorphism` aesthetic (65% — overused). Avoided entirely; every fill is opaque flat hex. - `gradient` palette (93% — overused). Avoided entirely; no CSS gradients exist in the stylesheet. - `warm` palette (91% — overused). The deep-burgundy / vellum / fjord-slate combination reads cool-leaning-warm, anchored by the cool fjord accent — deliberately not in the warm cluster. - `parallax` patterns (93% — overused), `cursor-follow` (58%), `spring` (63%), `stagger` (61%), `magnetic` (41%). All forbidden in the build. - `photography` imagery (96% — saturated). Replaced wholesale with inline-SVG inked plates. - `full-bleed` (85%) and `centered` (78%) layouts. Replaced with disciplined three-column card-grid. **Patterns embraced per frequency analysis (underused):** - `scandinavian` aesthetic (1%) — embraced as primary. - `deep-burgundy` palette (3%) — embraced as primary. - `scholarly-intellectual` tone (3%) — embraced as primary. - `cultural` motifs (3%) — embraced via bind-rune monogram, Sami drum diagram, tupilak favicon. - `glitch-art` imagery (5%) — embraced as the corruption mechanic on five of eighteen cards. - `underline-draw` patterns (21%) — embraced as the sole interaction. - `condensed` typography (15%) — embraced via Oswald 500.