Menu
Wordmark usage rules and SVG assets for the Contoso placeholder brand. Covers light and dark variants, clear space rules, minimum size, and how to embed in Power BI report headers.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Icon system for Power BI design. Fluent line style โ 20px viewBox, 1.5px stroke, currentColor. Covers naming conventions, sizing grid, semantic color application, inline SVG embedding in DAX measures, full asset index, and accessibility requirements.
Power BI design system for building consistent, accessible, professional reports. Covers the 3-30-300 Rule (visual hierarchy), detail gradient layouts, KPI design principles, anti-patterns ("Power BI Slop"), typography, color palettes, spacing, themes, and evaluation checklists. Emphasizes intentional pre-attentive attributes, semantic colors, and minimizing cognitive load.
Reference for Power BI Calculation Groups in TMDL. Use this whenever a user asks for time intelligence patterns (YTD, QTD, rolling periods, prior year), scenario switching (Actual/Budget/Forecast), currency conversion, or any pattern where the same transformation needs to apply dynamically across many measures. Always consult this before writing individual YTD/PY/Rolling measures from scratch โ a calc group is the correct architecture and eliminates boilerplate at scale.
Reference for DAX User-Defined Functions (UDFs) in Power BI semantic models. Use this when building reusable function definitions with type safety and parameter modes (Val/Expr/AnyRef). Always consult before writing repeated DAX logic that could be abstracted into a single function โ UDFs eliminate boilerplate and make complex patterns like time intelligence, statistical functions, and table filters reusable across the entire model.
Comprehensive guide to designing, naming, and implementing Power BI DAX measures across all business domains. Includes patterns for base aggregations, time intelligence, KPIs, semi-additive measures, and TMDL syntax for measure definitions in .tmdl files.
TMDL syntax ground rules for Power BI semantic models. Use this whenever writing or reviewing TMDL for tables, columns, measures, DAX UDFs, or calculation groups. Always consult before generating any TMDL โ these rules govern indentation, object declaration, property syntax, and measure formatting. For UDF type system and examples see dax-udf/SKILL.md. For calculation group patterns see calc-groups/SKILL.md.
| name | brand-wordmark |
| description | Wordmark usage rules and SVG assets for the Contoso placeholder brand. Covers light and dark variants, clear space rules, minimum size, and how to embed in Power BI report headers. |
| version | 1 |
The wordmark is the primary brand identifier in a Power BI report. It combines a mark (icon) and a logotype (text) in a single lockup. Two variants are provided:
#0078D4, logotype in Near-Black #201F1E, on a white or light background#FFFFFF, logotype in White #FFFFFF, on Primary Blue #0078D4 background (for use in colored page headers)Contoso is a placeholder. Replace the logotype text and the mark path with your actual brand assets before using in production.
| File | Variant | Background | Use case |
|---|---|---|---|
assets/wordmark-light.svg | Light | White / #F3F2F1 | Page header on light backgrounds |
assets/wordmark-dark.svg | Dark | #0078D4 Primary Blue | Colored header zone, dark page backgrounds |
[ Mark ] Logotype
| Element | Light variant | Dark variant |
|---|---|---|
| Mark (icon) | #0078D4 | #FFFFFF |
| Logotype text | #201F1E | #FFFFFF |
| Background | Transparent (white context) | #0078D4 or transparent (dark context) |
| Font | Segoe UI Semibold | Segoe UI Semibold |
The mark is a stylized bar chart โ three vertical bars of ascending height โ representing data and analytics. It sits to the left of the logotype with 8px spacing between them.
| Property | Value |
|---|---|
| Mark height | 24px |
| Mark width | ~20px (proportional) |
| Logotype font size | 18pt Segoe UI Semibold |
| Total lockup height | 32px (with optical padding) |
| Minimum width | 100px |
| Minimum height | 20px (do not scale below this) |
Maintain clear space equal to the height of the mark on all four sides of the wordmark. Never place other visual elements inside the clear space zone.
[ clear space ]
[c] [ Mark Name ] [c]
[ clear space ]
Where [c] = mark height.
The wordmark lives in the page header zone at the top of every report page.
x: 24px y: 12px height: 32px width: auto (min 100px)
The header zone is typically 48โ64px tall. The wordmark sits vertically centered within it.
When the page header uses a Primary Blue (#0078D4) fill rectangle as background:
wordmark-dark.svg#0078D4Power BI does not have a native "image" element that scales cleanly at all zoom levels. The recommended approach:
wordmark-light.svg or wordmark-dark.svgAlternatively, embed the wordmark as an SVG DAX measure (see SVG embedding pattern below).
To embed the wordmark inline in a DAX SVG measure (e.g., a dynamic header):
Page Header SVG =
VAR _svg =
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 32' width='160' height='32'>"
-- Mark: three ascending bars
& "<rect x='2' y='14' width='5' height='16' rx='1' fill='#0078D4'/>"
& "<rect x='9' y='8' width='5' height='22' rx='1' fill='#0078D4'/>"
& "<rect x='16' y='2' width='5' height='28' rx='1' fill='#0078D4'/>"
-- Logotype
& "<text x='28' y='22' font-family='Segoe UI, Arial, sans-serif' font-size='18' font-weight='600' fill='#201F1E'>Contoso</text>"
& "</svg>"
RETURN _svg
For the dark variant, replace fill='#0078D4' with fill='#FFFFFF' on bars, and fill='#201F1E' with fill='#FFFFFF' on the text.
role="img" and aria-label for screen readers.#201F1E on white = 16:1 โ
; Dark variant โ white on #0078D4 = 7:1 โ
#0078D4, Near-Black #201F1EVersion: 1.0 Last Updated: 2026-05-02