--- name: pbi-report-design description: The Power BI report design canon covering design identity, visual hierarchy and the 3-30-300 rule, layout/spacing/alignment, color discipline, chart selection, KPI and card design, tables and matrices, accessibility, and the closing design gate. The shared reference home for report design judgment, routed to by the create-pbi-report, pbir-cli, review-report, modifying-theme-json, and custom-visual skills. Load when committing a design identity or making a design, layout, color, chart-selection, or accessibility decision for a report. ---

# Power BI Report Design

> **Use `pbir` for every report mutation.** The `pbir-format` skill is read-only schema context. > If the CLI is unavailable or lacks an operation, stop and report the gap.

Best practices and guidelines for Power BI report design. Follow these guidelines strictly to avoid generic, poorly formatted reports ("Power BI Slop").

Be innovative, pushing boundaries while adhering to data visualization rules and guidelines. Work within Power BI's constraints, aiming for simplicity and effectiveness over aesthetics and decoration. Focus reports, pages, and visuals on answering specific questions and minimizing cognitive load -- not on looking "pretty and impressive".

When a user request contradicts these guidelines, push back and explain better alternatives. The goal is to inform the user of options that lead to improved outcomes.

## Design identity (commit before layout)

Before any layout work, lock the report's identity so every later choice has something to cite:

1. **Pick one tone** ... a committed ink budget (`restrained`, `corporate`, `editorial`, or `technical`) that fixes accent count, saturation, gridline weight, and how forward annotation gets 2. **Pick one signature** (two at most) ... a single recurring element (header band, single-accent-hue rule, fixed nav rail, KPI silhouette, callout style, target-line convention) repeated identically on every page, so the report reads as one artifact 3. **Route each page to one shape** by the question it answers (`summary`, `monitoring`, `exploration`, `comparison`, `narrative`)

Recording tone and signature once is what turns "use muted colors" into a propagating decision. See `references/design-identity.md` for the tone budgets and signature catalog, and `references/page-shapes.md` for routing each page to a shape. Serialize the identity into the theme via the `modifying-theme-json` skill, not into per-visual overrides.

## Core rules

1. **3-30-300 Rule:** The most important and least detailed information should be in the top-left (KPIs, cards, etc.) while the least important and most detailed information should be in the bottom-right 2. **Titles:** All report pages should have a title using a `textBox` visualType or a title in a background image added to the report page canvas 3. **Visual positioning, alignment, and spacing:** All visuals must have equal spacing between them and equal spacing between the edge of the page (the margin). If visuals are unaligned or this spacing is unequal, fix it to ensure alignment and equal spacing 4. **Themes:** Reports should use a theme that differs from the default Power BI themes; a suggested theme is the `sqlbi` theme (see the `modifying-theme-json` skill for applying templates). Themes are preferred because they provide a set of default styles for all charts that can adhere to good design practices and brand or style guidelines 5. **Semantic Models:** Reports in Power BI are complex. They are dependant on an underlying semantic model (either in the .SemanticModel folder, called a "thick report" or a published model in Power BI/Fabric, called a "thin report"). Much of the functionality from a Power BI report comes from its semantic model design or DAX code 6. **Report extensions, or thin report measures:** It is possible to create calculation logic in Power BI report, called "thin report measures" or "visual calculations". These should be used sparingly and only for "report-specific" scenarios 7. **Visual fields:** All data visuals should have field bindings, and all field bindings should be for fields that actually exist in the model; there is no reason for visuals to exist that have no fields bound 8. **Chart selection:** Make smart choices about what visuals to use for each scenario. Visual vocabulary is essential for this skill. 9. **Use of color:** Color and formatting decisions must cite the locked identity (the chosen tone and signature), not be picked per visual. Colors come from the theme (themedataColor) rather than inline hex, so the identity propagates and re-themes cleanly. Colors should be muted and soft; colors that implicitly encode meaning (like red=bad, green=good) should be avoided unless using them for that encoding. Consider colorblindness and use accessible palettes (blues instead of greens with reds, for instance). 10. **Pre-attentive attributes:** Styles and colors should be used to steer and direct attention, and not to decorate charts. Formatting of visuals should be intentional and not purely aesthetic. Styles should where possible be stored in the theme and not in bespoke visual configuration. 11. **Fonts:** Prefer *Segoe UI* and *Segoe UI Semibold*. Do not use custom fonts, since they aren't guaranteed to render on user computers. Evaluate whether fonts are sufficiently large to be readable given the visual and page size. 12. **Page intent:** Route each page to exactly one shape by the question it answers (see `references/page-shapes.md`). A page trying to answer two questions is two pages.

## Page Layout Guidelines

### Check Page Size Before Modifying

**Always query the actual page dimensions before adding or repositioning visuals.** Do not assume a page is 1280x720 or 1920x1080 -- templates and existing reports vary. The object model validates that visuals fit within page bounds, so setting position or size without knowing the page dimensions will cause errors. Check the page's `page.json` file for `width` and `height` properties, or use the object model (`page.width`, `page.height`) to confirm dimensions first. When resizing visuals via the object model, set `width`/`height` before `x`/`y` to avoid intermediate states that exceed bounds.

### Standard Page Size

