# Design Language for telomere.digital

## Aesthetics and Tone

`telomere.digital` is a **Memphis-revival research cabinet** — the visual identity of a cellular biologist who pinned a 1987 Sottsass shelf to the wall of their cold-water flat and has been slowly filling it with tide samples, index cards, and photocopied Nature papers ever since. The aesthetic is **Memphis geometry as scholarly infrastructure**: the bold graphic shapes (diagonal hatching, polka-dot fills, squiggle trim) are not decoration — they are a filing system. Every pattern demarcates a zone of inquiry. Every color block is a specimen tray.

The dominant mood is **rigorous exuberance** — the joy of a person who has spent twelve years thinking about the same protein and has finally found something worth publishing. The site never performs warmth; instead, it radiates the particular pleasure of taxonomized knowledge: everything placed, labeled, and cross-referenced. The Memphis vocabulary (thick rule borders, high-contrast geometric fills, clashing primaries cut with salt-white) is tempered by the scholarly register: footnote-size annotations in the margins, a muted `coastal-blend` undercoat that grounds the loud geometry, and a typographic hierarchy borrowed from 1930s science journals.

The feeling is: a brilliant, slightly eccentric professor whose office looks chaotic but contains a precise internal logic that rewards sustained attention.

## Layout Motifs and Structure

The page is organized as a **portfolio grid with archival drawer logic** — a 12-column CSS grid where each cell behaves like a specimen-cabinet drawer: fixed proportions, labeled with a classification tag (genus/species in the biological metaphor, section/entry in the documentary metaphor), and capable of sliding open to reveal expanded content.

**Primary grid anatomy:**
- **Header rail** — full 12-col strip, 80px tall, containing only the wordmark and a single taxonomic subtitle (no navigation, no hamburger, no search). Left-aligned. The header is sticky but shrinks from 80px → 40px at scroll depth 120px.
- **Hero drawer** — col 1–8, row 2–3, ~520px tall. This is the "type specimen" zone: one large statement, morphing SVG backdrop, and two classification tags.
- **Specimen grid** — col 1–12, rows 4–N: an asymmetric 3-column portfolio grid with alternating cell widths (5-col + 4-col + 3-col cycling). Cells are sized to a **4:3 aspect ratio** with a 1px `#B8C9CA` rule between them. No card shadows.
- **Marginal annotations** — a 280px sticky sidebar at col 11–12 that persists throughout scroll, populated with rotating cross-reference notes ("cf. §4.2", "see also: strand-break taxonomy", "replicated 3×") in 9px monospaced type. This sidebar is invisible on mobile.
- **Footer stratum** — a 2-row footer treated as a geological cross-section: the top row shows site metadata in Memphis-hatched boxes, the bottom row is a solid `#1C3A3F` band with the domain and year in small-cap display type.

**Spatial grammar:**
- Grid gaps are 2px — Memphis precision, not airy white space.
- Row heights are dictated by content DNA (each "entry" sets its own height), not a rigid baseline grid.
- Specimen cells alternate between two orientations: **portrait** (taller than wide, used for paper excerpts and long annotations) and **landscape** (wider than tall, used for diagrams and timelines).
- No rounded corners anywhere. Memphis uses right angles.

## Typography and Palette

**Type system (Google Fonts only):**

- **Display & wordmark — `Playfair Display`** (wght 900, italic variant for the domain wordmark). Set at 72px for the H1 hero statement. The wordmark `telomere.digital` is set at 48px, non-italic, with a 0.08em letter-spacing. The display face carries the art-deco-display seed: high-contrast stroke widths, sharp serifs, geometric underlying proportions.
- **Section headers — `DM Serif Display`** (wght 400, regular) at 32px. Used for specimen-drawer titles. Set in `#1C3A3F` on white or in white on dark Memphis fill blocks.
- **Body text — `Source Serif 4`** (optical size `opsz 14`, wght 400, 420) at 17px / 28px line-height. The scholarly workhorse. All long-form annotation, specimen descriptions, and footnote copy runs in this face.
- **Labels & marginal notes — `Space Mono`** (wght 400) at 9px / 13px line-height. Used for all classification tags, specimen numbers (`SP-0042`), cross-reference calls, and dimensional annotations.
- **Memphis accent text — `Bebas Neue`** (wght 400) at 11px, all-caps, tracked at 0.25em. Used sparingly for Memphis fill-block labels and hatching zone headers only.

**Palette — coastal-blend with Memphis primaries:**

