# Design Language for eyes.cash ## Aesthetics and Tone eyes.cash channels the raw energy of a street-level currency exchange booth reimagined through a **graffiti** lens -- concrete walls tagged with exchange rates, neon price tickers spray-painted over urban decay, and the gritty immediacy of cash-in-hand transactions. The aesthetic is unapologetically urban: exposed brick textures, dripping paint effects, and stencil-cut typography that feels ripped from a Banksy installation about money. The tone is **authoritative** -- despite the rebellious visual language, the information delivered is precise and trustworthy, like a street-smart dealer who always gives you the real rate. The domain plays on "eyes" as surveillance/watching money, and "cash" as raw financial power. ## Layout Motifs and Structure The layout uses **parallax-sections** to create depth, as if peering through layers of tagged walls in an urban alley. **Primary structure:** - **Opening viewport (100vh):** A concrete wall texture fills the screen. The word "EYES" is spray-painted in massive graffiti lettering (SVG with drip effects), with ".CASH" stenciled below in military-style block letters. A neon glow (box-shadow) pulses behind the text like a flickering shop sign. - **Layered wall sections:** Content sections are styled as overlapping concrete panels at different parallax depths. Each panel features a different "tag" style -- from clean stencil work (financial data) to wild-style graffiti (cultural commentary). - **Ticker strip:** A horizontal scrolling marquee at 20% viewport height displays continuously scrolling text in a hand-drawn style, mimicking a stock ticker reimagined as street art. - **Stencil gallery (final section):** A masonry-like arrangement of stencil-framed content blocks, each with unique spray-paint color accents. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Permanent Marker" (Google Fonts) -- an authentic hand-lettered marker font that captures the urgency and impermanence of graffiti. Weight 400. Size: clamp(36px, 7vw, 80px). Transform: uppercase. - **Body text:** "Barlow" (Google Fonts) -- a slightly condensed grotesque sans-serif that reads cleanly against textured backgrounds, providing the authoritative counterpoint to the chaotic display type. Weight 400 body, 600 emphasis. Size: clamp(15px, 1.6vw, 19px). Line-height: 1.65. - **Data/Ticker:** "Share Tech Mono" (Google Fonts) -- a monospaced technical font for financial figures and scrolling data, evoking LED ticker displays. **Palette:** - **Concrete Gray:** #8B8680 -- primary background texture base - **Spray Can Red:** #E63946 -- primary accent, urgent and bold - **Neon Yellow:** #FFE066 -- secondary accent, highlighter energy - **Midnight Asphalt:** #1A1A1E -- deep background and text - **Stencil White:** #F0ECE3 -- light text on dark, chalk-like - **Tag Teal:** #2EC4B6 -- tertiary accent for data elements - **Drip Purple:** #7B2D8E -- occasional accent for variety ## Imagery and Motifs **Core visual motifs:** - **Spray-paint drip effects:** Text and borders feature SVG drip paths extending downward from letterforms (bezier curves with rounded endings, fill: currentColor, opacity: 0.7). Drips animate on reveal (scaleY 0 to 1, transform-origin: top, 400ms stagger). - **Stencil-cut frames:** Content containers use a stencil aesthetic -- rectangular boxes with rough-cut edges (clip-path: polygon with slight irregularities) and a subtle spray-overshoot effect (box-shadow: 0 0 15px with low opacity color). - **Concrete texture backgrounds:** Each section uses a different concrete/brick texture created with CSS (background: repeating linear-gradients with noise, using multiple overlapping gradient layers in warm grays). - **Hand-drawn currency symbols:** Currency symbols ($, EUR, BTC) rendered in a sketchy hand-drawn style, scattered as decorative elements (position: absolute, various rotations, opacity: 0.15 for subtle background patterning). - **Fade-reveal tags:** Content blocks reveal themselves as if being spray-painted onto the wall -- opacity 0 to 1 combined with a clip-path wipe from left to right, mimicking a spray can sweep. ## Prompts for Implementation **Full-screen narrative experience:** The site unfolds as a walk through a financial district's alleyways, each wall telling a different money story. **Opening sequence animation:** - Frame 0-300ms: Midnight Asphalt (#1A1A1E) fills viewport. A faint concrete texture emerges (opacity 0 to 0.3). - Frame 300-1200ms: "EYES" graffiti letters paint themselves on screen -- each letter animates via clip-path expanding from its center outward (300ms per letter, stagger 150ms). Drip effects follow each letter (scaleY animation, 200ms delay after letter completes). - Frame 1200-1600ms: ".CASH" stencil text stamps in with a hard cut (opacity 0 to 1, scale 1.05 to 1, 200ms). Neon glow pulses on (box-shadow animation from 0 to 20px spread). - Frame 1600-2200ms: The ticker strip slides in from the right (translateX 100% to 0%), then begins continuous horizontal scroll. Background texture fully resolves. **Scroll interactions:** - Parallax layers shift at different rates (foreground 1x, mid 0.6x, back 0.3x) creating urban depth. - Stencil content blocks fade-reveal as spray-paint sweeps (clip-path: inset() transitioning from 0 0 0 100% to 0 0 0 0). - Currency symbols in background drift slowly upward (translateY with scroll, creating a "rising money" effect). AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No clean corporate styling. Every element should feel street-level and immediate. ## Uniqueness Notes **Differentiators from other designs:** 1. **Graffiti letterforms with animated drip physics:** The spray-paint reveal animation combined with SVG drip effects is a distinctive visual treatment not seen in other designs -- text literally drips into existence. 2. **Concrete-texture parallax layering:** Using urban material textures (concrete, brick) as parallax depth layers creates a physical alleyway sensation unique to this design. 3. **Financial data rendered as street art ticker:** Reimagining stock-ticker data as a graffiti-style scrolling marquee merges finance with street culture in a way no other design attempts. 4. **Stencil-cut content framing:** The rough-edge clip-path containers with spray-overshoot shadows create a distinctive framing language. **Chosen seed/style:** graffiti street style promo -- applied to a financial/cash watching domain, merging street art energy with monetary authority. **Avoided patterns (from frequency analysis):** Avoided overused centered layout (94%), parallax pattern (95%). Used parallax-sections layout (1% - heavily underused). Graffiti aesthetic (1%) is extremely underused. Used fade-reveal (20%) instead of dominant scroll-triggered (77%).