One token set for every route, lens and breakpoint. Tokens are CSS custom properties (--ct-*) defined once; the six templates read them, so every screen updates together. Colours carry meaning only where the brief allows: red is for material breach, purple for forecast and scenario, grey for unavailable.
Light neutral base, deep navy for navigation and hierarchy, teal for neutral analytics. Green, amber, red, purple and grey are reserved for the meanings shown. Text tokens meet WCAG AA on surface; contrast ratios are given in the role notes.
--ct-grey-200#E4E8EDRestricted and unavailable fills
02
Typography scale
IBM Plex Sans for UI and numbers (tabular figures everywhere), IBM Plex Mono for IDs, tags and timestamps. KPI value size encodes lens depth: Owner 32, Core Group 26, Entity 22.
Token
Size / line · weight
Sample
Use
Family
display
32 / 40 · 600
1,760.1 ₹ m
Owner focal KPI value
IBM Plex Sans, tabular numbers
value-cg
26 / 32 · 600
1,760.1 ₹ m
Core Group KPI value
IBM Plex Sans, tabular numbers
value-en
22 / 28 · 600
1,760.1 ₹ m
Entity KPI value
IBM Plex Sans, tabular numbers
h1
24 / 32 · 600
Is the enterprise healthier today?
Page title
IBM Plex Sans
h2
16 / 24 · 600
Is the enterprise healthier today?
Section title (18 / 26 for the focal section)
IBM Plex Sans
question
15 / 22 · 400
Is the enterprise healthier today?
Business question under the title
IBM Plex Sans
body
14 / 20 · 400
Is the enterprise healthier today?
Body text, table cells (Owner, Core Group)
IBM Plex Sans
body-compact
13 / 18 · 400
Is the enterprise healthier today?
Entity tables and dense workbenches
IBM Plex Sans
label
12 / 16 · 600
Is the enterprise healthier today?
Chip labels, field labels
IBM Plex Sans
meta
11 / 16 · 500 · +0.04em caps
OPS-001 · PRELIM P07 · 06:25
IDs, provenance tags, timestamps, slot labels
IBM Plex Mono
03
Spacing scale
4 px base. Components use 8/12/16; sections 16–24; page rhythm by lens: Owner 24, Core Group 18, Entity 14 between sections.
--ct-s-14 px
--ct-s-28 px
--ct-s-312 px
--ct-s-416 px
--ct-s-520 px
--ct-s-624 px
--ct-s-832 px
--ct-s-1040 px
--ct-s-1248 px
--ct-s-1664 px
04
Layout grid
Shell: navy header (64 px) + navy navigation rail (232 px) + fluid content. Content uses a 12-column grid; sections span full width; KPI cards auto-fit to the column count below.
Breakpoint
Viewport
Navigation
Content columns · gutter · margin
KPI cards per row
Use
Compact
< 640
Horizontal scroll strip under the header
4 · 8 · 14
2
Mobile executive brief, alert acknowledgement
Tablet
640–1023
Horizontal strip
8 · 12 · 20
2–3
Read-only review
Laptop (primary)
1024–1599
Rail 232 px
12 · 12 · 28
4–6 (auto-fit, min 200–236 px by lens)
Daily executive use
Large display
≥ 1600
Rail 232 px
12 · 16 · 40; content max 1720
6
Operations rooms, war rooms
05
Border and divider rules
Rule
Specification
Default border
1 px --ct-line on every card, table and panel. No double borders: adjacent cells share one line.
Strong divider
1 px --ct-line-strong for axes, hover borders, and the page title rule (2 px navy on documentation boards only).
Focal section
3 px --ct-navy-900 top border plus a 'Focus of this page' label. Exactly one per page.
Semantic borders
Dashed = forecast/prediction or pending; dotted = scenario, stale, missing or unverified; hatched fill = reconciliation break.
Never
Left-border accent cards, coloured section frames, or borders as decoration.
06
Radius rules
Token
Value
Applies to
--ct-r-1
2 px
Status chips, tags, counters
--ct-r-2
4 px
Cards, panels, buttons, inputs, tiles
0
0 px
Chart bars, table cells, waterfall columns
Not used
> 4 px, pills
The brief excludes oversized pills and excessive rounding
07
Elevation rules
Flat by default. Separation comes from borders and spacing, not shadows.
e0 · flat
All cards, tables, sections. Border only.
e1 · 0 2 8 / 12%
Menus, popovers, tooltips (lens, scope and period menus).
e2 · 0 8 24 / 16%
Drawers and modal confirmations only.
08
Icon rules
One stroke set on a 16 px grid, 1.6 px stroke, round joins, currentColor. Rendered at 13–16 px inline and 20–28 px in empty/error states. A status icon always appears with a text label, never alone.
check
up
down
breach
clock
shield
shieldx
pending
broken
stale
missing
lock
hash
alert
bars4
ai
user
arrow
chev
search
bell
help
09
Chart rules
Rule
Specification
Question first
Every chart shows an 'Answers' line stating the business question it answers.
Form
Line for actual vs plan vs forecast over time; horizontal bars for comparison; waterfall for bridges; lifecycle and progress chains as staged cards; matrix as a table. No donuts, gauges, 3D or fake maps.
Colour
Series colour encodes provenance, never brand. Comparison bars are teal, with the item in focus in navy. Decreases in a bridge are amber (attention), never red.
Labelling
Direct end labels on lines; units in the title; truncated axes are stated ('Axis starts at …'); a today marker on every time series.
Density
At most 6 categorical series and one dominant visual per page; detail goes behind drill-downs.
Accessibility
Charts have role=img and a text alternative; legends use line style as well as colour; values are available in an adjacent table or label.
10
Actual, plan, forecast and scenario treatments
The four series use different line, marker and tag treatments, so they stay distinguishable in greyscale print and for colour-blind viewers.
Series
Line
Marker
Tag
Rule
Actual · certified
Navy 900 · solid 2.5 px
Filled dot at last certified point
CERT
Only after a human certification decision
Actual · preliminary
Teal 700 · solid 2.5 px
Hollow teal circles
PRELIM
Flash or uncertified actuals
Plan
Grey 600 · solid 1.5 px
None; direct label 'Plan'
—
Approved plan; never dashed
Forecast
Purple 500 · dashed 7/4 · 2 px
Purple-100 range band
FCST
Starts at today; always labelled
Scenario
Purple 700 · dotted 1/3 · 2–2.5 px
Direct label with option name
SCN
Only in scenario views; never the base forecast
Threshold
Ink 2 · dotted 1/3 · 1 px
Label carries PLACEHOLDER
—
Not red unless breached and material
11
Business-performance statuses
Filled tint chips with a direction icon. An untrusted value turns performance into an outline-only 'unverified' chip, so a poor result and an untrusted number never look alike.
On trackImprovingDecliningBreachedForecast breachIntervention requiredUnverified variant →Declining · unverified
Status
Colour
Icon
When
On track
Green
check
Within plan tolerance [PH]
Improving
Green
trend up
Moving towards plan
Declining
Amber
trend down
Moving away from plan
Breached
Red (material only)
octagon
Actual beyond threshold with material exposure
Forecast breach
Purple dashed
clock
Forecast crosses threshold; carries 'in N days'
Intervention required
Red tint
octagon
Status strip only: a business area has a Critical item
12
Trust and certification statuses
Outlined chips with a shield or data icon. Trust chips are never filled with performance colours.
CERT P06PRELIM P07FCSTSCNEXTLEADINGPREDICTIONAI · NOT APPROVEDHUMAN DECISION REQUIREDSYSTEM
13
Materiality statuses
A signal-strength icon plus a word; scoring and thresholds stay placeholders (D-03). Critical is the only red fill outside breaches.
CriticalHighMediumLow
14
Interaction states
Motion is 160 ms with standard easing, used only to clarify a change: a drill panel appearing, a recorded decision, a new material change, a loading state. All motion stops under prefers-reduced-motion.
Element
Default
Hover
Pressed / selected
Disabled
Loading
Primary button
Approve
Navy 700 fill
Navy 100 halo while pressed
Not rendered (role-gated); if shown: grey 200 fill, grey 600 text
Label → 'Recording…', aria-busy
Secondary button
Request analysis
Border navy 700
Navy 100 fill
As above
As above
Tab
Financial
Ink colour
3 px navy underline · aria-selected
—
Panel fades in 180 ms
Decision option
A + B
Border navy 700
2 px navy border, navy 100 fill, filled radio
—
Confirmation turns green → navy 100 (1.4 s)
Table row
Surface
Surface 2
Focus row: navy 100
—
Skeleton rows
KPI card
Border line
Border line-strong
Opens KPI detail
Restricted: lock, no value
Skeleton 168 px
15
Keyboard-focus states
Every interactive element is a real link, button, input or radio. Focus order follows reading order: header → navigation → page title → scope → content blocks in slot order.
On light surfaces
Focused button
2 px navy-700 outline, 2 px offset, 5 px navy halo at 18%. Never removed.
On navy (header, navigation)
Focused nav item
2 px white outline, 2 px offset, 25% white halo.
16
Responsive rules
One design system across sizes; content order never changes. Lens depth is carried by density tokens.
Concern
Compact < 640
Laptop 1024–1599
Large ≥ 1600
Shell
Header shows logo, lens, Ask, alerts, profile; scope/period move into the page scope bar; nav becomes a scroll strip
Full header, 232 px rail
Full header, rail, content max 1720 px
KPI cards
2 per row, value 22 px
Auto-fit by lens min width
Up to 6 per row
Tables
Horizontal scroll inside a bordered box; first column stays readable
Full
Full
Charts
Full width, 340 px max height, direct labels kept
Full width
Full width
Owner depth
Brief only (O-07) plus alert acknowledgement
Summary, drill-downs collapsed, 4 table rows then 'Show all'