- **Width:** 1280px (default) - **Height:** 720px (16:9 aspect ratio) - Alternative: 1920x1080 for high-resolution displays

### Visual Spacing

- **Minimum gap between visuals:** 16px - **Edge margins:** 24-32px from page edges - **Consistent alignment:** Use grid-based positioning - **Equal spacing is mandatory:** Every gap between adjacent visuals (horizontal and vertical) must be the same value. Every margin from the page edge must be the same value. Calculate positions arithmetically from (margin, gap, page_width, page_height) to guarantee alignment. If visuals are misaligned or gaps are unequal, fix immediately -- this is one of the most visible quality signals in a report.

### Detail Gradient

Arrange content following the "detail gradient":

``` +------------------+------------------+ | KPIs/Cards | KPIs/Cards | <- Top: High-level, important | (Summary) | (Summary) | +------------------+------------------+ | | | Charts/Trends | <- Middle: Context, trends | (Analysis) | | | +------------------+------------------+ | | | Tables/Details | <- Bottom: Detailed data | (Drill-down) | | | +------------------+------------------+ ```

### Visual Count Guidelines

- **Maximum visuals per page:** 12-15 (performance impact) - **Maximum KPIs/Cards:** 4-6 at top - **Maximum slicers:** 3 per page (use filter pane instead)

## Page Titles

Every page should have a title. Create it through `pbir`:

```bash pbir add title "Report.Report/Page.Page" "Page Title" --width 500 ```

**Title positioning:**

- Top-left corner, inside the page margin - Enough height for the chosen font without clipping - Width: 400-600px (or page width minus margins)

## Theme Guidelines

### Always Check Theme First

Before modifying visual formatting:

1. Check theme wildcards: `visualStyles["*"]["*"]` 2. Check visual-type overrides: `visualStyles.lineChart["*"]` 3. Only override in visual.json if truly one-off

### When to Modify Theme vs Visual

- All visuals of a type need change -> theme - Establishing design standards -> theme - Single visual exception to a theme rule -> visual - Content-specific highlight (one callout, one reference line) -> visual

### Theme Color Usage

**Prefer theme colors over hex codes:**

```json // Good - uses theme color "expr": {"ThemeDataColor": {"ColorId": 1, "Percent": 0}}

// Avoid in visuals - use only in extension measures "expr": {"Literal": {"Value": "'#118DFF'"}} ```

**Semantic colors (return from extension measures):**

- `"good"` - Positive values (green) - `"bad"` - Negative values (red) - `"neutral"` - Neutral/unchanged (gray/yellow) - `"minColor"` - Gradient minimum - `"maxColor"` - Gradient maximum

## Accessibility (WCAG 2.1)

### Alt Text

All visuals should include descriptive alt text:

```json "visualContainerObjects": { "general": [{ "properties": { "altText": { "expr": {"Literal": {"Value": "'Line chart showing monthly sales trend from January to December 2024'"}} } } }] } ```

### Color Contrast

- Text on background: minimum 4.5:1 contrast ratio - Large text (18pt+): minimum 3:1 contrast ratio - Don't rely solely on color to convey meaning

### Font Sizes

- **Minimum readable:** 12pt - **Recommended for charts:** 14pt - **Titles:** 16-24pt - **KPI values:** 24-48pt

### Shadows and Motion

- Minimize drop shadows (vestibular issues) - Avoid animations where possible - Use `dropShadow.show: false` in theme wildcards

## Visual Best Practices

### Cards and KPIs

A bare number lacks meaning. Every KPI must answer "Is this good or bad?" (target + gap) and "Is it getting better or worse?" (trend). Key rules:

- Position at top or left of page, maximum 5 per page - **Prefer `kpi` visual type over `card`** when a target exists -- it has built-in indicator, goal, and trend line data roles - Always include a **target** and **gap** (absolute + percentage). If no target measure exists, discuss with the user: propose adding a prior-year measure to the semantic model (use Tabular Editor CLI or the `tmdl` skill), or creating an extension measure as a fallback. Common targets: prior year (`CALCULATE([Measure], DATEADD('Date'[Date], -1, YEAR))`), budget, or rolling average - **If no clear target exists, ask the user** -- do not leave KPIs bare. Discuss whether prior period, budget, or a custom threshold makes sense - Apply conditional formatting to the **gap**, not the primary value - Pair color with a secondary cue (arrow/icon) for accessibility - Round aggressively at summary level ("518M" not "517,893,412") - Choose **actionable metrics** that drive decisions over vanity metrics (apply the "20% change test": if this number changed 20%, should someone act differently?) - Hide redundant auto-generated subtitles - Use SVG extension measures for inline icons (see the `svg-visuals` skill in the **custom-visuals** plugin)

For complete guidance on KPI design, targets, trends, formatting hierarchy, icon implementation, accessible palettes, and anti-patterns, consult **`references/cards-and-kpis.md`**.

### Charts

- Sort by value descending (unless time-based) - Minimize gridlines and axes clutter - Use muted colors for non-essential elements - Highlight key data points sparingly

For chart-type selection (encoding hierarchy, Cleveland-McGill ranking), data-label discipline, and small-multiples guidance, consult **`references/chart-selection.md`**.

**Refuse common LLM defaults.** Gauge-as-KPI,

