Skip to main content

Mouka MRR Dashboard

Revenue & finance · Light · Tabbed

A subscription revenue dashboard that looks like a shipped SaaS product. If you want a reference for a polished light theme, start here.

What makes it work​

  • Warm cream and coral on white, with the accent colour used sparingly so it still means something when it appears.
  • A disciplined type scale: three sizes, and thin section rules instead of card borders.
  • The metric tree tab shows how the headline number decomposes. That is hard to do well and rare to see.
  • A cohort retention grid and a revenue movement waterfall carry the analysis using built-in charts only.

The views​

Each tab is shown below at full width.

Overview​

Mouka MRR Dashboard: Overview

Revenue Movement​

Mouka MRR Dashboard: Revenue Movement

Churn and Retention​

Mouka MRR Dashboard: Churn and Retention

Customers and Segments​

Mouka MRR Dashboard: Customers and Segments

Metric Tree​

Mouka MRR Dashboard: Metric Tree

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.

mouka_mrr_theme.theme.aml
PageTheme mouka_mrr_theme {
  background {
    bg_color: "#EADFD9"
  }
  canvas {
    border {
      border_color: "#E8E0D8"
      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: "#FBF9F7"
    }
  }
  block {
    text {
      font_size: 20
      font_color: "#4B4340"
      font_style: "normal"
      font_family: "Plus Jakarta Sans"
      font_weight: "normal"
    }
    label {
      font_size: 13
      font_color: "#4B4340"
      font_style: "normal"
      font_family: "Plus Jakarta Sans"
      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: "#F2ECE4"
        font_size: 16
        font_color: "#4B4340"
        font_weight: "bold"
      }
      general {
        bg_color: "#FFFFFF"
        font_size: 18
        font_color: "#374151"
        font_family: "Inter"
        hover_color: "#F9F5F0"
        banding_color: "#FFFFFF"
        grid_color: "#F0EAE2"
        border_color: "#E8E0D8"
        border_width: 1
      }
      sub_title {
        font_size: 16
        font_color: "#6B7280"
        font_weight: "normal"
      }
      sub_header {
        bg_color: "#F9F5F0"
        font_size: 18
        font_color: "#897669"
        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=Merriweather:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

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

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

.dac-text-block h2 {
  font-family: 'Merriweather', sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #312520 !important;
  line-height: 1.3 !important;
  margin: 0 0 4px 0 !important;
}

.dac-text-block h3 {
  font-family: 'Merriweather', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #CCC0B2 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

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

.dac-text-block p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #6B7280 !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 ───────────────────────────────────────────── */
.dac-viz-block-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 32px;
  color: #312520 !important;
  letter-spacing: -0.2px !important;
  display: flex !important;
  align-items: center !important;
  padding: 24px 8px 12px 8px !important;
  margin-top: 18px;
  margin-bottom: 32px;
}

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

.setting-wrapper .truncate.whitespace-pre {
  font-size: 16px !important;
  color: #CE5531 !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: #E8E0D8 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
}

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

.dac-ic-block-label {
  color: #FFFFFF !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: #766051 !important;
  background-color: #F8F2ED !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;
  color: #2A2522 !important;
}

#block-v_wyca .text-row {
  font-weight: 500 !important;
  color: #766051 !important;
}

/* ── MetricSheet title ───────────────────────────────────────── */
#block-v_wyca .metric-sheet-title {
  font-weight: 700 !important;
  color: #423935 !important;
}

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

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

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

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

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

/* [1] LABEL — "TOTAL MRR" top text */
.mrr-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;                /* label size */
  font-weight: 600 !important;               /* label weight */
  color: #978A81 !important;              /* label color */
  text-transform: uppercase !important;       /* UPPERCASE style */
  letter-spacing: 0.08em !important;          /* letter spacing */
  margin: 0 !important;                       /* spacing */
}

/* [2] VALUE — "65,830.37" big number */
.mrr-value {
  font-family: 'Merriweather', Georgia, serif !important;
  font-size: 40px !important;                /* value size */
  font-weight: 700 !important;               /* value weight */
  color: #312520 !important;                  /* value color */
  letter-spacing: -0.5px !important;          /* tighten spacing */
  line-height: 1 !important;                  /* line height */
  margin-top: 8px !important;                 /* spacing above value */
}

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



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

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

