# Finance Overview

> Finance reporting that still looks like a designed document.

**Revenue & finance · Light · Single page**

Finance reporting that still looks like a designed document. Useful when the numbers have to be exact and the page has to be presentable at the same time.

## What makes it work

- A profit and loss waterfall shows how the top line becomes the bottom line in one chart.
- The statement table carries inline sparklines, so every row has its own trend without a second chart.
- A cash runway panel sits apart from the statement, which stops a forward-looking number from being read as history.
- Violet branding is applied to headers and accents only. The numbers stay in neutral text.

## The views

This dashboard is a single scrolling page, shown in full below.

## See it live

[Open the live dashboard](https://demo4.holistics.io/dashboards/v4/114235-finance-overview?_pl=2be054f2e3d056e702a92fcb) 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>finance_overview_theme.theme.aml</summary>

```aml
PageTheme finance_overview_theme {
  background {
    bg_color: "#E0D9FF"
  }
  canvas {
    border {
      border_color: "#B8C2DE"
      border_style: "solid"
      border_width {
        top: 2
        left: 2
        right: 2
        bottom: 2
      }
      border_radius {
        top_left: 12
        top_right: 12
        bottom_left: 12
        bottom_right: 12
      }
    }
    shadow: "md"
    opacity: 1
    background {
      bg_color: "#FFFFFF"
    }
  }
  block {
    text {
      font_size: 14
      font_color: "#1B2559"
      font_style: "normal"
      font_family: "Plus Jakarta Sans"
      font_weight: "normal"
    }
    label {
      font_size: 14
      font_color: "#1B2559"
      font_style: "normal"
      font_family: "Plus Jakarta Sans"
      font_weight: "semibold"
    }
    border {
      border_color: "#E2E8F0"
      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: "sm"
    opacity: 1
    padding {
      top: 20
      left: 20
      right: 20
      bottom: 20
    }
    background {
      bg_color: "#FFFFFF"
    }
  }
  viz {
    table {
      header {
        bg_color: "#7638FF"
        font_size: 14
        font_color: "#FFFFFF"
        font_weight: "semibold"
      }
      general {
        bg_color: "#D3C4FF"
        font_size: 14
        font_color: "#1B2559"
        font_family: "Plus Jakarta Sans"
        hover_color: "#F5F0FF"
        banding_color: "#FFFFFF"
        grid_color: "#C9D0E8"
        border_color: "#C9D0E8"
        border_width: 1
      }
      sub_title {
        font_size: 14
        font_color: "#FFFFFF"
        font_weight: "normal"
      }
      sub_header {
        bg_color: "#F0EBFF"
        font_size: 14
        font_color: "#1B2559"
        font_weight: "semibold"
      }
    }
  }
}
```

</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
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

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

  /* H1 — Section label: uppercase purple */
  .dac-text-block h1 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #7638FF !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
  }

  /* H2 — Dashboard / section title */
  .dac-text-block h2 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1B2559 !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.3px !important;
  }

  /* H3 — Hero KPI display number */
  .dac-text-block h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #1B2559 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -1.5px !important;
    text-align: left !important;
  }

  /* P — Supporting / description text */
  .dac-text-block p {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    color: #6B7A99 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  /* ── Section header with accent bar ─────────────────────────────────── */
  .dac-text-block .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .dac-text-block .accent-bar {
    width: 3px;
    height: 24px;
    background: #7638FF;
    border-radius: 2px;
    flex-shrink: 0;
  }

  /* ── Section separator line ──────────────────────────────────────────── */
  /* Usage in a Text Block:  */
  .dac-text-block hr {
    border: none !important;
    border-top: 1.5px solid #E2E8F0 !important;
    margin: 0 !important;
  }

  /* ── KPI metric value ────────────────────────────────────────────────── */
  .h-kpi-metric-kpi {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #1B2559 !important;
    letter-spacing: -1px !important;
  }

  /* KPI metric label (sits below the number) */
  .h-kpi-metric-label {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 3 !important;
    color: #6B7A99 !important;
    margin-bottom: 16px !important;
  }

  /* ── Chart / viz block title ─────────────────────────────────────────── */
  .dac-viz-block-label {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    color: #1B2559 !important;
    letter-spacing: -0.2px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
    padding-left: 8px !important;
  }

  .dac-canvas {
    background-color: #FFFFFF !important;
  }

  /* ── P&L Table: section separator on parent rows only ───────────────── */
  /*
   * Parent rows (Total Revenue, COGS, Gross Profit…) use a BAR sparkline.
   * Sub-rows (SaaS Subscriptions…) use a LINE sparkline.
   * :has([data-ci="ci-sparkline-bar"]) reliably targets only parent rows.
   */
  /* Background on the row itself — covers full width including absolute-positioned cells */
  .ag-row:has([data-ci="ci-sparkline-bar"]) {
    background-color: #F7F5FF !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Border-top and font on the cells */
  .ag-row:has([data-ci="ci-sparkline-bar"]) .ag-cell {
    border-top: 1.5px solid #C9D0E8 !important;
    font-weight: 600 !important;
    color: #1B2559 !important;
    background-color: transparent !important;
  }

  /* Remove top border from the very first parent row (Total Revenue) */
  .ag-row-first:has([data-ci="ci-sparkline-bar"]) .ag-cell {
    border-top: none !important;
  }

  /* Right pane — parent row background */
.ag-center-cols-container [role="row"][row-index="0"],
.ag-center-cols-container [role="row"][row-index="4"],
.ag-center-cols-container [role="row"][row-index="5"],
.ag-center-cols-container [role="row"][row-index="6"],
.ag-center-cols-container [role="row"][row-index="11"],
.ag-center-cols-container [role="row"][row-index="14"] {
  background-color: #F7F5FF !important;
}

/* Font on all parent rows */
.ag-center-cols-container [role="row"][row-index="0"] .ag-cell,
.ag-center-cols-container [role="row"][row-index="4"] .ag-cell,
.ag-center-cols-container [role="row"][row-index="5"] .ag-cell,
.ag-center-cols-container [role="row"][row-index="6"] .ag-cell,
.ag-center-cols-container [role="row"][row-index="11"] .ag-cell,
.ag-center-cols-container [role="row"][row-index="14"] .ag-cell {
  font-weight: 600 !important;
  color: #1B2559 !important;
}

/* Border-top on all except first row */
.ag-center-cols-container [role="row"][row-index="4"] .ag-cell,
.ag-center-cols-container [role="row"][row-index="5"] .ag-cell,
.ag-center-cols-container [role="row"][row-index="6"] .ag-cell,
.ag-center-cols-container [role="row"][row-index="11"] .ag-cell,
.ag-center-cols-container [role="row"][row-index="14"] .ag-cell {
  border-top: 1.5px solid #C9D0E8 !important;
}
```

</details>