User Behavior Analytics

Also called: Product analytics dashboard, Engagement analytics, Funnel and retention view

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.

“Funnel & cohort lab”Dashboards & DataEra: 2015 → todayTechyBoldEdgy

Open full screen ↗

user-behavior-analytics / landingEN

user-behavior-analytics / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm6pxRadius md10pxRadius lg16pxRadius xl22pxDensity×0.95Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

conversion funnelhatched drop-offretention cohort triangleheat ramp magenta → amberjourney paths / Sankeymono event chipsclick-heat blobssentence query barstep funnel with % between steps

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

Not to be confused with

Heat Map Dashboard →Heatmap dashboards lead with intensity grids for any metric; Behaviour analytics leads with sequences — funnel, cohort triangle and journey paths — and only uses heat for retention.Drill-Down Analytics →Drill-down navigates a hierarchy with breadcrumbs; Behaviour analytics follows users through time with event-based queries.Real-Time Monitoring →Real-time monitoring watches system health now; Behaviour analytics studies how people move over days and weeks.

On mobile

Turn the funnel into a vertical list of steps with a % converted pill between each; show the retention triangle for the last 4 cohorts × 4 weeks only, with horizontal scroll for more. Journey paths collapse to the top 3 paths as chip sequences. Keep the dark canvas but drop the heat blobs.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinBricolage Grotesque · 600/700

The quick brown fox

Heading · ThaiKanit · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinFigtree · 400/500/600

Clear words make shared decisions.

