# Design Language for eyes.cash ## Aesthetics and Tone **eyes.cash** occupies the visual territory where street-level graffiti culture collides with financial intelligence. The domain name carries two equal weight concepts: the unblinking eye — surveillance, witness, receipt — and cash, raw liquidity divorced from polite banking facades. The aesthetic is **graffiti as financial ledger**: a New York transit tunnel annotated by someone who knows exactly where the money went. The mood is authoritative without being institutional. No marble columns, no serif respectability theater. Authority here comes from **specificity and directness** — the kind of confidence that writes in permanent marker on a wall and signs it. Think the hand-style of a tagger who also understands compound interest. The visual register is post-midnight: concrete walls, neon bleed from adjacent signage, ink that dried four hours ago but still reads perfectly. Tone: **declarative and unimpressed**. Eyes.cash does not explain itself. It shows its work in compressed, high-density visual layers — like a balance sheet scrawled in 72pt Sharpie across a freight car. ## Layout Motifs and Structure The layout uses **layered-depth as its primary organizational grammar**. The viewport is treated as a physical tunnel cross-section with five distinct depth planes: - **Plane 0 (deepest): the wall** — raw concrete texture rendered as dark SVG noise, fully bleed, never a flat color - **Plane 1: large-scale graffiti fills** — oversized letterforms and block fills, color-washed at low opacity, positioned absolutely and allowed to bleed off edges - **Plane 2: structural content** — the actual readable content blocks, set against semi-transparent dark panels (8–12px border-radius, `backdrop-filter: blur(4px)`, 60–70% opacity) - **Plane 3: line detail** — SVG path-draw outlines, fine lines, crossing marks, tag overlays, applied with `mix-blend-mode: overlay` or `screen` - **Plane 4 (surface): interactive elements** — buttons, hover states, cursor-reactive elements that live closest to the viewer Horizontal rhythm is **asymmetric but governed**: a 12-column grid used irregularly, with content blocks occupying 5, 7, or 9 columns and offset left or right to create visual tension. Large typographic anchors (single words, short numbers) occupy full-bleed positions and deliberately break the column system. Vertical pacing uses **hard stops** — content sections are separated by full-viewport-height breaks occupied only by a single centered SVG tag or numeral, not by any conventional divider. Scrolling through the page feels like moving through a tunnel, each wall section revealing a new layer. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Tags**: [`Oswald`](https://fonts.google.com/specimen/Oswald), weight 700, uppercase. Used for the primary wordmark, section identifiers, and oversized numeral anchors. Set at clamp(4rem, 10vw, 12rem). Oswald's compressed gothic structure reads as the cleaned-up version of a condensed graffiti throw-up — high impact, low waste. - **Secondary Display**: [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue), weight 400. Used for supporting headlines and large callouts. Pairs with Oswald by sharing condensed geometry but with less vertical tension. - **Body / Captions**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 400. Fixed-width, slightly mechanical, reads like output from a transaction terminal. Used for all running text, data labels, timestamps, and fine-print. The contrast between the oversized compressed display fonts and this utilitarian mono is the eclectic-hybrid core. - **Accent / Annotation**: [`Permanent Marker`](https://fonts.google.com/specimen/Permanent+Marker). Used for one-word annotations, SVG text overlays, and the "eyes" logotype version that appears in certain contexts. This is the graffiti-hand element — used sparingly, never for body text. **Palette (midnight-blue anchor):** - `#0a0d1a` — Deep midnight, near-black with blue undertone. Background base for Plane 0. The darkest value in the system. - `#0d1b3e` — Midnight blue proper. Used for Plane 1 base fills and large SVG background shapes. - `#1a3a6b` — Deep denim. Structural panels, card backgrounds at mid-opacity. - `#2e5fff` — Electric cobalt. Primary accent — outlines, active states, the "cash" wordmark. Reads as the freshest ink on the wall. - `#00e5c4` — Neon mint. Secondary accent — tag overlays, SVG path-draw strokes, hover states. Creates a mint-over-midnight split-complementary tension with the cobalt. - `#f0e030` — Compressed yellow. Used only for the most critical single-element callouts — a price, a number, a word. One per section maximum. The eye-catch. - `#c8d6f0` — Pale steel blue. Body text color in `Space Mono`. High enough contrast against midnight backgrounds to pass WCAG AA. - `#ffffff` at 8–15% opacity — used for translucent panel overlays only, never as a solid element color. ## Imagery and Motifs **All imagery is custom-illustration** — inline SVG drawn from scratch, no photography, no stock vectors, no icon libraries. **The visual roster:** - **The Eye Glyph**: The primary mark of the site. A simplified eye — two arcs forming the lids, a circle for the iris, a smaller filled circle for the pupil. Drawn as SVG path with 2px cobalt stroke, no fill on lid arcs, solid fill on pupil. This appears in the wordmark, as a section header mark, and as a large-scale Plane 1 background element (100–200px, low opacity, repeated 3x in staggered positions). - **Cash Stack Tag**: A stylized dollar sign constructed as a single continuous SVG path (one `` element, no compound shapes), rendered as a graffiti outline. Used as a section divider and as a watermark on Plane 1. Stroke color alternates between cobalt and neon mint depending on context. - **Transaction Lines**: Diagonal lines crossing the composition at 30° and 150° angles, 1px stroke, mint or cobalt, `mix-blend-mode: screen`, opacity 15–25%. These are not decorative borders — they read as the trace marks on a transaction diagram or a surveillance camera feed timestamp. - **Path-Draw SVG Sequence**: One per section only (not repeated globally). Each section gets a single SVG that draws itself on scroll — a unique path for each section: (1) the tunnel horizon line, (2) an eye socket outline, (3) a route map fragment, (4) a currency symbol decomposed into strokes. The path-draw technique is used deliberately and infrequently given its high corpus frequency — each instance is a narrative beat, not decoration. - **Depth Halos**: Radial gradient SVG circles (no fills — just stroke circles at r=40, 80, 120px) centered on key content points, cobalt at 10% opacity. These are the "seeing" motif — the target-reticle that makes every content block feel like something is watching it. **Layered-depth motifs applied:** - Parallax depth: Plane 0 scrolls at 0.2×, Plane 1 at 0.5×, Plane 2–4 at 1×. Implemented via `transform: translateY()` on scroll event, with `will-change: transform`. - Z-index stratification is explicit and visible — elements intentionally overlap and are partially obscured. - The "depth" is not just visual but narrative: deeper layers contain older data, surface layers contain present-moment data. ## Prompts for Implementation **The story to tell.** The visitor enters a surveillance tunnel. The walls are covered in compressed graffiti tags that, on closer inspection, are financial data — amounts, dates, addresses. Eyes.cash is the entity that sees every transaction and annotates it in the visual language of the street. The scrolling experience is moving through this tunnel: each section of wall is a different dataset or concept, each one tagged and layered. The tone is never alarming — the surveillance is matter-of-fact, almost bored. The money was always visible to those who looked. **Animation directives:** - On page load: Plane 0 and Plane 1 fade in from `opacity: 0` over 800ms, staggered 200ms apart. Content panels (Plane 2) slide up from `translateY(20px)` simultaneously. - On scroll: Path-draw SVG sequences trigger when their section enters the viewport (IntersectionObserver). Each path draws at ~300px/second calculated from total path length and `stroke-dashoffset` animation. - Cursor parallax: The Eye Glyph on Plane 1 tracks cursor movement at 0.02× offset — just enough to feel watched without being aggressive. - Tag hover: Hovering any section headline causes the Permanent Marker annotation to gain a `text-shadow: 0 0 8px #2e5fff` glow over 150ms. **Layout anti-patterns to avoid:** - No hero CTA buttons. The site does not ask for action; it presents information. - No pricing grids or feature comparison tables. - No stock photo placeholders or image boxes. - No navigation bar with dropdown menus — navigation is a fixed minimal sidebar of 2–3 single-word items, set in Oswald, positioned at left edge at 90° rotation. - No footer with legal columns — close with a single full-bleed section containing only the Eye Glyph and a `Space Mono` timestamp. **Depth rendering order (CSS z-index):** ``` z-index: 0 → .plane-wall (SVG noise background) z-index: 10 → .plane-fills (large graffiti fill shapes) z-index: 20 → .plane-content (content panels) z-index: 30 → .plane-lines (SVG path overlays) z-index: 40 → .plane-surface (interactive elements) z-index: 999 → .sidebar-nav ``` ## Uniqueness Notes 1. **Typography eclectic-hybrid via font class collision**: The pairing of Oswald (compressed gothic, graffiti-adjacent) + Space Mono (terminal output) + Permanent Marker (literal marker hand) is not a conventional graffiti aesthetic stack. Most graffiti-themed designs use one street font and call it done. This stack creates three registers — the shout, the machine, the hand — which give the site a documentary quality: someone shouted it, a computer logged it, a person annotated it. 2. **Path-draw SVG as narrative beat, not ambient pattern**: Given path-draw-svg appears at 28% frequency in the corpus (the highest of any pattern), this design uses it exactly four times, one per primary section, each drawing a unique path with direct narrative meaning. The technique is foregrounded as a story device rather than background decoration. 3. **Layered-depth with explicit z-index stratification as content hierarchy**: Most layered-depth implementations are purely visual (parallax backgrounds). Here the depth layers correspond to information age — deeper = older/background, surface = current/foreground. The visual depth is also the data architecture. 4. **Rotated single-word sidebar navigation**: No horizontal nav bar. Navigation is three words (EYES / CASH / WATCH) set in Oswald 700, rotated 90° counterclockwise, fixed to the left viewport edge. This is the graffiti-tunnel equivalent of signage painted on the tunnel wall — you read it while moving, not by stopping. 5. **Authoritative tone via restraint**: The site's authority comes from what it does not include — no explanation copy, no CTAs, no testimonials, no social proof widgets. The content presents itself as self-evident, the way a surveillance feed presents footage. The design enforces this by restricting `Space Mono` body text to maximum 12-word lines and prohibiting any sentence that ends with a question mark. **Chosen seed:** aesthetic: graffiti, layout: layered-depth, typography: eclectic-hybrid, palette: midnight-blue, patterns: path-draw-svg, imagery: custom-illustration, motifs: layered-depth, tone: authoritative **Avoided patterns from frequency analysis:** path-draw-svg used minimally (corpus at 28% — used only 4× as narrative beats, not ambient); photography avoided entirely (corpus at high %); conventional centered hero layout avoided.