- `#F2EDE6` — salt-white ground (main page background; the tide-bleached substrate)
- `#1C3A3F` — deep tide teal (primary text, thick rule borders, footer band)
- `#E8F0EF` — pale coastal wash (alternate cell background for specimen grid)
- `#B8C9CA` — mid coastal gray-teal (grid rules, separator lines, marginal annotation color)
- `#D4473B` — Memphis vermillion (accent fill blocks, diagonal-hatch highlight zones, hover states)
- `#F5C518` — Memphis yellow (dot-fill patterns, classification tag backgrounds)
- `#2A5C64` — deep coastal teal (secondary text blocks, sidebar background)
- `#E8D5B0` — aged-paper cream (hero drawer overlay, vintage paper fill for portrait cells)

**Contrast commitments:**
- All text on `#F2EDE6` is `#1C3A3F`: ratio 10.4:1.
- White text on `#1C3A3F`: ratio 10.4:1.
- `#1C3A3F` on `#E8F0EF`: ratio 9.2:1.

## Imagery and Motifs

**No photography. The corpus shows photography at 87% — telomere.digital opts out entirely.**

All visual texture is procedural, geometric, or schematic:

1. **Noise-texture substrate**: A `feaTurbulence` + `feDisplacementMap` SVG filter applied to a `#F2EDE6` rectangle generates a subtle grain (grain scale 0.65, base frequency 0.85) that reads as aged scientific paper stock. This noise is the base layer of every specimen cell — it prevents the Memphis geometry from feeling sterile.

2. **Memphis retro-patterns (CSS-drawn, no raster):**
   - **Diagonal hatching** (`repeating-linear-gradient` at 45°, 3px stripe / 6px gap, `#D4473B` on `#F2EDE6`) used as section-divider fills and as the background of active/hover specimen cells.
   - **Polka dot fields** (`radial-gradient` circles, 4px diameter, 12px grid, `#F5C518` on `#1C3A3F`) used for footer top-row metadata boxes.
   - **Squiggle border** (inline SVG, a 4px sinusoidal path with amplitude 4px, period 16px, stroke `#1C3A3F`) used as the bottom border of the sticky header and as a decorative separator between grid rows.
   - **Checkerboard micro-tile** (8×8px repeating, `#B8C9CA` / `#E8F0EF`) used as the sidebar background on desktop.

3. **Morphing hero SVG**: The hero drawer backdrop is a single large SVG path that morphs between four states on a 6-second loop. The path describes an irregular closed polygon — somewhere between a chromosome cross-section schematic and a Sottsass shelf profile — with between 8 and 14 control points. Morph uses GSAP MorphSVGPlugin (or a plain `<animate>` path interpolation as fallback). Fill is `#E8D5B0` at 60% opacity, sitting above the noise layer.

4. **Specimen number labels**: Each grid cell carries a zero-padded specimen ID label (e.g. `SP-0001`, `SP-0002`, incremented per DOM order) in the upper-left corner (Space Mono, 9px, `#2A5C64`). These echo the visual language of natural-history specimen tags.

5. **Rule geometry**: Thick (3px) rectangular rule borders drawn with `outline: 3px solid #1C3A3F` on specimen cells that contain highlighted content. The outline has a 2px gap from the cell edge (achieved via `outline-offset: -5px`) so it reads as an inset Memphis frame.

## Prompts for Implementation

Build telomere.digital as a **single-page research cabinet** — a portfolio grid that feels like consulting a well-maintained archive, not browsing an agency site.

**Structural order:**

1. **Document skeleton**: HTML5 with `<main role="main">` wrapping a CSS Grid container (`display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; background: #1C3A3F;`). The 2px gap on a `#1C3A3F` background creates the appearance of dark thin rules between all cells without border declarations.

2. **Sticky header**: `position: sticky; top: 0; z-index: 100; grid-column: 1 / -1;`. Contains wordmark in Playfair Display 48px left-aligned and a single subtitle `MOLECULAR RESEARCH PORTFOLIO` in Space Mono 9px at right. Background `#F2EDE6`. On scroll past 120px, CSS class `header--compact` shrinks it via transition.

3. **Hero drawer**: Grid area col 1–8, row 2. Minimum 520px tall. Layers from back to front: (a) noise-texture SVG filter fill in `#F2EDE6`, (b) morphing SVG polygon in `#E8D5B0` at 60% opacity, (c) large H1 in Playfair Display 72px italic in `#1C3A3F`, (d) two specimen classification chips in Space Mono on `#F5C518` background. The morphing SVG runs on a 6000ms `<animate>` loop with `calcMode="spline"` for smooth interpolation.

