# Design Language for eyes.plus ## Aesthetics and Tone eyes.plus is a vision enhancement and optical wellness brand -- the "plus" implies improvement, augmentation, seeing more clearly. The aesthetic is **pop-art** -- bold Lichtenstein dots, Warhol-style repetition, and saturated comic-book colors applied to the theme of eyes and vision. Every element pops with exaggerated visual energy: oversized halftone-dotted eyeballs, thick black outlines, and speech-bubble UI elements. The tone is **elegant-sophisticated** despite the pop-art loudness -- this is Roy Lichtenstein at a high-end optician's, not a comic book shop. The contrast between refined vision care and explosive pop visuals creates magnetic tension. ## Layout Motifs and Structure The layout uses a **hud-overlay** composition -- information is layered over a central eye illustration as if viewed through an optometrist's diagnostic lens system. **Primary structure:** - **Opening viewport (100vh):** A massive stylized eye illustration (SVG, pop-art style with halftone dots in the iris) fills the center. UI elements are arranged around it like HUD readings -- pupil dilation data top-left, color spectrum analysis top-right, vision score bottom-center. All text in expressive variable weight. - **Diagnostic sections:** As the user scrolls, the central eye remains fixed (position: sticky) while content panels slide over it from alternating sides, each styled as a pop-art comic panel with thick black borders (4px solid #1A1A1A) and halftone dot backgrounds. - **Color spectrum band:** A horizontal strip at 60vh displaying the visible light spectrum as a gradient bar, with content anchored to specific wavelength positions. - **Gallery of visions (final section):** A grid of duotone eye close-ups in different pop-art color treatments (each using CSS filter: sepia + hue-rotate for unique colorways). ## Typography and Palette **Fonts:** - **Headlines/Display:** "Bungee" (Google Fonts) -- a heavy, display-oriented font designed for signage with strong vertical strokes and pop-art energy. Weight 400. Size: clamp(28px, 5.5vw, 68px). Transform: uppercase. Letter-spacing: 0.02em. - **Body text:** "Work Sans" (Google Fonts) -- a clean, modern sans-serif with optical size variation that maintains legibility at small sizes while feeling contemporary. Weight 400 body, 600 bold. Size: clamp(15px, 1.6vw, 19px). Line-height: 1.7. - **HUD/Data:** "Overpass Mono" (Google Fonts) -- a monospaced font with rounded terminals that suits diagnostic readouts and data overlays without feeling cold. **Palette:** - **Electric Magenta:** #E91E8C -- primary pop accent, the color of a neon eye chart - **Terracotta Warm:** #D4764E -- secondary warmth, grounding the electric tones - **Comic Yellow:** #FFD23F -- highlight and speech-bubble fill - **Deep Ink:** #1A1A1A -- outlines, text, the definitive pop-art border - **Halftone Cream:** #FFF5E6 -- background dots and light areas - **Iris Blue:** #3A86C8 -- cool accent for eye/vision elements - **Retina Green:** #4CAF50 -- positive indicator, "clear vision" signal ## Imagery and Motifs **Core visual motifs:** - **Pop-art halftone dots:** The signature visual element. Backgrounds use radial-gradient dots (8px diameter, 12px spacing) in varying colors to create the classic Lichtenstein halftone effect. Different sections use different dot colors on different backgrounds for variety. - **Oversized eye illustrations:** SVG eyes in pop-art style -- thick black outlines (3px), flat-color fills, halftone-dotted irises. Eyes blink on cursor-follow (the pupil tracks cursor position with smooth interpolation, eyelid SVG path morphs on click). - **Speech-bubble UI elements:** Tooltips and callouts use classic comic speech-bubble shapes (border-radius with a triangular tail via CSS ::after pseudo-element, border: 3px solid #1A1A1A, background: #FFD23F). - **Duotone photo treatments:** Any photographic elements are processed through CSS duotone (filter: grayscale(1) + overlay blend with #E91E8C or #3A86C8), maintaining the pop-art color restriction. - **Cursor-follow pupil tracking:** The hero eye's pupil follows cursor movement with dampened spring physics (stiffness: 0.08, damping: 0.9), creating the illusion that the website is watching you. ## Prompts for Implementation **Full-screen narrative experience:** The site is an interactive vision test reimagined as pop-art installation. Users scroll through a series of "diagnostic" panels, each revealing a different aspect of vision through comic-book styling. **Opening sequence animation:** - Frame 0-500ms: Halftone Cream (#FFF5E6) background. Halftone dots begin appearing from center outward (radial stagger, 100 dots, 5ms each, scale 0 to 1 with spring easing). - Frame 500-1200ms: The central eye draws itself -- outline first (SVG stroke-dashoffset, 800ms), then fills flood in area by area (clip-path reveals, 100ms stagger per region). Iris halftone dots pop in last. - Frame 1200-1800ms: HUD data elements slide in from their respective corners (translateX/Y with 200ms stagger). "EYES.PLUS" renders in Bungee with letter-stagger (80ms per letter, scale 0.8 to 1 + opacity). - Frame 1800ms+: Pupil begins tracking cursor. Eye blinks once (eyelid SVG path morph, 150ms down + 150ms up). **Scroll interactions:** - Central eye remains sticky while comic panels slide over from alternating sides. - Each panel enters with a pop-art "WHAM" effect (scale 1.1 to 1, border flashes from 4px to 6px and back). - Halftone dot density increases as user scrolls deeper (dot spacing tightens from 16px to 8px). AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No "Buy Now" or subscription tiers. This is an art installation about seeing, not an e-commerce store. ## Uniqueness Notes **Differentiators from other designs:** 1. **Pop-art eye as interactive HUD centerpiece:** A sticky, cursor-tracking eye illustration that serves as both hero element and persistent navigation anchor -- the website literally watches you back. 2. **Halftone dot density as scroll indicator:** Using the density of pop-art halftone dots as a scroll-depth visual cue is a novel interaction pattern tied directly to the aesthetic. 3. **Speech-bubble UI components:** Replacing traditional tooltips and callouts with comic-book speech bubbles creates a consistent pop-art interaction language unique to this design. 4. **Duotone photo treatment in pop-art context:** CSS-only duotone filtering applied systematically creates a cohesive Warhol-esque gallery effect. **Chosen seed/style:** pop art vibrant showcase -- applied to vision/eye domain, transforming the bold pop-art palette into an optical diagnostic experience. **Avoided patterns (from frequency analysis):** Avoided overused centered layout (94%), card-grid (85%). Used hud-overlay (7% - underused). Pop-art aesthetic (from batch seed) is rare. Used cursor-follow contextually as pupil-tracking rather than generic. Expressive-variable typography is underused (batch assigns it).