# Sales Pipeline and Performance

> The highest-contrast page in the gallery, and the one that reads best from across a room.

**Sales · Dark · Tabbed**

The highest-contrast page in the gallery, and the one that reads best from across a room. A good reference for a dark theme that stays legible.

## What makes it work

- A dark navy ground with one acid-lime accent. Restricting a dark theme to a single accent is what keeps it readable.
- The KPI band sits above the fold on every tab, with each comparison figure directly beneath its number.
- A funnel-by-stage bar chart carries the pipeline story instead of a table.
- Charts get generous padding, which stops the dark ground from feeling heavy.

## The views

Each tab is shown below at full width.

### Overview

### Pipeline

### Team

### Customers

## See it live

[Open the live dashboard](https://demo4.holistics.io/dashboards/v4/114244-sales-pipeline-performance?_pl=4fce006e5f1b0f4eaa12431c) 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>sales_pipeline_theme.theme.aml</summary>

```aml
PageTheme sales_pipeline_theme {
  background {
    bg_color: "#080A10"
  }
  canvas {
    border {
      border_color: "#1A1E30"
      border_style: "solid"
      border_width {
        top: 1
        left: 1
        right: 1
        bottom: 1
      }
      border_radius {
        top_left: 20
        top_right: 20
        bottom_left: 20
        bottom_right: 20
      }
    }
    shadow: "md"
    opacity: 1
    background {
      bg_color: "#0F1120"
    }
  }
  block {
    text {
      font_size: 12
      font_color: "#8090BA"
      font_family: "Space Grotesk"
      font_weight: "normal"
    }
    label {
      font_size: 11
      font_color: "#6878A0"
      font_family: "Space Grotesk"
      font_weight: "semibold"
    }
    border {
      border_color: "#1C2238"
      border_style: "solid"
      border_width {
        top: 1
        left: 1
        right: 1
        bottom: 1
      }
      border_radius {
        top_left: 16
        top_right: 16
        bottom_left: 16
        bottom_right: 16
      }
    }
    shadow: "sm"
    opacity: 1
    padding {
      top: 24
      left: 24
      right: 24
      bottom: 24
    }
    background {
      bg_color: "#161A27"
    }
  }
  viz {
    table {
      header {
        bg_color: "#161A27"
        font_size: 11
        font_color: "#6878A0"
        font_weight: "semibold"
      }
      general {
        bg_color: "#161A27"
        font_size: 11
        font_color: "#8090BA"
        font_family: "Space Grotesk"
        hover_color: "rgba(255,255,255,0.018)"
        banding_color: "rgba(28,34,56,0.40)"
        grid_color: "rgba(28,34,56,0.50)"
        border_color: "#1C2238"
        border_width: 1
      }
    }
  }
}
```

</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
/* ── Font import — swap for Lufga raw GitHub URL once hosted ──────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ── Global font application ───────────────────────────────────────── */
.dac-viz-block,
.dac-ic-block,
.dac-text-block,
.h-kpi-metric-kpi,
.h-kpi-metric-label {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* ── Block label: uppercase spaced ────────────────────────────────── */
.dac-viz-block-label,
.dac-ic-block-label {
  font-size:      11px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color:          #6878A0 !important;
}

/* ── KPI metric ────────────────────────────────────────────────────── */
.h-kpi-metric-kpi {
  font-size:      32px;
  font-weight:    700 !important;
  letter-spacing: -0.025em !important;
  line-height:    1 !important;
}
.h-kpi-metric-label {
  font-size:      11px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color:          #6878A0 !important;
}
.h-kpi-metric-diff.positive { color: #CAFF00 !important; font-size: 11px !important; }
.h-kpi-metric-diff.negative { color: #D4536A !important; font-size: 11px !important; }

/* ── Table: tighter text, clean borders ────────────────────────────── */
.h-table-chart th {
  font-size:      11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color:          #6878A0 !important;
  border-bottom:  1px solid #1C2238 !important;
  padding:        0 10px 10px !important;
}
.h-table-chart td {
  font-size:   11.5px !important;
  color:       #8090BA !important;
  padding:     11px 10px !important;
  border-bottom: 1px solid rgba(28,34,56,0.5) !important;
}
.h-table-chart tr:hover td {
  background: rgba(255,255,255,0.018) !important;
}

/* ── Filter dropdown: dark, clean ──────────────────────────────────── */
.dac-ic-block {
  background:   #161A27 !important;
  border-color: #1C2238 !important;
  border-radius: 12px !important;
}
.dac-ic-block select,
.dac-ic-block input {
  background:   #0C0E15 !important;
  color:        #E8ECFF !important;
  border-color: #1C2238 !important;
  font-family:  'Space Grotesk', system-ui, sans-serif !important;
  font-size:    11px !important;
}

/* ── DateDrill block: lime active tab ───────────────────────────────── */
.dac-date-drill-tab.active,
.dac-date-drill-tab:checked + label {
  color:        #CAFF00 !important;
  border-color: #CAFF00 !important;
}

/* ── Canvas: subtle lime top edge ──────────────────────────────────── */
.dac-canvas {
  border-top: 1px solid rgba(202,255,0,0.08) !important;
}

/* ── Scrollbar: minimal dark ─────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1C2238; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8090BA; }

/* ── Utility helpers for TextBlock content ──────────────────────────── */
/* Usage: wrap text in $434K inside @md blocks */
.t-lime  { color: #CAFF00 !important; }
.t-blue  { color: #4F6EF5 !important; }
.t-red   { color: #D4536A !important; }
.t-muted { color: #6878A0 !important; font-size: 11px !important; }
.t-label {
  font-size:      11px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color:          #6878A0 !important;
}
/* Lime-accent KPI card variant — add class to a TextBlock */
.card-accent-lime {
  background:   #CAFF00 !important;
  border-color: #CAFF00 !important;
  color:        #0A0C15 !important;
}
/* Blue-accent KPI card variant */
.card-accent-blue {
  background:   #3B59D5 !important;
  border-color: #3B59D5 !important;
  color:        #ffffff !important;
}
```

</details>