# User Behavior Analytics > A dark plum lab for how people move: a sentence-style event query, a step funnel with hatched drop-off, a magenta-to-amber retention triangle and flowing journey paths. - Nickname: Funnel & cohort lab - Also called: Product analytics dashboard, Engagement analytics, Funnel and retention view - Category: Dashboards & Data - Moods: Techy, Bold, Edgy - Industries: Media & Entertainment, SaaS, E‑commerce, Startup & Tech, Gaming - Style page: https://uilingo.dev/styles/user-behavior-analytics/ User behaviour analytics is about sequences, not totals. The page starts with a query written as a sentence — “All readers who did article_read then subscribe_click within 7 days” — with event names as monospace chips. Below it, a step funnel shows each stage as a bar with the lost users drawn as a hatched magenta ghost of the previous step’s height behind it and the conversion rate between steps; a cohort table turns into a retention triangle in a hot magenta-to-amber heat ramp; and a Sankey-style journey map shows where people come from and where they leave. The skin is a dark plum canvas with faint click-heat blobs, quirky Bricolage Grotesque headings and mono numbers. The demo is a media publisher, so its events are reader events (article_read, subscribe_click, audio_play). ## Best for - Media, streaming and content apps tracking engagement - Product and growth analytics tools - Onboarding and checkout funnel optimisation - Subscription retention and churn analysis ## Avoid for - Financial statements and audited reporting - Executive one-glance summaries - Low-data products with no event tracking ## Do - Write the query as a readable sentence with event chips the user can swap - Show drop-off between funnel steps explicitly (hatched ghost bar + % converted) - Use one sequential ramp for retention and label every cell with its percentage ## Don't - Don’t show funnels as decorative trapezoids without numbers - Don’t use a rainbow palette for retention intensity - Don’t average away cohorts — keep the triangle ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "User Behavior Analytics" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line A dark plum lab for how people move: a sentence-style event query, a step funnel with hatched drop-off, a magenta-to-amber retention triangle and flowing journey paths. Design keywords: conversion funnel, hatched drop-off, retention cohort triangle, heat ramp magenta → amber, journey paths / Sankey, mono event chips, click-heat blobs, sentence query bar, step funnel with % between steps. ## Visual language A dark plum analytics lab (#13101C) for studying how people move through a product. Cards are slightly lighter plum with 1px violet-grey borders and 16px corners; the canvas carries faint horizontal rules (1px rgba(255,255,255,.035) every 48px) and two or three 'click-heat' blobs, 220–320px, radial-gradient(#FFB547 0 8%, rgba(255,92,147,.35) 30%, transparent 70%) at 25–35% opacity. Data is hot: magenta #FF5C93 for flow and conversion, amber #FFB547 for peaks, a magenta→amber ramp for intensity. Quirky Bricolage Grotesque headings, Figtree body and Space Mono for every number and event name give it a hacker-editorial attitude. The demo scenario is a media publisher, so keep reader events (article_read, subscribe_click, audio_play) — not generic product events. ## Signature details (must be visible) - Query sentence bar with a dashed magenta border: 'Showing [All readers ▾] who did [article_read] then [subscribe_click] within [7 days ▾]' — event names are mono chips in magenta tint, segments/time windows are amber-tint chips - Step funnel: 4 columns separated by hairlines; each step is a magenta gradient bar (amber is only for peaks, never a funnel step). Step 1 is a full-height bar with no ghost; every later step draws the previous step's height behind it as a hatched magenta ghost (lost users). A mono count sits above each step (e.g. 48,210 / 34,230 / 17,320 / 2,633) and a mono % pill ('71.0%', '50.6%', '15.2%') sits centred on the top edge of that step's ghost, not in the hairline gap - Retention cohort triangle: rows = weekly cohorts with size, columns W0–W7, 3px-gapped cells labelled with %, filled from explicit ramp stops — 0–19% #3A2340, 20–39% #6B2A4F, 40–59% #A8355E, 60–79% #E04A7A, 80–99% #FF7A5C, 100% #FFB547. Cell text is #F3EFFA below 60% and #1A0710 at 60% and above (light text on #E04A7A fails contrast). Future cells use a 45° hatch at 8% white. Put a ramp legend strip under the triangle. Dashboard: W0–W7. Landing mini triangle: W0–W3 headers, cohort date labels, every cell labelled with %, and a ramp legend strip labelled 0%–100% - Journey map: four columns of nodes (Entry → First page → Engagement → Outcome) with a 3px magenta left edge; flows are bezier ribbons whose stroke width = volume, magenta at ~32% opacity with screen blend; exit ribbons use text-muted #ABA3BF at 35% opacity and exit nodes get a #ABA3BF 35% left edge with muted text (no new grey); draw the ribbons as inline SVG bezier paths (allowed and preferred). It appears on the dashboard (full width) and on the landing as the full-width tile that closes the features bento - Numbers, deltas and event names in Space Mono 700. Badges use one shorthand: font: 700 0.72rem "Space Mono", "Noto Sans Thai" — Thai glyphs fall back to Noto Sans Thai 700 inside the same span, so no split spans are needed. Cell text on ramp cells ≥60% is on-primary #1A0710 - Magenta→amber heat gradient used for logo tile, progress fills and section/topic bars - Live indicators: green #3DD68C dot with an expanding ring pulse (reduced-motion safe) + mono count. On the landing the hero copy card starts with a live badge ('1,284 reading now'); on the dashboard it sits in the topbar; on mobile home it sits on the journey-path card ## Design tokens — use these exact values Colours (dark mode): - background #13101C - surface #1C1828 - surface-2 #262036 - text #F3EFFA - text-muted #ABA3BF - primary #FF5C93 (text on it #1A0710) - secondary #FFB547 (text on it #1A1206) - accent #8F7CFF - border #342C48 - success #3DD68C · warning #FFB547 · danger #FF6464 - chart series #FF5C93, #FFB547, #8F7CFF, #3DD68C, #5CC8FF Radius: sm 6px, md 10px, lg 16px, xl 22px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(0,0,0,0.35)`, md `0 10px 28px rgba(0,0,0,0.35)`, lg `0 28px 64px rgba(0,0,0,0.5)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.95 density Motion: 220ms cubic-bezier(.3,.7,.2,1) ## Typography (Latin + Thai) - Headings: Bricolage Grotesque 600/700 with Thai fallback Kanit 500/600/700 - Body: Figtree 400/500/600 with Thai fallback Noto Sans Thai 400/500/600/700 - Mono: Space Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=Figtree:wght@400;500;600&family=Space+Mono:wght@400;700&family=Kanit:wght@500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap - CSS stacks: heading `"Bricolage Grotesque", "Kanit", system-ui, sans-serif`; body `"Figtree", "Noto Sans Thai", system-ui, sans-serif`; mono `"Space Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Noto Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6vw, 5rem), heading weight 700, heading tracking -0.035em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Kanit’s punchy, slightly condensed heads match Bricolage Grotesque’s editorial attitude; Noto Sans Thai is a calm loopless body that sits at Figtree’s x-height for dense chart labels. ## Components - Buttons: 10px radius; primary magenta with dark text and a magenta glow; secondary plum surface-2 with a border that turns magenta on hover; accent amber - Cards: #1C1828, 1px #342C48 border, 16px radius; hover lifts 2px and tints the border magenta - Badges: 6px radius, font: 700 0.72rem "Space Mono", "Noto Sans Thai" (one stack for Latin and Thai), tinted backgrounds - Chips/filters: 6px radius on surface-2; active chip solid magenta - Inputs: surface-2 fill, 10px radius, focus = magenta border + 4px 22% magenta ring - Rail navigation (dashboard/app only): 76px icon rail on near-black, active icon in a magenta-tint tile with a magenta inset outline - Event stream: items with a 2px magenta left rule, a mono event chip, actor + action, relative time - Mobile tab bar (app only): dark translucent bar, active icon magenta with a soft magenta drop-shadow glow - Split nav (landing): links left, logo centred, sign-in + magenta CTA right; dark translucent background - CTA band: solid #FF5C93 panel, on-primary (#1A0710) heading and text, dark #13101C primary button with light text, amber + violet radial glows at ≤30% opacity, each about 400px ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: a bento grid where the headline is the largest tile and stats/features fill the others. Navigation: split style. Sections in order: hero → logos → features → steps → stats → testimonials → faq → cta. Feature section as bento. Landing (no showcase section — the signature lives in the bentos): split nav; hero bento on a 4-column grid — copy tile 2×2 (live badge first, then eyebrow, gradient display headline, lead, buttons, magenta corner glow); two 1×1 stat tiles (green mono '▲ +12.4% WoW' delta badge at the top, a magenta mini-sparkline in the middle, amber mono number + label at the bottom); under them a 2-column tile with the full query sentence bar ('Showing [All readers ▾] who did [article_read] then [subscribe_click] within [7 days ▾]', dashed magenta border, magenta-tint event chips, amber-tint segment/time chips) above a mini hatched-ghost step funnel with mono counts and % pills, captioned as the funnel ('Reader to member · 7 days' + overall % badge). Mono logo strip; features bento: a 2×2 card with the labelled mini retention triangle (W0–W3, 4 cohorts, every cell with %, 0%–100% ramp strip), feature cards with no empty grid holes (the two cards of the third row span 2 columns each), and a full-width journey-map tile (4 node columns, magenta bezier ribbons, grey exits) that closes the bento. Then steps with mono outlined numbers; amber mono stats; testimonials; FAQ; the magenta CTA. Dashboard: icon rail, translucent topbar with a 'reading now' live badge, title + Save chart, the query sentence bar, KPI row with mono WoW deltas, funnel (8) + topic bars (4), retention triangle W0–W7 with ramp legend (8) + live event stream (4), then a full-width journey map. ## Content Use realistic product copy (fictional brand) suited to: Media, streaming and content apps tracking engagement. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Write the query as a readable sentence with event chips the user can swap - Show drop-off between funnel steps explicitly (hatched ghost bar + % converted) - Use one sequential ramp for retention and label every cell with its percentage ## Don't - Don’t show funnels as decorative trapezoids without numbers - Don’t use a rainbow palette for retention intensity - Don’t average away cohorts — keep the triangle - Decorative funnel trapezoids with no counts or conversion rates - Rainbow or traffic-light palettes for retention — one magenta→amber ramp only - Showing only totals and averages; this style is about sequences and cohorts - Big generic heatmap grids as the lead widget (that is the Heat Map Dashboard) - Light corporate blues or serif titles — that drifts to the financial or comparative styles - Letter-spacing or uppercase on Thai labels; Thai must never be set in Space Mono — let the stack fall back to Noto Sans Thai - Empty gradient tiles or plain stat cards on the landing — every bento tile carries a query, funnel, cohort or sparkline ## Stack notes One self-contained HTML file with a