# The Glow-Up Guide: Dashboards That Look Like Someone Cared (2026)

An unofficial house style, cooked up by a few SEs. It is not official Tableau or Salesforce guidance, and neither company has reviewed or endorsed it. It's a set of opinions that tend to make dashboards, Data Apps and demo assets look better. Written for AI agents (Claude, Cursor, etc.) and the people driving them.

Take what helps, skip what doesn't. Feedback: tell whoever shared this link with you.

## How to use this
Follow these rules unless the user asks for something different. If a user request conflicts with a rule, do what they asked and briefly mention the tradeoff. Values marked **default** are starting points, not law. Rules explain their reason so you can make a good call when the situation differs.

North star: **make the important thing obvious, the deeper thing discoverable, the interaction trustworthy, and the next decision easier.**

## 1. Principles
1. **Decision first.** Design for a question or decision, not a pile of charts. A viewer should know in ~5 seconds: what am I looking at, what matters, why, what next.
2. **Progressive disclosure.** Orient first (headline, 1–3 KPIs, main pattern), explain second (breakdowns, comparisons), investigate last (tables, filters, methodology). Don't show everything because you can.
3. **Accessible by default.** Target WCAG 2.2 AA. Meaning never depends on color alone or on hover alone.
4. **Adaptive.** Design for the real surface (stage, Salesforce panel, desktop, phone), not one universal size.
5. **Trust is part of the interface.** Governed metrics, visible filters and timeframe, clear definitions. For AI output, show what it used and separate fact from interpretation.
6. **Fast is a feature.** Fewer views, marks and filters. Summary first, detail on demand.

## 2. Titles say the takeaway
- Weak: "Monthly Net Sales". Better: "Monthly Net Sales by Region". Best: "West leads sales, while Midwest has grown fastest since July".
- Title = takeaway or question. Subtitle = scope and qualifiers (timeframe, filters, units). Annotation = unusual events. Chart = the evidence.
- Put the minimum orientation on the page itself: what it's for, timeframe or freshness, active filters. Use an info/about affordance only for methodology, definitions, ownership and caveats.

## 3. Layout and spacing
- Group by proximity and whitespace first. Add borders or cards only for genuinely independent units. Don't wrap every chart, KPI and filter in its own card.
- **Default** spacing scale (px): 4, 8, 12, 16, 24, 32. Default page background `#F5F5F5`, surfaces `#FFFFFF`, subtle border `#E6E6E6`.
- Avoid scroll bars inside dashboards. Test at the real container size. Embedded in a Salesforce panel: assume at least 900x600 and test in place.
- Stage or video demo capture preset: 1280x720 (16:9) logical resolution. That's a demo preset, not a design rule.

## 4. Color
- Be intentional. Gray for the unimportant so the one thing in color stands out. Use color consistently: same category, same color everywhere.
- Categorical for unordered groups (fewer than ~6). Sequential for magnitude with no midpoint. Diverging only with a meaningful midpoint.
- Never use color as the only encoding for important meaning. Pair with labels, icons, shape, line style or position.
- **Default mark palettes** (for marks, not for text; many light tints fail text contrast):
  - Categorical: `#0D9DDA` `#9D53F2` `#26ABA4` `#F7A452` `#F2536D` (lighter pairs: `#77B5F2` `#C398F5` `#4ED4CD` `#FACA9B` `#F598A7`)
  - Sequential: `#DBEEFF` `#A3D3FF` `#6FB9FC` `#3B9BEF` `#2488E0` `#0E70C7`
  - Diverging: `#EB7F13` `#F7A452` `#FACA9B` `#F1F1F1` `#77B5F2` `#3290ED` `#0E70C7`
  - Neutral: `#F3F3F3` `#C9C9C9` `#939393` `#5C5C5C` `#2E2E2E` `#000000`
- Semantic roles to use in code: text-primary `#080707`, text-secondary `#3E3E3C`, text-muted `#706E6B`, positive, warning, negative, selection, focus. Define each once and reuse.
- Text and key UI boundaries must meet WCAG AA contrast.

## 5. Typography
- One font family per experience. Salesforce-embedded: follow current SLDS. Tableau-branded: Tableau Book or Salesforce Sans where available. Web or Data Apps: `'Salesforce Sans', 'Tableau Book', -apple-system, 'Segoe UI', Arial, sans-serif` (the fallback is what makes it render reliably).
- Use a small set of sizes by role: page title, section title, chart title, body, label, metadata, tooltip. **Default** web sizes: title 22–24 bold, section 16 bold, body 14, labels 12, metadata 12 muted. Avoid going smaller than 12.
- No underline except links. No long all-caps text (a short eyebrow label is fine). Bold for emphasis. Left-align text.

