# Design Language for eyes.team ## Aesthetics and Tone eyes.team channels the relentless visual optimism of early-2010s flat design interfaces -- think Windows Phone metro tiles, Google Material Design v1 color swatches, and iOS 7's radical chromatic simplicity -- but injected with the dopamine-rush intensity of a neon-lit arcade at 2AM. The aesthetic is **dopamine flat**: crisp geometric planes of saturated color stacked and arranged like a Tetris board mid-game, each block a portal to a different dimension of visual energy. There are no gradients, no shadows, no textures -- just pure, uncut color meeting color at razor-sharp edges. The mood is a sugar-rush of visual stimulation: the giddy excitement of opening a fresh box of highlighter markers and using every single one on the same page. Where typical flat design can feel sterile, eyes.team replaces restraint with exuberance, trading the muted palettes of Scandinavian minimalism for the unapologetic chromatic screaming of a Tokyo Harajuku storefront at sunset. The tone is **energetic** -- not in a corporate-motivational way, but in the buzzing, kinetic way of a pinball machine. Every visual element radiates momentum. Text doesn't sit passively; it declares itself. Blocks don't just fill space; they jostle for attention. The overall feeling should be that of a visual playground where the rules of subtlety have been cheerfully discarded. ## Layout Motifs and Structure The layout follows a strict **modular-blocks** system where every piece of content lives inside a precisely sized rectangular module. These modules snap to a 12-column grid with 16px gutters, but the magic is in how they are arranged: not in predictable rows, but in densely packed, Mondrian-inspired compositions where blocks of varying sizes interlock like a solved puzzle. **Grid Architecture:** - The viewport is divided into a base grid of 12 columns. Modules occupy 2, 3, 4, 5, or 6 columns and span 1 to 3 row-heights (each row-height is 33.33vh, so modules can be 1/3, 2/3, or full viewport height). - Modules are color-coded: each block has a solid flat background color from the dopamine palette. There are no borders, no shadows, no rounded corners -- just pure rectangles of color butting up against each other. - **The Gap Rule:** Between every module, there is a consistent 4px gap filled with the background color (#0A0A0F, near-black). This sliver of darkness acts like the leading between stained glass panels, making each color block pop independently. - The hero section is NOT a single full-bleed image. Instead, it is a 3x3 grid of nine equal blocks, each a different neon color, with the domain name "eyes.team" split across all nine blocks in a massive display typeface, each letter fragment living in its own color world. **Scroll Behavior:** - Scrolling reveals new tiers of modular compositions. Each "tier" is a viewport-height section containing 4-8 interlocking modules arranged in a unique composition. No two tiers share the same block arrangement. - Modules slide into their positions from offscreen using spring-physics easing (see Patterns section). They don't fade in; they snap into place with a slight overshoot-and-settle, like physical tiles being placed on a board. - Between tiers, a brief "breathing row" appears: a single full-width, 80px-tall strip in a single neon color, acting as a visual palette cleanser. **Navigation:** - No traditional navigation bar. Instead, a floating circle in the bottom-right corner (48px diameter, cycling through neon colors every 3 seconds) expands on click into a full-screen modular-block menu overlay, where each navigation item is its own color block. ## Typography and Palette **Typography:** - **Headlines / Display:** "Space Grotesk" (Google Fonts) -- a grotesque sans-serif with distinctive angular terminals and a techno-geometric DNA that perfectly complements flat-design aesthetics. Used at 4rem-8rem for hero text and section headlines. Weight: 700. All headlines are set in UPPERCASE with `letter-spacing: 0.08em` to emphasize the blocky, architectural feel. Lines are tight: `line-height: 0.92`. - **Body Text:** "Inter" (Google Fonts) -- the quintessential screen-optimized grotesque sans-serif. Used at 1rem-1.125rem for body copy with `line-height: 1.65` for comfortable reading against vivid backgrounds. Weight: 400 for body, 600 for emphasis. Text color adapts to background: white (#FFFFFF) on dark neon blocks, near-black (#0A0A0F) on bright neon blocks. - **Accent / Labels:** "Space Grotesk" at 0.75rem, weight 500, UPPERCASE, `letter-spacing: 0.15em`. Used for module labels, tags, and metadata. These tiny labels sit in the top-left corner of each module block, identifying the content type. - **Number Display:** "Space Grotesk" at 12rem-20rem, weight 700, used for oversized decorative numerals that bleed across module boundaries -- numbers so large they become abstract shapes. **Palette:** The palette is pure **dopamine-neon**: colors chosen for maximum serotonin hit, each one a flat, unmodulated hue with no gradients, no opacity variations. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Primary Neon Pink | Hot Magenta | `#FF2D6B` | The anchor color -- used for the largest hero block and primary CTAs | | Electric Cyan | Laser Aqua | `#00F5FF` | Cool counterpoint to the pink -- used for secondary blocks and hover states | | Acid Green | Phosphor Lime | `#39FF14` | The wildcard -- used sparingly for accent blocks and alert states | | Solar Yellow | Banana Flash | `#FFE600` | Warm neon -- used for breathing rows and highlight modules | | Deep Violet | UV Purple | `#7B2FFF` | The moody anchor -- used for text-heavy content blocks | | Bright Orange | Neon Tangerine | `#FF6B1A` | Energy burst -- used for interactive modules and hover-expanded states | | Background | Void Black | `#0A0A0F` | The near-black that fills gaps between modules | | Text Light | Pure White | `#FFFFFF` | Text on dark/vivid backgrounds | | Text Dark | Ink Black | `#0A0A0F` | Text on bright backgrounds (yellow, lime) | **Color Rules:** - No module may be the same color as any adjacent module (left, right, above, below). - The background (#0A0A0F) is never used as a module color -- only as the gap/grid-line fill. - Each tier of modules must use at least 4 of the 6 neon colors. - Colors are always flat: no gradients, no opacity layers, no blend modes. ## Imagery and Motifs **Custom Illustration Style:** All imagery consists of **custom flat-vector illustrations** drawn in the site's neon palette. These illustrations depict abstract representations of eyes, vision, observation, and perception -- the thematic core of "eyes.team." The illustration style is strictly flat: no shading, no gradients, no dimensional effects. Think of Saul Bass poster art meets Noma Bar's negative-space illustrations, rendered in electric neon. Specific illustration subjects: - **The Observer Eye:** A geometric eye icon constructed from concentric circles and angular eyelid shapes, rendered in two contrasting neon colors. This icon appears at multiple scales: tiny (16px, as a favicon and module accent) and massive (spanning 4 modules, as a background pattern). - **Optical Phenomena:** Flat illustrations of prisms splitting light into neon beams, kaleidoscope patterns built from repeating triangular neon segments, concentric iris patterns that pulse outward. - **Team Constellation:** Abstract figures (simple geometric silhouettes -- circles for heads, rectangles for bodies) arranged in dynamic group compositions, each figure a different neon color, connected by thin white lines suggesting collaboration and shared vision. - **The Gaze Grid:** A repeating pattern of simplified eye shapes arranged in a grid, each eye looking in a different direction, each rendered in a unique neon color from the palette. This pattern is used as a full-bleed background for one tier. **Floating Elements Motifs:** The signature motif of eyes.team is **floating elements** -- geometric shapes (circles, squares, triangles, eye-shapes) that drift slowly across the viewport independent of scroll position. These are rendered as flat, solid-color SVG elements with no shadows or depth cues. They float in a layer between the module grid and the user, creating a sense of gentle, perpetual motion. - 12-18 floating elements are distributed across the viewport at any given time. - Each element is a single neon color from the palette, at 60% opacity against the void-black background, 30% opacity when passing over modules. - Elements move using sine-wave paths: gentle horizontal drift combined with slow vertical oscillation. No element moves faster than 20px/second. - When the user's cursor approaches a floating element (within 100px), the element accelerates away using spring physics, then decelerates back to its drift pattern. - Floating elements never overlap each other -- they maintain a minimum 40px exclusion zone. - On mobile, floating elements reduce to 6-8 and are purely decorative (no cursor interaction). ## Prompts for Implementation **Full-Screen Narrative Experience:** The site should be experienced as a vertical journey through a neon-colored modular world. There is no traditional "page" feel -- instead, the user descends through tiers of interlocking color blocks, each tier revealing a new composition, a new illustration, a new fragment of the eyes.team story. The narrative arc moves from "What do we see?" (hero tier) through "How do we see?" (methodology tiers) to "What we've seen" (portfolio/work tiers) to "See with us" (contact/join tier). **Spring Physics Animation:** All module entrances, hover state transitions, and floating-element behaviors use spring-physics easing rather than CSS cubic-bezier curves. Implement using CSS `linear()` easing function with pre-computed spring values, or a lightweight JS spring library. The spring parameters should be: - **Stiffness:** 180 - **Damping:** 12 - **Mass:** 1 This produces a snappy entrance with a single visible overshoot -- the module slides 8-12px past its target position, then settles back. The overshoot gives every animation a physical, tactile quality that counterbalances the flat, dimensionless visual style. **Module Entrance Choreography:** When a tier scrolls into view (detected via IntersectionObserver at 15% threshold): 1. Modules do not appear simultaneously. They stagger in sequence: top-left module first, then modules to its right, then the next row, creating a diagonal sweep effect (top-left to bottom-right). 2. Stagger delay: 60ms between each module. 3. Each module enters from its nearest viewport edge: left-column modules slide in from the left, right-column modules from the right, center modules scale up from 0.85 to 1.0. 4. All entrances use the spring easing described above. **Hover Interactions:** - Hovering over a module causes it to expand by 4px in all directions, overlapping its neighbors slightly. The expansion uses spring physics. - The module's label text (top-left corner) changes from 60% opacity to 100%. - Adjacent modules dim to 70% brightness via a CSS `filter: brightness(0.7)` transition (200ms ease). - A thin 2px white border appears around the hovered module. **Breathing Row Animation:** The single-color breathing rows between tiers slowly cycle through all 6 neon colors using a CSS `@keyframes` animation with a 18-second loop. The color transitions are instantaneous (step-function, not gradual), changing every 3 seconds -- reinforcing the flat, no-gradient philosophy. **The Floating Layer:** Floating elements are positioned in a `position: fixed` container above the module grid but below any interactive overlays. They are rendered as inline SVG elements animated via `requestAnimationFrame` in JavaScript. Their sine-wave motion is computed as: ``` x(t) = originX + amplitudeX * sin(frequencyX * t + phaseX) y(t) = originY + amplitudeY * sin(frequencyY * t + phaseY) ``` Where amplitude ranges from 30-80px and frequency from 0.0005-0.002 (in radians per millisecond), producing slow, dreamy orbits that contrast with the snappy spring entrances of the modules. **Typography Animation:** The hero title "eyes.team" uses a letter-by-letter reveal: each letter appears in its own module block with a spring-snap entrance, staggered at 80ms intervals. After all letters have appeared, the blocks briefly flash in sequence (a 100ms burst of white background on each block, cascading left-to-right), then settle into their permanent neon colors. **Color-Shift on Scroll:** As the user scrolls, a subtle effect tracks scroll position: the gap color between modules slowly shifts from pure void-black (#0A0A0F) to a very dark version of the most recent breathing-row color (e.g., dark magenta #1A0010 after the pink breathing row). This creates a subliminal warmth shift without violating the flat-design principles. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, stock photography, gradient overlays, drop shadows, rounded corners, frosted-glass effects, parallax image layers. This site is a flat-design manifesto: every pixel earns its place through color alone. ## Uniqueness Notes **Differentiators from other designs:** 1. **Zero-Gradient Commitment:** While every other design in the portfolio uses gradients (91% frequency), eyes.team is radically flat. Not a single gradient exists anywhere -- no background gradients, no text gradients, no overlay gradients. Color meets color at hard edges only. This is the anti-gradient site. 2. **Floating Elements as Primary Motif:** At 0% frequency in the existing portfolio, floating-elements is a completely unused motif. eyes.team introduces slowly drifting geometric SVG shapes that exist in a layer above the content grid, creating ambient motion without parallax or scroll-triggered choreography. They respond to cursor proximity with spring-physics repulsion. 3. **Modular-Block Grid as Storytelling Device:** Rather than using blocks as a UI pattern (cards, dashboards), eyes.team treats the modular-block grid as a narrative canvas -- each tier is a unique Mondrian-like composition that tells a chapter of the visual story. The grid itself IS the design, not a container for design. 4. **Dopamine-Neon Flat Palette Without Gradients:** The dopamine-neon palette category sits at only 4% frequency, and combining it with strict flat-design (1% frequency) creates a visual combination that exists nowhere else in the portfolio. The neon colors are used as flat, solid fills -- never blended, never faded, never overlaid. 5. **Spring-Physics-Only Animation:** While spring animations appear in 27% of designs, eyes.team uses spring physics as the EXCLUSIVE animation easing for ALL motion on the page. There are no CSS ease, ease-in-out, or linear transitions. Everything -- module entrances, hover states, floating-element repulsion, menu expansion -- uses the same spring parameters, creating a unified physical language. 6. **Custom Eye-Themed Flat Illustration System:** The custom-illustration imagery (7% frequency) is built around a cohesive visual vocabulary of geometric eyes, prisms, and observation metaphors, all rendered in the strict flat style with no shading or dimensional effects. **Chosen Seed:** aesthetic: flat-design, layout: modular-blocks, typography: sans-grotesk, palette: dopamine-neon, patterns: spring, imagery: custom-illustration, motifs: floating-elements, tone: energetic **Avoided Overused Patterns:** - playful aesthetic (98%) -- replaced with flat-design (1%) - centered layout (99%) -- replaced with modular-blocks (6%) - mono typography (99%) -- replaced with sans-grotesk (5%) - warm palette (100%) -- replaced with dopamine-neon (4%) - scroll-triggered patterns (98%) -- de-emphasized in favor of spring physics as primary motion language - minimal imagery (95%) -- replaced with custom-illustration (7%) - friendly tone (97%) -- replaced with energetic (7%) - vintage motifs (74%) -- replaced with floating-elements (0%) - gradient palette (91%) -- explicitly prohibited; zero gradients anywhere on the site