# Design Language for telomere.digital ## Aesthetics and Tone telomere.digital is imagined as a **private vault for digital longevity** — a service that treats your accumulated digital self (archives, keys, succession plans, the data you want to outlive you) the way a Geneva bank treats a deposit box, or the way a 1920s ocean-liner first-class lounge treated time itself: slowly, ornately, with brass and lacquer. The "telomere" metaphor here is not biological signal-processing (the sibling `telomere.dev` already owns the oscilloscope aesthetic) — it is **inheritance**. A telomere is the part of the chromosome that buffers the meaningful interior from loss at the ends; this site is the buffer you wrap around your own information so it survives the copying. The tone is **opulent, hushed, and slightly ceremonial** — `art-deco` and `luxury-premium`, with a `mysterious-moody` undertow. Picture the foyer of a building that does not advertise: black marble, a single brass elevator, sunburst inlay underfoot, light that seems to come from sconces rather than the sky. Nothing bounces. Nothing is "fun." Everything is *appointed*. The site should feel like it costs money to look at, and like it knows something about endings that it is too polite to say aloud. Explicitly NOT: hand-drawn doodles, glassmorphic frosted cards, sticker-pack playfulness, stock photography of smiling families, "secure your future today" SaaS energy, neon, gradients-as-decoration. The luxury here is **restraint plus ornament** — a paradox the Deco era understood and most modern sites do not. ## Layout Motifs and Structure A `centered`, `single-column` **vertical processional** — the page is read like descending a grand staircase, one ceremonial landing at a time. No bento boxes, no three-up feature grid, no dashboard, no card-grid. Each section is a full-viewport "landing" with generous vertical air (`ma-negative-space`) and a strong central axis of symmetry. The composition leans almost architectural: a tall narrow body of text and ornament, framed left and right by **fluted vertical rules** (thin brass double-lines, like pilasters), so every screen reads as a panel in a lobby wall. The processional, top to bottom: 1. **THE LOBBY** — title screen. The wordmark "telomere" set very large in a Deco display face, centered, with a brass **sunburst medallion** behind it whose rays are drawn live by SVG `path-draw-svg`. A single line of subhead beneath. No nav bar — instead a tiny vertical column of section numerals (I. II. III. …) pinned to the left pilaster, illuminating one at a time as you scroll. 2. **THE CAP** — the thesis. A diagram, rendered in inlaid-brass line style, of a chromosome whose ends are wrapped in a repeating geometric border (the telomere-as-ornament); a short, elegant paragraph explaining that the ends are what get lost, so the ends are what we gild. 3. **THE LEDGER** — what the vault holds, presented as the **index page of a private ledger**: ruled lines, small caps row-labels (KEYS · ARCHIVES · SUCCESSION · WITNESSES · PROVENANCE), each row expanding on hover/scroll into a sentence set in serif. Not a pricing table — a *table of contents for a life*. 4. **THE MECHANISM** — how it works, drawn as a slow **art-deco clockwork**: concentric brass rings (escapement, sealing, replication, attestation) that rotate at different rates with scroll. Three or four lines of copy total. The animation *is* the explanation. 5. **THE WITNESSES** — instead of testimonials, an engraved colonnade: a row of tall thin "columns," each bearing one quiet line about why someone keeps a vault (a paragraph, not a logo, not a star rating). 6. **THE SEAL** — the closing landing. The sunburst medallion from THE LOBBY returns, now small and complete, stamped like a wax seal; one final line; a single understated link styled as an engraved plate, not a button. The page ends the way the foyer ends — at a door. ## Typography and Palette **Typefaces (Google Fonts only):** - **Poiret One** (400) — the Deco display voice. Used *only* for the wordmark, the section roman numerals, and the largest landing titles. Its hairline geometric strokes and circular bowls are pure 1925 poster. Set with wide letter-spacing (0.18em) when small, near-zero when display-sized. - **Cormorant Garamond** (300, 400, 500, plus italic) — the prose voice. All body copy, the ledger rows, the witness lines. Light weight, generous leading (~1.8), large measure-restricted column (~58ch). It carries the "expensive and quiet" register. - **Cinzel** (400, 700) — the *engraved* voice. Used for row labels, the colonnade lines, button-plate text, captions — anything that should read as cut into stone or struck into metal. Small sizes, letter-spacing 0.22em, uppercase, never for long text. **Palette:** - `#0B0B0D` — **vantablack lobby** — the dominant background; near-black with the faintest warm bias so brass reads correctly on it. - `#15110B` — **lacquered walnut** — secondary panel background for THE LEDGER and THE WITNESSES, a deep brown-black that suggests inlaid wood. - `#C9A24B` — **brass leaf** — the primary ornament/line color: medallions, pilasters, clockwork, rules, the sunburst. Used as line, almost never as fill. - `#E8D9A8` — **antique ivory** — primary text color on the dark grounds; warm parchment-white, not pure white. - `#7C6A3D` — **tarnish** — muted shadow-gold for inactive numerals, hairline secondary rules, hover-dimmed states. - `#B23A2E` — **sealing-wax red** — the single accent, used exactly once or twice per page: THE SEAL stamp, and one underline. Scarcity is the point. Gilt edges may use a very subtle linear sheen between `#C9A24B` and `#E8D9A8` — but only on the medallion and the seal, never as page-wide background gradient. ## Imagery and Motifs No photographs. No icon library. Every visual is **vector ornament drawn in line**, in the Deco idiom: - **The Sunburst Medallion** — the logo and the through-line. A radiating fan of brass rays inside a stepped circular frame, drawn with SVG so the rays can be stroked-on (`path-draw-svg`) at THE LOBBY and re-collapsed into a wax seal at THE SEAL. Same object, two states, bookending the page. - **Fluted Pilasters** — the thin double-brass vertical rules framing the column on every screen; subtle "fluting" via a few evenly spaced hairlines between them. - **The Telomere Border** — a repeating Deco edge pattern (zigzag + stepped chevron) that literally wraps the ends of the chromosome diagram in THE CAP, and reappears as section dividers throughout. It is both motif and meaning: the gilded buffer at the ends. - **The Clockwork** — concentric scalloped/escapement rings for THE MECHANISM, line-only, brass on black, rotating with scroll. - **Engraved Plates & Ledger Rules** — thin double-rules, small-caps Cinzel labels, the visual language of a vault inventory and a banknote. - **Inlay corners** — small Deco corner-flourishes (fan, step-fret) at the corners of each landing, like marquetry; faint `#7C6A3D` unless the section is active, then `#C9A24B`. Texture is allowed only as the barest film grain over the black, to keep gradients from banding — invisible unless you look. ## Prompts for Implementation Build telomere.digital as **one self-contained HTML document** — no framework, no SPA shell, no cookie banner, no top nav. Six full-viewport "landings" stacked vertically; the only persistent chrome is the left pilaster with its illuminating roman numerals. Background is `#0B0B0D` throughout, panel grounds swap to `#15110B` for sections III and V. **Narrative spine:** the experience is *descending into a vault and being shown its contents, then sealed back out*. THE LOBBY opens with the sunburst rays drawing themselves on (SVG `stroke-dashoffset` animation, ~1.6s, eased like a slow curtain). As the visitor scrolls, the active section's roman numeral and inlay corners brighten from `#7C6A3D` to `#C9A24B` (a `fade-reveal` with a slight `glow`), the previous one dims — exactly one is "lit" at a time, like sconces tracking a walking guest. THE CAP draws the chromosome diagram and *gilds its ends* with the telomere-border pattern on scroll-trigger. THE LEDGER's rows are closed by default (just the Cinzel label + a hairline); on hover or on entering view they open downward with a slow `slide-reveal` to show the Cormorant sentence — `progressive-disclosure` like opening a drawer. THE MECHANISM's concentric brass rings rotate at scroll-linked rates (`scroll-triggered`, `parallax`-style, different multipliers per ring) so the clockwork "winds" as you read. THE WITNESSES columns rise into place with a tall `stagger`. THE SEAL collapses the sunburst back into a small medallion and stamps it — a brief `scale`+`settle` like wax pressed and lifted — leaving the sealing-wax-red `#B23A2E` ring as the only color on the screen besides brass and ivory; the lone link is an engraved Cinzel plate that gets a thin `underline-draw` in wax-red on hover. Motion principles: **slow, weighted, ceremonial** — long durations (0.8–1.6s), heavy easing (think a brass elevator door), no bounce, no elastic, no spring. A faint `cursor-follow` is permitted only as a soft warm vignette that follows the pointer like a held lamp — never a blob, never a trailing dot. Honor `prefers-reduced-motion` by drawing all SVG paths immediately and disabling ring rotation; the page must still read as a complete engraved object when static. Type rules in code: Poiret One only at display sizes and for numerals; Cormorant Garamond 300 for all prose at ~58ch; Cinzel uppercase + 0.22em tracking for every label, divider caption, and the final plate. Strict central symmetry — let the pilasters do the framing; resist the urge to break the grid. AVOID: CTA-heavy layouts, pricing tiers, stat-grids ("10M files secured"), feature card rows, testimonials-with-avatars, hero-with-signup-form, FAQ accordions styled as chips, any gradient used as page background, any emoji, any rounded "friendly" button. There is one link on the whole page and it looks like it was etched into brass. ## Uniqueness Notes **Differentiators from sibling and neighboring designs:** 1. **It reframes the entire telomere metaphor as inheritance/legacy, not biological signal** — where `telomere.dev` is a dark phosphor-green oscilloscope of replicative clocks, telomere.digital is a black-marble-and-brass *vault foyer* about what you leave behind. Same word, completely disjoint visual universe and emotional register. 2. **Pure art-deco line-ornament as the only imagery** — no photos, no icon set, no hand-drawn squiggles, no glassmorphic cards. Every visual is brass-on-black vector drawn in the 1925 idiom (sunburst medallion, fluted pilasters, step-fret inlay), and the page bookends on the *same medallion* in two states (radiant → wax seal). 3. **The "telomere border" is both decoration and thesis** — a Deco zigzag/chevron edge-pattern that literally gilds the ends of the chromosome diagram and recurs as every section divider; the ornament *is* the argument (the ends are what get lost, so the ends are what we gild). 4. **Ceremonial, sconce-tracking navigation** — instead of a nav bar there's a single illuminating column of roman numerals on a fluted pilaster, exactly one "lit" at a time, like wall sconces following a guest down a staircase; motion is uniformly slow and weighted, no bounce/spring/elastic anywhere. 5. **Anti-conversion luxury** — one engraved link on the entire page, zero pricing, zero stats, zero testimonials-with-faces; the LEDGER is "a table of contents for a life," not a feature list. **Chosen seed / style:** `art-deco ornate luxury` (from seeds.json) — chosen because the frequency analysis shows `art-deco` at only ~6%, `luxury-premium` at ~0%, the `gold-black-luxury` palette at ~2%, and `Cinzel`/`Poiret One` Deco display type effectively unused, while the catalog is saturated with `hand-drawn` (94%), `glassmorphism` (85%), and `photography` (98%) — all of which this design deliberately avoids. **Avoided overused patterns (per frequency analysis):** hand-drawn aesthetic, glassmorphism, photography imagery, card-grid layout, full-bleed hero-dominant SaaS layouts, warm-gradient backgrounds, cursor-follow blobs, spring/elastic/magnetic micro-bounce, typewriter effects, stat counters.