# User Engagement

> A restrained page that barely departs from the default theme, and is better for it.

**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](https://demo4.holistics.io/dashboards/v4/114241-user-engagement?_pl=3129f7d7f543ce7e96012e46) 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](/docs/admin/dashboard-themes/color-palettes), so they are not included here.

<details>
<summary>user_engagement_theme.theme.aml</summary>

```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"
      }
    }
  }
}
```

</details>

The theme is paired with custom CSS, which lives beside it rather than inside it. See
[Custom CSS](/docs/admin/dashboard-themes/custom-css) for where it goes.

<details>
<summary>Custom CSS</summary>

```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;
}
```

</details>