Spidey Tracker

Overview

Spidey Tracker is a retro-futuristic interactive experience that merges 8-bit pixel art aesthetics with cutting-edge web technology, creating an immersive portal for tracking Spider-Man sightings globally. The design philosophy centers on 'Cyberpunk Nostalgia'—a deliberate collision of 1980s arcade sensibilities (pixelated sprites, monospace typography, neon cyan accents at #2fc9ff) with modern responsive web patterns. The UI evokes the feeling of accessing a covert surveillance network, where every interaction feels like hacking into a classified database. Users encounter a dark, moody canvas (#1a1a1a background) punctuated by electric cyan highlights and warm orange accents (#f89d51), creating visual tension that mirrors the high-stakes nature of tracking a superhero.

The brand voice is urgent, technical, and playful—never condescending. Sentences are clipped, direct, and often employ uppercase text-transform to reinforce the retro-computer aesthetic. Example: 'WELCOME TO THE SPIDEY TRACKER. INTERACT WITH THE MAP TO VIEW SPIDER-MAN SIGHTINGS ALL OVER THE WORLD.' The tone balances Sony Pictures' cinematic gravitas with the irreverent energy of internet culture, treating the tracker as both a legitimate surveillance tool and a tongue-in-cheek fan experience.

Colors

The color system is built on a dark, high-contrast foundation optimized for extended screen time and visual clarity in low-light environments. Primary (#2fc9ff, a vivid cyan) is the signature accent, deployed on all interactive CTAs, focus states, and the glowing border frames that define the UI's retro-computer aesthetic. This cyan is never used for body text—it's reserved for affordances and hierarchy markers. Secondary (#6cc04a, a muted sage green) appears sparingly on status indicators and success states, while tertiary (#f89d51, a warm burnt orange) provides warmth on hover states and accent elements, preventing the interface from feeling cold despite the dark palette. The surface stack descends from #1a1a1a (surface) through #0f0f0f (surface-dim) to #0e1c3b (surface-container-lowest,

Typography

The type system is anchored in PF Videotext Pro, a monospace font that evokes 1980s computer terminals and arcade cabinets, applied consistently across all scales from display (64px, 0.15em letter-spacing) down to label-sm (12px, 0.1em letter-spacing). The generous letter-spacing (0.03em to 0.15em depending on scale) is non-negotiable—it reinforces the retro-computer aesthetic and improves legibility on the dark background. All text uses fontWeight: 400 (no bold variants in the core type system) to maintain the monospace purity; emphasis is achieved through color shifts (cyan for primary, orange for hover) or text-transform: uppercase rather than weight changes. Headlines employ 0.12em letter-spacing and 1.2 line-height to create breathing room, while body text sits at 0.05em letter-spacin

Layout

The page employs a fixed 896px container max-width, centered on larger viewports and fluid on mobile (94vw max). The grid is 12 columns with 24px gutters, though most layouts use a simplified 2–3 column split for clarity. Vertical rhythm is governed by the 8px unit: sections are separated by 40px (lg spacing), cards use 24px (md spacing) internal padding, and micro-interactions use 12px (sm spacing) for breathing room. The main menu panel is 320px wide (fixed position, z-index: 2000) and slides in from the left with transform: translate(-100%) transitioning to translate(0) over 240ms. The pre-map loading screen occupies the full viewport (position: fixed, inset: 0) and fades out over 520ms using cubic-bezier(0.22, 1, 0.36, 1) once the map is ready. White-space is used aggressively to preve

Elevation & Depth

Depth is conveyed through a three-tier shadow system and strategic use of borders rather than traditional drop-shadows. Level 1 (Base): the background is a flat #0f0f0f with a subtle repeating-linear-gradient overlay (rgba(150, 224, 247, 0.05) at 1px height, 6px gap) to simulate a CRT scan-line effect. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24) with a 1px border at rgba(47, 201, 255, 0.3) to create a glowing frame. Level 3 (Modals/Elevated): box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) with a 2px border at rgba(47, 201, 255, 0.25), plus backdrop-filter: blur(6px) on th

Shapes

The shape philosophy is 'Retro-Technical Precision'—a blend of sharp, pixel-perfect corners (2px and 4px radii for most elements) with strategic use of full-circle buttons (border-radius: 50% or 9999px) for primary CTAs and icon buttons. Buttons use border-radius: 9999px (pill-shaped) to evoke the rounded bezels of arcade cabinet buttons, while cards and input fields use 4px or 6px for a slightly softer, more modern feel. The main menu panel has no border-radius (sharp 90° corners) to emphasize its utilitarian, computer-terminal aesthetic. The close button on the consent dialog is a perfect ci

Components

Action Elements Buttons are the primary interactive affordance and come in two variants: primary (solid cyan background, #2fc9ff, with black text) and secondary (transparent with cyan border). Both use border-radius: 9999px, padding: 9px 18px, height: 36px, and fontWeight: 700 to create a bold, clickable appearance. On hover, primary buttons transition to #74ddff (primary-container) and add box-shadow: 0 0 0 2px rgba(47, 201, 255, 0.25) plus transform: translateY(-1px) over 120ms. Secondary buttons invert on hover, gaining a semi-transparent cyan background (rgba(47, 201, 255, 0.1)). All buttons use transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease to create a snappy, responsive feel. Focus-visible states add outline: 2px solid #2fc9ff with outline-of

Do's and Don'ts

**Do**

• Do use cyan (#2fc9ff) exclusively for interactive affordances—buttons, links, focus states, and borders—to create a consistent, scannable interface.
• Do apply letter-spacing: 0.05em to 0.15em across all typography scales to reinforce the retro-computer aesthetic and improve readability on dark backgrounds.
• Do use transform: translateY(-1px) on hover states paired with box-shadow additions to create a tactile 'lift' effect that feels responsive without heavy motion.
• Do employ backdrop-filter: blur(6px) on overlay elements to create a glass-morphic effect that separates modal layers while maintaining visual connection to the background.
• Do use repeating-linear-gradient scan-line overlays (rgba(150, 224, 247, 0.05) at 1px height, 6px gap) on full-screen backgrounds to evoke CRT monitor aesthetics.

**Don't**

• Don't use pure white (#ffffff) for body text—always use #e9e9e9 (on-surface) to reduce eye strain on the dark background.
• Don't apply border-radius: 0 to interactive elements like buttons or inputs; use at least 4px (DEFAULT) or 9999px (full) to maintain the retro-modern aesthetic.
• Don't mix font families—PF Videotext Pro is the sole typeface; avoid Roboto, Google Sans, or system fonts in the main UI (they're acceptable only in fallback scenarios).
• Don't use box-shadow values lighter than rgba(0, 0, 0, 0.12); the dark background requires strong contrast to create visual separation.
• Don't animate transitions faster than 120ms or slower than 300ms for standard interactions; this maintains the snappy, arcade-like responsiveness.