--- name: pbi-report-design description: The Power BI report design canon covering design identity, visual hierarchy and the 3-30-300 rule, layout/spacing/alignment, color discipline, chart selection, KPI and card design, tables and matrices, accessibility, and the closing design gate. The shared reference home for report design judgment, routed to by the create-pbi-report, pbir-cli, review-report, modifying-theme-json, and custom-visual skills. Load when committing a design identity or making a design, layout, color, chart-selection, or accessibility decision for a report. ---

# Power BI Report Design

> **Use `pbir` for every report mutation.** The `pbir-format` skill is read-only schema context. > If the CLI is unavailable or lacks an operation, stop and report the gap.

Best practices and guidelines for Power BI report design. Follow these guidelines strictly to avoid generic, poorly formatted reports ("Power BI Slop").

Be innovative, pushing boundaries while adhering to data visualization rules and guidelines. Work within Power BI's constraints, aiming for simplicity and effectiveness over aesthetics and decoration. Focus reports, pages, and visuals on answering specific questions and minimizing cognitive load -- not on looking "pretty and impressive".

When a user request contradicts these guidelines, push back and explain better alternatives. The goal is to inform the user of options that lead to improved outcomes.

## Design identity (commit before layout)

Before any layout work, lock the report's identity so every later choice has something to cite:

1. **Pick one tone** ... a committed ink budget (`restrained`, `corporate`, `editorial`, or `technical`) that fixes accent count, saturation, gridline weight, and how forward annotation gets 2. **Pick one signature** (two at most) ... a single recurring element (header band, single-accent-hue rule, fixed nav rail, KPI silhouette, callout style, target-line convention) repeated identically on every page, so the report reads as one artifact 3. **Route each page to one shape** by the question it answers (`summary`, `monitoring`, `exploration`, `comparison`, `narrative`)

Recording tone and signature once is what turns "use muted colors" into a propagating decision. See `references/design-identity.md` for the tone budgets and signature catalog, and `references/page-shapes.md` for routing each page to a shape. Serialize the identity into the theme via the `modifying-theme-json` skill, not into per-visual overrides.

## Core rules

1. **3-30-300 Rule:** The most important and least detailed information should be in the top-left (KPIs, cards, etc.) while the least important and most detailed information should be in the bottom-right 2. **Titles:** All report pages should have a title using a `textBox` visualType or a title in a background image added to the report page canvas 3. **Visual positioning, alignment, and spacing:** All visuals must have equal spacing between them and equal spacing between the edge of the page (the margin). If visuals are unaligned or this spacing is unequal, fix it to ensure alignment and equal spacing 4. **Themes:** Reports should use a theme that differs from the default Power BI themes; a suggested theme is the `sqlbi` theme (see the `modifying-theme-json` skill for applying templates). Themes are preferred because they provide a set of default styles for all charts that can adhere to good design practices and brand or style guidelines 5. **Semantic Models:** Reports in Power BI are complex. They are dependant on an underlying semantic model (either in the .SemanticModel folder, called a "thick report" or a published model in Power BI/Fabric, called a "thin report"). Much of the functionality from a Power BI report comes from its semantic model design or DAX code 6. **Report extensions, or thin report measures:** It is possible to create calculation logic in Power BI report, called "thin report measures" or "visual calculations". These should be used sparingly and only for "report-specific" scenarios 7. **Visual fields:** All data visuals should have field bindings, and all field bindings should be for fields that actually exist in the model; there is no reason for visuals to exist that have no fields bound 8. **Chart selection:** Make smart choices about what visuals to use for each scenario. Visual vocabulary is essential for this skill. 9. **Use of color:** Color and formatting decisions must cite the locked identity (the chosen tone and signature), not be picked per visual. Colors come from the theme (themedataColor) rather than inline hex, so the identity propagates and re-themes cleanly. Colors should be muted and soft; colors that implicitly encode meaning (like red=bad, green=good) should be avoided unless using them for that encoding. Consider colorblindness and use accessible palettes (blues instead of greens with reds, for instance). 10. **Pre-attentive attributes:** Styles and colors should be used to steer and direct attention, and not to decorate charts. Formatting of visuals should be intentional and not purely aesthetic. Styles should where possible be stored in the theme and not in bespoke visual configuration. 11. **Fonts:** Prefer *Segoe UI* and *Segoe UI Semibold*. Do not use custom fonts, since they aren't guaranteed to render on user computers. Evaluate whether fonts are sufficiently large to be readable given the visual and page size. 12. **Page intent:** Route each page to exactly one shape by the question it answers (see `references/page-shapes.md`). A page trying to answer two questions is two pages.

## Page Layout Guidelines

### Check Page Size Before Modifying

**Always query the actual page dimensions before adding or repositioning visuals.** Do not assume a page is 1280x720 or 1920x1080 -- templates and existing reports vary. The object model validates that visuals fit within page bounds, so setting position or size without knowing the page dimensions will cause errors. Check the page's `page.json` file for `width` and `height` properties, or use the object model (`page.width`, `page.height`) to confirm dimensions first. When resizing visuals via the object model, set `width`/`height` before `x`/`y` to avoid intermediate states that exceed bounds.

### Standard Page Size

