User Engagement

Product analytics · Light · Tabbed

A restrained page that barely departs from the default theme, and is better for it. Good evidence that you do not need heavy styling to get a clean result.

What makes it work

• Terracotta and teal on white, used only for series colours.
• The monthly metrics table with sparkline rows does most of the work: many metrics on one screen, each with its own trend.
• Two tabs only, split by the question being asked rather than by data source.
• A sensible starting point if you are theming your first dashboard.

The views

Each tab is shown below at full width.

User engagement

Feature adoption

See it live

Open the live dashboard to click through it yourself. No Holistics account needed.

Theme code

The theme this dashboard actually uses, written out as a reusable PageTheme. Paste it into a .theme.aml file under Development > Library > Themes to reuse it across your own dashboards, or inline it as a single dashboard's theme: property. Chart colour palettes are set separately, so they are not included here.

user_engagement_theme.theme.aml

PageTheme user_engagement_theme {
  background {
    bg_color: "#EDE8E3"
  }
  canvas {
    border {
      border_color: "#E0D8D0"
      border_style: "solid"
      border_width {
        top: 1
        left: 1
        right: 1
        bottom: 1
      }
      border_radius {
        top_left: 12
        top_right: 12
        bottom_left: 12
        bottom_right: 12
      }
    }
    shadow: "md"
    opacity: 1
    background {
      bg_color: "#FAF8F6"
    }
  }
  block {
    text {
      font_size: 20
      font_color: "#3D3429"
      font_style: "normal"
      font_family: "Manrope"
      font_weight: "normal"
    }
    label {
      font_size: 13
      font_color: "#3D3429"
      font_style: "normal"
      font_family: "Manrope"
      font_weight: "semibold"
    }
    border {
      border_style: "none"
      border_width {
        top: 0
        left: 0
        right: 0
        bottom: 0
      }
    }
    shadow: "none"
    opacity: 1
    padding {
      top: 0
      left: 0
      right: 0
      bottom: 0
    }
    background {
      bg_color: "transparent"
    }
  }
  viz {
    table {
      header {
        bg_color: "#F0EAE2"
        font_size: 16
        font_color: "#6B5D52"
        font_weight: "semibold"
      }
      general {
        bg_color: "#FFFFFF"
        font_size: 16
        font_color: "#3D3429"
        font_family: "Manrope"
        hover_color: "#F7F3EE"
        banding_color: "#FFFFFF"
        grid_color: "#EDE7DF"
        border_color: "#E0D8D0"
        border_width: 1
      }
      sub_title {
        font_size: 16
        font_color: "#6B5D52"
        font_weight: "normal"
      }
      sub_header {
        bg_color: "#F0EAE2"
        font_size: 18
        font_color: "#8B7E74"
        font_weight: "normal"
      }
    }
  }
}

The theme is paired with custom CSS, which lives beside it rather than inside it. See Custom CSS for where it goes.

Custom CSS

/* ── Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

/* ── Typography hierarchy (H1 > H2 > H3 > H4 > p) ─────────────── */

.dac-text-block h1 {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  color: #3D3429 !important;
  line-height: 1.2 !important;
  margin: 0 0 4px 0 !important;
}

.dac-text-block h2 {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #3D3429 !important;
  line-height: 1.3 !important;
  margin: 0 0 4px 0 !important;
}

.dac-text-block h3 {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  color: #3D3429 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.dac-text-block h4 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #3D3429 !important;
  line-height: 1.5 !important;
  margin: 0 0 2px 0 !important;
}

