# Design Language for archaic.studio ## Aesthetics and Tone archaic.studio is the imagined working studio of a modern type-foundry archaeologist — a place where someone unrolls a palimpsest under a north-facing window, sets it next to a letterpress proof of a Bauhaus geometric, and asks whether the Greek **kouros** statue and the **Futura** capital are the same gesture made two and a half millennia apart. The site treats this question literally. The aesthetic is **minimalist**, but minimalism here means *the discipline of a museum vitrine*, not the blandness of a SaaS landing page. Empty space is a varnished oak floor; every object is plinthed. Nothing floats casually; everything has been *placed*. The studio is **archaic** in the technical sense the word carries in art history — *Archaic Greek*, the period from roughly 800 to 480 BCE, before Classical idealization, when stone figures still smiled the closed-mouthed **archaic smile** and stood with weight evenly distributed on both feet. The visual world borrows that pre-Classical confidence: shapes are clean but slightly **frontal**, slightly **stiff** in the most flattering way — symmetrical, weight-bearing, unhurried. This is the opposite of the breezy Classical contrapposto that became corporate web design. archaic.studio is a kouros, not a Hermes. The tone is **elegant-sophisticated** but specifically **scholarly**: the voice of a curator's wall text, not a brand voice. Sentences are full. Footnotes exist. There is a **colophon**. Pricing language is forbidden — replaced by *provenance*. CTAs are forbidden — replaced by *invitations to read further*. The mood is the **first hour after a museum opens**, when the staff is still adjusting the lights and the only sounds are footsteps on parquet and a distant page turning. The moss-and-moonlight palette reinforces this: it is the color of a **library reading room facing a Hellenic herb garden at dusk**. The page should feel cool to the touch and slightly damp with morning, the way old marble does in May. There is one permitted theatrical gesture, and only one: a **single, slow lens-flare bloom** that crosses the page once on initial load, as if a shaft of late-afternoon sun has just passed through the high window of the archive room. After it has crossed, the page is again still. The flare does not loop. It does not reappear. Visitors who refresh see it once more, and only once more — like opening a different door at a different hour of a different day. ## Layout Motifs and Structure The structural metaphor is the **scholarly book**, opened flat on a reading lectern, but rendered in **editorial-flow** rather than rigid magazine spread. The page reads as one **uninterrupted typographic essay** that unrolls vertically, broken only by **drop capitals**, **section ornaments**, and **plate captions** — like the layout of a Princeton University Press monograph from 1974, but loosened and breathing. **Columnar logic.** A single 720-pixel measure (target 66 characters per line) is centered in the viewport on desktop, with a generous 22vh top margin so the first line of every chapter sits at **eye level** rather than at the cliff edge of the fold. On screens wider than 1280px, a **second column** opens to the right of the main measure — narrower, 240px — reserved exclusively for **marginalia**: dates, attributions, citation tokens, plate references (`Pl. III.`), and the **running head** which advances as the reader scrolls. The marginalia column is *not* a sidebar. It does not contain navigation. It contains only what a careful editor would have set in the margins of a real book. **Section ornaments.** Each chapter break is marked by a hand-cut woodblock-style ornament rendered as inline SVG: a **fleuron** (six-petaled rosette), a **typographic dingbat triangle**, a **Greek key fragment**, or a **palmette**. These are not generic Unicode glyphs — they are SVG paths drawn at 32px square, centered on the column, surrounded by 2em of vertical white space. The ornaments rotate through the four shapes in order; the seventh chapter returns to the fleuron. This is the **archaic** in archaic.studio: ornament as *structural punctuation*, not decoration. **Drop capitals.** Every chapter opens with a **four-line drop cap** in the display weight of Futura, set in `--lichen-deep`, with the body text wrapping around it for exactly four lines and then resuming flush left. The drop cap is **not** a generic CSS `::first-letter` flourish — its leading is hand-tuned via `padding-top: 0.18em` and its right margin via `margin-right: 0.32em` so that the optical alignment of the body's first line matches the cap-height of the drop letter to within a half pixel. **Plates.** Imagery in the essay appears as **plates** — full-bleed but inset 8vw on either side, with a 0.5px hairline frame in `--lichen-deep`, a small italicized caption beneath (`Pl. IV. — Marble kouros, c. 530 BCE, photographed under raking light, plate from the studio archive.`), and a 4em flush of vertical space above and below. Plates never crowd against text. The eye must be allowed to *travel* to the plate and back. **Editorial flow rules.** No three-column grids. No card-grids. No bento-boxes. No pricing tables. No feature comparison rails. No testimonial sliders. No hero-image-with-CTA-bar. The page contains **one column of text, one column of marginalia, and a sequence of plates** — and that is the entire structural vocabulary. Anything that cannot be rendered in those three primitives must not be on the page. ## Typography and Palette The typographic system is **futura-geometric** — disciplined to a single family doing nearly every job, in the spirit of Paul Renner's original 1927 specimen books. Futura is one of the earliest geometric sans serifs and was shaped by Bauhaus circular-square-triangle reductionism; using it to set scholarly text about *archaic* forms is the deliberate paradox the site is built on. **Display and Body — single family:** [Jost*](https://fonts.google.com/specimen/Jost) variable, weights 100–900, italic axis present. Jost* is Indestructible Type Co.'s open-source descendant of Renner's Futura, distributed on Google Fonts and engineered specifically for screen text where genuine Futura's geometric purity blows out the x-height. The site uses Jost* exclusively for: - **Wordmark and chapter numerals** at `clamp(56px, 9.5vw, 128px)`, weight 200 (Thin), tracked `-0.012em`. The lowercase `g` is the single-storey geometric form, used at display size only. - **Drop capitals** at `clamp(80px, 9vw, 132px)`, weight 700 (Bold), tracked `0`, set in `--lichen-deep`. - **Body text** at `clamp(17px, 1.18vw, 19px)`, weight 400 (Regular), leading `1.62`, tracked `-0.005em`. Numerals are old-style figures via `font-variant-numeric: oldstyle-nums`. The `&` is the italic ampersand even in roman text — a small typographer's flourish from Renner's specimen. - **Italics** for plate captions, foreign words (`kouros`, `palimpsest`, `kalós`), and emphasized passages. The italic axis on Jost* is a true cursive draw, not a slanted roman, and it is used like a **lowered voice in a quiet room**, never for pure emphasis. **Marginalia and metadata — secondary family:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) at `13px / 1.5`, weight 300 (Light), italic. The marginalia column is set in this old-style serif specifically to *contrast* with the geometric body — a quiet whisper from another century in the margins, the way an editor's pencil notes contrast with the printed page they annotate. Cormorant is used for: dates, plate references, citation tokens, the running head, the colophon footer, and footnote numerals. **Palette — forest-green at scholarly humidity.** Six values, used with discipline. No gradients. No tints beyond these six. No overlay opacities beyond what is specified. - `--vellum:` `#F2EEE3` — page ground. The color of unbleached cotton paper aged forty years in a closed flat file. Not white. Has a perceptible warmth at 4% saturation. - `--lichen-deep:` `#1F2E1F` — primary ink, body text, ornaments, drop caps, hairlines. The color of a deep forest understory in shade — almost black, but unmistakably green in any light over 800 lux. Body text is set in this, *not* in `#000` or `#111`. The greenness is load-bearing. - `--moss:` `#3D5A3D` — secondary text, marginalia ink, italic captions. A reading-room moss; the color of bookbinding linen on the spines of late Victorian university press editions. - `--herb:` `#7A8F66` — accent, used only for the section ornaments, the running-head rule, and the drop cap of the *single* chapter the studio considers its keystone. Used sparingly enough that its appearance signifies emphasis. - `--patina:` `#A8B89C` — used exclusively for the lens-flare bloom (single load event) and for the optional `:hover` underline on inline references. Reads as oxidized-bronze pale green at 60% lightness. - `--sienna-mark:` `#A65D3F` — the single warm spot color in the entire palette, used **once per chapter at most**. Used for: the drop cap of the keystone chapter, the woodblock fleuron at section breaks, and the editor's mark "¶" if one appears. Sienna is the color of red-figure Attic pottery slip — its presence in a green-and-vellum world should feel like an unboxed artifact has briefly been brought out for examination. **Hairlines and rules.** All rules in the page are 0.5px (rendered via 1px `transform: scaleY(0.5)` for true sub-pixel hairlines), set in `--lichen-deep` at 80% opacity. No 1px borders. No 2px strokes. The page is hairlined like an etching plate. ## Imagery and Motifs **Imagery is exclusively lens-flare-treated photography of objects in raking light** — used sparingly, four to six plates total across the entire page, each one functioning as a literal illustration plate in a printed monograph. **The plate corpus:** 1. **A marble kouros torso** photographed against a slate ground, lit from the upper left at 2700K so that the shoulder-blade ridge throws a shadow as long as the figure is wide. Duotoned to `--vellum` and `--lichen-deep` so the marble surface reads as paper grain. 2. **A type specimen page** from a 1932 Bauer Foundry Futura proof book, photographed flat, edges deckled, with the foxing of the paper visible. Duotoned identically. 3. **A pressed herb specimen** — a single sprig of garden sage on cotton mounting paper, the kind found in a Linnaean herbarium. The leaves catch a sliver of `--herb` color in the duotone shadow. 4. **A bronze stylus and a scrap of papyrus** on a charcoal ground, lit from a single low source so the stylus shadow becomes the long horizontal axis of the plate. 5. **A view through a north-facing studio window** — out onto a moss-and-fern garden with one stone bench and no people. This is the only landscape plate. It anchors the keystone chapter. 6. *(optional sixth)* **A fragment of an Attic black-figure krater** showing a single warrior's helmet in profile — the only image where the warm `--sienna-mark` is permitted to appear. **The lens-flare gesture.** On initial page load, a single horizontal `--patina` bloom — 720px wide, 12px tall, blurred at 24px, opacity ramped from 0 → 0.32 → 0 over 2.4 seconds — sweeps from the upper-left corner of the page to the lower-right at a 12-degree downward angle, passing through the wordmark exactly once. It uses `prefers-reduced-motion` to opt out cleanly. **It does not loop. It does not return on scroll. It is the morning sunbeam, and a morning happens once.** No sparkles, no anamorphic streaks, no JJ-Abrams horizontal blue bars. This is the lens flare of a **museum skylight**, not a Hollywood blockbuster. **Motifs — book-scholarly throughout.** - **Fleurons, palmettes, Greek key fragments, dingbat triangles** — four section ornaments that rotate at chapter breaks. All rendered as inline SVG paths, 32px square, stroke 0.5px, no fill on three of them; the fleuron has a `--sienna-mark` fill at 100%. - **Drop capitals** in Jost* Bold, four-line height, body wrap-around tuned by hand. - **A running head** in Cormorant Garamond italic that shows the current chapter title in the marginalia column and updates via IntersectionObserver as the reader scrolls. - **A colophon** at the foot of the page, set as a centered six-line block in Cormorant 11px italic, listing typeface (Jost*, after Paul Renner's Futura, 1927), paper (vellum CSS variable), pressmark (a single inline-SVG fleuron), and the date the studio "opened." - **Plate numerals** in Roman: `Pl. I.`, `Pl. II.`, `Pl. III.`, `Pl. IV.`, etc. Always in italic Cormorant, always in `--moss`. - **No icons.** No social-media glyphs. No hamburger menu. No magnifying glass. No envelope. The studio communicates through a postal address rendered in text and a single italicized line: *Correspondence is welcomed.* **Bounce-enter, applied with restraint.** The `bounce-enter` pattern is used **only on the section ornaments and only on the drop capitals** — never on text blocks, never on plates. When an ornament scrolls into view, it enters with a single, slow, overshoot-then-settle bounce: 720ms duration, custom cubic-bezier `(0.34, 1.42, 0.64, 1)`, scale 0.6 → 1.08 → 1.0, no rotation. Drop capitals enter the same way, scaled instead from 0.92 to 1.0 with a 4px vertical overshoot. The bounce is the **soft thud of a printer's block being stamped onto vellum** — physical, satisfying, not springy. It is *never* applied to running text, plates, or the marginalia column. ## Prompts for Implementation Treat archaic.studio as a **single scholarly essay published in seven chapters**, scrolled top-to-bottom on one continuous page with two columns (body 720px, marginalia 240px) on desktop and a single column on tablet/mobile. The site is **the essay** — there is no "about" page to click into, no "contact" form to fill, no "services" page to scan. Everything the studio has to say it has set in type on this one long page. **Chapter structure (single vertical scroll, no horizontal navigation, no sticky chrome):** 1. **Chapter I — *On the word "archaic."*** Wordmark `archaic.studio` set in Jost* Thin at the top of the column. Drop cap `T` opens: *"The word **archaic** has, in English, two meanings — one borrowed from journalism, the other from art history…"* The chapter establishes the studio's vocabulary. Section ornament: fleuron in `--sienna-mark`. Marginalia: a single line, `est. 2026`, in Cormorant italic. The lens-flare bloom passes through the wordmark exactly here, on load. 2. **Chapter II — *On Renner's circle, square, and triangle.*** A two-screen close-reading of Futura's geometric construction, illustrated by **Pl. II.** (the 1932 specimen plate). Drop cap `R` in `--lichen-deep`. Marginalia carries the running head and a single citation: `Renner, P. — Die Kunst der Typographie, 1939.` Section ornament: dingbat triangle. 3. **Chapter III — *On the kouros, who stands evenly.*** **Pl. I.** appears here — the marble torso. The chapter argues the geometric capital and the archaic standing figure share a single design principle: bilateral symmetry as the carrier of dignity. Drop cap `T`. Section ornament: Greek key fragment. 4. **Chapter IV — *The studio garden.*** **Pl. V.** appears here — the view through the window. This is the keystone chapter; its drop cap `W` is set in `--sienna-mark`, the only sienna drop cap on the page. The chapter is shorter than the others — three paragraphs — and is meant to feel like a held breath. Section ornament: palmette. 5. **Chapter V — *On herbarium and ornament.*** **Pl. III.** (the pressed sage). Argues that ornament in a scholarly book is not decoration but **structural punctuation** — the way a pressed herb in an herbarium is not decorative but a *specimen*. Drop cap `O`. Section ornament: fleuron in `--lichen-deep` (no sienna). 6. **Chapter VI — *On the stylus and what it remembers.*** **Pl. IV.** (the bronze stylus). A meditation on the continuity between scratching wax and pressing a key. Drop cap `T`. Section ornament: dingbat triangle. 7. **Chapter VII — *Colophon.*** Centered, italic Cormorant Garamond, six lines: *Set in Jost*, after Paul Renner's Futura. Pressed onto vellum CSS by hand in the studio. Correspondence is welcomed at the postal address below. Plates from the studio archive. The lens flare you saw on first arrival was a single morning. — archaic.studio, est. 2026.* No Pl. number. No drop cap. A final fleuron centered beneath. End of page. **Animation and motion specification.** - **On load:** the lens-flare bloom (single, 2.4s, never repeats). - **On scroll-into-view:** section ornaments and drop capitals receive `bounce-enter` (720ms, custom cubic-bezier, 0.6→1.08→1.0 scale on ornaments; 0.92→1.0 + 4px vertical on caps). - **On scroll continuously:** the running head in the marginalia column updates via IntersectionObserver — fading the previous chapter title to 0 over 240ms while fading in the next at 240ms, no slide. - **On hover (inline references only):** a `--patina` underline draws left-to-right via `path-draw-svg` over 320ms. - **No parallax.** No tilt-3d. No magnetic cursor. No spring-following anything. No scroll-jacking. Scroll velocity is *the reader's pace*, and the page does not interfere. **HTML/CSS technical bias.** - Semantic HTML: `
` containing seven `
` children, each with `

` for chapter titles, real `

` for paragraphs, `