- **Width:** 1280px (default) - **Height:** 720px (16:9 aspect ratio) - Alternative: 1920x1080 for high-resolution displays

### Visual Spacing

- **Minimum gap between visuals:** 16px - **Edge margins:** 24-32px from page edges - **Consistent alignment:** Use grid-based positioning - **Equal spacing is mandatory:** Every gap between adjacent visuals (horizontal and vertical) must be the same value. Every margin from the page edge must be the same value. Calculate positions arithmetically from (margin, gap, page_width, page_height) to guarantee alignment. If visuals are misaligned or gaps are unequal, fix immediately -- this is one of the most visible quality signals in a report.

### Detail Gradient

Arrange content following the "detail gradient":

``` +------------------+------------------+ | KPIs/Cards | KPIs/Cards | <- Top: High-level, important | (Summary) | (Summary) | +------------------+------------------+ | | | Charts/Trends | <- Middle: Context, trends | (Analysis) | | | +------------------+------------------+ | | | Tables/Details | <- Bottom: Detailed data | (Drill-down) | | | +------------------+------------------+ ```

### Visual Count Guidelines

- **Maximum visuals per page:** 12-15 (performance impact) - **Maximum KPIs/Cards:** 4-6 at top - **Maximum slicers:** 3 per page (use filter pane instead)

## Page Titles

Every page should have a title. Create it through `pbir`:

```bash pbir add title "Report.Report/Page.Page" "Page Title" --width 500 ```

**Title positioning:**

- Top-left corner, inside the page margin - Enough height for the chosen font without clipping - Width: 400-600px (or page width minus margins)

## Theme Guidelines

### Always Check Theme First

Before modifying visual formatting:

1. Check theme wildcards: `visualStyles["*"]["*"]` 2. Check visual-type overrides: `visualStyles.lineChart["*"]` 3. Only override in visual.json if truly one-off

### When to Modify Theme vs Visual

- All visuals of a type need change -> theme - Establishing design standards -> theme - Single visual exception to a theme rule -> visual - Content-specific highlight (one callout, one reference line) -> visual

### Theme Color Usage

**Prefer theme colors over hex codes:**

```json // Good - uses theme color "expr": {"ThemeDataColor": {"ColorId": 1, "Percent": 0}}

// Avoid in visuals - use only in extension measures "expr": {"Literal": {"Value": "'#118DFF'"}} ```

**Semantic colors (return from extension measures):**

- `"good"` - Positive values (green) - `"bad"` - Negative values (red) - `"neutral"` - Neutral/unchanged (gray/yellow) - `"minColor"` - Gradient minimum - `"maxColor"` - Gradient maximum

## Accessibility (WCAG 2.1)

### Alt Text

All visuals should include descriptive alt text:

```json "visualContainerObjects": { "general": [{ "properties": { "altText": { "expr": {"Literal": {"Value": "'Line chart showing monthly sales trend from January to December 2024'"}} } } }] } ```

### Color Contrast

- Text on background: minimum 4.5:1 contrast ratio - Large text (18pt+): minimum 3:1 contrast ratio - Don't rely solely on color to convey meaning

### Font Sizes

- **Minimum readable:** 12pt - **Recommended for charts:** 14pt - **Titles:** 16-24pt - **KPI values:** 24-48pt

### Shadows and Motion

- Minimize drop shadows (vestibular issues) - Avoid animations where possible - Use `dropShadow.show: false` in theme wildcards

## Visual Best Practices

### Cards and KPIs

A bare number lacks meaning. Every KPI must answer "Is this good or bad?" (target + gap) and "Is it getting better or worse?" (trend). Key rules:

- Position at top or left of page, maximum 5 per page - **Prefer `kpi` visual type over `card`** when a target exists -- it has built-in indicator, goal, and trend line data roles - Always include a **target** and **gap** (absolute + percentage). If no target measure exists, discuss with the user: propose adding a prior-year measure to the semantic model (use Tabular Editor CLI or the `tmdl` skill), or creating an extension measure as a fallback. Common targets: prior year (`CALCULATE([Measure], DATEADD('Date'[Date], -1, YEAR))`), budget, or rolling average - **If no clear target exists, ask the user** -- do not leave KPIs bare. Discuss whether prior period, budget, or a custom threshold makes sense - Apply conditional formatting to the **gap**, not the primary value - Pair color with a secondary cue (arrow/icon) for accessibility - Round aggressively at summary level ("518M" not "517,893,412") - Choose **actionable metrics** that drive decisions over vanity metrics (apply the "20% change test": if this number changed 20%, should someone act differently?) - Hide redundant auto-generated subtitles - Use SVG extension measures for inline icons (see the `svg-visuals` skill in the **custom-visuals** plugin)

For complete guidance on KPI design, targets, trends, formatting hierarchy, icon implementation, accessible palettes, and anti-patterns, consult **`references/cards-and-kpis.md`**.

### Charts

- Sort by value descending (unless time-based) - Minimize gridlines and axes clutter - Use muted colors for non-essential elements - Highlight key data points sparingly

For chart-type selection (encoding hierarchy, Cleveland-McGill ranking), data-label discipline, and small-multiples guidance, consult **`references/chart-selection.md`**.

**Refuse common LLM defaults.** Gauge-as-KPI,

