# Design Language for eyes.team ## Aesthetics and Tone `eyes.team` is a **photographer's light table** — the kind found in a mid-century professional studio, where amber-glass loupes, worn leather camera straps, and brass-ringed lens caps are arranged on a surface of warm-lit frosted acrylic. The aesthetic is fully skeuomorphic: every UI element has physical presence, tactile weight, and optical realism. Buttons have embossed edges, catches specular highlights, and cast subtle shadows. Portfolio cards are mounted like photographic prints — complete with white-border mats, slight paper warp at corners, and a faint gelatin-silver sheen. The site's mood is **optimistic-bright**: warm morning light filtering through a north-facing studio window, the kind that makes everything feel possible and unhurried. This is not the cool brightness of modern flat design — it is the golden brightness of honest materials: raw linen, oxidized copper, weathered oak, and the pale ochre of a darkroom safelight. The primary metaphor is the **optical instrument**: a site built by people who understand lenses, depth of field, and the precise physics of how light focuses into meaning. ## Layout Motifs and Structure The layout is an **optical bench portfolio grid** — a physical metaphor for the equipment bench in a photography studio, where tools and works are arranged with precision but also the comfort of a working environment. - **Hero zone**: A full-width shallow rectangle — like a light table viewed from above — containing the team wordmark in embossed brass letterforms with a soft chromatic aberration fringe on each glyph. Beneath it, a single line of kinetic-animated subtitle text (see Typography). - **Portfolio grid**: A 3-column asymmetric grid of print-mounted photograph cards, each card skeuomorphically rendered as a glossy photographic print with a thick white mat border (28px), a faint inner shadow where the print meets the mat, and a rounded outer frame corner (6px). Hover causes the print to **zoom-focus**: it scales to 1.06× while a radial depth-of-field blur softens everything outside a central oval — as if the viewer is bringing a loupe to the print. - **Layered depth**: Three distinct visual planes. Plane 1 (background): textured warm linen, `#E8D9C4`, rendered via SVG `` noise at 0.08 frequency overlaid with a multiply-blend microfiber grain. Plane 2 (mid-ground): the portfolio grid of mounted prints, each card casting a soft box-shadow `0 6px 24px rgba(60,40,20,0.18)`. Plane 3 (foreground): occasional floating optical elements — lens flare halos, a brass ruler edge, a loupe magnifier circle — that drift above the grid on scroll using `translateZ` in a CSS perspective container. - **Navigation**: A narrow horizontal strip rendered as a leather-wrapped camera top-plate, with etched type labels and a thin brass-rule underline. Sticky on scroll, remains above all planes. - **No full-bleed photography** at the page-background level. Photography lives exclusively inside the portfolio cards — the rest of the page is the warm linen studio surface. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display / Wordmark — `Cormorant Garamond`** (variable, wght 300–700): Used at 72px for the site name. Characters are set in `wght 500`, with CSS `text-shadow` crafting an embossed double-layer: `1px 1px 0 #C9A96E, -1px -1px 0 #7A5C30` — a relief-engraved brass effect. On page load, each letter animates in with a kinetic-animated **focal-pull**: letters begin blurred `blur(8px)` and out-of-scale `scale(0.92)`, then snap into crisp focus `blur(0) scale(1)` staggered 35ms apart — the sensation of a lens finding focus on each character. - **UI Labels / Navigation — `DM Sans`** (variable, wght 300–500): Used at 13px, wght 400, letter-spacing `0.12em`, uppercase. Renders as the engraved label plate of a camera dial. - **Body / Captions — `Lora`** (variable, wght 400–700): Used at 15px for project descriptions inside portfolio cards. Lora's slightly ink-trapped serifs read as letterpress-printed captions on the back of a photographic print. - **Kinetic animated title element**: The hero subtitle (`Eyes That See Further`) uses `Cormorant Garamond` italic at 22px. Letters are individually wrapped in `` elements with a CSS `@keyframes` loop that oscillates each letter's `transform: translateY` by ±3px and `opacity` by 0.75–1.0 on a staggered 1.8s cycle — a slow breathing light, like a safelight lamp in a darkroom. **Palette:** | Role | Hex | Name | |---|---|---| | Background linen | `#E8D9C4` | Raw linen | | Card mat white | `#F5EFE6` | Photographic mat | | Warm shadow | `#C2A57A` | Oxidized oak | | Brass accent | `#B8862E` | Aged brass | | Deep lens | `#3E2C1A` | Lens body ebony | | Mid-copper | `#8B5E3C` | Worn leather | | Highlight gold | `#D4A853` | Morning catch-light | | Flare aureole | `#F7C96B` | Lens flare corona | | Matte shadow | `#6B4C35` | Camera body shadow | All colors are earth-tones: warm ochres, amber golds, oxidized coppers, deep ebonies — no cool blues, no digital grays. ## Imagery and Motifs The visual language is built from **optical physics rendered as CSS and SVG**: 1. **Lens flare halos (SVG + CSS mix-blend-mode: screen)**: Floating above the portfolio grid on Plane 3 are 4–6 radial lens flare elements. Each is a `
` with a radial gradient from `#F7C96B` (center, 0% opacity at dead center, peaking at 40% radius) to transparent. A thin hexagonal aperture ring — SVG `` six-sided, 1px stroke, `#D4A853` — surrounds each halo. Halos move at 0.2× scroll speed (subtle parallax) and oscillate in opacity between 0.3–0.7 on a 3.2s ease-in-out loop. `mix-blend-mode: screen` makes them glow against any photograph beneath. 2. **Chromatic aberration fringe on headings**: CSS technique — `text-shadow` layers in `#C42B1C` offset (-1px, 0) and `#1C6FC4` offset (+1px, 0) at 0.3 opacity over the main glyph, replicating the red/blue fringing of an uncorrected lens. 3. **Depth-of-field blur on zoom-focus**: On card hover, the card itself sharpens to `filter: none` while a full-page overlay `
` activates with a radial gradient mask — sharp center oval, blur `12px` outside — simulating shallow depth of field through a 50mm lens at f/1.4. 4. **Brass hardware details**: Small SVG embellishments — a 3-screw lens mount flange ring on the nav bar left edge, a film advance lever icon in the footer, a shutter speed dial rendered as an `` with a custom track styled as a machined aluminum dial. 5. **Layered-depth motif (the studio bench)**: The linen background has a subtle vignette (`radial-gradient` from transparent at center to `rgba(62,44,26,0.25)` at edges) suggesting the falloff of a studio overhead light. This grounds every element as if physically resting on an illuminated surface. 6. **Portfolio print mat**: Each card's white-mat border has a subtle inner `box-shadow: inset 0 0 12px rgba(80,50,20,0.12)` and an outer `box-shadow: 0 2px 0 #C2A57A, 0 8px 32px rgba(60,40,20,0.22)` — the thin painted-wood frame edge and the deep shadow a framed print casts on a wall. ## Prompts for Implementation Build `eyes.team` as a **photography studio light table** — a single-page portfolio that behaves like walking into a working studio and seeing the team's prints laid out for review. The experience is unhurried, premium, and physically grounded. **Implementation mandates:** **1. The Studio Surface.** The page body is `#E8D9C4` linen, not white. Apply the SVG noise grain as a `background-image: url("data:image/svg+xml,...")` using `` with a `feColorMatrix` reducing saturation to 0.08 — barely visible but tactilely present. Add a full-viewport vignette overlay using `position:fixed; pointer-events:none; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(62,44,26,0.22) 100%)`. **2. Kinetic Hero Typography.** On DOMContentLoaded, split every letter of the H1 and subtitle into individual `` elements. Apply a JavaScript-driven stagger with `requestAnimationFrame`: each letter starts at `{ opacity: 0, filter: blur(10px), transform: scale(0.88) translateY(8px) }` and transitions over 420ms (easing: `cubic-bezier(0.34, 1.56, 0.64, 1)`) to `{ opacity: 1, filter: blur(0), transform: scale(1) translateY(0) }`. Delay = `index * 38ms`. This is the lens-focus-pull entrance. **3. Portfolio Grid Zoom-Focus.** The grid uses CSS Grid: `grid-template-columns: repeat(3, 1fr)` with `gap: 28px`. Each `.card` is `position: relative` with `transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease`. On hover: scale to `1.065`, elevate `box-shadow` to `0 20px 60px rgba(60,40,20,0.35)`. Simultaneously activate a `
` — fixed, full viewport, `pointer-events:none` — with CSS `backdrop-filter: blur(0px)` on the parts outside a radial clip-path, creating the shallow-DOF illusion. (Use clip-path: ellipse centered on hovered card to keep it sharp.) **4. Lens Flare Layer.** Generate 5 flare halos in a `
`. Each flare is an absolutely-positioned `
` with: `width/height: 180px–280px`, `border-radius: 50%`, `background: radial-gradient(circle, rgba(247,201,107,0.5) 0%, rgba(212,168,83,0.2) 35%, transparent 70%)`, `mix-blend-mode: screen`. Add a 6-sided SVG aperture ring as `::after`. On scroll, update each flare's `top` via `scrollY * 0.2` for slow drift. Animate opacity: use CSS `@keyframes flareBreath { 0%,100% { opacity: 0.35 } 50% { opacity: 0.65 } }` with durations 2.8s, 3.4s, 4.1s, 2.6s, 3.8s staggered. **5. Skeuomorphic Card Material.** Every `.card` inner element has: - `.mat-border`: `padding: 28px; background: #F5EFE6; box-shadow: inset 0 0 18px rgba(80,50,20,0.1)` - `.print-img`: `width: 100%; display: block; border-radius: 2px` - `.caption`: `font-family: 'Lora', serif; font-size: 13px; color: #6B4C35; padding: 14px 4px 0; letter-spacing: 0.04em` - Outer `.card-frame`: `background: #C2A57A; padding: 4px; border-radius: 6px; box-shadow: 0 2px 0 #8B5E3C, 0 8px 32px rgba(62,44,26,0.25)` — the wooden frame edge. **6. Navigation Top-Plate.** The nav is `position: sticky; top: 0; z-index: 100`. Background: `linear-gradient(180deg, #7A5C30 0%, #6B4C35 100%)` — leather wrap. Border-bottom: `2px solid #B8862E`. Nav links in `DM Sans` uppercase 12px `#D4A853` with hover state `color: #F7C96B`, transition 0.2s. On the far left: an SVG lens-mount ring (40px circle, 3 mounting screws at 120° intervals, 1.5px stroke `#D4A853`). **Avoid:** hero-stats blocks, pricing grids, CTA buttons in primary hierarchy, hamburger menus on desktop, full-bleed photography backgrounds. This is a studio, not a landing page. ## Uniqueness Notes **Chosen seed:** aesthetic = skeuomorphic, layout = portfolio-grid, typography = kinetic-animated, palette = earth-tones, patterns = zoom-focus, imagery = lens-flare, motifs = layered-depth, tone = optimistic-bright **Differentiators from the 105-design corpus:** 1. **First fully skeuomorphic portfolio grid in the registry.** The corpus runs 0% on skeuomorphic (it appears nowhere in frequency data). `eyes.team` commits fully: every card is a physically-rendered photographic print with mat, frame, and cast shadow — not a flat card or glassmorphic panel. The UI chrome (nav, buttons, range inputs) mimics machined metal and leather, not flat design tokens. 2. **Zoom-focus as primary interaction pattern at 0% corpus frequency.** The depth-of-field blur-outside / sharp-center hover effect is not in any existing design. Rather than standard hover-lift or parallax, `eyes.team` uses the physics of a camera lens as its interaction metaphor — when you look closely at a print, everything else blurs. This directly expresses the domain (a team of photographers/visual designers) through the interaction. 3. **Lens flare as structural page element, not decoration.** In the 3% of corpus designs that use lens-flare imagery, it appears as static photography. `eyes.team` uses animated, screen-blend-mode SVG halos as a live atmospheric layer — they breathe, drift on scroll, and reference the studio light overhead. The flare layer floats above the grid in a dedicated CSS plane, making depth literal. 4. **Earth-tone palette at 0% corpus frequency.** The corpus is 95% warm-gradient but those gradients trend toward pastels, neons, or neutral grays. `eyes.team`'s palette is specifically material: raw linen, oxidized brass, worn leather, darkroom ebony — the colors of photographic studio equipment, not digital interfaces. No single hex in the palette appears in the frequency corpus color list. 5. **Kinetic-animated typography used as lens-physics metaphor.** The 1% corpus use of kinetic-animated type is decorative (bouncing letters). `eyes.team` uses blur-to-focus letter animation on page load as a direct encoding of the site's subject matter: the team makes things come into focus. The animation physics (spring overshoot at scale 1.065 before settling to 1.0) mirrors the slight over-travel of a mechanical focus ring.