diff --git a/campaign-tracker-client/src/workspace/workspaceContracts.ts b/campaign-tracker-client/src/workspace/workspaceContracts.ts
new file mode 100644
index 0000000..7823476
--- /dev/null
+++ b/campaign-tracker-client/src/workspace/workspaceContracts.ts
@@ -0,0 +1,93 @@
+export const semanticStatusColors = {
+  success: '#2E7D32',
+  warning: '#B45309',
+  error: '#B91C1C',
+  info: '#2563EB',
+  overdue: '#7F1D1D',
+  secondary: '#0F766E',
+} as const
+
+export const workspaceThemeTokens = {
+  colorPrimary: '#1F4E79',
+  colorSuccess: semanticStatusColors.success,
+  colorWarning: semanticStatusColors.warning,
+  colorError: semanticStatusColors.error,
+  colorInfo: semanticStatusColors.info,
+  colorBgBase: '#F7F9FC',
+  colorText: '#111827',
+  colorTextSecondary: '#4B5563',
+  colorBorder: '#D0D7E2',
+  borderRadius: 4,
+  fontFamily: 'Public Sans, Segoe UI, Arial, sans-serif',
+  fontSize: 14,
+  controlHeight: 28,
+} as const
+
+export const workspaceDensityProfile = {
+  compact: true,
+  controlHeight: workspaceThemeTokens.controlHeight,
+  baseUnit: 8,
+} as const
+
+export type WorkspaceViewportMode =
+  | 'read-reduced'
+  | 'compact-tri-pane'
+  | 'full-tri-pane'
+
+export type WorkspaceStatus =
+  | 'onTrack'
+  | 'atRisk'
+  | 'blocked'
+  | 'inProgress'
+  | 'overdue'
+
+export const statusDefinitions: Record<
+  WorkspaceStatus,
+  { color: string; label: string; iconLabel: string }
+> = {
+  onTrack: {
+    color: semanticStatusColors.success,
+    label: 'On track',
+    iconLabel: 'Success status',
+  },
+  atRisk: {
+    color: semanticStatusColors.warning,
+    label: 'At risk',
+    iconLabel: 'Warning status',
+  },
+  blocked: {
+    color: semanticStatusColors.error,
+    label: 'Blocked',
+    iconLabel: 'Blocked status',
+  },
+  inProgress: {
+    color: semanticStatusColors.info,
+    label: 'In progress',
+    iconLabel: 'Progress status',
+  },
+  overdue: {
+    color: semanticStatusColors.overdue,
+    label: 'Overdue',
+    iconLabel: 'Critical overdue status',
+  },
+}
+
+export function getWorkspaceViewportMode(width: number): WorkspaceViewportMode {
+  if (width < 1280) {
+    return 'read-reduced'
+  }
+
+  if (width < 1600) {
+    return 'compact-tri-pane'
+  }
+
+  return 'full-tri-pane'
+}
+
+export function isEditingAvailable(width: number) {
+  return getWorkspaceViewportMode(width) !== 'read-reduced'
+}
+
+export function isRightPanelCollapsible(width: number) {
+  return getWorkspaceViewportMode(width) === 'compact-tri-pane'
+}