# Design Language for eyes.cash ## Aesthetics and Tone eyes.cash envisions a decommissioned surveillance command center from an alternate 2087 -- a place where banks of flickering CRT monitors display fragmented transaction feeds, and a dying mainframe still spits out corrupted ticker data through a forest of tangled fiber-optic cables. The aesthetic is **retro-futuristic surveillance noir**: the oppressive green-on-black glow of 1980s defense systems colliding with bleeding-edge holographic overlays that stutter and glitch as though the system is on its last legs. Think of the visual intersection between a Cold War-era signals intelligence facility (ECHELON listening stations, NORAD bunker screens) and a post-collapse cryptocurrency trading floor where the AI that once monitored global financial flows has begun to hallucinate, spitting garbled prophecies across its terminal arrays. The tone is **futuristic-cutting-edge** but tinged with technological fatigue -- not the clean optimism of Silicon Valley futurism, but the gritty, paranoid, hardware-failing aesthetic of a system that has been running too long without maintenance. Every visual element suggests that eyes.cash is a live feed from this dying intelligence apparatus: data that was once classified is now leaking through corrupted displays, and the user is an unauthorized interloper scrolling through the wreckage. The mood oscillates between hypnotic (the rhythmic pulse of data feeds, the meditative flicker of scan lines) and unsettling (sudden glitch bursts, corrupted text fragments, warning indicators that flash without explanation). The domain name "eyes" is treated literally as a surveillance metaphor -- all-seeing, always-watching, but the watching eye itself is breaking down. ## Layout Motifs and Structure The layout follows a **HUD (Heads-Up Display) overlay** architecture -- content is framed within translucent panels that float over a persistent, full-viewport background of animated data streams. The HUD metaphor is drawn directly from military targeting systems and financial trading terminals, where information is layered in transparent overlapping panes with thin border outlines rather than solid backgrounds. **HUD Panel System:** The viewport is divided into a non-uniform grid inspired by tactical display layouts. The primary content area occupies approximately 65% of the viewport width (offset left by 5vw from center) with a secondary data column running along the right edge (width: 22vw). A thin horizontal status bar spans the bottom 8vh of the screen, displaying a scrolling ticker of pseudo-transaction data. A narrow vertical bar on the far left (width: 3vw) contains system status indicators -- small pulsing dots and abbreviated status codes that change state at random intervals. **Panel Construction:** Each content panel is constructed with: - Background: `rgba(0, 255, 136, 0.03)` -- nearly invisible green tint - Border: `1px solid rgba(0, 255, 136, 0.25)` -- the classic HUD wireframe outline - Corner accents: Small L-shaped bracket decorations at each corner (8px x 8px), created with `::before` and `::after` pseudo-elements using partial borders (`border-top` + `border-left` for top-left, etc.), colored at `rgba(0, 255, 136, 0.6)` -- mimicking military targeting reticle brackets - No border-radius. All corners are sharp right angles. Rounded corners are explicitly forbidden in this design -- they would destroy the tactical display aesthetic - Box-shadow: `0 0 15px rgba(0, 255, 136, 0.05), inset 0 0 30px rgba(0, 10, 5, 0.4)` -- a faint outer glow with a dark inner shadow that creates depth **Depth Layers:** Content exists on three explicit z-layers: 1. **Background Layer (z-0):** Full-viewport canvas displaying animated scan lines, a slow-scrolling matrix of hexadecimal data, and occasional glitch bursts. This layer never scrolls. 2. **HUD Frame Layer (z-1):** The persistent structural elements -- corner brackets of the main viewport, the bottom ticker bar, the left status column, and thin horizontal rule lines that divide the screen into quadrants. These elements are fixed-position and never move. 3. **Content Layer (z-2):** The actual readable content -- text blocks, data panels, and interactive elements. This layer scrolls vertically within the HUD frame, creating the illusion of data flowing through a fixed monitoring station. **Navigation:** No traditional navigation bar. Instead, navigation is handled through a set of small, labeled indicators in the top-right corner of the viewport, styled as system function keys: `[F1] SYS`, `[F2] NET`, `[F3] TXN`, `[F4] LOG`. Each is a 2px-outlined rectangle in muted green (#00ff88 at 40% opacity) with monospaced labels, and they illuminate to full brightness on hover. ## Typography and Palette **Typography:** - **Primary / System Text:** "Share Tech Mono" (Google Fonts) -- a monospaced typeface with the clean, utilitarian character of terminal readouts and early digital displays. Every letterform has the rigid, equal-width geometry of machine-generated output. Used for all body text, data displays, navigation labels, and the scrolling ticker. Size: 0.85rem-1.1rem for body, 0.7rem for status indicators. Weight: 400 (Regular only -- monospaced fonts lose their character at bold weights). Letter-spacing: +0.06em. Line-height: 1.65 for body, 1.3 for compact data panels. Text-transform: uppercase for navigation and status labels. - **Display / Headlines:** "Orbitron" (Google Fonts) -- a geometric, futuristic display typeface with sharp angles and a distinctly technological feel that evokes LCD readouts and sci-fi interface lettering. Used exclusively for section headers, the domain name display, and the occasional emphasized data label. Size: 1.8rem-4.5rem. Weight: 700 (Bold) for maximum impact, 500 (Medium) for secondary headings. Letter-spacing: +0.18em at display sizes, +0.1em at smaller sizes. Line-height: 1.1. Text-transform: uppercase always. - **Accent / Corrupted:** "VT323" (Google Fonts) -- a pixel-perfect recreation of the classic VT320 terminal font, with the unmistakable character of early 1980s CRT displays. Used sparingly for "corrupted" text fragments, error messages, warning alerts, and the scrolling background data matrix. Size: 1rem-1.4rem. Weight: 400. Letter-spacing: +0.04em. This font carries the emotional weight of obsolete hardware -- every character it renders feels like it's being dragged from a failing memory bank. **Palette:** - **#0a0f0a** -- Void Black: The deepest background, nearly black with the faintest green undertone. Used for the background layer and deep panel interiors. This is not pure black -- the green shift is critical to maintaining the CRT monitor illusion. - **#00ff88** -- Phosphor Green: The primary accent and HUD wireframe color. This is the exact green of phosphor-coated CRT screens from Cold War-era military terminals. Used at varying opacities (5%-100%) for borders, text highlights, bracket corners, glowing accents, and the scan line overlay. At full saturation it burns against the void black; at 10% opacity it haunts the background like residual screen burn. - **#0d1a12** -- Circuit Dark: A dark green-black used for panel backgrounds and the secondary data column. Slightly lighter than Void Black, creating subtle depth differentiation between overlapping panels. - **#ff003c** -- Alert Crimson: A piercing, saturated red used exclusively for warning states, error glitches, and the occasional corrupted data burst. It appears sparingly -- no more than 5% of any given viewport -- and always signals that something has gone wrong in the system. Used for glitch-flash overlays, corrupted text fragments, and the rare pulsing warning indicator. - **#1a3a28** -- Terminal Fog: A muted, desaturated green that sits between the void background and the bright phosphor accents. Used for secondary borders, disabled states, and background text in the data matrix (the scrolling hex values that are meant to be felt, not read). - **#c0ffd4** -- Ghost Green: A pale, almost white-green used for primary readable text. It provides sufficient contrast against the dark backgrounds while maintaining the monochromatic green scheme. This is the color of text that the system "intends" you to read -- as opposed to the ambient data noise in Terminal Fog. - **#ff9500** -- Amber Warning: A warm amber-orange used as a secondary alert color, referencing the amber-phosphor CRT monitors that were common in financial trading terminals. Appears in the ticker bar, occasional data highlights, and as a contrast accent when the green becomes too monolithic. Used at 60-80% opacity to keep it from overwhelming the green scheme. ## Imagery and Motifs **No Photographs. No Stock Images. No Illustrations.** Every visual element is generated through CSS, SVG, or canvas -- maintaining the illusion that the entire site is a live system interface, not a designed webpage. **Primary Motifs:** 1. **Scan Lines:** A persistent, full-viewport overlay of horizontal lines created with a repeating-linear-gradient: `repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 136, 0.03) 2px, rgba(0, 255, 136, 0.03) 4px)`. This 2px-on-2px-off pattern simulates CRT scan lines and is applied to the `::after` pseudo-element of the body, with `pointer-events: none` so it never interferes with interaction. The overlay has a subtle `animation: scanDrift 8s linear infinite` that shifts the gradient position by 2px vertically, creating an imperceptible drift that triggers subliminal CRT recognition. 2. **Circuit Board Traces:** SVG-rendered circuit board patterns that serve as section dividers and decorative backgrounds. These are not decorative illustrations but functional-looking PCB traces: straight horizontal and vertical lines with 90-degree corners, punctuated by small circles (solder pads) at junction points. Rendered in Terminal Fog (#1a3a28) at 15-30% opacity, they are barely visible but contribute to the subliminal impression of being inside electronic hardware. The traces animate slowly -- signals travel along paths as brief brightness pulses (a 3px-wide bright segment that traverses a trace line over 6-10 seconds using SVG `stroke-dasharray` + `stroke-dashoffset` animation). 3. **Glitch Bursts:** Periodic visual disruptions that affect the entire viewport. Every 12-20 seconds (randomized with JavaScript), the screen experiences a brief (150-400ms) glitch: horizontal slices of the viewport shift left or right by 3-8px (achieved with `clip-path: inset()` on duplicated content layers), the color channels separate briefly (CSS `filter: drop-shadow(-3px 0 #ff003c) drop-shadow(3px 0 #00ff88)`), and a burst of visual noise (a CSS-generated noise pattern using tiny box-shadows) flashes across a random horizontal band. These glitches are brief enough to be atmospheric, not annoying -- they should feel like genuine signal interference, not a gimmick. 4. **Data Rain:** The background layer features slowly falling columns of hexadecimal characters (0-9, A-F), rendered in VT323 at 0.65rem in Terminal Fog (#1a3a28) at 20% opacity. Each column falls at a slightly different speed (randomized between 15-30 seconds for a full viewport traverse). Occasionally (every 45-90 seconds), a single character in the rain briefly flashes to full Phosphor Green brightness before fading back, as though the system has detected something in the data stream. 5. **Eye Motif -- The Watcher:** A single, stylized eye rendered in SVG occupies the center of the background layer. It is constructed entirely from geometric shapes -- concentric circles for the iris (stroked, not filled, in Phosphor Green at 8% opacity), a sharp almond-shaped outline for the eye itself, and a single radial gradient "pupil" that slowly dilates and contracts over a 12-second CSS animation cycle. The eye is enormous (spanning approximately 60vw) but nearly invisible due to its extreme low opacity. It serves as a subliminal anchor -- users may not consciously notice it, but it reinforces the "surveillance" theme of the domain. On scroll events, the pupil shifts position slightly (2-4% of its container width) in the direction of scroll, as though it is tracking the user's movement. 6. **Typewriter Output Blocks:** Key content sections are revealed through a typewriter animation -- text appears character by character at a rate of 30-50ms per character, with the cursor rendered as a solid rectangle block (1ch wide, full line-height) in Phosphor Green that blinks at 530ms intervals (the standard terminal cursor blink rate). The typewriter effect is triggered by scroll-into-view using `IntersectionObserver`, so each block types out as the user reaches it. Sound is implied through visual rhythm alone. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens on a completely black screen (#0a0f0a). After a 1.2-second pause (the boot sequence), the scan line overlay fades in over 0.8s. Then, a single line of text types out in the center of the viewport in Share Tech Mono at 0.85rem, Phosphor Green: `SYSTEM INIT... EYES.CASH NETWORK MONITOR v4.7.2`. Below it, after a 0.6s delay, a second line types: `ESTABLISHING SECURE CONNECTION...`. After another 1s delay, the line changes (fade-replace, not typewriter) to `CONNECTION ESTABLISHED. FEED ACTIVE.` in Ghost Green. The full HUD frame then assembles itself -- corner brackets slide into position from just off-screen (transform: translate with 400ms ease-out), the bottom ticker bar slides up from below the viewport, and the left status column fades in. The background data rain begins falling. The Eye motif fades in at its near-invisible opacity. The entire boot sequence takes approximately 5 seconds. **Scrolling Behavior:** The content layer scrolls vertically within the fixed HUD frame. As the user scrolls, new content panels slide into the viewport from below with a subtle `transform: translateY(20px)` to `translateY(0)` transition over 300ms, triggered by IntersectionObserver. Each panel's corner bracket accents draw themselves on-screen (the L-shapes extend from 0-width to full 8px using a width/height transition over 200ms, staggered by corner -- top-left first, then clockwise at 50ms intervals). Key text content within panels uses the typewriter reveal. **The Ticker Bar:** The bottom status bar scrolls an infinite horizontal marquee of pseudo-financial data: timestamps, hexadecimal transaction hashes, numerical values with currency symbols, status codes (`CONFIRMED`, `PENDING`, `FAILED` in Alert Crimson). The ticker scrolls right-to-left at a constant rate using CSS `animation: tickerScroll Xs linear infinite` where X is calculated based on content width. The ticker text is in VT323 at 0.7rem, primarily in Terminal Fog (#1a3a28) but with occasional values highlighted in Phosphor Green or Amber Warning. A `FAILED` entry appears roughly every 40-60 characters and is rendered in Alert Crimson. **Glitch Interaction:** When the user clicks or taps anywhere on the content layer, a micro-glitch fires: the clicked panel's content shifts 2px horizontally for 100ms, a single scan line brightens to full opacity across the click's Y-position, and a brief color-channel separation (1px offset, 80ms duration) ripples outward from the click point. This provides satisfying tactile feedback without disrupting readability. **Color Animation:** The Phosphor Green accent color subtly oscillates in brightness over a 6-second cycle using a CSS custom property animation: `--phosphor-intensity` cycles between 0.85 and 1.0, applied as a multiplier to the green channel. This creates a barely perceptible breathing effect across all green elements simultaneously, mimicking the voltage fluctuations of aging CRT hardware. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero images, gradient backgrounds, rounded corners, drop shadows on cards, hamburger menus, footer link forests. This is a surveillance terminal, not a marketing page. **Bias toward:** Full-screen immersive narrative, environmental storytelling through interface design, atmospheric animation that serves the fiction, typewriter reveals that create pacing and tension, the feeling that the user has stumbled into a system they were not meant to see. ## Uniqueness Notes **Differentiators from other designs:** 1. **HUD-Overlay as Primary Layout Architecture:** Only 2% of existing designs use hud-overlay layout. This design makes it the foundational structural principle -- every element exists within a military/financial tactical display frame, with fixed-position structural elements and scrolling content within. No other design in the portfolio treats the browser viewport as a literal hardware monitor interface with persistent corner brackets, status columns, and ticker bars. 2. **Triple-Monospace Typography Stack:** While monospaced fonts appear in 99% of designs (as code snippets or accents), this design uses three distinct monospaced/technical fonts as its ENTIRE typographic system -- Share Tech Mono for body, Orbitron for display, VT323 for atmospheric/corrupted text. No serif or humanist sans-serif fonts appear anywhere. This creates a relentlessly mechanical reading experience that no other design in the portfolio achieves. 3. **Narrative Boot Sequence as Entry:** The site opens with a simulated system boot -- a 5-second choreographed sequence where the interface assembles itself from nothing. This is not a loading animation or splash screen; it is a worldbuilding device that establishes the fiction before any content appears. The user does not "visit a website" -- they "connect to a monitoring terminal." 4. **Subliminal Surveillance Eye:** A near-invisible, viewport-spanning SVG eye that tracks scroll direction is an entirely novel motif. At 8% opacity it operates below conscious perception for most users, but its presence creates an unnameable tension -- the feeling of being watched while watching. No other design uses subliminal visual elements as a thematic device. 5. **Phosphor-Green Monochromatic Palette with Crimson Interrupts:** The palette is aggressively monochromatic -- seven shades of green-black with only two non-green colors (Alert Crimson and Amber Warning), both used as disruption signals rather than design elements. This extreme chromatic restriction (dark-neon palette at only 4% frequency) produces a visual experience that is immediately distinctive from the warm, multi-hued palettes that dominate 100% of existing designs. 6. **Glitch as Grammar, Not Decoration:** Glitch effects in the portfolio appear at only 2% frequency (glitch-art imagery). Here, glitch is not a decorative filter -- it is a narrative device woven into every layer: background data corruption, periodic screen disruptions, click-triggered micro-glitches, color-channel separation. The glitches tell a story about a failing system, making them integral to the site's meaning rather than a surface-level trend. **Chosen Seed:** aesthetic: retro-futuristic, layout: hud-overlay, typography: tech-mono, palette: dark-neon, patterns: typewriter-effect, imagery: glitch-art, motifs: circuit, tone: futuristic-cutting-edge **Avoided Overused Patterns:** playful aesthetic (98%), centered layout (99%), warm palette (100%), scroll-triggered patterns (98%), minimal imagery (96%), friendly tone (97%), photography imagery (66%), parallax patterns (79%), vintage motifs (73%). This design deliberately rejects every one of these dominant patterns in favor of their underused counterparts.