Visual Style Guide — Enterprise Dashboard Design System

This living style guide documents all approved design tokens, components, and patterns for Test Company Document Solutions dashboards. All Power BI reports and HTML mockups must conform to these standards. Based on the official Test Company Brand Hub colour palette and WCAG 2.1 accessibility guidelines.

v1.0 · April 2026

Internal use only

01 Primary Palette

Dark Grey

#282828

Nav, table headers, text

Light Grey

#F2F2F2

Page background

White

#FFFFFF

Card surfaces

Mid Grey

#7E7E7E

Axis labels, muted text

Light Mid Grey

#A9A9A9

Gridlines, borders

Pale Grey

#D4D4D4

Dividers, empty states

Dark Mid Grey

#585858

Secondary text

02 Secondary (Accent) Palette

Test Company Purple

#6E3CBE

Primary KPI, Series 1

Test Company Blue

#0A9BCD

Series 2, info

Test Company Yellow

#F5B400

Series 3, warning

Test Company Orange

#F06400

Series 4, negative

Test Company Green

#00B176

Positive, on-target

FAIL

Green on LG

2.44:1 ratio

Never combine these

Alert Red

#CC0000

Critical errors only

03 Tint Palette (Charts & Infographics Only)

Purple Tints

#925ED2

75%

#AE87DE

50%

#C9AFE9

25%

#E4D7F4

10%

Blue Tints

#00B1DB

75%

#4AC5E5

50%

#8DD9EE

25%

#C7ECF6

10%

04 Semantic Colour Assignments

Primary KPI

#6E3CBE

Revenue, main metric

Secondary KPI

#0A9BCD

Volume, orders

▲

Positive

#00B176

On target, favourable

▼

Negative

#F06400

Below target, adverse

Warning

#F5B400

Near threshold

05 Typography Scale

Segoe UI Bold / 24pt / #282828

Dashboard Title — Finance Overview

Segoe UI Bold / 16pt / #282828

Page Section Title — Budget vs Actuals

Segoe UI Bold / 12pt / #282828
Uppercase + tracking

Visual Title — Monthly Revenue Trend

Segoe UI Bold / 36pt / #6E3CBE

$4.82M

Segoe UI Regular / 10pt / #7E7E7E
Uppercase + 0.06em tracking

Revenue Year to Date

Segoe UI Regular / 11pt / semantic
Delta indicator

▲ +12.4% vs prior year ▼ -3.2% vs target → +0.4% approaching limit

Segoe UI Regular / 10pt / #7E7E7E
Axis labels

Jan Feb Mar Apr May Jun $0K $25K $50K $75K $100K

Segoe UI Bold / 11pt / #FFFFFF
On Dark Grey — Table headers

Department Budget Actual Variance

06 KPI Card Components

Revenue YTD

$4.82M

▲ +12.4% vs prior year

Net Profit

$1.68M

▲ +22.3% vs prior year

Total Expenses

$3.14M

▲ +8.1% — monitor

Budget Utilised

72.4%

Target: 75% at 9 months

KPI Card Rules: Top stripe colour = semantic role. Label = 10pt uppercase Mid Grey. Value = 24–36pt Bold. Delta = 11pt semantic colour with arrow. Sparkline or progress bar optional. All 4+ cards in a strip must be equal width.

07 Chart Colour Strategies

Option A — Conservative

Primarily greyscale with single Purple accent. Best for board packs and executive summaries.

Purple accent + Mid Grey series + Pale Grey secondary

Option B — Balanced ✓ Recommended

Purple + Blue as primary series. Green/Orange for semantic only. Default for most reports.

Purple + Blue data + semantic Green/Orange

Option C — Vibrant Analytical

Full 5-colour secondary palette for multi-series comparative charts. Marketing, CRM, product reports.

All 5 secondaries in defined sequence

08 Chart Visual Samples

Revenue Trend (Clustered Bar + Line)

Option B — Purple current, Grey prior year, Orange target

CY RevenuePY RevenueTarget

Expense Breakdown (Donut)

Option B — Sequential Purple tints for same-category data

Payroll 38% Operations 22% Marketing 18% R&D 14% Other 8%

Multi-Series Line (Option C — Vibrant)

Full 4-colour sequence for category comparison

PrintServicesSoftwareConsumables

Variance Waterfall (Positive/Negative)

Green = favourable, Orange = adverse, Dark Grey = total

09 UI Components

Navigation Bar

Overview Budget Variance Forecast

Dark Grey bg. Active = White text + 2px Purple underline. Inactive = #888. 40px height minimum.

Slicer / Filter

Department

Period

Header: Purple Bold 11pt. Input: 1px #DDD border, Segoe UI 11pt, 36px height.

Badges & Pills

On Track Over Budget Watch FY 2025 All Regions

Background: 15% opacity fill. Text: matching semantic colour. Bold 9–10pt.

Data Table

Department	Budget	Actuals YTD	Remaining	Variance %	Status
Engineering	$2,100K	$1,932K	$168K	-8.0%	On Track
Marketing	$440K	$508K	-$68K	+15.5%	Over
Operations	$620K	$558K	$62K	-10.0%	On Track
Sales	$380K	$356K	$24K	-6.3%	Watch

Header: Dark Grey bg + White Bold text. Body: alternating White/#F9F9F9. Min row height 32px. Positive = Green text, Negative = Orange text.

10 Layout Blueprints

Standard (KPI + 8/4 + 6/6)

Nav Bar

KPI

Main Chart (8)

Side (4)

Chart (6)

Table (6)

Executive (Hero KPIs + Full Width)

Nav

KPI

Hero Chart — Full Width (12)

Metric (4)

Analytical (Dense Multi-Row)

Nav + Filters

Chart (4)

Table (8)

Chart (4)