Sales Pipeline and Performance
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 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.
sales_pipeline_theme.theme.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
}
}
}
}
The theme is paired with custom CSS, which lives beside it rather than inside it. See Custom CSS for where it goes.
Custom 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 <span class="t-lime">$434K</span> 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;
}