# Design Language for aei.st
## Aesthetics and Tone
The domain itself is a small Greek joke whispered in Latin letters. **Aei** (ἀεί) means *forever, always, in perpetuity* — the word Heraclitus used when he said the world is **aei pyr zōon**, "an ever-living fire." Bolted to the **.st** ccTLD (São Tomé), the URL becomes a kind of dactylic foot scratched into a stone tablet: *forever-st*, *always-st*, a colophon stamped at the end of a manuscript that was never finished. This is a site about **permanence pretending to be a party**.
The aesthetic is **Memphis-Milano under glass** — the squiggles, terrazzo confetti, and zigzag shapes of Ettore Sottsass and Nathalie Du Pasquier circa 1981–1986, but executed at the scale and material grammar of a **luxury auction-house catalog** printed on coated cover stock with foil-stamped chapter rules. Imagine the 1985 Carlton bookcase by Sottsass photographed for Sotheby's *Important 20th Century Design* catalog, lit by a single tungsten lamp at 2700 K, the shadows pulled long onto a black velvet plinth. The result is a tone that should feel **minimal** — not because it is empty, but because every Memphis confetti shape has been quarantined inside a vitrine of negative space and gold rule.
The mood vocabulary, in order of priority:
- **Curatorial.** The page is a *vitrine*, not a feed. Each Memphis artifact is mounted, labeled, and dated.
- **Posthumous.** Sottsass died in 2007. This site treats Memphis as a closed canon — finite, dignified, expensive — not as a living trend.
- **Quietly ridiculous.** The squiggles are still squiggles. The terrazzo is still terrazzo. The serif underneath is doing the laughing without moving its face.
- **Slow.** Nothing autoplays. No carousel rotates. Every transition is at least 900 ms with `cubic-bezier(0.16, 1, 0.3, 1)` so the user feels the weight of varnished cotton paper turning.
The site does not market. It does not pitch. It exhibits. The visitor is a guest at a private viewing, not a lead in a funnel.
## Layout Motifs and Structure
The page is built on a strict **z-pattern** spine — five full-viewport leaves, each one a single Z-stroke that the eye traces from upper-left to upper-right, diagonally to lower-left, then horizontally to lower-right. The Z is not a vague "design suggestion" — it is the load-bearing geometry, drawn explicitly with a 1 px hairline of `#C9A24A` gold across each leaf so the visitor can *see* the path their gaze is being asked to take. The hairline animates in via `path-draw-svg`, 1.4 s per leaf, on first scroll into view.
Within each Z-leaf there are exactly **four anchor cells**, locked to the four termini of the Z:
- **NW (the entry).** The leaf's chapter numeral, set in Baskerville italic at 28 vw, foil-gold on black. The numeral sits in the upper-left like a manuscript dropcap.
- **NE (the artifact).** A single Memphis-Milano specimen, **floating** above the leaf with a soft 60 px vertical drop-shadow at 8% opacity. The specimen never sits flush — it always hovers 16 px above an invisible plinth, slowly pulsing on a 6 s sine.
- **SW (the colophon).** Two lines of Baskerville roman 12 pt, 1.45 leading, on `#F2E8D0` cream — the curatorial caption: object name, date, designer, dimensions, provenance. Nothing else.
- **SE (the exit).** A single hairline gold arrow, 48 px wide, drawn with a 0.75 px stroke, that points to the next leaf. Hovering the arrow makes its terminal triangle inflate elastically (1.0 → 1.18 → 1.0, 700 ms spring).
Between cells, the eye travels along the Z-stroke. There is no body copy in the diagonal middles — those are pure negative space, populated only by drifting Memphis confetti (zigzags, half-rounds, dotted grids, terrazzo flecks) at 30–40% opacity, each fragment **floating** on its own desynchronized parallax track at depths 0.15, 0.32, 0.58, and 0.81. Closer fragments lag scroll by 1.2× viewport height, distant ones drift at 0.4×. Result: the page feels like a glass case full of suspended particles, each at its own measured remove.
The five leaves, in order:
1. **Leaf I — Foreword.** Z traces *aei.st* itself: the wordmark in NW, an animated Sottsass squiggle in NE, an epigraph from Heraclitus in SW, the directional arrow in SE.
2. **Leaf II — Provenance.** Z traces the etymology of *aei*: the Greek glyph ἀεί foil-stamped in NE, the colophon listing every century the word survived in SW.
3. **Leaf III — Specimen.** A single Memphis object (e.g., the Carlton bookcase) renders in NE as a Lottie line animation that draws itself stroke by stroke over 6 s, with the curatorial label arriving in SW only after the drawing completes.
4. **Leaf IV — Reading Room.** A Baskerville essay set in two columns, but the columns themselves are nested inside the Z geometry — the first column begins at NW, the second column ends at SE. The diagonal middle is a column of confetti.
5. **Leaf V — Colophon.** The mark `aei.st` in foil-gold on solid `#0B0A08`, the production credits in Baskerville italic 10 pt, and a single drifting particle that never settles.
There is **no global navigation, no header, no footer, no sticky bar**. The Z is the navigation. The arrow at SE is the only forward affordance. Backward navigation is the browser's job.
## Typography and Palette
The typographic system is **baskerville-refined** — a single family doing every job, with discipline borrowed from auction-catalog typography rather than web convention. One family. Three weights. Italic used like a lowered voice.
- **Display:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville), bold italic 700, set at **18–24 vw** for chapter numerals and the wordmark. Tracked at `-0.018em`. Optical-size hint via CSS `font-optical-sizing: auto`. Numerals are old-style; the figure 1 has a flag, the 4 is open-tail, the 7 has no crossbar — these details matter at display size.
- **Editorial Body:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville), regular 400, **17 pt over 26 pt leading**, measure capped at **62 characters** per line. This is the auction-catalog measure, narrower than web convention. Hyphenation on, widow control on, hanging punctuation on.
- **Marginalia & Curatorial Captions:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville), italic 400, **11 pt over 17 pt leading**, color stepped down to `#7A6A4A` so the captions read as quietly subordinate to the artifact above them.
- **Microtype rules.** Small caps simulated via `font-feature-settings: "smcp"` for chapter-tags. True ampersands at 1.4× the cap height. Em-dashes only — never en-dashes for parentheticals. Quotation marks always typographic (`"`, `"`, `'`, `'`). Numerals in the captions are tabular-lining for date alignment; numerals in the body are old-style proportional.
- **Italic as exhibition label.** Every Memphis object name is set in italic the way museum wall labels do: *Carlton, 1981*. Designer names are roman small caps: SOTTSASS. This convention is not negotiable.
The palette is **gold-black-luxury** — eight values, no more, no fewer. No neutral grays except those derived from the cream and the black.
| Token | Hex | Usage |
|---|---|---|
| `--ink` | `#0B0A08` | Primary background. Not pure black — a warm cooled-tar that holds the gold without ringing. |
| `--ink-deep` | `#050504` | Negative-space wells beneath floating Memphis fragments; drop-shadow sources. |
| `--vellum` | `#F2E8D0` | Cream "page" leaves — Leaves II and IV reverse to this background. The color of an aged auction catalog. |
| `--vellum-soft` | `#E8DCBE` | Caption rules and column gutters on cream leaves. |
| `--gold-foil` | `#C9A24A` | The hairline Z-rule, the wordmark, the chapter numerals. Reads as foil under tungsten light. |
| `--gold-shadow` | `#7A6228` | The 1 px shadow side of every gold rule, baked in to fake bevel relief. |
| `--memphis-coral` | `#E25A4A` | One of three Memphis accent colors — used only inside floating confetti, never on type. |
| `--memphis-cyan` | `#3FB6C2` | Second Memphis accent — terrazzo flecks, zigzags. |
Memphis traditionally screams in eight accents. This site permits only **two** accents (coral, cyan), and only inside the confetti — never on text, never on rules, never on the Z-geometry. The restraint is the point: the loud language is locked behind glass.
## Imagery and Motifs
Imagery is exclusively **vintage-photography**, sourced and styled as if from an auction catalog plate. No 3D renders. No stock. No icons except the gold arrow.
- **Specimen plates.** Each Memphis artifact is photographed (or treated to look photographed) as a single object on a black velvet ground, lit from one direction at 2700 K, with a soft 8% drop-shadow falling away from the light source. The plates are duotoned to `--vellum` and `--ink` — the color of the object survives only as a tinted halftone, never as a full-color photograph. A coral squiggle in the Carlton bookcase becomes a cream squiggle on dark vellum.
- **Halftone grain.** A 0.6 px monochrome noise overlay at 4% opacity, baked into every plate. This is the printed-paper texture; it must be subtle enough that a careless visitor never notices it consciously, only feels the page is *physical*.
- **Provenance stamps.** Each plate carries a small italic line in the lower margin: *plate XII, fig. 3, fonds Sottsass*. Set in Baskerville italic 9 pt cream. The stamps are diegetic — they belong to the conceit that this is a catalog, not a website.
The decorative motif vocabulary is **floating-elements** — every secondary mark drifts. There is no static decoration anywhere on the page.
- **Memphis confetti.** Eight glyph types in rotation: zigzag, terrazzo fleck, half-round arch, dotted grid, squiggle, triangle, chevron, and the Sottsass "bacterio" bacterio-print dot. Each glyph is rendered as flat SVG, 12–48 px, in `--memphis-coral` or `--memphis-cyan` at 30–55% opacity. Confetti drifts on three independent parallax tracks per leaf.
- **Floating specimen.** The hero artifact on each leaf hovers 16 px above its caption, with a 6 s sine-wave bob and a 60 px soft drop-shadow that breathes in counter-phase. The shadow gets *softer* as the object rises and *sharper* as it descends — physical, not decorative.
- **Foil-gold rules.** Every horizontal and diagonal rule is drawn as a 1 px `--gold-foil` line with a 1 px `--gold-shadow` line offset 1 px below it, faking foil-stamp relief. Rules animate in via `path-draw-svg`, 1.4 s, eased on `cubic-bezier(0.65, 0, 0.35, 1)`.
- **Baskerville italic ampersand.** The `&` glyph from Libre Baskerville Bold Italic, scaled to 14 vw, appears once per leaf as a watermark at 6% opacity, anchored to the diagonal of the Z. It is the only "ornament" in the typographic register.
What the site **never** uses:
- Stock photography. No Unsplash, no Pexels, no AI-rendered "creatives."
- Gradients. The only gradients are the duotone lookups baked into plates and the soft-shadow ellipses under floating elements.
- Color photography. Every photograph is duotoned.
- Emoji, glyph-icons, lucide, or feather. Only the gold arrow at SE and the Baskerville ampersand watermark.
## Prompts for Implementation
Treat this as a **single five-leaf catalog** — a luxury auction monograph that the reader unfolds by scrolling. Bias every implementation decision toward catalog typography, plate composition, and the slow turning of varnished cover stock. Do not implement modals, tooltips, dropdowns, mega-menus, search bars, or sticky headers. Do not implement CTAs, pricing tables, stat grids, feature cards, social proof rails, testimonial sliders, hero CTAs, "above the fold" calls to action, newsletter modals, cookie banners-as-design, or chat bubbles. None of these belong in a catalog. The site sells nothing. It exhibits.
**Macro narrative arc (five pinned full-viewport leaves, scroll-driven):**
1. **Leaf I — Foreword (`--ink` ground).** Black ground. The wordmark *aei.st* in foil-gold Baskerville bold italic at 22 vw, set NW. A single Sottsass-style squiggle in coral, 6 vw tall, **drawn live** as a Lottie path over 4 s on first paint, drifting in NE. Centered low on the diagonal: an epigraph from Heraclitus, *"τὰ πάντα ῥεῖ καὶ οὐδὲν μένει"* (everything flows and nothing stays), set in Baskerville italic 18 pt cream. The gold Z-rule draws itself across the leaf in 1.4 s, terminating in the SE arrow which then breathes once. **No CTA**, no "scroll to begin." If the user scrolls, they scroll. If they don't, the squiggle keeps re-drawing every 12 s, patient.
2. **Leaf II — Provenance (`--vellum` ground).** Cream ground. Reverses the polarity. Chapter numeral *II* foil-stamped NW. The Greek glyph ἀεί set at 26 vw in Baskerville bold italic foil-gold, NE, **floating** with a 6 s sine bob. SW carries the etymology in two short paragraphs: 12 lines maximum, Baskerville roman 17/26, 56-character measure. SE arrow points to Leaf III. Confetti for this leaf is restrained — only terrazzo flecks in cyan at 25% opacity, drifting upward at 0.32× scroll rate.
3. **Leaf III — Specimen (`--ink` ground).** Black ground. The single most important leaf. NE renders a Memphis object — chosen from a fixed canon (Carlton bookcase, Casablanca sideboard, Tahiti lamp, Super lamp, Beverly cabinet, D'Antibes cabinet) — as a **Lottie line animation** that draws itself stroke by stroke in foil-gold over 6 s, with each stroke easing on its own delay so the object assembles in spatially-correct order (back panel first, shelves middle, dropcaps last). Once drawn, the object **floats** at the standard 16 px hover with the 6 s bob. SW reveals the curatorial caption only after `animationcomplete`: *Carlton room divider, 1981, Memphis Milano, designed by Ettore Sottsass, plastic laminate over wood, 196 × 190 × 40 cm.* The reveal is a 900 ms fade with a 12 px upward translate. SE arrow appears last.
4. **Leaf IV — Reading Room (`--vellum` ground).** Cream ground. The essay leaf. Two columns of Baskerville roman 17/26, 320–520 words total, set in a strict z-pattern: column one anchored to NW, column two anchored to SE, divided by a diagonal column of drifting confetti. The essay's content is curatorial prose — three paragraphs on permanence, on Memphis as a closed canon, on the joke of a domain that means *forever* registered in São Tomé. Pull-quote in the diagonal middle: *"Memphis is a noun pretending to be a verb,"* set in Baskerville italic 28 pt foil-gold. **No links inside the body except the colophon's external references**, which open in new tabs and are styled with a 0.75 px gold underline that lifts 1 px on hover.
5. **Leaf V — Colophon (`--ink-deep` ground).** Deepest black. The leaf is almost empty. NW: *aei.st*. NE: a single confetti zigzag in cyan, drifting forever, **never** settling — its parallax track loops eternally. SW: production credits in Baskerville italic 10 pt cream, four lines maximum (typeface, type designer, year, license). SE: no arrow. The Z terminates here. The browser scrollbar shows the user has reached the end; the page does not announce it.
**Animation grammar (lottie-animation as the load-bearing pattern):**
- Every "draw-in" event uses a Lottie or SVG `path-draw` animation, never a CSS transition on `clip-path`.
- Every floating element bobs on a 6 s sine. Phases are deterministically offset by `(index * 1.7) mod 6` so no two elements bob in sync.
- Every confetti glyph drifts on a parallax track. Tracks are computed from a Lehmer LCG seeded with the glyph index; the drift is reproducible across reloads.
- Easing is `cubic-bezier(0.16, 1, 0.3, 1)` for entrances, `cubic-bezier(0.65, 0, 0.35, 1)` for path-draws. Never linear. Never `ease-in-out` from the browser default.
- Page-level scroll is **not hijacked**. No `scroll-snap` on the body. Native scrolling, with each leaf simply being 100 vh tall and IntersectionObserver-driven for entrance choreography.
- A `prefers-reduced-motion: reduce` branch turns off all bobs and parallax but **keeps** the path-draw at a flat 200 ms because the path-draw is content, not motion — without it, the gold rule is invisible.
**Storytelling rules:**
- The site tells one story: *aei means forever, and forever is a closed exhibit, and the exhibit happens to be Memphis-Milano under glass.*
- Every leaf advances exactly one beat of that story.
- No leaf repeats a beat. No leaf skips one.
- The user finishes the story in **under 4 minutes** at a measured reading pace. The catalog is short on purpose.
**HTML structure suggestion:**
```
…
…
…
…
…
```
Each `` is `min-height: 100vh`, `display: grid`, with a 12-column × 12-row grid that locks the four anchor cells (NW = 1/1/4/5, NE = 1/9/4/13, SW = 9/1/13/5, SE = 9/9/13/13). The Z-rule is a single inline SVG anchored to the grid's full extent, drawn via `stroke-dasharray` + `stroke-dashoffset` animation. Confetti is a fixed-position SVG layer per leaf, with `pointer-events: none` and `aria-hidden="true"`.
## Uniqueness Notes
Three or more deliberate differentiators from every other site in the registry, with frequency-analysis context.
1. **Memphis-Milano executed at 5% frequency, paired with luxury-premium at 5% frequency.** The frequency report shows *memphis* used by exactly one other design (5%) and *luxury-premium* used by one other design (5%). Crossing them — Sottsass's plastic-laminate riot mounted inside Sotheby's foil-stamp catalog discipline — is a combination present in zero other designs in the registry. Most "memphis" sites lean playful and saturated; this one leans posthumous and curatorial. The squiggles are still squiggles, but they have been embalmed.
2. **Z-pattern as load-bearing geometry, not navigation hint.** Z-pattern does not appear in the layout frequency table at all (the dominant layouts are full-bleed 85%, centered 85%, asymmetric 40%). Where most "z-pattern" implementations on the web treat the Z as a vague eye-tracking suggestion, this site **draws the Z as a visible 1 px foil-gold rule** across every leaf, animates it via path-draw-svg, and locks four content cells to its termini. The geometry is rendered, not implied.
3. **Baskerville-refined as the only family, doing every job.** The frequency report shows *garamond-classic* at 10% and *serif-classic* at 5%, but *baskerville-refined* does not appear at all in the realized corpus. Most editorial designs in the registry pair a serif display with a mono or sans body; this site refuses the pair. Libre Baskerville does display, body, marginalia, watermark, and ampersand — all five jobs from one optical-sized family. Discipline by deletion.
4. **Lottie-animation as the load-bearing pattern, not as decoration.** The frequency report shows *lottie-animation* at 0% in realized designs. Most sites that animate use scroll-triggered (50%), parallax (80%), or stagger (50%); none commit to Lottie line-draws as the primary device. Here, every artifact reveals itself as a Lottie path-draw, every gold rule draws via SVG path animation, and the path-draw is treated as **content** (the gold rule is invisible without it) rather than ornament.
5. **Vintage-photography duotoned to cream-and-ink, never as full-color stock.** The frequency report shows photography at 85% and vintage-photography at 5%. The 85% cohort defaults to color stock photographs as hero imagery. This site duotones every plate to `--vellum` × `--ink`, treats them as auction-catalog plates with provenance stamps, and refuses color photography entirely. The Memphis objects, which are by definition riotously colored, become tinted halftones — the loud canon shown through a quiet lens.
6. **Floating-elements at 0% in realized designs, here as a system-wide motion budget.** The frequency report shows *floating-elements* at 0%. On this site, every secondary mark drifts: confetti on parallax tracks, specimens on 6 s sine bobs, ampersand watermarks on slow drift, the colophon's final zigzag in eternal loop. The page never settles. The static elements are the type and the gold rule; everything else hovers. This is the operative metaphor of *aei* — *always*, *forever* — translated into a motion budget where nothing comes to rest.
7. **Minimal tone executed via maximal restraint, not via emptiness.** The tone frequency table is dominated by *professional* (15%) and *friendly* (15%); *minimal* as an explicit tone choice does not appear. This site interprets "minimal" not as "few elements" — the page is dense with Memphis confetti, floating specimens, and foil rules — but as **few rules**: one typeface, two accent colors, one motion easing pair, one ground polarity (ink/vellum), one navigation gesture (the Z arrow). Minimalism by constraint, not by absence.
**Patterns explicitly avoided from the frequency analysis:**
- Avoided **mono typography (90%)**: this site uses zero monospace.
- Avoided **handwritten typography (40%)**: no script, no signature, no marker.
- Avoided **warm palette (95%) and gradient palette (90%)** as *primary* registers: the gold-black-luxury palette is high-contrast and ungradiented, and the only "warm" register is the cream vellum, which is a paper-white not a sunset.
- Avoided **vintage motifs (75%)** in the costume sense: the vintage register here is *catalog typography*, not sepia nostalgia or aged paper.
- Avoided **full-bleed (85%) and centered (85%) layouts**: the z-pattern is explicitly diagonal and asymmetrically anchored.
- Avoided **scroll-triggered (50%) and stagger (50%) as primary patterns**: the primary pattern is path-draw-svg via Lottie.
- Avoided **photography at 85%** in its default color-stock form.
**Documented chosen seed:**
- aesthetic: **memphis** (5% frequency — underused)
- layout: **z-pattern** (0% frequency — unused)
- typography: **baskerville-refined** (0% frequency — unused)
- palette: **gold-black-luxury** (5% frequency — underused)
- patterns: **lottie-animation** (0% frequency — unused)
- imagery: **vintage-photography** (5% frequency — underused)
- motifs: **floating-elements** (0% frequency — unused)
- tone: **minimal** (0% explicit frequency — unused)
Every dimension of the seed lands on an underused or unused token. The combination is, by construction, novel within the registry.