Body · ThaiNoto Sans Thai · 400/500/600/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 10px · lg 16px · xl 22px · pill 999px`
Border	`1px`
Shadow	`0 10px 28px rgba(0,0,0,0.35)`
Display	`clamp(2.75rem, 6vw, 5rem)`
Motion	`220ms cubic-bezier(.3,.7,.2,1)`
Density	`×0.95`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · User Behavior Analytics (user-behavior-analytics) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 16px;
  --background: #FBF8FD;
  --foreground: #1B1530;
  --card: #FFFFFF;
  --card-foreground: #1B1530;
  --popover: #FFFFFF;
  --popover-foreground: #1B1530;
  --primary: #D61F69;
  --primary-foreground: #FFFFFF;
  --secondary: #9A5B00;
  --secondary-foreground: #FFFFFF;
  --muted: #F3EEF8;
  --muted-foreground: #5B5470;
  --accent: #F3EEF8;
  --accent-foreground: #1B1530;
  --destructive: #D63A3A;
  --border: #E3DCEC;
  --input: #E3DCEC;
  --ring: #D61F69;
  --chart-1: #D61F69;
  --chart-2: #E08A00;
  --chart-3: #6B57E0;
  --chart-4: #11875A;
  --chart-5: #1C8FD1;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #1B1530;
  --sidebar-primary: #D61F69;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F3EEF8;
  --sidebar-accent-foreground: #1B1530;
  --sidebar-border: #E3DCEC;
  --sidebar-ring: #D61F69;
}

.dark {
  --background: #13101C;
  --foreground: #F3EFFA;
  --card: #1C1828;
  --card-foreground: #F3EFFA;
  --popover: #1C1828;
  --popover-foreground: #F3EFFA;
  --primary: #FF5C93;
  --primary-foreground: #1A0710;
  --secondary: #FFB547;
  --secondary-foreground: #1A1206;
  --muted: #262036;
  --muted-foreground: #ABA3BF;
  --accent: #262036;
  --accent-foreground: #F3EFFA;
  --destructive: #FF6464;
  --border: #342C48;
  --input: #342C48;
  --ring: #FF5C93;
  --chart-1: #FF5C93;
  --chart-2: #FFB547;
  --chart-3: #8F7CFF;
  --chart-4: #3DD68C;
  --chart-5: #5CC8FF;
  --sidebar: #1C1828;
  --sidebar-foreground: #F3EFFA;
  --sidebar-primary: #FF5C93;
  --sidebar-primary-foreground: #1A0710;
  --sidebar-accent: #262036;
  --sidebar-accent-foreground: #F3EFFA;
  --sidebar-border: #342C48;
  --sidebar-ring: #FF5C93;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · User Behavior Analytics (user-behavior-analytics) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #FBF8FD;
  --color-surface: #FFFFFF;
  --color-surface-2: #F3EEF8;
  --color-text: #1B1530;
  --color-text-muted: #5B5470;
  --color-primary: #D61F69;
  --color-on-primary: #FFFFFF;
  --color-secondary: #9A5B00;
  --color-on-secondary: #FFFFFF;
  --color-accent: #6B57E0;
  --color-border: #E3DCEC;
  --color-success: #11875A;
  --color-warning: #9A5B00;
  --color-danger: #D63A3A;
  --color-chart-1: #D61F69;
  --color-chart-2: #E08A00;
  --color-chart-3: #6B57E0;
  --color-chart-4: #11875A;
  --color-chart-5: #1C8FD1;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 10px 28px rgba(0,0,0,0.35);
  --shadow-lg: 0 28px 64px rgba(0,0,0,0.5);
  --font-heading: "Bricolage Grotesque", "Kanit", system-ui, sans-serif;
  --font-body: "Figtree", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace;
}

.dark {
  --color-bg: #13101C;
  --color-surface: #1C1828;
  --color-surface-2: #262036;
  --color-text: #F3EFFA;
  --color-text-muted: #ABA3BF;
  --color-primary: #FF5C93;
  --color-on-primary: #1A0710;
  --color-secondary: #FFB547;
  --color-on-secondary: #1A1206;
  --color-accent: #8F7CFF;
  --color-border: #342C48;
  --color-success: #3DD68C;
  --color-warning: #FFB547;
  --color-danger: #FF6464;
  --color-chart-1: #FF5C93;
  --color-chart-2: #FFB547;
  --color-chart-3: #8F7CFF;
  --color-chart-4: #3DD68C;
  --color-chart-5: #5CC8FF;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · User Behavior Analytics (user-behavior-analytics). Default mode: dark. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9725,
            0.9922
          ],
          "hex": "#fbf8fd"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9333,
            0.9725
          ],
          "hex": "#f3eef8"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.0824,
            0.1882
          ],
          "hex": "#1b1530"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.3294,
            0.4392
          ],
          "hex": "#5b5470"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.1216,
            0.4118
          ],
          "hex": "#d61f69"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3569,
            0
          ],
          "hex": "#9a5b00"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4196,
            0.3412,
            0.8784
          ],
          "hex": "#6b57e0"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.8627,
            0.9255
          ],
          "hex": "#e3dcec"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.5294,
            0.3529
          ],
          "hex": "#11875a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3569,
            0
          ],
          "hex": "#9a5b00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.2275,
            0.2275
          ],
          "hex": "#d63a3a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.1216,
            0.4118
          ],
          "hex": "#d61f69"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.5412,
            0
          ],
          "hex": "#e08a00"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4196,
            0.3412,
            0.8784
          ],
          "hex": "#6b57e0"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.5294,
            0.3529
          ],
          "hex": "#11875a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.5608,
            0.8196
          ],
          "hex": "#1c8fd1"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.0627,
            0.1098
          ],
          "hex": "#13101c"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.0941,
            0.1569
          ],
          "hex": "#1c1828"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.149,
            0.1255,
            0.2118
          ],
          "hex": "#262036"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9373,
            0.9804
          ],
          "hex": "#f3effa"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6706,
            0.6392,
            0.749
          ],
          "hex": "#aba3bf"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3608,
            0.5765
          ],
          "hex": "#ff5c93"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0275,
            0.0627
          ],
          "hex": "#1a0710"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.2784
          ],
          "hex": "#ffb547"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0706,
            0.0235
          ],
          "hex": "#1a1206"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.4863,
            1
          ],
          "hex": "#8f7cff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.1725,
            0.2824
          ],
          "hex": "#342c48"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.8392,
            0.549
          ],
          "hex": "#3dd68c"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.2784
          ],
          "hex": "#ffb547"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3922,
            0.3922
          ],
          "hex": "#ff6464"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3608,
            0.5765
          ],
          "hex": "#ff5c93"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.2784
          ],
          "hex": "#ffb547"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.4863,
            1
          ],
          "hex": "#8f7cff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.8392,
            0.549
          ],
          "hex": "#3dd68c"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3608,
            0.7843,
            1
          ],
          "hex": "#5cc8ff"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 28,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.5
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 28,
            "unit": "px"
          },
          "blur": {
            "value": 64,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Bricolage Grotesque",
        "Kanit",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Figtree",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Space Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 220,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      0.7,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.95
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!