# Design Language for eyes.plus ## Aesthetics and Tone **eyes.plus** reads as an ophthalmology brand at first glance — then you notice the pause: *eyes*, as in the organs of seeing, *plus*, as in augmented, corrected, more-than-ordinary. This is a site about corrected vision as romantic transformation. The domain carries a soft medical authority undercut by a playful flourish — like a monocle worn at a garden party, or a pair of cat-eye frames hung on the nose of someone reading Keats in a meadow. The aesthetic is **pastoral-romantic filtered through an optician's cabinet**. Think: a nineteenth-century eye chart dissolving into a field of wildflowers. Richly textured burgundy wallpaper behind glass-and-brass instrument cases. The warm smell of old oak and blown-glass lenses. Every image shows depth — near things sharp against a soft, breathing background, as if the page itself demonstrates corrected sight. Bokeh is not a cliché here; it is the central metaphor. Mood board: a Victorian stereoscope card of a rose garden. A wall of trial lenses in gilded frames. A hand-pressed botanist's illustration with a jeweler's loupe resting on it. A letter read by lamplight through a new pair of glasses for the first time. The tone is **pastoral-romantic** with a quietly playful edge. Nothing clinical. No white coats. No optometric charts as decoration (they're present, but reimagined — as poetry, not eyesight tests). The copy whispers rather than headlines. --- ## Layout Motifs and Structure The page is built on a **full-bleed zoom-focus** spine: five full-viewport panels, each one presenting a single image that begins slightly zoomed (scale ~1.08) and slowly resolves to natural scale as the panel enters the viewport, as if the visitor is adjusting their focus. The metaphor is clinical precision expressed as sensory pleasure. **Macro structure (top to bottom, five panels):** 1. **Overture panel.** Full-bleed photograph: a close-up of a human iris, richly amber-brown, with highlight bokeh blooms of warm cream and burgundy. The domain wordmark `eyes.plus` sits centered at 14 vw, set in expressive variable-weight type that shifts from thin (100) to bold (700) as the cursor moves laterally across the screen. Tagline in small caps beneath: *see more. feel more.* The panel breathes — slow background-zoom (scale 1.0 → 1.06, 12 s loop) that never quite finishes. 2. **Garden panel.** A pastoral photograph: shallow depth-of-field wildflowers, the foreground bloom pin-sharp, the background a burgundy-cream impressionist blur. A thin horizontal hairline rule in `#8B3252` bisects the panel at 38% height. Two lines of large poetry-scale text (`clamp(3rem, 7vw, 7rem)`) hang from the rule on the left, set in variable-weight italic. A circular inset — like a lens aperture — reveals a second image within, border in burnished brass `#C8922A`. 3. **Cabinet panel.** Dark-toned: deep burgundy background `#2D0A1A`. A grid of nine gilded lens frames, each a square tile, arranged in a 3×3 offset. On hover, each frame zooms gently (scale 1.06) and a single line of descriptive text fades in from below in cream italic. The grid is not centered — it sits 58% from the left edge, pushing an asymmetric column of running text to the left. 4. **Depth panel.** Full-bleed layered-depth composition: three photographic layers at different focal distances, composited with `mix-blend-mode: multiply`. The nearest layer is pin-sharp, the middle slightly soft, the farthest dreamily blurred. A single stanza of text floats over the composition, justified, in a mid-weight variable font, the line-height breathing gently via a CSS animation (`line-height` oscillating ±0.04, 6 s). 5. **Close panel.** Quieter. Cream `#F5E6D3` background. The wordmark again, this time at 6 vw. A single centered column of body text (max-width 58ch). A small circular photograph — an eye through a magnifying glass — sits to the right, partially bleeding off the edge. No CTA button; a single underlined link in `#8B3252` that draws on hover. **No sticky header.** No hamburger menus. No footer nav grid. Scroll-snapping is soft (`scroll-snap-type: y proximity`), not mandatory. --- ## Typography and Palette **Typography is expressive-variable** — a single display family with a wide weight axis, paired with a refined serif body. Variable axis is used cinematically: weight shifts on scroll position and cursor proximity, not just on hover states. - **Display: [Fraunces](https://fonts.google.com/specimen/Fraunces)** — a variable font with axes for weight (100–900), optical size, and the "wonk" axis that curves letterforms. Used at `clamp(4rem, 14vw, 14rem)` for the wordmark and panel titles. Variable weight driven by `--scroll-progress` custom property. The optical-size axis is set to `auto` so large sizes get display-optimized forms. In italic, Fraunces reads like handwritten calligraphy pressed under glass — appropriate for the optician's cabinet mood. - **Body: [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)** — weight 300 for running text, weight 500 for emphasis. Set at `clamp(1rem, 1.8vw, 1.25rem)`, line-height 1.68. Cormorant's ink-trap serifs at small sizes evoke letterpress printing; its swash italics carry the romantic register. - **Accent / UI: [DM Sans](https://fonts.google.com/specimen/DM+Sans)** — weight 400 only, used exclusively for metadata (dates, frame labels, the small-caps tagline). Never set above `0.85rem`. This family recedes; it never competes with the display. **Palette:** | Role | Hex | Description | |---|---|---| | Deep burgundy background | `#2D0A1A` | Near-black red; the inside of a velvet lens case | | Burgundy mid | `#8B3252` | Antique rose-window glass at dusk | | Warm burgundy accent | `#C05070` | The flush of a cheek seen through a fresh prescription | | Brass gold | `#C8922A` | Gilded lens frames, warm instrument brass | | Cream primary | `#F5E6D3` | Aged vellum, the white of a well-lit iris | | Cream dark | `#E2C9AA` | Shadows on vellum, dried pressed petals | | Near-black body | `#140208` | Text on cream panels; richer than `#000` | CSS custom properties: ```css --burgundy-deep: #2D0A1A; --burgundy-mid: #8B3252; --burgundy-warm: #C05070; --brass: #C8922A; --cream: #F5E6D3; --cream-dark: #E2C9AA; --ink: #140208; ``` --- ## Imagery and Motifs Imagery is **photography** throughout — no illustrations, no flat icons, no SVG decorations beyond hairline rules. Every photograph is processed to emphasize **layered depth**: one foreground element is pin-sharp, one midground is soft (radius ~4px), one background dissolves into bokeh. This three-layer depth treatment is the site's visual signature. **Motifs:** - **The aperture circle.** Every inset image, every decorative frame, every hover reveal uses a circle with a `border: 2px solid var(--brass)` and a slow `clip-path: circle()` reveal on scroll. The circle is always slightly imperfect — offset by 1–2px, as if hand-cut. - **Lens flare wisps.** On dark panels, thin radial gradients in `var(--brass)` at 6% opacity emanate from off-center points — simulating light through old glass. These are CSS only (`radial-gradient`, no images), and they pulse very slowly (opacity ±0.02, 8 s loop). - **Botanical inset.** On the garden panel, a single pressed-flower motif made of SVG paths (a simplified five-petal rose) appears in `var(--cream)` at 8% opacity as a background watermark on the text column. Not a decoration — it is the text's shadow. - **Zoom-focus entrance.** Every panel's background image is initially scaled to 1.06 and blurred by 1.5px. As the panel enters the viewport (Intersection Observer at 0.2 threshold), the image resolves to scale 1.0 and blur 0px over 900 ms with `cubic-bezier(0.22, 1, 0.36, 1)`. This is the zoom-focus pattern from the seed — implemented as entering-focus rather than an exit-blur. - **Variable-weight cursor drift.** On the overture panel only, the wordmark `eyes.plus` font-weight tracks horizontal cursor position: leftmost position = weight 100, rightmost = weight 800, via a CSS custom property updated in `mousemove`. On mobile, this animates automatically on a 4 s loop from 200 to 700 and back. - **Hairline rules.** Single-pixel horizontal rules in `var(--burgundy-mid)` at 40% opacity, drawn via `border-top: 1px solid`, appear between major typographic elements. They never span full width — they start at 12% from the left edge and end at 92%, leaving breathing room at both margins. --- ## Prompts for Implementation Build eyes.plus as a **single five-panel immersive scroll experience** — not a product page, not a medical landing page, but a lyric essay in image and typography about what it feels like to see the world clearly for the first time, or again, or better. **Panel rhythm:** each panel should feel like turning a page in a hand-bound photo book. The zoom-focus entrance animation is the page-turn metaphor — each panel comes into focus as it arrives. Do not use swipe transitions, slide transitions, or any lateral movement. **Variable font implementation:** use the CSS `@font-face` with `font-weight: 100 900` to register the Fraunces variable font. Expose `--weight` as a custom property on `:root`, updated by `scroll` and `mousemove` event listeners. Apply it via `font-variation-settings: 'wght' var(--weight)`. **Photography treatment:** all images should use CSS `filter: contrast(1.05) saturate(0.92)` to unify disparate sources into the palette's register. On dark panels, wrap images in a `::after` pseudo-element with `background: linear-gradient(to bottom, transparent 40%, var(--burgundy-deep) 100%)` for panel transition blending. **The iris overture:** the first panel's close-up iris photograph should be loaded at 80% viewport width, not full-bleed — the remaining 20% reveals the deep burgundy background at the edges, making the eye appear to be framed in velvet. On mobile, use the full viewport. **Scroll-linked animations:** use `IntersectionObserver` for entrance triggers. Do NOT use scroll event listeners for performance on mobile. The zoom-focus entrance (scale 1.06 → 1.0, blur 1.5px → 0) should be a CSS transition triggered by adding a class `is-focused`. **No CTAs.** No "Book a consultation" buttons. No pricing. No "Schedule Now." If a link is needed, it is a single underlined text link in `var(--burgundy-mid)` that expands to full weight on hover with a 200 ms weight transition. **Atmosphere over information.** Every section is an image first, text second. The body copy is always fewer than 80 words per panel. Let the photographs carry the meaning. **Avoid:** hero section with nav overlay, full-width stat grids, card-grid product listings, testimonial sliders, multi-column footer, modal overlays, sticky header bars, progress bars, skeleton loaders. --- ## Uniqueness Notes 1. **zoom-focus at 0% frequency, paired with photography at 1% frequency.** The frequency report shows `zoom-focus` used by zero other designs in the registry. Pairing it with `photography` imagery (also rare at ~1%) and the `expressive-variable` typography axis creates a combination with no existing precedent in this registry. The zoom-focus pattern is implemented not as a zoom-out on scroll departure (the obvious reading) but as a zoom-in-to-clarity on panel arrival — inverting the expected direction to match the "corrected vision" metaphor. 2. **full-bleed layout at 80% but paired with deep-burgundy palette at 3% and pastoral-romantic tone at 6%.** Full-bleed is extremely common (80%), but full-bleed designs overwhelmingly use dark-neon, gradient, or high-contrast palettes. Deep-burgundy at 3% and the pastoral-romantic tone at 6% are both underused. The combination — full-bleed panoramic imagery in antique burgundy-cream with romantic copy — does not appear in other designs. It reads as a heritage photographic journal, not a tech product site. 3. **Variable-weight cursor tracking as the primary interaction layer.** The `expressive-variable` typography descriptor appears in one other design in the registry, but no design uses the variable weight axis as a *cursor-responsive* interactive element. The wordmark's weight drifting with cursor position on the overture panel is a kinetic effect that requires no JavaScript animation library, produces no layout shift, and directly expresses the "eyes + focus" metaphor through type itself. 4. **Layered-depth photographic compositing via CSS mix-blend-mode as the imagery signature.** The `layered-depth` motif from the seed is implemented as three physical image layers in the DOM composited via `mix-blend-mode: multiply`, not as a single heavily-processed image. This creates genuine parallax depth on scroll without requiring any third-party library. No other design in the registry documents this approach. Seed: aesthetic: playful, layout: full-bleed, typography: expressive-variable, palette: deep-burgundy, patterns: zoom-focus, imagery: photography, motifs: layered-depth, tone: pastoral-romantic