# Design Language for datatelomere.com ## Aesthetics and Tone A biopunk laboratory where data biology is studied under electron microscopes -- datatelomere.com renders as a research interface observing the protective caps at the ends of data chromosomes: the structures that determine how long information survives before degradation. The biopunk aesthetic merges biological visualization with digital infrastructure: cell-membrane gradients, DNA-helix wireframes, and protein-fold diagrams rendered in the language of network topology. Every visual element suggests that data has organic properties -- it ages, it degrades, it has telomeres. The tone is research-curious: the voice of a scientist explaining their findings at a conference -- precise but enthusiastic, technical but accessible. Data telomeres are presented as a genuine conceptual framework, not a metaphor. The site asks: what if data integrity follows biological rules? Visual references: electron microscopy images of chromosome ends color-mapped in false blue; the interface of a genome sequencer; biological diagrams from Nature journal rendered in SVG; the bioluminescent glow of GFP-tagged proteins under UV light. ## Layout Motifs and Structure The layout uses a **split-screen** architecture -- dual panels representing the biological and digital facets of data telomeres simultaneously. **Split-Screen System:** - Left panel (50%): The "Biological View" -- content presented with organic visual language, curved containers, gradient backgrounds - Right panel (50%): The "Digital View" -- the same concepts presented with technical visual language, sharp containers, dark backgrounds - A central spine (4px, gradient from bio-green to digital-cyan) divides the panels - Scroll is synchronized: both panels advance together, showing two perspectives on the same concept **Section Flow:** 1. **The Observation:** Hero spanning both panels. Left: "DATA" in organic rounded type. Right: "TELOMERE" in sharp monospace. The central spine pulses. 2. **The Specimens:** Dual-view content sections exploring telomere concepts from both biological and digital perspectives simultaneously. 3. **The Synthesis:** A section where the central spine expands to consume both panels, merging the two views into a unified understanding. 4. **The Lab Notes:** Closing section returning to split view with summary/reference content. ## Typography and Palette **Typography:** - **Headlines:** "Outfit" (Google Fonts) -- a geometric sans-serif with clean, scientific precision. Used at 2.5rem-5rem, weight 700, letter-spacing: -0.01em, line-height 1.15. - **Body:** "Inter" (Google Fonts) -- for all body content across both panels. Used at 1rem, weight 400, line-height 1.7. - **Data/Code:** "Fira Code" (Google Fonts) -- for technical content, data references. Used at 0.85rem, weight 400. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Bio Dark | Deep forest | #0a1a10 | Left panel background | | Digital Dark | Deep navy | #0a0e1a | Right panel background | | Bio Green | Organic accent | #30d888 | Left panel accent, bio elements | | Digital Cyan | Tech accent | #00c8ff | Right panel accent, digital elements | | Telomere Gold | Central accent | #e8c840 | Central spine, synthesis section | | Cell Membrane | Translucent green | #30d88820 | Bio panel glass effects | | Network Blue | Translucent cyan | #00c8ff20 | Digital panel glass effects | | Text Light | Near white | #e8f0f0 | Body text on dark | | Muted Bio | Dim green | #4a8a60 | Secondary bio text | | Muted Digital | Dim cyan | #4a6a8a | Secondary digital text | ## Imagery and Motifs **DNA Helix Wireframe:** A decorative SVG double-helix running vertically along the central spine, drawn with thin strokes (1px) alternating Bio Green and Digital Cyan. The helix rotates slowly (CSS animation, 20s) suggesting continuous replication. **Telomere Cap Visualization:** At the top and bottom of the central spine, circular cap elements (48px diameter, Telomere Gold border) represent the protective telomere ends. These caps glow on scroll-near proximity. **Gradient Membrane Backgrounds:** Left panel sections use radial-gradient backgrounds in Bio Green at 5-10% opacity, simulating cell membranes. Right panel uses linear-gradient backgrounds in Digital Cyan at 5-10% opacity, simulating circuit traces. **Microscope Viewport:** Content containers in the left panel use circular clip-paths (border-radius: 50% on square containers) for key visuals, simulating microscope eyepiece views. ## Prompts for Implementation Build the split-screen as a research comparison tool. The hero loads with both panel backgrounds fading in simultaneously, then the central spine drawing from top to bottom (height animation, 2s), then text appearing on each side. Both panels scroll together via synchronized scroll listeners. The DNA helix SVG provides continuous ambient motion along the spine. Content sections in each panel enter with directional slides: left panel content from the left, right panel content from the right, meeting at the central spine. The Synthesis section is the climax: the spine expands (width: 4px to 100vw, 2s) absorbing both panels into a unified gold-tinted view. Avoid commercial patterns, stock imagery, and CTA blocks. This is a research paper made interactive. ## Uniqueness Notes 1. **Dual-perspective split-screen for bio-digital concept:** The simultaneous biological/digital views of the same concept create a unique comparative experience. 2. **DNA helix as structural decoration along layout spine:** The central SVG helix serves as both decorative motif and conceptual metaphor for the content. 3. **Telomere cap visualization as interaction landmark:** Circular cap elements at spine endpoints create distinctive visual anchors. 4. **Synthesis expansion climax:** The spine-to-full-width expansion creates a dramatic merging moment unique in the collection. Document chosen seed/style: aesthetic: biopunk, layout: split-screen, typography: geometric-sans, palette: bio-digital, patterns: helix-svg, imagery: gradient-membrane, motifs: telomere-cap, tone: research-curious Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)