# Design Language for eyes.team ## Aesthetics and Tone eyes.team is a collaborative surveillance and monitoring team platform -- the concept of many eyes working together, collective observation, distributed watchfulness. The aesthetic is **generative** -- algorithmically-produced patterns of interconnected eye-like nodes, procedural iris textures, and network visualizations that pulse with shared attention. The visual language draws from generative art systems where simple rules produce complex, organic-looking patterns. The tone is **mysterious-moody** -- dark backgrounds punctuated by luminous connection lines, creating the feeling of a secret observation network operating in the digital shadows. Think of a control room designed by Refik Anadol. ## Layout Motifs and Structure The layout uses **horizontal-scroll** navigation -- the team network extends laterally like a panoramic surveillance wall of monitors. **Primary structure:** - **Opening viewport (100vw x 100vh):** A dark field populated with generative eye-nodes -- small circles (20-40px) with animated iris patterns (conic-gradient rotating slowly), connected by thin luminous lines (1px, rgba white at 0.3). The word "EYES" floats in the center, each letter slightly offset vertically. ".TEAM" appears below in smaller Playfair Display italic. - **Horizontal panels:** The user scrolls horizontally through 5-6 full-viewport panels, each representing a different "team member's perspective." Each panel features a large generative eye pattern (unique conic-gradient colors) with overlaid content. - **Network map (persistent):** A thin strip along the bottom (60px height) shows a minimap of all panels as connected nodes, with the current panel highlighted by a bright iris glow. - **Convergence point (final panel):** All individual eye patterns merge into a single large compound eye -- a hexagonal grid of smaller irises that represents collective vision. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Playfair Display" (Google Fonts) -- a high-contrast transitional serif with elegant hairlines that adds gravitas and sophistication to the surveillance theme. Weight 700 for titles, 400 italic for subtitles. Size: clamp(28px, 5vw, 64px). Letter-spacing: -0.02em. - **Body text:** "Karla" (Google Fonts) -- a grotesque sans-serif with a slightly geometric structure that complements Playfair's elegance while maintaining clean readability on dark backgrounds. Weight 400 body, 700 bold. Size: clamp(15px, 1.5vw, 18px). Line-height: 1.75. - **Data/Network:** "Fira Code" (Google Fonts) -- a monospaced font with programming ligatures, perfect for network data and coordinate displays. **Palette:** - **Abyss Black:** #0A0A12 -- primary background, the void between observations - **Iris Violet:** #7B61FF -- primary accent, the luminous gaze - **Deep Burgundy:** #4A1942 -- secondary dark accent, richness in shadow - **Neural Gold:** #C9A84C -- warm tertiary accent for highlights and connections - **Retinal White:** #E8E4F0 -- text and bright elements, slightly cool - **Synapse Cyan:** #3DD6D0 -- data elements and network lines - **Cornea Blush:** #D4708F -- occasional warm accent ## Imagery and Motifs **Core visual motifs:** - **Generative iris patterns:** Each "team member" eye uses a unique conic-gradient iris pattern (conic-gradient from center, 6-8 color stops blending Iris Violet, Neural Gold, and Synapse Cyan). These rotate slowly (animation: rotate 30s linear infinite) and morph slightly (scale 1 to 1.02 to 1, 8s ease-in-out). - **Neural connection lines:** Thin lines (1px, Synapse Cyan at 0.3 opacity) connect eye-nodes across the viewport. Lines pulse brighter when the connected section is active (opacity animation 0.3 to 0.8, 600ms). Lines are drawn as SVG paths with slight curves. - **Gradient mesh backgrounds:** Each panel uses a different gradient-mesh background (radial-gradient with 3-4 color stops positioned asymmetrically) in dark tones, creating depth without imagery. - **Pupil parallax:** Within each generative eye, the pupil (a dark circle) shifts position based on scroll progress, as if each eye tracks the user's journey through the horizontal space. - **Particle constellation:** Background particles (2px circles, Retinal White at 0.1-0.3 opacity) drift slowly, occasionally connecting to form brief constellation patterns (lines appear for 2s then fade). ## Prompts for Implementation **Full-screen narrative experience:** The site is experienced as a horizontal journey through a network of watching eyes. Each panel tells the story of a different perspective, and they all connect at the end. **Opening sequence animation:** - Frame 0-800ms: Abyss Black fills viewport. Single small iris appears at center (scale 0 to 1, conic-gradient begins rotating). - Frame 800-2000ms: Additional eye-nodes appear one by one across the viewport (12-15 nodes, 80ms stagger, fade-in + scale from 0.5). Connection lines draw between them (stroke-dashoffset animation, 200ms per line, staggered after nodes appear). - Frame 2000-2800ms: "EYES" letters fade in with vertical offset stagger (each letter: opacity 0 to 1, translateY 20px to 0, 200ms, stagger 120ms). ".TEAM" appears below in italic (300ms fade after last letter). - Frame 2800ms+: Particle constellation begins. Network minimap slides up from bottom. **Horizontal scroll implementation:** - Use CSS scroll-snap-type: x mandatory on the container. Each panel is 100vw. - Parallax within horizontal scroll: eye pupils track horizontal scroll position (transform: translateX mapped to scrollLeft). - Connection lines in minimap animate to show current position (active node pulses with box-shadow glow). **Convergence animation (final panel):** - Individual iris patterns from all panels replicate as small hexagonal cells (clip-path: polygon for hex shape). They arrange themselves into a compound eye grid with 300ms stagger. Each cell retains its unique conic-gradient. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No team member photo grids or organizational charts. This is about collective vision, not corporate hierarchy. ## Uniqueness Notes **Differentiators from other designs:** 1. **Generative iris art as panel identity:** Each horizontal panel has a unique algorithmically-generated iris pattern using conic-gradients, creating a living, breathing eye that represents a team perspective. 2. **Horizontal-scroll surveillance network:** The lateral navigation mimics a control room monitor wall, with a persistent minimap network graph -- a unique navigation paradigm. 3. **Compound eye convergence finale:** The final panel merges all individual irises into a hexagonal compound eye grid, visually demonstrating the "team" concept through biological metaphor. 4. **Pupil-tracking across horizontal scroll:** Eye pupils that shift with horizontal scroll position create an unsettling sense of being watched as you navigate. **Chosen seed/style:** generative art background -- applied to a team/surveillance concept, using generative patterns specifically as iris/eye art rather than generic decoration. **Avoided patterns (from frequency analysis):** Avoided overused centered (94%), card-grid (85%), parallax pattern (95%). Used horizontal-scroll layout (5% - underused) and generative aesthetic (8%). Deep-burgundy palette (1% - very underused). Playfair-elegant typography (2% - underused).