# Design Language for telomere.digital

## Aesthetics and Tone
telomere.digital presents telomere science through a grainy-textured, cinematic lens -- the protective chromosome endings visualized with the gritty authenticity of documentary filmmaking and the electric energy of dopamine-neon accents. The visual identity draws from 35mm film grain textures, the neon-lit corridors of research laboratories at night, duotone scientific photography, and the precise grid systems of data-presentation dashboards. The tone is professional -- authoritative scientific communication with visual flair.

## Layout Motifs and Structure
**Single-column** vertical descent with focused, sequential content delivery -- each section a chapter in the telomere story.

**Primary structure:**
- **Opening viewport (100vh):** A dark grainy background (#1a1420) with kinetic-animated title "TELOMERE.DIGITAL" -- letters that subtly shift, rotate, or scale in continuous micro-animation. Dopamine-neon accent (#00ff88) underline pulsing slowly.
- **Single-column content flow:** Narrow (max-width: 680px) centered text with generous spacing. Each section features a duotone scientific photograph.
- **Zoom-focus image interaction:** Scientific images zoom slightly (scale 1.1x) and gain clarity (filter: contrast(1.1)) on hover, simulating microscope focusing.
- **Grid-line background pattern:** Thin grid lines at 0.04 opacity providing structural texture throughout.

## Typography and Palette
**Fonts:**
- **Headlines:** "Sora" (Google Fonts) with kinetic animation -- subtle continuous micro-movement (translateY oscillation, 0.5px amplitude, 4s cycle). Weight 700, size: clamp(28px, 5vw, 56px).
- **Body:** "Inter" (Google Fonts) -- weight 400, size: clamp(15px, 1.5vw, 18px), line-height: 1.8.
- **Data:** "JetBrains Mono" (Google Fonts) -- for research data and metrics.

**Palette:**
- **Film Dark:** #1a1420 -- primary background
- **Neon Green:** #00ff88 -- dopamine primary accent
- **Neon Pink:** #ff0088 -- dopamine secondary accent
- **Grain White:** #d0c8c0 -- primary text
- **Duotone Teal:** #008888 -- image treatment
- **Grid Faint:** #2a2430 -- background grid lines
- **Deep Black:** #0a0810 -- deepest shadows

## Imagery and Motifs
- **Duotone scientific photography:** Images processed through CSS duotone filter (grayscale + hue-rotate + saturate) in teal-neon palette.
- **Film grain overlay:** SVG feTurbulence at 0.05 opacity, continuously animated for living grain texture.
- **Kinetic-animated headlines:** Subtle continuous motion on headlines (translateY oscillation via CSS keyframes).
- **Grid-line background:** Repeating CSS lines (1px, #2a2430) at 0.04 opacity in both directions, spaced 40px.
- **Zoom-focus image interaction:** `transform: scale(1.1); filter: contrast(1.1)` on hover, 300ms ease.

## Prompts for Implementation
Cinematic telomere science documentary. Single-column focus for sequential reading. Film grain creates authenticity. Kinetic headlines add living energy. Neon accents highlight key findings.

**Opening:** Dark grain fades in, "TELOMERE.DIGITAL" letters appear with kinetic micro-animation, neon underline draws from left.

AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No light backgrounds. No playful whimsy. No heavy decoration.

## Uniqueness Notes
1. **Grainy-textured documentary science:** Film grain applied to genomics content creates documentary-cinema authenticity.
2. **Kinetic-animated headlines in scientific context:** Continuously micro-moving headlines create living, breathing text unique in the collection.
3. **Dopamine-neon on dark grain:** The combination of bright neon accents with film-grain texture creates electric-cinematic quality.
4. **Zoom-focus as microscope metaphor:** Image hover interaction simulates microscope focusing on telomere specimens.

**Seed/style:** grainy-textured aesthetic, single-column layout, kinetic-animated typography, dopamine-neon palette, zoom-focus patterns, duotone-photo imagery, grid-lines motifs, professional tone
**Avoided overused patterns:** No centered+card-grid (96%/92%), no parallax (98%), no warm palette (87%), no mono typography (86%), no photography as primary (78%), no mysterious-moody tone (67%)