# Design Language for telomere.dev ## Aesthetics and Tone telomere.dev is the public face of a developer-grade toolkit for working with biological-age signals — telomere-length estimators, replicative-clock models, the kind of thing a quantified-self hacker or a longevity-lab engineer would `pip install`. The site should *not* look like a biotech brochure (no white coats, no DNA-helix clip art, no "the future of medicine" hero copy). It should look like an **oscilloscope that has been left running overnight** — a calm, dark instrument panel where a single living signal slowly decays across the screen while you read. The governing aesthetic is **generative**: every decorative mark on the page is *drawn by code at load time*, never a static asset. The mood is **zen-contemplative** crossed with the dry precision of a measurement device — patient, exact, slightly clinical, never alarmist. Telomeres are the part of a chromosome that gets shorter every time a cell divides; the whole site is built around that one fact, expressed as **a length that visibly shrinks**. The tone of the words is plain, present-tense, and a little austere — closer to a man page than a landing page. No hype, no countdown-to-death melodrama. Just: here is the signal, here is how you read it, here is the code. Inspiration touchstones: a Tektronix phosphor display; the printout from a sequencer; Edward Tufte's sparklines; the quiet of a lab at 2am; Ryoji Ikeda's data-as-light installations rendered in a single restrained accent rather than full strobe. ## Layout Motifs and Structure The page is **one continuous vertical strip** — an `immersive-scroll` document with **no card grid, no bento boxes, no three-up feature row**. Think of the whole page as a single chromosome rendered top-to-bottom: a long thin column of content (max measure ~64ch) running down the **left third** of the viewport, while the **right two-thirds is a fixed generative canvas** that the text scrolls past. Structural skeleton (six "bands", in order): 1. **TELOMERE** — the title band. The word sits small and mono in the top-left. To its right, a horizontal bar of ~6,000 tiny tick-marks (the "cap") is drawn on canvas. This bar is the recurring motif: every band shortens it. 2. **WHAT SHORTENS** — plain-language explanation of replicative senescence, set as a numbered list. As you scroll through it, ticks fall off the right end of the cap bar one by one. 3. **THE ESTIMATORS** — the actual library surface, presented as **annotated code blocks**, not feature cards. Each function (`estimate_tl()`, `replicative_clock()`, `attrition_rate()`) gets a short paragraph and a real syntax-highlighted snippet. No "Learn more" buttons. 4. **CALIBRATION** — a single full-width interactive: a slider labeled *cell divisions* from 0 to ~60; dragging it redraws a Hayflick-style decay curve on the canvas and updates a live readout in mono. This is the only "widget" on the site. 5. **THE READING** — a contemplative band of three short stanzas about what a telomere length does and does not tell you. Generous `ma-negative-space`. The cap bar here is down to a stub. 6. **install** — the closing band: a single `pip install telomere` line in a copyable mono block, a one-line license note, a link to the repo. The cap bar has one tick left. That's it. No newsletter, no pricing, no footer mega-menu. Asymmetry is the rule: content always hugs the left rule line; the canvas always owns the right. A thin vertical hairline (1px, low-opacity) runs the full height of the page at the column boundary, like the edge of a chart's plot area. Section labels are set in the left margin, rotated 90°, tiny, like axis labels. ## Typography and Palette **Typefaces (Google Fonts only):** - **Space Mono** (400, 700, 400 italic) — the entire interface voice: the title, section labels, code blocks, the live readouts, navigation. Set tight; used at small sizes for labels (0.7rem, letter-spacing 0.12em, uppercase) and at body size (0.95rem) for code. This is a `.dev` site that talks like a terminal. - **Newsreader** (300, 400, 400 italic) — the *prose* voice, used only in the explanatory and contemplative bands (WHAT SHORTENS, THE READING). A quiet contemporary serif with real italics; body at 1.125rem, line-height 1.75, weight 300. The contrast between Newsreader prose and Space Mono machinery is the whole typographic story: a human reading an instrument. - **No third family.** Display sizes are just Space Mono and Newsreader pushed large (`clamp(2rem, 6vw, 4.5rem)` for the rare big line). **Palette — "phosphor on graphite":** - `#0B0E0D` — **graphite black**, the page background. Very dark, faintly green-tinted, not pure `#000`. - `#11161A` — **panel slate**, used for the code-block backgrounds and the calibration widget surround — one step up from the page. - `#C7D0CC` — **bone**, the primary text colour. A soft warm-cool grey-white, never `#FFF`. - `#7C8A85` — **muted sage**, secondary text, captions, the rotated axis labels, comments in code. - `#5CE6B8` — **signal mint**, the single accent. This is the phosphor: the cap bar's ticks, the active slider track, the decay curve, syntax-highlight keywords, link underlines, the blinking cursor. Used *sparingly* — it should feel like the only thing glowing in a dark room. - `#E0644C` — **alarm coral**, used almost never — only for the count of ticks already lost and for the `attrition_rate` value. One warm note against all that cool. Overall it reads as a near-monochrome dark instrument with two life-coloured highlights. High contrast between bone text and graphite ground; everything else is whisper-quiet. ## Imagery and Motifs **No photographs. No stock illustration. No icon set.** Every visual element is generated: - **The Cap Bar** — the hero and the through-line. A `` strip of thousands of 1px vertical ticks in signal mint with subtle per-tick alpha jitter, so it shimmers like a phosphor line. It is *the same object* on every band, only shorter. By the `install` band it is a single tick. This is the site's logo, its progress bar, and its memento-mori, all at once. - **The Decay Curve** — in CALIBRATION, a smooth canvas-drawn curve (telomere length vs. cell divisions) that the slider scrubs. Plotted with faint gridlines, axis ticks, and a moving crosshair — Tufte-flat, no glow except the curve itself. - **Tick-rain** — between bands 1→3, a few mint ticks visibly *detach* from the right end of the cap bar and fall a short distance before fading. Slow, sparse — one every few hundred ms of scroll, not a particle storm. - **The Hairline Grid** — the full-height column rule plus occasional faint horizontal baselines behind the canvas, like an oscilloscope graticule. 1px, ~8% opacity mint. - **Sequence dust** — in the deep negative-space areas, a *very* faint scatter of monospace letters `A C G T` at ~4% opacity, drifting almost imperceptibly. Texture, not pattern. - **Blinking block cursor** — a mint `▌` that sits at the end of the title line and at the end of the `pip install` line, blinking at terminal cadence. Motifs to lean on: **grid-lines, wave-forms, particle-effects (restrained), abstract-tech.** Motifs to refuse: literal DNA double-helix, microscopes, petri dishes, glowing blue orbs, anything that looks like a pharma ad. ## Prompts for Implementation Build telomere.dev as **one self-contained HTML document** — no framework, no router, no SPA shell, no cookie banner, no nav bar beyond a tiny fixed `telomere.dev` wordmark top-left. Six bands stacked in one scroll. Use `` (2D context) pinned `position: fixed` on the right two-thirds; the text column scrolls over/beside it. Drive everything off `scroll` progress plus `requestAnimationFrame`. **Narrative spine:** the experience *is* the shrinking. On first paint the cap bar is full (~6,000 ticks). A scroll-progress value `0→1` maps to ticks-remaining `6000→1`. Every band the reader passes through visibly takes length away — ticks fall off the right end (`tick-rain`), a running mono counter of "lost" ticks ticks up in alarm coral, the bar's pixel width shrinks. Reaching the bottom = the telomere is spent = the `pip install` line. Make that landing feel quiet and a little final, not triumphant. **Animation menu (use these, ignore the rest):** - `path-draw-svg` / canvas line-draw for the decay curve — it should *draw itself* the first time CALIBRATION enters view. - `fade-reveal` + gentle `stagger` for prose lines in the Newsreader bands (translateY 12px → 0, opacity, ~60ms apart). Honour `prefers-reduced-motion` — skip tick-rain and reveal, just show end state. - `typewriter-effect` for the title word `TELOMERE` and for the `pip install telomere` line — typed once, in Space Mono, with the blinking block cursor. - `counter-animate` for the lost-ticks readout and the calibration readout (mono digits, monospaced-tabular feel). - A subtle scanline / phosphor flicker on the whole canvas: 1–2% brightness oscillation, very slow. No harsh CRT curvature, no chromatic aberration. - Magnetic/hover-lift: **none.** Buttons: there is one — "copy" on the install line, which does a tiny mint flash. That's the entire interactive vocabulary besides the slider. **Explicitly forbidden:** hero with a giant CTA, pricing tiers, stat-grid of "10x faster / 99.9% uptime", testimonial carousel, logo wall, feature cards in a 3-column row, FAQ accordion, blog teaser strip, email-capture modal, chat bubble, hamburger menu. If a section feels like it belongs on a SaaS template, cut it. **Code blocks** must contain *plausible real Python* (`import telomere`, function calls, a returned dict) with Space Mono syntax highlighting in the palette above — keywords mint, comments sage, strings bone, values coral. The code is content, not decoration; it should look like something you'd actually copy. Performance and accessibility are out of scope — but do keep the canvas to a single instance and cap the tick count so it stays smooth. ## Uniqueness Notes **Differentiators from sibling designs:** 1. **The page literally consumes itself as you read it.** The central motif — a 6,000-tick "cap" bar — *shrinks irreversibly* with scroll progress until one tick remains at the `pip install` line. The structure of the IA *is* the biology of a telomere. No sibling site I referenced (mysterious.quest's redacted-folio conceit, the standard catalog/gallery layouts) uses a self-depleting hero element as both progress indicator and thesis. 2. **Generative-only, instrument-only visuals.** Zero images, zero icon sets, zero stock illustration — every mark is canvas-drawn at runtime (cap bar, decay curve, tick-rain, graticule, ACGT dust). The aesthetic is a 2am oscilloscope, not a biotech brochure: near-monochrome graphite with exactly one phosphor-mint accent and one coral warning note. 3. **Two-voice typography mapped to two roles.** Space Mono is the *machine* (title, labels, code, readouts); Newsreader-300 is the *human* (prose, contemplation). The contrast carries the entire concept — a person reading a measuring device — and there is deliberately no third typeface and no display font. 4. **Anti-SaaS by construction.** One fixed-canvas / scrolling-text-column layout, content hugging a left chart-rule, axis-style rotated margin labels, exactly one widget (a Hayflick-divisions slider) and exactly one button (copy install). No CTA stack, no pricing, no stat-grid, no carousel, no accordion. **Chosen seed/style:** `generative art background` (from seeds.json) — realized as a runtime-drawn oscilloscope/sequencer instrument panel rather than ambient noise. **Avoided patterns from frequency analysis:** skipped the near-ubiquitous `hand-drawn` (94%) and `glassmorphism` (85%) aesthetics; skipped `card-grid` (92%) and `centered` (80%) layouts in favour of an asymmetric fixed-canvas split; skipped `cursor-follow` (89%), `magnetic` (78%), `tilt-3d` (32%) and `parallax` (89%) — the only motion here is scroll-driven depletion, line-draw, fade-reveal/stagger, typewriter, and counter-animate. `photography` (98%) is entirely absent. Mono typography is common, but pairing it with Newsreader-300 prose for a deliberate machine/human split is the twist.