4. **Side panel**: Col 9–12, row 2. Height matches hero drawer. Background `#1C3A3F`, polka-dot pattern overlay. Contains a short curatorial statement in Source Serif 4 white 17px, and a `SP-0001` specimen number in the upper corner.

5. **Specimen grid (rows 4 onward)**: Loop through content items. Cell widths cycle: `[5-col, 4-col, 3-col]`. Each cell: `background: #F2EDE6; min-height: 340px; padding: 20px; position: relative;`. Apply noise-texture filter via `filter: url(#grain)` referenced from an inline SVG filter block in `<defs>`. On hover, apply diagonal-hatch background via a CSS class swap with a 150ms transition.

6. **Morph animation**: Implement as plain SVG `<animate>` with four `path` `values` states. Example states cycle through shapes that evoke: chromosome arm, coastal erosion silhouette, Sottsass shelf cross-section, cell nucleus boundary. All states share the same number of path commands (12 cubic bezier segments) so interpolation is clean.

7. **Marginal annotation sidebar**: `position: sticky; top: 80px; grid-column: 11 / 13; height: 100vh; overflow: hidden;` on desktop. Background: `#E8F0EF` with 8×8 checkerboard pattern. Content: 8–10 rotating annotation strings in Space Mono 9px. Use CSS `@keyframes` to slowly cycle them (cross-fade at 4-second intervals). On mobile (`max-width: 768px`): `display: none`.

8. **Footer**: Two-row structure. Row 1: `background: #F5C518;` with polka-dot overlay and Memphis-boxed metadata in Space Mono. Row 2: `background: #1C3A3F; color: #F2EDE6;` with domain name in DM Serif Display 24px small-caps and year in Space Mono. Squiggle SVG border between rows 1 and 2.

9. **No JavaScript frameworks**. Vanilla JS only (< 40 lines), handling: header compact-class on scroll, any click-to-expand interactions on specimen cells. GSAP is optional; if used, load from CDN and gate behind `if (typeof gsap !== 'undefined')`.

10. **Memphis restraint rule**: Never apply more than two Memphis patterns in one viewport. The patterns are architectural elements — diagonal hatching for hover states, polka dots for accent blocks, squiggles for separators. They should never crowd each other.

## Uniqueness Notes

1. **Only Memphis + scholarly-intellectual synthesis in registry.** Memphis at 3% is already rare. Every existing Memphis-adjacent design in the corpus uses it with energetic/playful tone. Pairing Memphis geometry with scholarly-intellectual tone (5%) and a coastal-blend palette (3%) creates a combination not present elsewhere — the "laboratory archive" fusion has no precedent in the catalogued corpus.

2. **Portfolio-grid layout at 3% — counter-programming against centered (83%) and full-bleed (63%).** The 12-column cabinet grid with 2px dark-rule gaps reads as a physical filing system rather than a screen layout, giving telomere.digital a tactile, archival quality absent from the registry's dominant centered-column and full-bleed paradigms.

3. **Noise-texture as primary imagery (rare in corpus) over photography (87%).** The grain filter applied uniformly across all specimen cells creates a unified materiality — the site feels printed on a single piece of aged stock rather than assembled from discrete assets. This coherence is the opposite of the photography-heavy majority.

4. **Morphing SVG in the hero that references scientific schematic forms (chromosome, cell nucleus) rather than decorative blobs.** Other morph-pattern implementations in the corpus use organic abstract blobs or geometric transitions. telomere.digital's morphing paths carry semantic content — the shapes are legible to the domain audience.

5. **Coastal-blend palette (3%) at full fidelity, not diluted.** Many coastal-adjacent designs in the corpus drift warm. telomere.digital keeps the blue-green tidal register clean: salt-white, tide teal, coastal gray-teal — plus Memphis primaries as necessary punctuation rather than palette drift.

Seed: aesthetic: memphis, layout: portfolio-grid, typography: art-deco-display, palette: coastal-blend, patterns: morph, imagery: noise-texture, motifs: retro-patterns, tone: scholarly-intellectual

Avoided overused patterns from frequency analysis: photography (87%), centered layout (83%), parallax (74%), warm palette (88%), gradient palette (76%), full-bleed (63%).
<!-- DESIGN STAMP
  timestamp: 2026-05-12T00:18:51
  seed: aesthetic: memphis, layout: portfolio-grid, typography: art-deco-display, palette: coastal-blend, patterns: morph, imagery: noise-texture, motifs: retro-patterns, tone: scholarly-intellectual
  aesthetic: `telomere.digital` is a **Memphis-revival research cabinet** — the visual identi...
  content_hash: 3365cfabe589
-->