# Design Language for digitaltelomere.com ## Aesthetics and Tone A cyberpunk data-aging laboratory where the degradation of digital information is visualized in real time -- digitaltelomere.com renders as a glitch-corrupted research terminal studying how data loses integrity over time, like biological telomeres shortening with each cell division. The cyberpunk aesthetic channels the visual entropy it studies: scanlines corrupt at irregular intervals, text flickers between legible and garbled, and neon data streams pulse through dark interfaces that show their wear. This is not clean-room science -- it is field research at the edges of data death. The tone is hacker-academic: the language of a researcher who learned their craft in underground labs rather than universities. Technical precision is delivered with punk attitude. The digital telomere is both a concept to study and a problem to hack. Visual references: the corrupted interfaces of Cyberpunk 2077 braindance sequences; a decaying VHS tape played through a digital converter; the phosphor burn of an old CRT displaying hexadecimal data; the visual language of datamoshing applied to typography. ## Layout Motifs and Structure The layout uses a **terminal** architecture -- content is presented within a full-viewport terminal emulator interface with multiple tabbed panes. **Terminal System:** - A faux terminal window fills the viewport: title bar with tabs, dark content area with visible padding (24px) - Content is organized in "tabs" -- clicking tab labels switches content views within the terminal frame - Text content renders with monospace type and a subtle green-on-dark CRT effect - A persistent status bar at the bottom shows simulated system stats (data integrity %, telomere length) **Section Flow:** 1. **Boot Sequence:** The terminal loads with a simulated boot: text lines appearing rapidly, then clearing to the main interface. 2. **Tab: OVERVIEW** -- introductory content about the digital telomere concept. 3. **Tab: ANALYSIS** -- deeper technical content with data visualization elements. 4. **Tab: RESEARCH** -- links and references styled as terminal file listings. 5. **Status Bar:** Persistent bottom bar with simulated telomere degradation counter. ## Typography and Palette **Typography:** - **Headlines:** "Share Tech Mono" (Google Fonts) -- a monospace with terminal character. Used at 1.5rem-3rem, weight 400, line-height 1.3. - **Body:** "Fira Code" (Google Fonts) -- monospace for all body text, reinforcing the terminal context. Used at 0.9rem, weight 400, line-height 1.7. - **Glitch Text:** For corrupted-text effects, characters are replaced with Unicode block elements at random intervals via CSS animation. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Terminal Black | Background | #0a0c08 | Primary background | | Screen Dark | Secondary | #141810 | Tab backgrounds | | Phosphor Green | Primary text | #30ff60 | Primary text, accents | | Dim Green | Secondary text | #207a38 | Muted text, borders | | Glitch Magenta | Corruption | #ff30a0 | Glitch effects, errors | | Glitch Cyan | Corruption | #30ffff | Glitch effects, highlights | | Amber Warning | Alert | #ffb830 | Warning states | | Scanline | Overlay | #ffffff08 | Scanline overlay | ## Imagery and Motifs **CRT Scanline Overlay:** A full-viewport repeating-linear-gradient (transparent 50%, rgba(0,0,0,0.1) 50%) at 2px creates permanent scanline effect over all content. **Glitch Text Animation:** Selected headlines have a CSS animation that briefly shifts text-shadow to offset red and cyan channels (chromatic aberration) at irregular intervals (random-feeling via multiple keyframe percentages). **Terminal Tab Bar:** Styled with 1px borders, tab labels in monospace caps, active tab with phosphor-green underline, inactive tabs dimmed. **Data Degradation Counter:** The status bar shows a simulated telomere-length counter that slowly decrements (CSS counter animation or JS), visualizing the core concept in real time. **Boot Sequence Text:** The opening loads with rapidly appearing terminal lines (20ms per line) that scroll past before clearing to the interface. ## Prompts for Implementation Build as a hacked research terminal. The boot sequence runs on page load: 20-30 lines of system text scrolling rapidly (monospace, phosphor green on black), then a clear, then the terminal interface fading in with its tab bar and content. The scanline overlay is permanent. Tab switching is instant (no transitions -- terminals do not animate). Glitch effects on headlines fire at irregular intervals (every 3-8 seconds, randomized). The status bar telomere counter decrements from 100% slowly during the user's session. Hovering the terminal frame border triggers a brief screen-flicker effect (opacity oscillation, 100ms). All content is monospace. No rounded corners, no shadows, no gradients (except the scanline overlay). The interface should feel like it could crash at any moment but keeps running. No commercial elements whatsoever. ## Uniqueness Notes 1. **Terminal-as-entire-site-architecture:** The faux terminal with tabs as navigation creates a complete environmental interface distinct from standard layouts. 2. **Real-time data degradation counter:** A continuously decrementing telomere counter in the status bar embodies the site's concept in its own interface. 3. **Cyberpunk glitch as ambient state:** Irregular chromatic-aberration glitch effects on text create atmosphere through instability rather than polish. 4. **Boot sequence as hero:** The terminal boot animation replaces traditional hero sections with a procedural loading experience. Document chosen seed/style: aesthetic: cyberpunk, layout: terminal, typography: monospace, palette: phosphor-green, patterns: scanline-overlay, imagery: glitch-text, motifs: degradation-counter, tone: hacker-academic Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), warm palette (100%), parallax patterns (98%), friendly tone (77%), minimal imagery (96%)