--- name: pbi-report-design description: The Power BI report design canon covering design identity, visual hierarchy and the 3-30-300 rule, layout/spacing/alignment, color discipline, chart selection, KPI and card design, tables and matrices, accessibility, and the closing design gate. The shared reference home for report design judgment, routed to by the create-pbi-report, pbir-cli, review-report, modifying-theme-json, and custom-visual skills. Load when committing a design identity or making a design, layout, color, chart-selection, or accessibility decision for a report. ---

# Power BI Report Design

> **Use `pbir` for every report mutation.** The `pbir-format` skill is read-only schema context. > If the CLI is unavailable or lacks an operation, stop and report the gap.

Best practices and guidelines for Power BI report design. Follow these guidelines strictly to avoid generic, poorly formatted reports ("Power BI Slop").

Be innovative, pushing boundaries while adhering to data visualization rules and guidelines. Work within Power BI's constraints, aiming for simplicity and effectiveness over aesthetics and decoration. Focus reports, pages, and visuals on answering specific questions and minimizing cognitive load -- not on looking "pretty and impressive".

When a user request contradicts these guidelines, push back and explain better alternatives. The goal is to inform the user of options that lead to improved outcomes.

## Design identity (commit before layout)

Before any layout work, lock the report's identity so every later choice has something to cite:

1. **Pick one tone** ... a committed ink budget (`restrained`, `corporate`, `editorial`, or `technical`) that fixes accent count, saturation, gridline weight, and how forward annotation gets 2. **Pick one signature** (two at most) ... a single recurring element (header band, single-accent-hue rule, fixed nav rail, KPI silhouette, callout style, target-line convention) repeated identically on every page, so the report reads as one artifact 3. **Route each page to one shape** by the question it answers (`summary`, `monitoring`, `exploration`, `comparison`, `narrative`)

Recording tone and signature once is what turns "use muted colors" into a propagating decision. See `references/design-identity.md` for the tone budgets and signature catalog, and `references/page-shapes.md` for routing each page to a shape. Serialize the identity into the theme via the `modifying-theme-json` skill, not into per-visual overrides.

## Core rules

1. **3-30-300 Rule:** The most important and least detailed information should be in the top-left (KPIs, cards, etc.) while the least important and most detailed information should be in the bottom-right 2. **Titles:** All report pages should have a title using a `textBox` visualType or a title in a background image added to the report page canvas 3. **Visual positioning, alignment, and spacing:** All visuals must have equal spacing between them and equal spacing between the edge of the page (the margin). If visuals are unaligned or this spacing is unequal, fix it to ensure alignment and equal spacing 4. **Themes:** Reports should use a theme that differs from the default Power BI themes; a suggested theme is the `sqlbi` theme (see the `modifying-theme-json` skill for applying templates). Themes are preferred because they provide a set of default styles for all charts that can adhere to good design practices and brand or style guidelines 5. **Semantic Models:** Reports in Power BI are complex. They are dependant on an underlying semantic model (either in the .SemanticModel folder, called a "thick report" or a published model in Power BI/Fabric, called a "thin report"). Much of the functionality from a Power BI report comes from its semantic model design or DAX code 6. **Report extensions, or thin report measures:** It is possible to create calculation logic in Power BI report, called "thin report measures" or "visual calculations". These should be used sparingly and only for "report-specific" scenarios 7. **Visual fields:** All data visuals should have field bindings, and all field bindings should be for fields that actually exist in the model; there is no reason for visuals to exist that have no fields bound 8. **Chart selection:** Make smart choices about what visuals to use for each scenario. Visual vocabulary is essential for this skill. 9. **Use of color:** Color and formatting decisions must cite the locked identity (the chosen tone and signature), not be picked per visual. Colors come from the theme (themedataColor) rather than inline hex, so the identity propagates and re-themes cleanly. Colors should be muted and soft; colors that implicitly encode meaning (like red=bad, green=good) should be avoided unless using them for that encoding. Consider colorblindness and use accessible palettes (blues instead of greens with reds, for instance). 10. **Pre-attentive attributes:** Styles and colors should be used to steer and direct attention, and not to decorate charts. Formatting of visuals should be intentional and not purely aesthetic. Styles should where possible be stored in the theme and not in bespoke visual configuration. 11. **Fonts:** Prefer *Segoe UI* and *Segoe UI Semibold*. Do not use custom fonts, since they aren't guaranteed to render on user computers. Evaluate whether fonts are sufficiently large to be readable given the visual and page size. 12. **Page intent:** Route each page to exactly one shape by the question it answers (see `references/page-shapes.md`). A page trying to answer two questions is two pages.

## Page Layout Guidelines

### Check Page Size Before Modifying

**Always query the actual page dimensions before adding or repositioning visuals.** Do not assume a page is 1280x720 or 1920x1080 -- templates and existing reports vary. The object model validates that visuals fit within page bounds, so setting position or size without knowing the page dimensions will cause errors. Check the page's `page.json` file for `width` and `height` properties, or use the object model (`page.width`, `page.height`) to confirm dimensions first. When resizing visuals via the object model, set `width`/`height` before `x`/`y` to avoid intermediate states that exceed bounds.

### Standard Page Size

