# Design Language for telomere.dev

## Aesthetics and Tone
telomere.dev channels vaporwave aesthetics into genomics developer tooling -- the protective caps of chromosomes rendered in sunset gradients, floating in a retro-digital dreamscape of pink grids and teal geometry. The visual identity draws from vaporwave's signature pastel-neon gradients, retro arcade typography, vector art illustrations of molecular biology, and the cultural fusion of science and aesthetics. The tone is friendly -- approachable developer documentation wrapped in visually stunning nostalgia.

## Layout Motifs and Structure
**Organic-flow** layout with content following a natural, non-grid path down the page, like DNA unwinding.

**Primary structure:**
- **Opening viewport (100vh):** A candy-bright gradient background (#ff6b9d to #c084fc to #67e8f9) with "TELOMERE" in retro display type. Vector-art chromosome illustration at center.
- **Organic content stream:** Content blocks at varying widths (40-70%) and positions, creating a winding path. Each section features vector-art biology illustrations.
- **Shake-error interaction:** Incorrect form inputs or invalid navigation attempts trigger brief shake animations, adding personality.
- **Cultural-fusion decorations:** Vaporwave-style decorative elements (palm trees, Greek busts, old CDs) reimagined as genomics icons.

## Typography and Palette
**Fonts:**
- **Headlines:** "Bungee" (Google Fonts) -- retro display font with bold, arcade energy. Weight 400, size: clamp(28px, 5vw, 56px).
- **Body:** "Quicksand" (Google Fonts) -- rounded friendly sans, weight 400, size: clamp(15px, 1.5vw, 18px), line-height: 1.75.
- **Code:** "Fira Code" (Google Fonts) -- monospace for developer code blocks.

**Palette:**
- **Hot Pink:** #ff6b9d -- gradient start
- **Lavender:** #c084fc -- gradient mid
- **Cyan Bright:** #67e8f9 -- gradient end
- **Mint:** #34d399 -- secondary accent
- **Deep Purple:** #1e0a3e -- text on light gradients
- **Card White:** rgba(255,255,255,0.9) -- content panel backgrounds
- **Glow Pink:** #ff6b9d at 0.3 -- hover states

## Imagery and Motifs
- **Vector-art chromosome illustrations:** Clean SVG vector illustrations of telomeres, chromosomes, and DNA helices in candy-bright palette colors.
- **Vaporwave cultural decorations:** Retro-digital decorative elements (gradient sunset rectangles, wireframe grids, floating geometric shapes).
- **Shake-error micro-interaction:** `@keyframes shake` on invalid inputs -- 4px horizontal displacement over 400ms.
- **Organic path layout:** Content blocks with varying margin-left (10-30%) and max-width (40-70%).

## Prompts for Implementation
Vaporwave genomics developer experience. Organic flow mirrors DNA unwinding. Candy-bright gradients create visual excitement. Vector-art biology illustrations bridge science and aesthetics.

**Opening:** Candy gradient, retro "TELOMERE" types in Bungee, vector chromosome draws itself, gradient continues shifting.

AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No dark mode. No corporate austerity. No muted palettes.

## Uniqueness Notes
1. **Vaporwave genomics developer tool:** No other design applies vaporwave aesthetics to molecular biology developer content.
2. **Organic-flow as DNA metaphor:** The winding, non-grid content path literally mirrors the unwinding of a DNA helix.
3. **Vector-art chromosome illustrations in candy gradients:** Clean scientific illustrations rendered in candy-bright vaporwave colors create unique visual fusion.
4. **Shake-error personality in dev tooling:** The playful error response adds character to developer documentation.

**Seed/style:** vaporwave aesthetic, organic-flow layout, retro-display typography, candy-bright palette, shake-error patterns, vector-art imagery, cultural motifs, friendly tone
**Avoided overused patterns:** No centered+card-grid (96%/92%), no parallax (98%), no warm palette (87%), no mono typography (86%), no photography (78%), no mysterious-moody tone (67%)