/* ── Chart VizBlock top padding (tab by tab) ────────────────── */

/* Tab 1: Overview */
#block-t1_mrr_time,
#block-t1_waterfall {
  padding-top: 32px !important;
}

/* Tab 2: Revenue Movements */
#block-t2_movement,
#block-t2_new_vs_churn,
#block-t2_exp_contr {
  padding-top: 32px !important;
}

/* Tab 3: Churn & Retention */
#block-t3_churn_rates,
#block-t3_cust_churn_trend,
#block-t3_nrr_trend,
#block-t3_churn_reason,
#block-t3_cohort,
#block-t3_churned_accounts {
  padding-top: 32px !important;
}

/* Tab 4: Customers & Segments */
#block-t4_plan_cards,
#block-t4_mrr_industry,
#block-t4_mrr_region,
#block-t4_concentration {
  padding-top: 32px !important;
}

/* Tab 5: Deep Dive */
#block-v_qao4,
#block-v_e2y6 {
  padding-top: 32px !important;
}

/* ── Chart top spacing (Vega-Lite svg.marks) ─────────────────── */
svg.marks {
  transform: translateY(16px) !important;
}

/* ── Canvas bg override ─────────────────────────────────────────── */
.dac-canvas {
  background-color: #FBFAF8 !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;
}

/* ── Info Tooltip Icons ──────────────────────────────────────── */
.info-icon-wrap {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.info-icon-wrap .info-icon-btn {
  width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  display: block;
}
.info-icon-wrap:hover .info-icon-btn {
  opacity: 0.85;
}
.info-icon-wrap .info-tip {
  position: absolute;
  width: 280px;
  background: #FFFFFF;
  border: 1px solid #E8E0D8;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(75, 67, 64, 0.12);
  padding: 16px 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.info-icon-wrap:hover .info-tip {
  opacity: 1;
  visibility: visible;
}
.info-icon-wrap .info-tip::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
.info-icon-wrap .info-tip.pos-right {
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
}
.info-icon-wrap:hover .info-tip.pos-right {
  left: calc(100% + 14px);
}
.info-icon-wrap .info-tip.pos-right::after {
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #FFFFFF;
}
.info-icon-wrap .info-tip.pos-left {
  top: 50%;
  right: calc(100% + 10px);
  left: auto;
  transform: translateY(-50%);
}
.info-icon-wrap:hover .info-tip.pos-left {
  right: calc(100% + 14px);
}
.info-icon-wrap .info-tip.pos-left::after {
  top: 50%;
  right: -6px;
  left: auto;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #FFFFFF;
}
.info-icon-wrap .info-tip.pos-top {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}
.info-icon-wrap:hover .info-tip.pos-top {
  bottom: calc(100% + 14px);
}
.info-icon-wrap .info-tip.pos-top::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #FFFFFF;
}
.info-icon-wrap .info-tip.pos-bottom {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}
.info-icon-wrap:hover .info-tip.pos-bottom {
  top: calc(100% + 14px);
}
.info-icon-wrap .info-tip.pos-bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #FFFFFF;
}
.info-icon-wrap .info-tip-header {
  font-size: 14px;
  font-weight: 600;
  color: #4B4340;
  margin-bottom: 12px;
  line-height: 1.3;
}
.info-icon-wrap .info-tip-section {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #E8E0D8;
}
.info-icon-wrap .info-tip-section:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.info-icon-wrap .info-tip-label {
  font-size: 11px;
  font-weight: 600;
  color: #978A81;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  line-height: 1;
}
.info-icon-wrap .info-tip-body {
  font-size: 13px;
  font-weight: 400;
  color: #374151;
  line-height: 1.5;
}
.info-icon-wrap .info-tip-body code {
  font-size: 12px;
  background: #F9F5F0;
  padding: 1px 5px;
  border-radius: 4px;
  color: #4B4340;
  font-family: 'JetBrains Mono', monospace;
}
Open Markdown
Let us know what you think about this document :)