- **Width:** 1280px (default) - **Height:** 720px (16:9 aspect ratio) - Alternative: 1920x1080 for high-resolution displays

### Visual Spacing

- **Minimum gap between visuals:** 16px - **Edge margins:** 24-32px from page edges - **Consistent alignment:** Use grid-based positioning - **Equal spacing is mandatory:** Every gap between adjacent visuals (horizontal and vertical) must be the same value. Every margin from the page edge must be the same value. Calculate positions arithmetically from (margin, gap, page_width, page_height) to guarantee alignment. If visuals are misaligned or gaps are unequal, fix immediately -- this is one of the most visible quality signals in a report.

### Detail Gradient

Arrange content following the "detail gradient":

``` +------------------+------------------+ | KPIs/Cards | KPIs/Cards | <- Top: High-level, important | (Summary) | (Summary) | +------------------+------------------+ | | | Charts/Trends | <- Middle: Context, trends | (Analysis) | | | +------------------+------------------+ | | | Tables/Details | <- Bottom: Detailed data | (Drill-down) | | | +------------------+------------------+ ```

### Visual Count Guidelines

- **Maximum visuals per page:** 12-15 (performance impact) - **Maximum KPIs/Cards:** 4-6 at top - **Maximum slicers:** 3 per page (use filter pane instead)

## Page Titles

Every page should have a title. Create it through `pbir`:

```bash pbir add title "Report.Report/Page.Page" "Page Title" --width 500 ```

**Title positioning:**

- Top-left corner, inside the page margin - Enough height for the chosen font without clipping - Width: 400-600px (or page width minus margins)

## Theme Guidelines

### Always Check Theme First

Before modifying visual formatting:

1. Check theme wildcards: `visualStyles["*"]["*"]` 2. Check visual-type overrides: `visualStyles.lineChart["*"]` 3. Only override in visual.json if truly one-off

### When to Modify Theme vs Visual

- All visuals of a type need change -> theme - Establishing design standards -> theme - Single visual exception to a theme rule -> visual - Content-specific highlight (one callout, one reference line) -> visual

### Theme Color Usage

**Prefer theme colors over hex codes:**

```json // Good - uses theme color "expr": {"ThemeDataColor": {"ColorId": 1, "Percent": 0}}

// Avoid in visuals - use only in extension measures "expr": {"Literal": {"Value": "'#118DFF'"}} ```

**Semantic colors (return from extension measures):**

- `"good"` - Positive values (green) - `"bad"` - Negative values (red) - `"neutral"` - Neutral/unchanged (gray/yellow) - `"minColor"` - Gradient minimum - `"maxColor"` - Gradient maximum

## Accessibility (WCAG 2.1)

### Alt Text

All visuals should include descriptive alt text:

```json "visualContainerObjects": { "general": [{ "properties": { "altText": { "expr": {"Literal": {"Value": "'Line chart showing monthly sales trend from January to December 2024'"}} } } }] } ```

### Color Contrast

- Text on background: minimum 4.5:1 contrast ratio - Large text (18pt+): minimum 3:1 contrast ratio - Don't rely solely on color to convey meaning

### Font Sizes

- **Minimum readable:** 12pt - **Recommended for charts:** 14pt - **Titles:** 16-24pt - **KPI values:** 24-48pt

### Shadows and Motion

- Minimize drop shadows (vestibular issues) - Avoid animations where possible - Use `dropShadow.show: false` in theme wildcards

## Visual Best Practices

### Cards and KPIs

A bare number lacks meaning. Every KPI must answer "Is this good or bad?" (target + gap) and "Is it getting better or worse?" (trend). Key rules:

- Position at top or left of page, maximum 5 per page - **Prefer `kpi` visual type over `card`** when a target exists -- it has built-in indicator, goal, and trend line data roles - Always include a **target** and **gap** (absolute + percentage). If no target measure exists, discuss with the user: propose adding a prior-year measure to the semantic model (use Tabular Editor CLI or the `tmdl` skill), or creating an extension measure as a fallback. Common targets: prior year (`CALCULATE([Measure], DATEADD('Date'[Date], -1, YEAR))`), budget, or rolling average - **If no clear target exists, ask the user** -- do not leave KPIs bare. Discuss whether prior period, budget, or a custom threshold makes sense - Apply conditional formatting to the **gap**, not the primary value - Pair color with a secondary cue (arrow/icon) for accessibility - Round aggressively at summary level ("518M" not "517,893,412") - Choose **actionable metrics** that drive decisions over vanity metrics (apply the "20% change test": if this number changed 20%, should someone act differently?) - Hide redundant auto-generated subtitles - Use SVG extension measures for inline icons (see the `svg-visuals` skill in the **custom-visuals** plugin)

For complete guidance on KPI design, targets, trends, formatting hierarchy, icon implementation, accessible palettes, and anti-patterns, consult **`references/cards-and-kpis.md`**.

### Charts

- Sort by value descending (unless time-based) - Minimize gridlines and axes clutter - Use muted colors for non-essential elements - Highlight key data points sparingly

For chart-type selection (encoding hierarchy, Cleveland-McGill ranking), data-label discipline, and small-multiples guidance, consult **`references/chart-selection.md`**.

**Refuse common LLM defaults.** Gauge-as-KPI,