.dac-text-block p {
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #8B7E74 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ── Text blocks: transparent by default ────────────────────────── */
.dac-text-block {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── Viz block labels (chart titles → Crimson Pro) ──────────── */
.dac-viz-block-label {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 32px;
  color: #3D3429 !important;
  letter-spacing: -0.2px !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 24px 8px 12px 8px !important;
  margin-top: 18px;
  margin-bottom: 0px;
  min-height: 56px;
}

/* ── KPI labels (Total users, Monthly active users, etc.) ─────── */
.h-kpi-metric-label {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #8B7E74 !important;
}

/* ── KPI block card background ────────────────────────────────── */
.ci-h-kpi-metric-body {
  background-color: #F5F4EE !important;
  border-radius: 12px !important;
  padding: 20px !important;
  gap: 4px !important;
}

/* ── KPI big numbers → Crimson Pro ─────────────────────────────── */
.h-kpi-metric-kpi {
  font-family: 'Crimson Pro', Georgia, serif !important;
  color: #2A2118 !important;
}

/* ── MetricSheet filter bar ────────────────────────────────────── */
.setting-wrapper {
  font-size: 16px !important;
  justify-content: flex-start !important;
}

.setting-wrapper .truncate.whitespace-pre {
  font-size: 16px !important;
  color: #D4714A !important;
  font-weight: 600 !important;
}

.setting-wrapper .hui-select-trigger {
  font-size: 16px !important;
}

/* ── FilterBlock: inline label + styled value ─────────────────── */
.dm-filter-form {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  border-color: #E0D8D0 !important;
  border-radius: 8px !important;
}

.dm-filter-form > .mb-0.5 {
  margin-bottom: 0 !important;
  font-size: 16px !important;
  white-space: nowrap !important;
}

.dac-ic-block-label {
  color: #4A4035 !important;
  font-size: 4px !important;
}

.dm-filter-form,
.dm-filter-form * {
  font-size: 16px !important;
}

.dm-filter-form .h-highlightable-input {
  font-size: 16px !important;
  box-shadow: none !important;
}

.dm-filter-form .hui-select-trigger {
  box-shadow: none !important;
}

.dm-filter-form > .flex.min-w-0.flex-1.items-center {
  padding-bottom: 16px !important;
}

.dm-filter-form mark.active {
  color: #6B5D52 !important;
  background-color: #F7F3EE !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 2px 6px !important;
}

/* ── Empty bg text block — hide text ─────────────────────────── */
#block-t2_empty_bg .inspecta-inspect,
#block-t2_empty_bg .text-content,
#block-t2_empty_bg .text-content * {
  color: #FFFFFF !important;
}

/* ── MetricSheet top margin ──────────────────────────────────── */
#block-v_wyca .ag-root-wrapper {
  margin-top: 24px !important;
}

/* ── MetricSheet metric name column ───────────────────────────── */
#block-v_wyca .ag-cell-value {
  font-weight: 400 !important;
}

/* ── MetricSheet sparkline colors ──────────────────────────────── */
.sparkline-wrap rect {
  stroke: #D4714A !important;
  fill: #D4714A !important;
}

.sparkline-wrap path,
.sparkline-wrap line,
.sparkline-wrap polyline,
.sparkline-wrap circle {
  stroke: #D4714A !important;
  fill: none !important;
}

.sparkline-wrap svg [stroke] {
  stroke: #D4714A !important;
}

.sparkline-wrap canvas {
  filter: hue-rotate(200deg) saturate(1.5) !important;
}

/* ── KPI Card (MarkdownViz) ─────────────────────────────────────── */

/* [1] LABEL — top text */
.mrr-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #8B7E74 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
}

/* [2] VALUE — big number */
.mrr-value {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  color: #3D3429 !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
  margin-top: 8px !important;
}

/* [3] FOOTER — row with badge + "vs last month" */
.mrr-footer {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #4A4035 !important;
  margin-top: 10px !important;
}

/* [4] BADGE — colored pill */
.mrr-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* [5] SPARKLINE — SVG area chart at bottom */
.mrr-spark {
  margin-top: 12px !important;
  display: block !important;
}

/* ── Chart top padding overrides ──────────────────────────────── */
#block-t1_mrr_time {
  padding-top: 32px !important;
}

#block-t2_new_vs_churn {
  padding-top: 32px !important;
}

#block-t2_exp_contr {
  padding-top: 32px !important;
}

/* ── Canvas bg override ─────────────────────────────────────────── */
.dac-canvas {
  background-color: #FAF8F6 !important;
}

/* ── MRR Movers date filter: white bg + hide link icon ────────── */
#block-f_movers_date .dm-filter-form {
  background-color: #FFFFFF !important;
}

#block-f_movers_date .dac-ic-block-label {
  display: none !important;
}

/* ── MetricSheet table styling ───────────────────────────────── */

/* Table corner radius */
.ag-root-wrapper {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Metric name cells */
.ag-cell-value {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #3D3429 !important;
}

/* Number value cells */
.ag-cell {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  color: #3D3429 !important;
}

/* Section heading rows (User engagement, Content creation, etc.) */
.text-row[data-ci="ci-text-row"] {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #6B5D52 !important;
  background-color: #F0EAE2 !important;
}

/* Sparkline colors → accent coral */
.sparkline-wrap rect {
  stroke: #D4714A !important;
  fill: #D4714A !important;
}

.sparkline-wrap path,
.sparkline-wrap line,
.sparkline-wrap polyline,
.sparkline-wrap circle {
  stroke: #D4714A !important;
  fill: none !important;
}

.sparkline-wrap svg [stroke] {
  stroke: #D4714A !important;
}