# Design Language for footprint.markets ## Aesthetics and Tone **Goblincore Neon Exchange** — footprint.markets is a trading floor that grew out of a forgotten server room full of glowing fungi. The aesthetic fuses **goblincore** (obsessive collection, moss-patina textures, found-objects-as-treasure, the beauty of overlooked things) with the crackling voltage of a live derivatives exchange. Moss-slicked circuit boards. Bioluminescent market data. Neon price tickers crawling through damp stone. The mood is **bold-confident** — this is not a site that asks for your trust; it radiates the authority of something ancient and electric simultaneously. Visual inspirations: a dark server cave with walls of neon ticker tape, a goblin's hoard of glowing gemstone-coins, wet cobblestones reflecting exchange signs in electric chartreuse and magenta, the HUD overlay of a trader who found their desk in a dungeon. **Three core aesthetic tensions:** 1. Organic rot meets synthetic glow — moss-texture surfaces lit by neon; decay and electricity coexist 2. Collection mania meets data precision — goblin-hoard accumulation logic applied to market depth visualization 3. Underground intimacy meets global market authority — no corporate polish, full raw confidence ## Layout Motifs and Structure **Editorial Flow with Stacked Data Columns** — the page unspools like a long-form financial dispatch printed on recycled dungeon-parchment. Not a dashboard, not a hero+CTA stack. An editorial flow: headline, then a richly annotated body of market intelligence, then rare calls to action buried like found treasure. **Structural signature:** A **two-column asymmetric editorial spine** — primary content column at 62% width left, a narrower 30% annotation rail right (with 8% gutter). The annotation rail carries live-ticker fragments, marginal notes in small caps, and decorative goblin-hoard counters. This is the **inverse of the corpus norm** — 92% of designs use centered, 78% use full-bleed; this design uses neither. **Grid system:** - Max-width container: `1280px`, left-aligned at `min(62vw, 800px)` for the main column - Annotation rail: `max(260px, 30vw)`, absolutely positioned right with a `1px` neon-green border-left as the gutter marker - Section breaks: diagonal ink-slash dividers (`clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%)`) in moss-black `#0d1a0e` - Mobile: single column, annotation rail collapses to inline footnotes with `▶` expand toggles **Navigation:** A horizontal ticker-strip nav at the very top (not sticky), using the neon-electric `#39FF14` on `#0a0f0a` background, with each nav item separated by `◆` diamond glyphs. Below it, a thin `1px` solid `#1a3d1a` rule. No hamburger menu on desktop; on mobile a minimal side-drawer in `#050d05`. **Signature layout differentiator:** The hero section uses **tilt-3d perspective** — the primary headline card tilts at `rotateX(8deg) rotateY(-4deg)` via CSS `perspective: 1200px`, giving the impression of a market data terminal being viewed from a standing position. This tilt resets on scroll entry to `rotateX(0)` with a spring-physics ease, revealing the content as if the visitor just stepped up to the terminal. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Headlines — [`Unbounded`](https://fonts.google.com/specimen/Unbounded)**, weight 700–900. Goblincore-meets-exchange: rounded-but-chunky, fills the role of a neon sign carved into stone. Set the primary market claim at `clamp(3.2rem, 7vw, 7.5rem)`, weight 900, color `#39FF14` (neon chartreuse). Letter-spacing: `-0.02em` for large display, `0.08em` for all-caps sub-labels. - **Body / Editorial — [`DM Sans`](https://fonts.google.com/specimen/DM+Sans)**, weight 300–500 variable. Clean, geometric-humanist, reads like a financial analyst's field notes. Body size `17px` / `28px` line-height, color `#c8d4c8` (muted lichen-grey-green). The rounded-sans axis — `DM Sans` is soft-cornered without feeling playful, matching goblincore's appreciation for imperfect forms. - **Ticker / Data — [`Space Mono`](https://fonts.google.com/specimen/Space+Mono)**, weight 400–700. Used exclusively for price data, ticker symbols, percentage changes, and the annotation rail. Size `12–14px`, letter-spacing `+0.05em`. Color alternates: gains in `#39FF14`, losses in `#FF3EC9` (neon magenta), neutral in `#7a9a7a`. - **Accent / Labels — [`DM Sans`](https://fonts.google.com/specimen/DM+Sans)**, all-caps, weight 600, `11px`, `letter-spacing: 0.15em`. Used for section labels, category slugs, taxonomy chips. **Palette:** | Role | Name | Hex | |------|------|-----| | Background deep | Dungeon Void | `#040a04` | | Background surface | Moss Black | `#0d1a0e` | | Background card | Patina Dark | `#111e12` | | Primary neon | Electric Chartreuse | `#39FF14` | | Accent neon | Neon Magenta | `#FF3EC9` | | Accent secondary | Neon Cobalt | `#00B4FF` | | Body text | Lichen Grey-Green | `#c8d4c8` | | Muted text | Moss Fog | `#7a9a7a` | | Border / rule | Deep Moss | `#1a3d1a` | | Surface glow | Bioluminescent Tint | `rgba(57,255,20,0.06)` | **No gradients** — the corpus uses gradient at 87%; this palette uses flat moss-black surfaces with **neon glow via `box-shadow` and `text-shadow`** only. The glow is surgical: `0 0 12px #39FF14`, `0 0 40px rgba(57,255,20,0.3)`. ## Imagery and Motifs **Bokeh background as the only photographic element** — a single, slow-looping video or CSS-animated bokeh background in the hero: out-of-focus neon lights (chartreuse, magenta, cobalt) bleeding against absolute black, evoking an exchange floor photographed at night through a fast lens. No stock photography of people, no charts, no product screenshots. The bokeh is the atmosphere; everything else is typography and data. **Tech motifs — the goblin-hoard data aesthetic:** - **Circuit-moss SVG motifs** — decorative inline SVGs showing circuit board traces overgrown with stylized moss lines. Used as section dividers and card background watermarks at 4% opacity. Pattern repeats at `120px × 80px`. - **Neon gemstone counters** — market stat numbers are rendered as if mounted in faceted gem settings: each stat block has a thin diamond-shaped `clip-path` border in neon chartreuse, with the inner surface in `#111e12`. - **Ticker tape ribbons** — horizontal scrolling marquees (`animation: marquee 40s linear infinite`) carrying real or mock market data in `Space Mono`, appearing as neon-lit punch tape spooling through a dungeon wall slot. - **Footprint motifs** — the brand wordmark "footprint" receives literal treatment: a subtle goblin-claw footprint SVG stamp in `#1a3d1a` watermarks every section break, scaled to `120px`, rotated `−12deg`, opacity `0.12`. This anchors brand identity without decoration overhead. - **Data depth grid** — the annotation rail background uses a `1px` grid of `#1a3d1a` lines at `20px` spacing, referencing both graph paper and dungeon mapping tiles. - **Bioluminescent hover states** — every interactive element (links, cards, stat chips) activates a `box-shadow: 0 0 0 1px #39FF14, 0 0 20px rgba(57,255,20,0.4)` glow on hover, as if pressed fungal spores are releasing light. ## Prompts for Implementation **The story being told:** A traveler reaches a dungeon trading post lit entirely by bioluminescent fungi and neon exchange signs. The proprietor (footprint.markets) knows every market on three continents — not from a glass tower but from years of mapping the underground. The visitor doesn't see a landing page. They see a market intelligence terminal grown into moss-covered stone walls, alive with price data. **Section architecture (single-page editorial scroll, no modal/popup/pricing tables):** 1. **Ticker Strip** — full-width, `44px` tall, neon chartreuse on moss-black, `Space Mono` scrolling marquee of market symbols and prices. Position: fixed top `0`, `z-index: 100`. On scroll past `200px`, the strip compresses to `28px` via `height` transition. 2. **Hero Terminal** — full-viewport minus ticker. Left 62%: the `Unbounded` headline in neon chartreuse at `clamp(3.2rem,7vw,7.5rem)`, a 2–3 line sub-claim in `DM Sans` `#c8d4c8`, and a single ghost-button CTA (`border: 1px solid #39FF14`, transparent fill, neon text, `border-radius: 2px`). The entire hero card applies `tilt-3d` — `rotateX(8deg) rotateY(-4deg)` at load, transitioning to flat on `IntersectionObserver` trigger with a `cubic-bezier(0.34, 1.56, 0.64, 1)` spring. Right 38%: bokeh video/canvas blur loop through CSS `backdrop-filter: blur(0px)` to `blur(2px)` pulse, with floating ticker fragments in `Space Mono` at `opacity: 0.6`. 3. **Market Intelligence Digest** — editorial body section. Left 62% column: 3–4 paragraphs of market analysis prose in `DM Sans` 17px. Right annotation rail: a `Space Mono` sidebar with live-data fragment labels (market name, current price, 24h change %). Each annotation row has a left `3px` border in `#39FF14` (gain) or `#FF3EC9` (loss). Rail background: `#0d1a0e` with `1px` data-grid pattern. 4. **Hoard Stats** — four gem-counter stat blocks in a 2×2 grid (desktop) / single column (mobile). Each stat block: `clip-path` diamond border, `Unbounded` 900 number in neon chartreuse `clamp(2.4rem, 4vw, 4rem)`, `DM Sans` label below in `#7a9a7a`. On `IntersectionObserver` trigger, numbers count up from 0 using `requestAnimationFrame`. 5. **Signal Scroll** — magazine-editorial section: alternating left/right image–text blocks, three items. Each "image" is an abstract CSS art piece — a bokeh circle with a neon ring, a circuit-moss SVG, a footprint watermark. Text blocks carry market thesis paragraphs. No photos, no icons. 6. **Footprint Colophon** — full-width dark section `#040a04`. The goblin-claw footprint SVG centered at `200px`, glowing in neon chartreuse. Below: `DM Sans` `#7a9a7a` tagline and a single `Space Mono` copyright line. No large CTA block. **Animation directives:** - `tilt-3d` hero reset: `transform: perspective(1200px) rotateX(8deg) rotateY(-4deg) → rotateX(0) rotateY(0)` on intersection, `duration: 900ms`, `cubic-bezier(0.34, 1.56, 0.64, 1)` - Ticker marquee: `animation: marquee 40s linear infinite`, pauses on `prefers-reduced-motion` - Gem counters: `IntersectionObserver` fires `countUp(from: 0, to: value, duration: 1800ms, easing: easeOutExpo)` - Hover glows: `transition: box-shadow 180ms ease, text-shadow 180ms ease` - Bokeh pulse: `@keyframes bokeh-breathe { 0%,100% { filter: blur(0px) brightness(1) } 50% { filter: blur(2px) brightness(1.15) } }`, `duration: 6s`, `ease-in-out` - No parallax (91% corpus usage — avoided entirely) - No stagger cascade (67% corpus usage — avoided entirely) **AVOID:** pricing tables, testimonial carousels, stat-grids with icons, hero with centered text + centered CTA, gradient backgrounds, hand-drawn illustrations, spring-cascade entrance animations. ## Uniqueness Notes **Differentiators from the 114-design corpus:** 1. **Goblincore × financial exchange** — the corpus has zero goblincore designs. Tech motifs appear at 14%, but always as clean sci-fi or circuit-board; never combined with organic decay, moss, or hoard-accumulation logic. This is the first design to treat market data as a goblin's treasure collection. 2. **Neon-electric palette at flat (no gradient)** — neon-electric palette registers at only 1% in the corpus, and every known use employs neon-on-gradient. footprint.markets uses neon-on-flat-moss-black with glow-via-shadow only, making the neon surgical rather than ambient. Gradient palette at 87% — completely avoided. 3. **Bokeh-background as only imagery** — bokeh-background is rare in the corpus (< 3%). The corpus uses photography at 85%; most tech/market sites use data visualizations or screenshots. This design uses zero screenshots, zero charts, zero photography of people — only a single atmospheric bokeh layer. 4. **Tilt-3d editorial-flow fusion** — tilt-3d appears at 14% in the corpus, always applied to individual cards or interactive elements. This design applies tilt-3d to the entire hero terminal as a perspective-reset narrative device, fused with an editorial-flow layout (4% usage) rather than the expected dashboard or card-grid. 5. **Annotation rail as primary data surface** — the two-column asymmetric layout with a live-data annotation rail is absent from the corpus. The corpus uses sidebar at 28% but exclusively for navigation; this uses the right rail as an ambient financial data stream integrated into the editorial prose. 6. **Rounded-sans (Unbounded) for market authority** — rounded-sans typography at 2% in corpus. Market/financial domains universally use mono or humanist-corporate. `Unbounded` brings goblin-hoard chunky confidence to financial display type — unprecedented in the corpus. **Chosen seed:** aesthetic: goblincore, layout: editorial-flow, typography: rounded-sans, palette: neon-electric, patterns: tilt-3d, imagery: bokeh-background, motifs: tech, tone: bold-confident **Overused patterns avoided:** parallax (91%), centered layout (92%), warm palette (93%), gradient palette (87%), hand-drawn aesthetic (71%), stagger pattern (67%), mono typography (90%), full-bleed (78%) **Underused patterns prioritized:** editorial-flow (4%), tilt-3d (14% but novel application), neon-electric palette (1%), rounded-sans typography (2%), bokeh-background imagery (rare), goblincore aesthetic (0% in corpus), bold-confident tone (2%)