--- name: pbi-report-design description: The Power BI report design canon covering design identity, visual hierarchy and the 3-30-300 rule, layout/spacing/alignment, color discipline, chart selection, KPI and card design, tables and matrices, accessibility, and the closing design gate. The shared reference home for report design judgment, routed to by the create-pbi-report, pbir-cli, review-report, modifying-theme-json, and custom-visual skills. Load when committing a design identity or making a design, layout, color, chart-selection, or accessibility decision for a report. ---

# Power BI Report Design

> **Use `pbir` for every report mutation.** The `pbir-format` skill is read-only schema context. > If the CLI is unavailable or lacks an operation, stop and report the gap.

Best practices and guidelines for Power BI report design. Follow these guidelines strictly to avoid generic, poorly formatted reports ("Power BI Slop").

Be innovative, pushing boundaries while adhering to data visualization rules and guidelines. Work within Power BI's constraints, aiming for simplicity and effectiveness over aesthetics and decoration. Focus reports, pages, and visuals on answering specific questions and minimizing cognitive load -- not on looking "pretty and impressive".

When a user request contradicts these guidelines, push back and explain better alternatives. The goal is to inform the user of options that lead to improved outcomes.

## Design identity (commit before layout)

Before any layout work, lock the report's identity so every later choice has something to cite:

1. **Pick one tone** ... a committed ink budget (`restrained`, `corporate`, `editorial`, or `technical`) that fixes accent count, saturation, gridline weight, and how forward annotation gets 2. **Pick one signature** (two at most) ... a single recurring element (header band, single-accent-hue rule, fixed nav rail, KPI silhouette, callout style, target-line convention) repeated identically on every page, so the report reads as one artifact 3. **Route each page to one shape** by the question it answers (`summary`, `monitoring`, `exploration`, `comparison`, `narrative`)

Recording tone and signature once is what turns "use muted colors" into a propagating decision. See `references/design-identity.md` for the tone budgets and signature catalog, and `references/page-shapes.md` for routing each page to a shape. Serialize the identity into the theme via the `modifying-theme-json` skill, not into per-visual overrides.

## Core rules

1. **3-30-300 Rule:** The most important and least detailed information should be in the top-left (KPIs, cards, etc.) while the least important and most detailed information should be in the bottom-right 2. **Titles:** All report pages should have a title using a `textBox` visualType or a title in a background image added to the report page canvas 3. **Visual positioning, alignment, and spacing:** All visuals must have equal spacing between them and equal spacing between the edge of the page (the margin). If visuals are unaligned or this spacing is unequal, fix it to ensure alignment and equal spacing 4. **Themes:** Reports should use a theme that differs from the default Power BI themes; a suggested theme is the `sqlbi` theme (see the `modifying-theme-json` skill for applying templates). Themes are preferred because they provide a set of default styles for all charts that can adhere to good design practices and brand or style guidelines 5. **Semantic Models:** Reports in Power BI are complex. They are dependant on an underlying semantic model (either in the .SemanticModel folder, called a "thick report" or a published model in Power BI/Fabric, called a "thin report"). Much of the functionality from a Power BI report comes from its semantic model design or DAX code 6. **Report extensions, or thin report measures:** It is possible to create calculation logic in Power BI report, called "thin report measures" or "visual calculations". These should be used sparingly and only for "report-specific" scenarios 7. **Visual fields:** All data visuals should have field bindings, and all field bindings should be for fields that actually exist in the model; there is no reason for visuals to exist that have no fields bound 8. **Chart selection:** Make smart choices about what visuals to use for each scenario. Visual vocabulary is essential for this skill. 9. **Use of color:** Color and formatting decisions must cite the locked identity (the chosen tone and signature), not be picked per visual. Colors come from the theme (themedataColor) rather than inline hex, so the identity propagates and re-themes cleanly. Colors should be muted and soft; colors that implicitly encode meaning (like red=bad, green=good) should be avoided unless using them for that encoding. Consider colorblindness and use accessible palettes (blues instead of greens with reds, for instance). 10. **Pre-attentive attributes:** Styles and colors should be used to steer and direct attention, and not to decorate charts. Formatting of visuals should be intentional and not purely aesthetic. Styles should where possible be stored in the theme and not in bespoke visual configuration. 11. **Fonts:** Prefer *Segoe UI* and *Segoe UI Semibold*. Do not use custom fonts, since they aren't guaranteed to render on user computers. Evaluate whether fonts are sufficiently large to be readable given the visual and page size. 12. **Page intent:** Route each page to exactly one shape by the question it answers (see `references/page-shapes.md`). A page trying to answer two questions is two pages.

## Page Layout Guidelines

### Check Page Size Before Modifying

**Always query the actual page dimensions before adding or repositioning visuals.** Do not assume a page is 1280x720 or 1920x1080 -- templates and existing reports vary. The object model validates that visuals fit within page bounds, so setting position or size without knowing the page dimensions will cause errors. Check the page's `page.json` file for `width` and `height` properties, or use the object model (`page.width`, `page.height`) to confirm dimensions first. When resizing visuals via the object model, set `width`/`height` before `x`/`y` to avoid intermediate states that exceed bounds.

### Standard Page Size

