# Design Language for telomere.dev ## Aesthetics and Tone `telomere.dev` is named after the protective caps at chromosome ends — structures that shorten with each cell division, counting down biological time like a fuse. The site holds this double meaning: **the elegance of structural biology rendered in art-deco grammar, the quiet rebellion of a countdown that refuses to be tragic**. The visual register is **Chrysler Building meets CRISPR lab**: the gilded geometry of 1929 Manhattan — sunburst radiator caps, stepped ziggurat cornices, chevron inlays — but translated entirely through the language of a genomics dashboard. Gold leaf becomes `#F4A24A`. Black marble becomes `#1A1014`. The structural diagrams of chromosomes become repeating motifs. The fan-vaulting of a deco tower becomes isometric scaffolding. Tone is **edgy-rebellious but architecturally rigorous** — not chaotic, not punk, not loud. The rebellion is structural: a site about the science of cellular aging that treats decay as beauty, limitation as elegance. The copy does not reassure. It does not convert. It states. It ends. The visitor is the telomere. The atmosphere is a **dying sun at zenith** — not a cold death, but the fierce orange-gold hour before the red dwarf collapses into itself. Heat, precision, and the calm certainty of countdown. ## Layout Motifs and Structure Full-bleed is the seed, but this full-bleed is **architecturally delineated** — not open prairie, but an art-deco skyscraper seen in section. The page is divided into **stepped horizontal bands**, each a different floor of the building, each slightly narrower than the one below, creating the classic ziggurat silhouette as the user scrolls. **Macro structure:** - **Band 1 — The Cornice (viewport 100vh):** Full-bleed hero. A deep near-black field `#1A1014` with the domain wordmark centered at 14vw, set in geometric-sans capitals, letter-spaced at 0.3em. Behind the wordmark: a particle field (2,000+ points, canvas API) in which particles move in slow logarithmic spirals — a visualization of telomere shortening as orbital decay. The particles are `#F4A24A` with 0.3 opacity, except the outermost ring, which burns at `#FF6B2C` and 0.9 opacity. - **Band 2 — The Setbacks (scroll-triggered):** Three stepped content panels, each inset 8vw from the previous, creating the deco setback profile. The inset grows as the user descends — the page visually narrows toward the bottom like a tiered crown. Each setback panel uses a different sunset gradient from the palette. Panel content is minimal: one isometric icon, one statement line, one data annotation. - **Band 3 — The Vault (mid-page):** A full-bleed horizontal band with a geometric art-deco repeating pattern — interlocking chevrons at 45°, drawn as SVG `` tiling, in `#C4622D` on `#1A1014`. This is the structural floor — the vault of the building's base. It serves as a visual reset and dramatic pause between above-grade and below-grade content. - **Band 4 — The Foundation (lower third):** Back to full-bleed deep dark. Isometric icons float here — three chromosomal structures rendered as isometric line art, rotating slowly. Below them: a countdown element (days / hours / minutes displayed as deco-engraved numerals in mechanical flip-clock style). - **Band 5 — The Colophon (full-bleed footer):** Solid `#F4A24A` gold background. Dark text. The wordmark again, inverted. No navigation. No links. Just a single sentence and the domain. **Spatial rules:** - No card grids. No column grids except the column of the page's own stepped silhouette. - All whitespace is deliberate and architectural — not breathing room, but structural load-bearing negative space. - The ziggurat profile is the only navigation metaphor: depth = descent. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display — `Bebas Neue`**: The wordmark and all H1 elements. Uppercase only, tracking 0.25em. Set at clamp(5rem, 10vw, 11rem) for the hero. Bebas Neue is pure geometric-sans brutalism — no serifs, no humanist curves, no compromise. Its vertical stress and uniform stroke weight map perfectly onto art-deco lettering conventions (the Block Letter of 1928 architectural drawings). - **Body — `DM Sans`**: Weight 300 for running text, weight 500 for data annotations. Variable font. Set at 1rem / 1.6 line-height. DM Sans maintains geometric clarity at reading sizes without the coldness of pure grotesque. Its optical-size behavior keeps it warm at small sizes — a counterpoint to the frigid geometry of Bebas Neue. - **Monospace / Data — `JetBrains Mono`**: Used exclusively for the countdown display and any numerical annotations. Weight 300. Letter-spacing 0.1em. The mechanical precision of a mono face reinforces the deco-machine aesthetic while keeping data legible. - **Accent labels — `Rajdhani`**: Weight 600, uppercase, letter-spacing 0.2em. Used for section labels and the short annotation lines beneath isometric icons. Rajdhani's geometric angular letterforms (drawn with influence from Devanagari geometries) give the accent labels a non-Western geometric rigor — subtly exotic within the deco frame. **Palette:** | Role | Name | Hex | |------|------|-----| | Ground | Deep Plum-Black | `#1A1014` | | Structural Dark | Obsidian | `#0F0A0D` | | Midground | Burnt Sienna | `#C4622D` | | Primary Accent | Solar Gold | `#F4A24A` | | Hot Accent | Ember Orange | `#FF6B2C` | | Horizon | Dusty Rose | `#D4847A` | | Light Ground | Warm Cream | `#F5ECD7` | | Data Highlight | Chrome Pale | `#E8D5B0` | **Gradient logic:** - Hero: `linear-gradient(170deg, #1A1014 0%, #0F0A0D 40%, #2A1218 100%)` - Setback panel 1: `linear-gradient(135deg, #C4622D 0%, #1A1014 80%)` - Setback panel 2: `linear-gradient(135deg, #F4A24A 0%, #C4622D 60%, #1A1014 100%)` - Setback panel 3: `linear-gradient(135deg, #FF6B2C 0%, #D4847A 50%, #F5ECD7 100%)` - Footer: flat `#F4A24A` ## Imagery and Motifs **No photography.** The corpus uses photography at 85% — this site uses none. All imagery is isometric line art and geometric SVG pattern. **Isometric icon set (3 bespoke icons, drawn as inline SVG):** 1. **Chromosome Double Helix — Isometric**: Two interlocked strands rendered in isometric 30° projection. Each nucleotide pair is a tiny isometric cube. The telomere end-caps are larger cubes in Solar Gold `#F4A24A`. Stroke: 1.5px, color: `#F4A24A` on dark background. Size: 200×200px isometric grid. The icon rotates on a single axis at 12 RPM (CSS `animation: rotate 5s linear infinite`). 2. **Cell Division Cross-Section — Isometric**: A stylized cell shown mid-mitosis in isometric cube form. The chromosome payload is visible as a dense gold cluster at the cell's equatorial plate. Stroke: 1.5px. The cell membrane oscillates (scale 1.0 → 1.04 → 1.0, 3s ease-in-out, infinite). 3. **Countdown Clock — Isometric**: A mechanical flip-clock rendered in isometric projection, three panels (days/hours/minutes). Each panel is a stack of isometric rectangular slabs with engraved numerals. The active digit panel flips using a CSS `rotateX(-180deg)` transform, creating the physical flip-clock card-flip in 3D. **Art-deco structural patterns:** - **Sunburst radial**: Used as the hero background underlay — a 36-spoke SVG radial burst centered behind the wordmark, spokes in `#F4A24A` at 0.04 opacity. The burst rotates at 0.2 RPM, barely perceptible. - **Chevron inlay border**: A 12px SVG pattern strip using repeating 45° chevrons in `#C4622D`. Used as horizontal dividers between bands. - **Stepped cornice detail**: Each setback panel has a decorative top edge — a sequence of stepped rectangles (5px, 10px, 15px, 10px, 5px height) in the panel's accent color, creating the visual profile of a deco cornice. - **Particle field**: 2,000–3,000 canvas points in the hero, organized in concentric ring layers. Inner rings: tighter packing, dimmer. Outer rings: sparser, brighter. On scroll, the outermost ring of particles disperses (moves radially outward at 0.8px/frame) — the telomere shortening visualization. Particles cannot replenish from outside the ring; the outer edge permanently shrinks as the user scrolls deeper. **Motion language:** - Fade-reveal: every text element below the fold enters with `opacity: 0 → 1` over 600ms, triggered by IntersectionObserver at 20% threshold. No Y-axis translation — pure opacity. This is the art-deco reveal: elements materialize, they do not slide in. - No parallax. - No scroll-jacking. ## Prompts for Implementation **The story to tell.** A chromosome sits at the edge of its last division. The domain `telomere.dev` is its name — the protective cap, the shield, the thing that makes it possible to replicate one more time. The site does not ask you to sign up. It does not promise a product. It is a countdown: beautiful, structural, finite. The visitor has arrived at the exact moment before the last replication. The particle field is eroding. The clock is running. The architecture is still perfect. **Implementation directives:** **1 — The particle erosion system (hero canvas):** Initialize 2,800 particles in 7 concentric rings (400 per ring). Each ring has a base radius (100px, 160px, 220px, 280px, 340px, 400px, 460px from center). Particles orbit their ring at varying angular velocities (inner rings faster). `scrollY` maps to a `erosionFactor` (0.0 at scrollY=0, 1.0 at scrollY=viewport height). At each frame, the outermost un-eroded ring fades its alpha from 0.9 → 0.0 proportional to erosionFactor. When erosionFactor passes 1/7, 2/7, 3/7... thresholds, the next ring begins eroding. The hero canvas is `position: fixed` during scroll (the dissolution happens as the user descends). Past the first viewport, the canvas is released and scrolls normally. **2 — The ziggurat setback sections:** Each `.setback` section has CSS: ``` margin-inline: calc(var(--setback-level, 0) * 8vw); border-top: 3px solid var(--accent); padding-top: 4rem; ``` `--setback-level` is 0 for the first, 1 for second, 2 for third. The stepped insets create the art-deco setback building profile in the page itself. **3 — Fade-reveal (opacity only):** Every element with class `.reveal` starts at `opacity: 0`. IntersectionObserver fires at 20% threshold. On intersection: `element.style.transition = 'opacity 600ms ease'; element.style.opacity = '1'`. No transforms. No Y-axis. Pure materialization. **4 — Isometric icons (SVG, inline):** Draw all three icons in a 200×200 viewport with `viewBox="0 0 200 200"`. Use an isometric projection matrix (skewX(-30deg) scaleY(0.866) for the top face; additional transforms for side faces). Stroke-only, no fills. Stroke color: `#F4A24A`. Stroke width: 1.5. The chromosome icon uses a generated helix path (30 nucleotide pairs, each a 6×4 isometric micro-cube with a 2px connector line). **5 — Mechanical flip countdown (CSS 3D):** Each digit is a `.flip-card` with `transform-style: preserve-3d`. The front face shows the current digit. The back face shows the next digit. On each second/minute/day tick: add class `.flipping` which applies `transform: rotateX(-180deg)` over 400ms with `ease-in` timing. After 400ms, swap digit values and remove class. The flip axis is the card's horizontal center. `perspective: 800px` on the container. Card dimensions: 80px wide × 110px tall, engraved font in JetBrains Mono, background `#0F0A0D`, numeral color `#F4A24A`, card edge in `#C4622D`. **6 — Deco pattern strip (SVG):** The chevron divider is a 100% width, 20px tall `` with ``. Inside: two `` elements forming a V-shape in `#C4622D` at stroke 1.5. Tiled horizontally. This strip appears between every band. **7 — Footer:** Solid `#F4A24A`. All text in `#1A1014`. Bebas Neue 3rem for the inverted wordmark. DM Sans weight 300 for the single closing sentence: `"Every replication costs something."` No navigation. No social links. No calls to action. **Avoid:** - CTA blocks, pricing tables, feature grids - Photography or stock illustration - Parallax or scroll-jacking - Slide-in animations (only fade/opacity) - Any neutrals in the blue/cool spectrum — this palette is warm-to-dark only ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: art-deco, layout: full-bleed, typography: geometric-sans, palette: sunset-warm, patterns: fade-reveal, imagery: isometric-icons, motifs: particle-effects, tone: edgy-rebellious. **Differentiators from every other design in the registry:** 1. **Telomere erosion as the particle metaphor.** Every other site using particle-effects (3% of registry) uses them as decoration — ambient noise, cursor trails, or starfields. This site makes the particle field structurally semantic: the particle rings ARE the telomere. They erode on scroll. The erosion is irreversible within a session. No other registry entry makes motion irrevocable or meaning-coded at this level. 2. **Art-deco as biology.** Art-deco in the registry (5%) is uniformly applied to luxury/fashion/heritage contexts. This site applies it to genomics — the fan-vaults and sunburst ornaments become chromosome cross-sections and cell-division diagrams. The geometric grammar is identical; the semantic domain is science. This combination does not exist elsewhere in the registry. 3. **Ziggurat setbacks as the only layout navigation.** Full-bleed (63% of registry) almost always means edge-to-edge prairie — flat bands with no dimensional implication. Here, full-bleed is the START of the building metaphor; each scroll band is architecturally inset, and the cumulative profile of the page is the stepped silhouette of a deco tower. Layout IS the site's concept (a structure counting down its own layers). 4. **The palette is sunset-warm but NOT warm-comfortable.** Registry warm palettes (88% warmth generally) almost always signal welcome, softness, invitation. This palette's warmth is combustion: `#FF6B2C` Ember, `#F4A24A` Solar Gold, and deep-black `#1A1014` ground. The warmth burns rather than embraces. The lowest frequency sunset-warm (1%) in the registry is achieved by pairing gold and ember with near-black instead of cream or tan as the ground. 5. **Opacity-only reveal (no motion on spatial axes).** Fade-reveal in the registry (5%) is almost universally implemented as `opacity + translateY` — the classic "slide up and fade in." This site uses pure opacity with zero spatial translation. Elements appear in place, like developing photographs. This is the art-deco reveal: the form was always there; only the light has changed. **Avoided patterns (from frequency analysis):** - `centered` layout (83% — avoided; used stepped-full-bleed instead) - `warm` generic warmth (88% — used combustion-warm, not soft-warm) - `scroll-triggered` generic reveal (35% — used opacity-only, not spatial) - `tech` motifs generic (24% — used scientific-biological specific, not tech-generic) - `circuit` motifs (15% — avoided entirely; used chromosome/genomic instead)