# Design Language for eyes.plus ## Aesthetics and Tone eyes.plus inhabits the visual language of a near-future optical research laboratory -- a place where precision lenses float inside translucent enclosures, data streams refract through layered glass panels, and every surface carries a faint crystalline shimmer as though the air itself has been engineered to diffuse light. The aesthetic draws from **glassmorphism** at its most architecturally ambitious: not the shallow frosted-card trend of 2021, but a fully realized spatial environment where depth, transparency, and luminous blur create an atmosphere of clinical wonder. Imagine the control room of a satellite-based telescope rendered by Jony Ive's ghost collaborating with Olafur Eliasson -- surfaces that feel simultaneously material and immaterial, panels that seem to hover at staggered depths within a translucent void. The mood is **futuristic-cutting-edge** without aggression. There is no neon screaming, no glitch chaos. Instead, the futurism here is refined and deliberate, like peering through successive layers of optical glass where each layer subtly tints and warps the view behind it. The tone evokes the hushed intensity of a clean room where next-generation lens arrays are being assembled: precision, anticipation, quiet awe. Every element should feel like it exists in a zero-gravity environment where frosted panels drift at slightly different z-depths, casting soft luminous shadows on the layers behind them. The domain "eyes.plus" is treated as a dual metaphor: literal vision enhancement technology and the idea of augmented perception -- seeing more, seeing deeper, seeing what was previously invisible. The visual narrative progresses from the macro (vast, translucent hero panels suggesting an optical aperture opening) to the micro (crystalline detail cards that reveal layered information as though focusing a lens). ## Layout Motifs and Structure The layout follows a **card-grid** architecture, but reimagined as a collection of optical specimens suspended in a translucent field. Rather than a flat grid of uniform cards, the composition uses cards at three distinct z-depths -- foreground, mid-ground, and background -- with `backdrop-filter` intensity increasing as cards recede: foreground cards have `blur(8px)`, mid-ground cards have `blur(16px)`, and background cards carry `blur(28px)` with reduced opacity. This creates a genuine sense of spatial depth, as though the user is looking into an optician's multi-layered display case. **Grid Structure:** The primary grid uses `display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem;` but cards are staggered vertically using nth-child transforms: odd cards receive `transform: translateY(40px)` to break the mechanical grid alignment. On wider viewports (above 1200px), the grid shifts to a 3-column layout where the center column cards are 15% larger than flanking columns, creating a subtle fish-eye focal effect. This asymmetry prevents the card-grid from feeling like a dashboard or product catalog. **Spatial Layering:** Behind the card grid, a fixed background layer contains slowly drifting gradient orbs -- three or four large, ultra-blurred radial gradients (150vw diameter each) that move on independent sinusoidal paths. These orbs use the translucent-frost palette and animate at glacial speeds (60-80 second cycles), creating shifting ambient light that subtly changes the tint visible through each frosted card. The orbs never fully overlap, ensuring continuous tonal variation across the viewport. **Navigation:** No traditional navigation bar. Instead, a single translucent pill-shaped element floats at the top-center of the viewport, containing only the domain wordmark "eyes.plus" in geometric-sans. Tapping or hovering expands it to reveal 3-4 section anchors via a smooth `max-width` and `padding` transition (0.5s ease-out). The pill uses `backdrop-filter: blur(20px) saturate(1.3)` and a 1px border of `rgba(255, 255, 255, 0.18)`. **Section Transitions:** Between card-grid sections, full-width "lens-divider" elements span the viewport: thin horizontal lines (1px) with a radial gradient glow emanating from center, creating the impression of light diffracting through a cylindrical lens. These dividers pulse once when scrolled into view, briefly intensifying their glow. ## Typography and Palette **Typography:** - **Display / Hero Headlines:** "Exo 2" (Google Fonts) -- a geometric sans-serif with a futuristic, slightly elongated character set. Its letterforms are precisely constructed from geometric primitives -- perfect circles for bowls, mathematically consistent stroke widths -- giving it the engineered quality of technical lettering on optical instruments. Used at weights 600-700, sizes 3.5rem to 8vw for the hero. Set with `letter-spacing: 0.04em` at display sizes to allow each character to breathe, creating the feel of precision instrument labels. `text-transform: uppercase` for primary headings only. The geometric construction of each glyph reinforces the optical-precision theme. - **Secondary Headings / Card Titles:** "Outfit" (Google Fonts) -- a geometric sans with slightly warmer proportions than Exo 2, providing visual contrast while maintaining the geometric DNA. Used at weights 400-500, sizes 1.2rem to 1.8rem. `letter-spacing: 0.02em`, `line-height: 1.3`. The subtly rounder terminals soften the clinical edge of Exo 2, making card titles feel approachable without sacrificing the futuristic register. - **Body / Descriptive Text:** "Inter" (Google Fonts) -- the workhorse geometric sans, chosen for its optical size adjustments and carefully tuned x-height that ensures legibility even when rendered behind or atop translucent frosted panels. Used at weight 300-400, size 0.95rem-1.05rem, `line-height: 1.7`, `letter-spacing: 0.01em`. The light weight ensures body text feels etched rather than stamped, consistent with the luminous, weightless atmosphere. Color is always `rgba(255, 255, 255, 0.78)` against dark backgrounds, never pure white. - **Micro / Labels and Metadata:** "Space Mono" (Google Fonts) -- a fixed-width typeface used exclusively for data labels, version numbers, and technical annotations within cards. Size 0.7rem, weight 400, `letter-spacing: 0.08em`, `text-transform: uppercase`. Provides a deliberate contrast to the geometric sans stack, grounding certain elements in a more technical register that reinforces the research-lab atmosphere. **Palette:** The palette is **translucent-frost**: a system built not on opaque swatches but on colors designed to be seen *through*. Every color is specified with alpha channels because they are never viewed in isolation -- they layer, blend, and shift depending on what lies behind them. | Role | Hex (Opaque Reference) | Typical Usage | |---|---|---| | Void | `#0A0E1A` | Page background, the deepest layer | | Deep Glass | `#121829` | Card background base (before blur) | | Frost White | `#E8EDF5` | Primary text, hero wordmark | | Ice Blue | `#7EB8D6` | Accent highlights, hover states, link indicators | | Refraction Cyan | `#3DD8C5` | Primary call-to-interaction color, glow accents | | Spectral Violet | `#9B6FE8` | Secondary accent, gradient endpoint, depth indicator | | Warm Lens | `#D4A574` | Tertiary warm accent for focal points, used sparingly to break the cool monotone | | Frost Border | `rgba(255, 255, 255, 0.12)` | Card borders, divider lines, ghost outlines | **Gradient Systems:** - Hero background: `linear-gradient(135deg, #0A0E1A 0%, #121829 40%, #1A1040 100%)` -- the base void with a faint violet pull at the far corner. - Ambient orbs: `radial-gradient(circle, rgba(61, 216, 197, 0.12) 0%, transparent 70%)` and `radial-gradient(circle, rgba(155, 111, 232, 0.10) 0%, transparent 70%)` -- the drifting translucent light sources. - Card surface: `background: rgba(18, 24, 41, 0.45); backdrop-filter: blur(16px) saturate(1.2);` with `border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px;`. - Text glow on hero: `text-shadow: 0 0 40px rgba(61, 216, 197, 0.25), 0 0 80px rgba(155, 111, 232, 0.15);` ## Imagery and Motifs **Glassmorphic Cards as Primary Visual Language:** All content is presented within **glassmorphic cards** -- translucent panels with frosted-glass surfaces that reveal the ambient gradient environment behind them. These are not flat rectangles with a blur filter slapped on; each card is a carefully constructed optical object with: - A base layer: `rgba(18, 24, 41, 0.40)` with `backdrop-filter: blur(16px) saturate(1.3)` - An inner highlight: a `::before` pseudo-element with `background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%)` positioned at top-left, simulating a specular light reflection on glass - A border: `1px solid rgba(255, 255, 255, 0.12)` that intensifies to `rgba(255, 255, 255, 0.25)` on hover - A shadow system: `box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);` **Motifs -- Tech/Optical:** 1. **Aperture Iris:** The site's central motif is a stylized lens aperture rendered in SVG -- six overlapping blade shapes that rotate slightly on scroll, creating the impression of an iris opening and closing. This appears as a large background element behind the hero text, rendered at 60% viewport height with `opacity: 0.07` and animated via CSS transforms. On hover or scroll events, the blades rotate 15 degrees and the opacity briefly pulses to `0.12`. 2. **Refraction Lines:** Thin diagonal lines (1px, `rgba(255, 255, 255, 0.05)`) cross the viewport at 30-degree and 150-degree angles, suggesting light beams refracting through a prism. These lines are purely decorative, implemented as absolutely-positioned pseudo-elements on section containers, and they shift position slightly on scroll via `transform: translateX()` tied to scroll progress. 3. **Focus Rings:** Small concentric circle groups (3 rings, expanding from 20px to 60px diameter) appear at the corners of featured cards. Rendered in SVG with `stroke: rgba(126, 184, 214, 0.15)` and `stroke-width: 0.5px`, they pulse gently on a 4-second loop, evoking the focusing mechanism of a camera lens. 4. **Floating Particle Field:** A subtle particle effect across the entire page -- 30-40 tiny dots (2-3px) drifting upward at varying speeds (15-40 second cycles), rendered as absolutely-positioned `
` elements with `background: rgba(61, 216, 197, 0.3)` and `border-radius: 50%`. They represent light motes caught in a beam, reinforcing the optical atmosphere without becoming distracting. 5. **Data Glyphs:** Within tech-focused cards, small decorative elements resembling optical measurement markings -- crosshairs, diopter scales, wavelength spectrum bars -- are rendered in SVG with `stroke: rgba(126, 184, 214, 0.20)`. These are purely ornamental, adding visual density and reinforcing the optical-instrument motif. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens as a full-viewport dark void (`#0A0E1A`). For the first 1.5 seconds, nothing is visible except two or three ultra-blurred ambient orbs that slowly drift into the viewport from the edges, establishing the translucent-frost atmosphere. Then, from the exact center, the aperture iris SVG begins to "open" -- its six blades rotating outward over 1.2 seconds using CSS `transform: rotate()` transitions with staggered delays (each blade 0.08s apart). As the aperture opens, the wordmark "eyes.plus" fades in through the center of the iris, rendered in Exo 2 at 7vw, weight 700, uppercase, with `letter-spacing: 0.06em`. The text carries a subtle multi-layered text-shadow in Refraction Cyan and Spectral Violet, giving it a luminous, holographic quality. **Scroll Narrative:** Below the hero, the card-grid sections emerge. As the user scrolls, each card grid section uses a **scale-hover** interaction pattern: cards begin at `transform: scale(0.92); opacity: 0.5` and transition to `scale(1); opacity: 1` when they enter the viewport (using IntersectionObserver with `threshold: 0.15`). The scale transition uses `transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease;` -- a custom easing that starts slow, accelerates, then settles with a gentle overshoot, mimicking the feel of a lens autofocusing. **Card Interactions (scale-hover):** On hover, each glassmorphic card performs a layered transformation: 1. `transform: scale(1.03) translateY(-4px)` -- slight enlargement and lift 2. `box-shadow` deepens from 8px to 16px blur, and `rgba(61, 216, 197, 0.15)` glow is added 3. The inner specular highlight (`::before` gradient) shifts position via `background-position`, simulating the reflection moving as the card "tilts" toward the viewer 4. Border opacity increases from `0.12` to `0.25` 5. All transitions use `0.35s cubic-bezier(0.23, 1, 0.32, 1)` for the autofocus-lens feel **Section-Level Storytelling:** - **Section 1 -- "Perception":** A 2-column card grid where each card contains a single short phrase about augmented vision, paired with an abstract SVG illustration (lens diagrams, wavelength spectra). The section title is rendered at 5vw with a subtle `background: linear-gradient(90deg, #7EB8D6, #3DD8C5)` applied via `background-clip: text; -webkit-text-fill-color: transparent;`. - **Section 2 -- "Resolution":** A 3-column staggered card grid. Cards here are slightly smaller and more densely packed, containing technical-style data: version numbers in Space Mono, progress bars with frosted-glass tracks, and small circular SVG indicators. This section represents the "data layer" of the narrative. - **Section 3 -- "Focus":** Returns to a 2-column layout but with one oversized featured card spanning the left column at 1.5x height, flanked by two stacked standard cards on the right. The featured card has an intensified glassmorphic treatment: `blur(24px)` instead of `16px`, and the inner specular highlight is larger and brighter. This section represents the culmination -- the moment of clarity. **Animation Budget:** CSS-only animations are preferred. The floating particles, ambient orbs, and aperture rotation are all CSS `@keyframes`. JavaScript is used only for IntersectionObserver-based viewport detection (triggering the scale-hover entrance) and the navigation pill expand/collapse. No animation libraries. Total JS should be under 2KB minified. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero sliders, stock photography, emoji, rounded-playful aesthetics, warm-friendly tones. This site is a visual essay, not a product page. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Multi-Depth Glassmorphism as Spatial System:** While glassmorphism at 11% frequency in the portfolio typically appears as surface decoration (a frosted card here, a blurred panel there), eyes.plus builds an entire spatial environment from glass layers. The three-depth card system (foreground/mid-ground/background blur levels), the ambient gradient orbs visible through cards, and the staggered z-depth transforms create a genuine sense of looking *into* a translucent volume rather than looking *at* a flat page with blurred elements. 2. **Optical-Instrument Motif Vocabulary:** No other design in the portfolio uses camera/lens/optical imagery as its primary motif system. The aperture iris, focus rings, refraction lines, and diopter-scale data glyphs form a coherent visual language drawn from optical engineering -- distinct from the circuit-board tech motifs (20%) and generic futuristic elements (12%) elsewhere in the portfolio. 3. **Autofocus-Lens Easing Curve:** The custom `cubic-bezier(0.23, 1, 0.32, 1)` easing used throughout -- for card entrances, hover transitions, and navigation expansion -- mimics the specific motion profile of a camera lens autofocusing: initial hesitation, rapid acceleration, gentle settling. This creates a kinetic signature unique to this site that reinforces the optical theme at a subliminal level. 4. **Translucent-Frost Palette as Light System:** At 2% portfolio frequency, the translucent-frost palette is rare, but here it is implemented not as a static color scheme but as a dynamic light system. The drifting ambient orbs continuously shift the tint visible through frosted surfaces, meaning no two moments of viewing the page produce identical color relationships. The palette is alive and reactive to its own layered composition. 5. **Zero-Navigation Entry Sequence:** The aperture-iris opening animation as the sole entry point -- no logo, no nav bar, no hero image, just the mechanical opening of a lens -- is structurally unique in the portfolio. It establishes the optical metaphor before any content appears and creates a moment of anticipatory tension that other designs' immediate content displays do not achieve. **Chosen Seed/Style:** - aesthetic: glassmorphism - layout: card-grid - typography: geometric-sans - palette: translucent-frost - patterns: scale-hover - imagery: glassmorphic-cards - motifs: tech - tone: futuristic-cutting-edge **Avoided Overused Patterns:** - playful aesthetic (98%) -- replaced with clinical futurism - centered layout (99%) -- using staggered asymmetric card-grid instead - mono typography (99%) -- relegated to micro labels only; geometric-sans leads - warm palette (100%) -- replaced with cool translucent-frost system - scroll-triggered patterns (98%) -- scale-hover is the primary interaction, not generic scroll triggers - minimal imagery (95%) -- glassmorphic-cards provide rich visual texture - vintage motifs (74%) -- replaced with tech/optical motifs - friendly tone (97%) -- replaced with futuristic-cutting-edge