- **Width:** 1280px (default) - **Height:** 720px (16:9 aspect ratio) - Alternative: 1920x1080 for high-resolution displays

### Visual Spacing

- **Minimum gap between visuals:** 16px - **Edge margins:** 24-32px from page edges - **Consistent alignment:** Use grid-based positioning - **Equal spacing is mandatory:** Every gap between adjacent visuals (horizontal and vertical) must be the same value. Every margin from the page edge must be the same value. Calculate positions arithmetically from (margin, gap, page_width, page_height) to guarantee alignment. If visuals are misaligned or gaps are unequal, fix immediately -- this is one of the most visible quality signals in a report.

### Detail Gradient

Arrange content following the "detail gradient":

``` +------------------+------------------+ | KPIs/Cards | KPIs/Cards | <- Top: High-level, important | (Summary) | (Summary) | +------------------+------------------+ | | | Charts/Trends | <- Middle: Context, trends | (Analysis) | | | +------------------+------------------+ | | | Tables/Details | <- Bottom: Detailed data | (Drill-down) | | | +------------------+------------------+ ```

### Visual Count Guidelines

- **Maximum visuals per page:** 12-15 (performance impact) - **Maximum KPIs/Cards:** 4-6 at top - **Maximum slicers:** 3 per page (use filter pane instead)

## Page Titles

Every page should have a title. Create it through `pbir`:

```bash pbir add title "Report.Report/Page.Page" "Page Title" --width 500 ```

**Title positioning:**

- Top-left corner, inside the page margin - Enough height for the chosen font without clipping - Width: 400-600px (or page width minus margins)

## Theme Guidelines

### Always Check Theme First

Before modifying visual formatting:

1. Check theme wildcards: `visualStyles["*"]["*"]` 2. Check visual-type overrides: `visualStyles.lineChart["*"]` 3. Only override in visual.json if truly one-off

### When to Modify Theme vs Visual

- All visuals of a type need change -> theme - Establishing design standards -> theme - Single visual exception to a theme rule -> visual - Content-specific highlight (one callout, one reference line) -> visual

### Theme Color Usage

**Prefer theme colors over hex codes:**

```json // Good - uses theme color "expr": {"ThemeDataColor": {"ColorId": 1, "Percent": 0}}

// Avoid in visuals - use only in extension measures "expr": {"Literal": {"Value": "'#118DFF'"}} ```

**Semantic colors (return from extension measures):**

- `"good"` - Positive values (green) - `"bad"` - Negative values (red) - `"neutral"` - Neutral/unchanged (gray/yellow) - `"minColor"` - Gradient minimum - `"maxColor"` - Gradient maximum

## Accessibility (WCAG 2.1)

### Alt Text

All visuals should include descriptive alt text:

```json "visualContainerObjects": { "general": [{ "properties": { "altText": { "expr": {"Literal": {"Value": "'Line chart showing monthly sales trend from January to December 2024'"}} } } }] } ```

### Color Contrast

- Text on background: minimum 4.5:1 contrast ratio - Large text (18pt+): minimum 3:1 contrast ratio - Don't rely solely on color to convey meaning

### Font Sizes

- **Minimum readable:** 12pt - **Recommended for charts:** 14pt - **Titles:** 16-24pt - **KPI values:** 24-48pt

### Shadows and Motion

- Minimize drop shadows (vestibular issues) - Avoid animations where possible - Use `dropShadow.show: false` in theme wildcards

## Visual Best Practices

### Cards and KPIs

A bare number lacks meaning. Every KPI must answer "Is this good or bad?" (target + gap) and "Is it getting better or worse?" (trend). Key rules:

- Position at top or left of page, maximum 5 per page - **Prefer `kpi` visual type over `card`** when a target exists -- it has built-in indicator, goal, and trend line data roles - Always include a **target** and **gap** (absolute + percentage). If no target measure exists, discuss with the user: propose adding a prior-year measure to the semantic model (use Tabular Editor CLI or the `tmdl` skill), or creating an extension measure as a fallback. Common targets: prior year (`CALCULATE([Measure], DATEADD('Date'[Date], -1, YEAR))`), budget, or rolling average - **If no clear target exists, ask the user** -- do not leave KPIs bare. Discuss whether prior period, budget, or a custom threshold makes sense - Apply conditional formatting to the **gap**, not the primary value - Pair color with a secondary cue (arrow/icon) for accessibility - Round aggressively at summary level ("518M" not "517,893,412") - Choose **actionable metrics** that drive decisions over vanity metrics (apply the "20% change test": if this number changed 20%, should someone act differently?) - Hide redundant auto-generated subtitles - Use SVG extension measures for inline icons (see the `svg-visuals` skill in the **custom-visuals** plugin)

For complete guidance on KPI design, targets, trends, formatting hierarchy, icon implementation, accessible palettes, and anti-patterns, consult **`references/cards-and-kpis.md`**.

### Charts

- Sort by value descending (unless time-based) - Minimize gridlines and axes clutter - Use muted colors for non-essential elements - Highlight key data points sparingly

For chart-type selection (encoding hierarchy, Cleveland-McGill ranking), data-label discipline, and small-multiples guidance, consult **`references/chart-selection.md`**.

**Refuse common LLM defaults.** Gauge-as-KPI,