# Customer Support and CSAT
> A support dashboard that does not look like a ticket queue.
**Customer support · Light · Single page**
A support dashboard that does not look like a ticket queue. The branding is consistent enough that it reads as a product rather than a report.
## What makes it work
- A lilac and pink palette with a paw-print mark, applied to headers, chips, and chart series alike.
- Annotation copy sits beside each panel explaining what to look at, which is rarer than it should be.
- CSAT is shown as a distribution rather than a single average, so the shape of the feedback stays visible.
- A reminder that internal-facing dashboards can carry a brand too.
## 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/114232-customer-support-csat-pawductive?_pl=8b483b6cf04d89f80438dd3f) 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.
customer_support_csat_theme.theme.aml
```aml
PageTheme customer_support_csat_theme {
title: "Pawductive Purple"
background {
bg_image: "linear-gradient(50deg, rgba(136, 117, 169, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%)"
}
canvas {
border {
border_color: "#cec9d9"
border_style: "solid"
border_width {
top: 1
left: 1
right: 1
bottom: 1
}
border_radius {
top_left: 8
top_right: 8
bottom_left: 8
bottom_right: 8
}
}
shadow: "sm"
opacity: 1
background {
bg_color: "rgba(255, 255, 255, 0.6)"
}
}
block {
text {
font_size: 14
font_color: "#6b6880"
font_style: "normal"
font_family: "Geist"
font_weight: "normal"
}
label {
font_size: 13
font_color: "#3d3c4f"
font_style: "normal"
font_family: "Geist"
font_weight: "semibold"
}
border {
border_color: "#cec9d9"
border_style: "solid"
border_width {
top: 1
left: 1
right: 1
bottom: 1
}
border_radius {
top_left: 8
top_right: 8
bottom_left: 8
bottom_right: 8
}
}
shadow: "sm"
opacity: 1
padding {
top: 16
left: 16
right: 16
bottom: 16
}
background {
bg_color: "#ffffff"
}
}
viz {
table {
header {
bg_color: "#f8f7fa"
font_size: 12
font_color: "#3d3c4f"
font_weight: "semibold"
}
general {
bg_color: "#ffffff"
font_size: 13
font_color: "#3d3c4f"
font_family: "Geist"
hover_color: "#f1eff5"
banding_color: "#f8f7fa"
grid_color: "#eae7f0"
border_color: "#cec9d9"
border_width: 1
}
sub_title {
font_size: 11
font_color: "#6b6880"
font_weight: "normal"
}
sub_header {
bg_color: "#f1eff5"
font_size: 12
font_color: "#6b6880"
font_weight: "normal"
}
}
}
}
```
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.
Custom CSS
```css
/* ── Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Geist:wght@400;500;600;700&display=swap');
/* ── Typography hierarchy (H1 > H2 > H3 > H4 > p) ─────────────── */
.dac-text-block h1 {
font-family: 'Lora', Georgia, serif !important;
font-size: 36px !important;
font-weight: 700 !important;
color: #3d3c4f !important;
line-height: 1.2 !important;
margin: 0 0 8px 0 !important;
}
.dac-text-block h2 {
font-family: 'Lora', Georgia, serif !important;
font-size: 28px !important;
font-weight: 600 !important;
color: #3d3c4f !important;
line-height: 1.3 !important;
margin: 0 0 6px 0 !important;
}
.dac-text-block h3 {
font-family: 'Lora', sans-serif !important;
font-size: 20px !important;
font-weight: 600 !important;
color: #6b6880 !important;
line-height: 1.4 !important;
margin: 0 0 4px 0 !important;
}
.dac-text-block h4 {
font-family: 'Geist', sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #3d3c4f !important;
line-height: 1.5 !important;
margin: 0 0 2px 0 !important;
}
.dac-text-block p {
font-family: 'Geist', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #6b6880 !important;
line-height: 1.6 !important;
margin: 0 !important;
}
/* ── Viz block labels ───────────────────────────────────────────── */
.dac-viz-block-label {
font-family: 'Geist', sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #3d3c4f !important;
letter-spacing: -0.1px !important;
padding: 16px 8px 12px 8px !important;
}
/* ── KPI value styling ──────────────────────────────────────────── */
.kpi-value {
font-family: 'Lora', Georgia, serif !important;
font-size: 32px !important;
font-weight: 700 !important;
color: #3d3c4f !important;
letter-spacing: -0.5px !important;
line-height: 1 !important;
}
.kpi-label {
font-family: 'Geist', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #6b6880 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* ── Filter styling ─────────────────────────────────────────────── */
.dm-filter-form {
border-color: #cec9d9 !important;
border-radius: 8px !important;
font-family: 'Geist', sans-serif !important;
}
.dm-filter-form mark.active {
color: #8a79ab !important;
background-color: #dfd9ec !important;
font-weight: 500 !important;
border-radius: 4px !important;
padding: 2px 6px !important;
}
```