# Design Language for eyes.plus

## Aesthetics and Tone
An optometry-inspired enhancement interface where seeing more clearly is the product -- eyes.plus renders as a vision-test environment: clean white surfaces, high-contrast test patterns, and the precise, clinical aesthetic of an eye examination. The optometric aesthetic uses the visual language of Snellen charts, phoropter dials, and lens-comparison splits. Every element asks: "Can you see this? Is this better, or this?"

The tone is optometrist-precise: calm, methodical, and focused on improving perception. The site enhances how you see information.

## Layout Motifs and Structure
**Lens System:** Content is presented through a circular "lens" viewport that frames different perspectives.

**Section Flow:**
1. **The Chart:** Hero with the domain name displayed as a Snellen eye-chart (decreasing sizes from large to small).
2. **The Lens:** A circular viewport (CSS clip-path: circle) showing content, simulating looking through a lens.
3. **The Comparison:** Split-view sections where left and right show "before" and "after" enhanced views.
4. **The Prescription:** Closing section with clear, enhanced typography suggesting improved vision.

## Typography and Palette
- **Chart/Display:** "Inter" at 1rem-8rem across the size range, weight 700 -- clean and high-contrast.
- **Body:** "Inter" at 1rem, weight 400, line-height 1.7.
- **Labels:** "Inter" at 0.75rem, weight 500, letter-spacing: 0.04em.

**Palette:** Clinical White (#fafafa), Optometric Black (#1a1a1a), Test Green (#208040), Lens Blue (#2060c0), Warm (#f0e8d8) for "before" backgrounds, Cool (#e8f0f8) for "after" backgrounds.

## Imagery and Motifs
**Snellen Chart Layout:** The hero title displayed in decreasing sizes (each line smaller) centered, creating a literal eye chart.

**Circular Lens Viewport:** Key content framed within a CSS circle clip-path, suggesting examination through a lens.

**A/B Split Comparison:** Side-by-side panels with warm ("before") and cool ("after") tinting showing the same content at different "clarity" levels.

**Focus Ring:** Interactive elements have a prominent focus ring (3px solid Lens Blue) simulating optical focusing.

## Prompts for Implementation
Build as a vision examination. The Snellen chart hero is immediately recognizable and engaging. The lens viewport section creates a distinctive framing effect. Comparison splits use warmth/coolness to suggest clarity improvement. The Prescription closing section uses optimally clear typography (perfect size, weight, line-height, contrast) as the "result" of the enhancement. Everything is clinical, precise, and focused on perception quality.

## Uniqueness Notes
1. **Snellen chart as hero layout:** Displaying the site title as an eye chart creates instant visual recognition and engagement.
2. **Circular lens viewport framing:** Clipping content to a circle creates a unique examination-through-lens experience.
3. **Warm/cool clarity comparison:** Using color temperature to suggest before/after enhancement is a distinctive visual technique.
4. **Optometric precision as design system:** Applying clinical eye-care visual language to web design is unique.

Document chosen seed/style: aesthetic: optometric-clinical, layout: lens-viewport, typography: precision-sans, palette: clinical-white-contrast, patterns: snellen-chart, imagery: lens-circle, motifs: ab-comparison, tone: optometrist-precise
<!-- DESIGN STAMP
  timestamp: 2026-03-18T22:25:08
  seed: aesthetic: optometric-clinical, layout: lens-viewport, typography: precision-sans, palette: clinical-white-contrast
  aesthetic: An optometry-inspired enhancement interface where seeing more clearly is the product ...
  content_hash: c9d0e1f2a3b4
-->