## 6. Numbers
- Match precision to the question. Compact units K, M, B (1.0K, 10.0M, 1.0B) when appropriate. Show full precision in the tooltip or detail.
- Units always explicit. Locale-aware currency and dates. Align comparable numbers the same way.
- A KPI needs context: value, label, comparison (vs plan or prior), period. Example: **$18.6M** Net Sales, +8.4% vs plan, Q3. Ask "which KPI would change a decision if it moved?" and give that one priority. Don't show 8 KPIs when 2 matter.
- One hero KPI can be centered. A row of KPIs should align on a grid.

## 7. Choosing the chart (by task)
- Compare: bars, dots, lollipops, small multiples. Trend: line (area if composition matters). Distribution: histogram, box, dot plot. Relationship: scatter. Exact lookup, ranking, audit: a table (tables are fine). Geography: a map only when *where* matters.
- Part-to-whole: stacked or 100% bars. Pie or donut only for 2–4 obvious shares that total 100% with clear labels. Never multiple pies to compare changing distributions.
- Bar charts start at zero. Don't change axis ranges silently after filters.
- Use the minimum reference structure needed to read accurately. Remove redundant gridlines, keep light ones that help estimate values. Remove an axis only when values are directly labeled.
- Label directly before using a legend. Prioritize readable text over exact color matching (dark text plus a small swatch is fine). Use one dominant color to focus attention.

## 8. Interaction
- Make obvious: what is clickable, what is selected, what is filtered, how to reset, what changed.
- Hover can enhance, but anything important must also work by click, tap, focus and keyboard. Never require hover to get the main message.
- Put frequent filters near what they control. Hide secondary ones. Show active filters and a Reset. Plain-language labels ("Select a date range"). Pick the date control by task: relative for monitoring, range for investigation, presets for business cadences.
- Tooltips add depth, they never rescue the chart. Custom, short, no field dumps, never the only place critical info lives.

## 9. Accessibility minimums
- Contrast meets AA. Meaning not carried by color alone. Logical reading and focus order. Visible focus and selected states. Large enough hit areas.
- Provide a plain-text description of the key takeaway and alt text for charts. Motion only to explain change, no auto-advancing content.

## 10. AI, Data Apps and generated assets
- Use governed fields, calculations and metrics from the datasource. Never fabricate data.
- Any number you calculate yourself in code (ratios, rates, rounding, filters, top-N, time grain) should be listed in a short "calculated by AI" note with its formula, so the next person gets the same result. Suggest datasource metrics or calculated fields that would replace them.
- Separate **Observed** (facts), **Interpreted** (what it likely means) and **Recommended** (what to do). Don't mix them.
- Show source, timeframe and active filters. Offer "why" and "show calculation" on demand rather than a wall of text.
- Say plainly when you can't answer. Distinguish "no data" from "no issue". Don't bluff.
- Loading and failure messages are specific ("Querying Tableau…", "Building the visualization…", "Publishing the Data App…") and say what happened, what to do next, and what is preserved. Don't blame "permissions" generically.
- Confirm before consequential actions (publish, send, delete). Support retry, refine and undo.
- Prefer approved patterns and components over inventing a new look each time. Follow the same design rules as hand-built dashboards.
- Data Apps specifics: CSS inline, data only via the Extensions API, no hover-only meaning, sensible text sizes, keep the layout responsive.

## 11. Demo craft (live or recorded)
- Rehearse the click path. Hide browser chrome, bookmarks, notifications and private history. Use a clean browser profile. Close Show Me and Data Guide unless featured. Keep cursor movement and animation minimal.
- Use dynamic or revolving dates so the demo doesn't visibly age. Preflight authentication and data freshness. Keep known-good starter prompts, a reset path, and a backup (recording or alternate environment) for risky live AI or network steps.
- Never show credentials, internal URLs or private browser history. Test on the real display or stream.

## 12. Final check (answer yes before shipping)
- Does the title state the takeaway, and is the main message clear in ~5 seconds?
- Is the chart type right for the task, with an honest baseline and minimal scaffolding?
- Does color have a job, and does the meaning survive without it?
- Is text legible, with a clear hierarchy and consistent number formats?
- Can the user see what's selected or filtered and reset it? Does anything critical depend on hover?
- Contrast, focus order and text alternatives handled?
- Is it fast enough for the first useful state?
- For AI output: is it clear AI was used, are sources and self-calculated numbers visible, are facts separated from interpretation, and is there confirmation before consequential actions?
- For demos: dates current, auth preflighted, backup ready?