@growth-labs/cms 0.5.25 → 0.5.27

package/dist/ui/theme.js

@@ -1,81 +1,40 @@
-// src/ui/theme.ts — theme tokens ported from the resolved Broadsheet design
-// (app.jsx). The accent/serif vars are applied to documentElement at runtime by
-// the useTweaks effect; broadsheet.css carries the rest.
+// Compatibility helpers for the fixed Growth Labs visual contract. Theme and
+// density remain user preferences; brand accent and typography do not.
 export const ACCENTS = {
-    'Ink blue': {
-        a: '#0c4a6e',
-        s: '#075985',
-        fg: '#ffffff',
-        tint: 'rgba(12,74,110,0.09)',
-        ring: 'rgba(12,74,110,0.38)',
-    },
-    'Press red': {
-        a: '#b23a2e',
-        s: '#962f25',
-        fg: '#ffffff',
-        tint: 'rgba(178,58,46,0.10)',
-        ring: 'rgba(178,58,46,0.38)',
-    },
-    Forest: {
-        a: '#1f6b4a',
-        s: '#19583d',
-        fg: '#ffffff',
-        tint: 'rgba(31,107,74,0.10)',
-        ring: 'rgba(31,107,74,0.38)',
-    },
-    Violet: {
-        a: '#5b4bc4',
-        s: '#4c3ea8',
-        fg: '#ffffff',
-        tint: 'rgba(91,75,196,0.10)',
-        ring: 'rgba(91,75,196,0.38)',
+    'Growth Labs': {
+        a: '#2F6FBD',
+        s: '#245CA8',
+        fg: '#FFFFFF',
+        tint: 'rgba(62,209,198,0.14)',
+        ring: '#1E5EA8',
     },
 };
 export const ACCENTS_DARK = {
-    'Ink blue': {
-        a: '#4c9ae8',
-        s: '#3b86d4',
-        fg: '#06121d',
-        tint: 'rgba(76,154,232,0.16)',
-        ring: 'rgba(76,154,232,0.45)',
-    },
-    'Press red': {
-        a: '#ef6e62',
-        s: '#e05348',
-        fg: '#1d0a08',
-        tint: 'rgba(239,110,98,0.16)',
-        ring: 'rgba(239,110,98,0.45)',
-    },
-    Forest: {
-        a: '#4ec98a',
-        s: '#3bb476',
-        fg: '#06160f',
-        tint: 'rgba(78,201,138,0.16)',
-        ring: 'rgba(78,201,138,0.45)',
-    },
-    Violet: {
-        a: '#9d8df0',
-        s: '#8978e6',
-        fg: '#0e0a1d',
-        tint: 'rgba(157,141,240,0.16)',
-        ring: 'rgba(157,141,240,0.45)',
+    'Growth Labs': {
+        a: '#3F86D8',
+        s: '#2F6FBD',
+        fg: '#FFFFFF',
+        tint: 'rgba(62,209,198,0.18)',
+        ring: '#50F5EC',
     },
 };
 export const TWEAK_DEFAULTS = {
-    theme: 'dark',
-    accent: 'Ink blue',
+    theme: 'light',
+    accent: 'Growth Labs',
     density: 'regular',
     previewPos: 'off',
-    serifDisplay: true,
+    serifDisplay: false,
 };
-const SERIF = '"Source Serif 4", Georgia, serif';
-const SANS = '"DM Sans", system-ui, sans-serif';
-export function serifVar(serifDisplay) {
-    return serifDisplay ? SERIF : SANS;
+const DISPLAY = '"Space Grotesk", "Lato", system-ui, sans-serif';
+export function serifVar(_serifDisplay) {
+    return DISPLAY;
+}
+export function inverseTextVar(theme) {
+    return theme === 'dark' ? '#2B2F33' : '#FFFFFF';
 }
 export function resolveAccentVars(theme, accent) {
     const table = theme === 'dark' ? ACCENTS_DARK : ACCENTS;
-    const set = table[accent] ?? table['Ink blue'];
+    const set = table[accent] ?? table['Growth Labs'];
     return {
         '--accent': set.a,
         '--accent-strong': set.s,

package/dist/ui/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/ui/theme.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,gFAAgF;AAChF,yDAAyD;AAWzD,MAAM,CAAC,MAAM,OAAO,GAAkC;IACrD,UAAU,EAAE;QACX,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,sBAAsB;KAC5B;IACD,WAAW,EAAE;QACZ,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,sBAAsB;KAC5B;IACD,MAAM,EAAE;QACP,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,sBAAsB;KAC5B;IACD,MAAM,EAAE;QACP,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,sBAAsB;KAC5B;CACD,CAAA;AACD,MAAM,CAAC,MAAM,YAAY,GAAkC;IAC1D,UAAU,EAAE;QACX,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,uBAAuB;KAC7B;IACD,WAAW,EAAE;QACZ,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,uBAAuB;KAC7B;IACD,MAAM,EAAE;QACP,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,uBAAuB;KAC7B;IACD,MAAM,EAAE;QACP,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,wBAAwB;QAC9B,IAAI,EAAE,wBAAwB;KAC9B;CACD,CAAA;AAMD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC7B,KAAK,EAAE,MAAmB;IAC1B,MAAM,EAAE,UAAwB;IAChC,OAAO,EAAE,SAAoB;IAC7B,UAAU,EAAE,KAAmB;IAC/B,YAAY,EAAE,IAAI;CAClB,CAAA;AAED,MAAM,KAAK,GAAG,kCAAkC,CAAA;AAChD,MAAM,IAAI,GAAG,kCAAkC,CAAA;AAE/C,MAAM,UAAU,QAAQ,CAAC,YAAqB;IAC7C,OAAO,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;AACnC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAgB,EAAE,MAAkB;IACrE,MAAM,KAAK,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAA;IACvD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC,CAAA;IAC9C,OAAO;QACN,UAAU,EAAE,GAAG,CAAC,CAAC;QACjB,iBAAiB,EAAE,GAAG,CAAC,CAAC;QACxB,aAAa,EAAE,GAAG,CAAC,EAAE;QACrB,eAAe,EAAE,GAAG,CAAC,IAAI;QACzB,eAAe,EAAE,GAAG,CAAC,IAAI;KACzB,CAAA;AACF,CAAC"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/ui/theme.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,uEAAuE;AAYvE,MAAM,CAAC,MAAM,OAAO,GAAuC;IAC1D,aAAa,EAAE;QACd,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,SAAS;KACf;CACD,CAAA;AACD,MAAM,CAAC,MAAM,YAAY,GAAuC;IAC/D,aAAa,EAAE;QACd,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,SAAS;KACf;CACD,CAAA;AAMD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC7B,KAAK,EAAE,OAAoB;IAC3B,MAAM,EAAE,aAA2B;IACnC,OAAO,EAAE,SAAoB;IAC7B,UAAU,EAAE,KAAmB;IAC/B,YAAY,EAAE,KAAK;CACnB,CAAA;AAED,MAAM,OAAO,GAAG,gDAAgD,CAAA;AAEhE,MAAM,UAAU,QAAQ,CAAC,aAAsB;IAC9C,OAAO,OAAO,CAAA;AACf,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAgB;IAC9C,OAAO,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAA;AAChD,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAgB,EAAE,MAAkB;IACrE,MAAM,KAAK,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAA;IACvD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAyB,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,CAAA;IACpE,OAAO;QACN,UAAU,EAAE,GAAG,CAAC,CAAC;QACjB,iBAAiB,EAAE,GAAG,CAAC,CAAC;QACxB,aAAa,EAAE,GAAG,CAAC,EAAE;QACrB,eAAe,EAAE,GAAG,CAAC,IAAI;QACzB,eAAe,EAAE,GAAG,CAAC,IAAI;KACzB,CAAA;AACF,CAAC"}

package/dist/ui/use-tweaks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-tweaks.d.ts","sourceRoot":"","sources":["../../src/ui/use-tweaks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsC,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAEjF,wBAAgB,SAAS,IAAI;IAC5B,CAAC,EAAE,UAAU,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,UAAU,CAAC,KAAK,IAAI,CAAA;CAC/F,CAuBA"}
+{"version":3,"file":"use-tweaks.d.ts","sourceRoot":"","sources":["../../src/ui/use-tweaks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsC,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAEjF,wBAAgB,SAAS,IAAI;IAC5B,CAAC,EAAE,UAAU,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,UAAU,CAAC,KAAK,IAAI,CAAA;CAC/F,CAwBA"}

package/dist/ui/use-tweaks.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { resolveAccentVars, serifVar } from './theme.js';
+import { inverseTextVar, resolveAccentVars, serifVar } from './theme.js';
 import { applyTweak, loadTweaks, saveTweaks } from './tweaks.js';
 export function useTweaks() {
     const [t, setState] = useState(() => typeof localStorage !== 'undefined' ? loadTweaks(localStorage) : {});
@@ -18,6 +18,7 @@ export function useTweaks() {
         for (const [k, val] of Object.entries(resolveAccentVars(t.theme, t.accent)))
             root.style.setProperty(k, val);
         root.style.setProperty('--serif', serifVar(t.serifDisplay));
+        root.style.setProperty('--text-on-inverse', inverseTextVar(t.theme));
     }, [t.theme, t.density, t.accent, t.serifDisplay]);
     return { t, setTweak };
 }

package/dist/ui/use-tweaks.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tweaks.js","sourceRoot":"","sources":["../../src/ui/use-tweaks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAmB,MAAM,aAAa,CAAA;AAEjF,MAAM,UAAU,SAAS;IAIxB,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAa,GAAG,EAAE,CAC/C,OAAO,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAE,EAAiB,CACnF,CAAA;IACD,MAAM,QAAQ,GAAG,WAAW,CAC3B,CAAC,CAAyC,EAAE,CAAgC,EAAE,EAAE;QAC/E,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE;YACjB,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YACnC,IAAI,OAAO,YAAY,KAAK,WAAW;gBAAE,UAAU,CAAC,YAAY,EAAE,IAAI,CAAC,CAAA;YACvE,OAAO,IAAI,CAAA;QACZ,CAAC,CAAC,CAAA;IACH,CAAC,EACD,EAAE,CACF,CAAA;IACD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAA;QACrC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;QACxC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA;QAC5C,KAAK,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;YAC1E,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QAC/B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;IAC5D,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;IAClD,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAA;AACvB,CAAC"}
+{"version":3,"file":"use-tweaks.js","sourceRoot":"","sources":["../../src/ui/use-tweaks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAmB,MAAM,aAAa,CAAA;AAEjF,MAAM,UAAU,SAAS;IAIxB,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAa,GAAG,EAAE,CAC/C,OAAO,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAE,EAAiB,CACnF,CAAA;IACD,MAAM,QAAQ,GAAG,WAAW,CAC3B,CAAC,CAAyC,EAAE,CAAgC,EAAE,EAAE;QAC/E,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE;YACjB,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YACnC,IAAI,OAAO,YAAY,KAAK,WAAW;gBAAE,UAAU,CAAC,YAAY,EAAE,IAAI,CAAC,CAAA;YACvE,OAAO,IAAI,CAAA;QACZ,CAAC,CAAC,CAAA;IACH,CAAC,EACD,EAAE,CACF,CAAA;IACD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAA;QACrC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;QACxC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA;QAC5C,KAAK,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;YAC1E,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QAC/B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;QAC3D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAA;IACrE,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;IAClD,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAA;AACvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-labs/cms",
-  "version": "0.5.25",
+  "version": "0.5.27",
   "type": "module",
   "bin": {
     "growth-labs-cms-migrations": "./dist/cli/migrations.js"

package/src/providers/null.ts

@@ -59,6 +59,14 @@ export const nullAnalytics: AnalyticsProvider = {
 			},
 			readsTimeSeries: [],
 			sources: [],
+			funnel: {
+				views: null,
+				uniqueVisitors: null,
+				readCompletionRate: null,
+				paywallShown: null,
+				subscribeClicks: null,
+				boundaryConversionRate: null,
+			},
 		})
 	},
 }

package/src/providers/types.ts

@@ -5,6 +5,13 @@ export type ProviderStatus = 'live' | 'partial' | 'empty'
 export interface ProviderResult<T> {
 	status: ProviderStatus
 	data: T
+	/**
+	 * Optional per-key data lineage: where each number in `data` comes from
+	 * (e.g. `{ subscriptionsStarted: 'billing (site D1)', reads: 'rollup' }`).
+	 * The UI shows these so a reader never has to guess whether a figure is
+	 * ground truth or a derived rollup.
+	 */
+	sources?: Record<string, string>
 }
 
 export interface DateRange {
@@ -23,6 +30,24 @@ export interface ArticleAnalyticsSource {
 	paidStarts: number
 }
 
+/**
+ * Per-article free/premium boundary funnel. Every stage is `number | null`:
+ * null means NOT MEASURED for this article/range (event not instrumented,
+ * history predates slug attribution, or the fact table has no rows) and the
+ * UI must say so — never render a silent zero.
+ */
+export interface ArticleFunnelStages {
+	views: number | null
+	uniqueVisitors: number | null
+	/** 0..1 fraction of views that reached the 90% scroll mark. */
+	readCompletionRate: number | null
+	paywallShown: number | null
+	/** Boundary clicks: paywall CTA + inline membership CTA, per article. */
+	subscribeClicks: number | null
+	/** subscribeClicks / paywallShown (or the host's documented equivalent). */
+	boundaryConversionRate: number | null
+}
+
 export interface ArticleAnalyticsDetail {
 	id: string
 	slug: string
@@ -61,10 +86,11 @@ export interface ArticleAnalyticsDetail {
 	}
 	readsTimeSeries: Array<{ t: number; reads: number }>
 	sources: ArticleAnalyticsSource[]
+	funnel?: ArticleFunnelStages
 }
 
 export interface AnalyticsProvider {
-	getKpis(range: DateRange): Promise<ProviderResult<Record<string, number>>>
+	getKpis(range: DateRange): Promise<ProviderResult<Record<string, number | null>>>
 	getReadsTimeSeries(range: DateRange): Promise<ProviderResult<Array<{ t: number; reads: number }>>>
 	getTopContent(
 		range: DateRange,

package/src/ui/client/mount.tsx

@@ -5,6 +5,7 @@ import { CmsApp } from '../components/CmsApp.js'
 import { createCmsScreens } from '../screens/registry.js'
 import { initialWorkspaceState } from '../workspace-context.js'
 import { type MeResponseSummary, resolveBootState } from './boot-state.js'
+import '../styles/growth-labs-tokens.css'
 import '../styles/broadsheet.css'
 
 async function fetchMe(base: string): Promise<MeResponseSummary | null> {

package/src/ui/components/CmsApp.tsx

@@ -99,11 +99,7 @@ export function resolveScreenForAccess(
 }
 
 function EmptyRoute({ route }: { route: Route }) {
-	return (
-		<div className="page" style={{ padding: 40, color: 'var(--ink-muted)' }}>
-			The &quot;{route}&quot; screen mounts here.
-		</div>
-	)
+	return <div className="page shell-state">The &quot;{route}&quot; screen mounts here.</div>
 }
 
 // Render the active screen as a real child of the error boundary. The registry
@@ -135,26 +131,13 @@ class ScreenErrorBoundary extends Component<
 	render() {
 		if (this.state.error) {
 			return (
-				<div className="page" style={{ padding: 40 }}>
+				<div className="page shell-state">
 					<h1 className="page-title">Something went wrong</h1>
 					<div className="page-sub" style={{ marginTop: 8 }}>
 						The “{this.props.route}” screen hit an error and couldn’t render. The rest of the CMS is
 						unaffected — use the sidebar to navigate elsewhere.
 					</div>
-					<pre
-						style={{
-							marginTop: 16,
-							padding: 12,
-							fontSize: 12,
-							color: 'var(--red)',
-							whiteSpace: 'pre-wrap',
-							wordBreak: 'break-word',
-							background: 'var(--surface-sunken, rgba(0,0,0,0.04))',
-							borderRadius: 6,
-						}}
-					>
-						{this.state.error.message}
-					</pre>
+					<pre className="shell-error-detail">{this.state.error.message}</pre>
 					<button
 						type="button"
 						className="btn sm"

package/src/ui/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import type { Route } from '../hash-router.js'
 import type { IconName } from '../icons.js'
-import { BrandMark, Icon } from '../icons.js'
+import { Icon } from '../icons.js'
 import { navItems } from '../nav.js'
 import { useWorkspace } from '../workspace-context.js'
 import { SiteSwitcher } from './SiteSwitcher.js'
@@ -21,16 +21,10 @@ export function Sidebar(props: {
 
 	return (
 		<aside className="sidebar" aria-label="Main navigation" data-collapsed={props.collapsed}>
-			{/* Brand block — mark + serif wordmark with accent period */}
+			{/* Growth Labs gradient mark + Masthead wordmark. */}
 			<div className="sb-brand">
-				<div className="sb-mark">
-					<BrandMark size={18} color="#fff" />
-				</div>
-				{!props.collapsed && (
-					<div className="sb-wordmark">
-						Masthead<span className="dot">.</span>
-					</div>
-				)}
+				<div className="sb-mark" aria-hidden="true" />
+				{!props.collapsed && <div className="sb-wordmark">Masthead</div>}
 			</div>
 
 			{/* Workspace switcher */}
@@ -64,7 +58,7 @@ export function Sidebar(props: {
 			{/* Current-user footer */}
 			<div className="sb-foot">
 				<div className="sb-user">
-					<div className="avatar" style={{ background: 'var(--accent)' }}>
+					<div className="avatar" style={{ background: 'var(--surface-inverse)' }}>
 						{initial}
 					</div>
 					{!props.collapsed && (

package/src/ui/components/Topbar.tsx

@@ -67,22 +67,11 @@ export function Topbar(props: {
 				style={{ position: 'relative' }}
 			>
 				<Icon name="bell" size={17} />
-				<span
-					style={{
-						position: 'absolute',
-						top: 7,
-						right: 8,
-						width: 7,
-						height: 7,
-						borderRadius: '50%',
-						background: 'var(--red)',
-						border: '1.5px solid var(--bg)',
-					}}
-				/>
+				<span className="notification-dot" />
 			</button>
 
 			{/* Divider */}
-			<div style={{ width: 1, height: 22, background: 'var(--border)', margin: '0 4px' }} />
+			<div className="topbar-divider" />
 
 			{/* New content quick-create */}
 			<button type="button" className="btn primary sm" onClick={props.onCommand}>

package/src/ui/editor/ContentForm.tsx

@@ -807,7 +807,7 @@ export function ContentForm({
 	}
 
 	return (
-		<div style={formWrap}>
+		<div className="editor-document" style={formWrap}>
 			{/* Autosave indicator + AI assist toggle */}
 			<div style={saveIndicator}>
 				<span
@@ -1567,7 +1567,6 @@ const formWrap: React.CSSProperties = {
 	display: 'flex',
 	flexDirection: 'column',
 	gap: 0,
-	padding: '16px 24px',
 	flex: 1,
 	overflowY: 'auto',
 }
@@ -1589,11 +1588,11 @@ const titleInput: React.CSSProperties = {
 	width: '100%',
 	border: 0,
 	background: 'transparent',
-	fontFamily: 'var(--serif)',
+	fontFamily: 'var(--font-display)',
 	fontWeight: 600,
-	fontSize: 36,
-	letterSpacing: '-0.025em',
-	lineHeight: 1.08,
+	fontSize: 34,
+	letterSpacing: '-0.02em',
+	lineHeight: 1.15,
 	color: 'var(--ink)',
 	padding: 0,
 	outline: 'none',
@@ -1603,8 +1602,8 @@ const dekInput: React.CSSProperties = {
 	width: '100%',
 	border: 0,
 	background: 'transparent',
-	fontFamily: 'var(--serif)',
-	fontSize: 19,
+	fontFamily: 'var(--font-body)',
+	fontSize: 17,
 	lineHeight: 1.5,
 	color: 'var(--ink-soft)',
 	padding: 0,

package/src/ui/editor/Rte.tsx

@@ -493,8 +493,8 @@ const contentWrap: React.CSSProperties = {
 	flex: 1,
 	padding: '20px 22px',
 	overflowY: 'auto',
-	fontFamily: 'var(--serif)',
-	fontSize: 17,
-	lineHeight: 1.75,
+	fontFamily: 'var(--font-body)',
+	fontSize: 15.5,
+	lineHeight: 1.65,
 	color: 'var(--ink)',
 }

package/src/ui/inspector/FoundryTab.tsx

@@ -499,7 +499,7 @@ const progressTrack: React.CSSProperties = {
 const progressFill: React.CSSProperties = {
 	width: '100%',
 	height: '100%',
-	background: 'var(--gold)',
+	background: 'var(--accent-primary)',
 }
 
 const errorText: React.CSSProperties = {

package/src/ui/pages/admin.astro

@@ -22,7 +22,7 @@ const initial = { workspaces: config.workspaces, activeWorkspaceId: config.activ
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
 			rel="stylesheet"
-			href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap"
+			href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
 		/>
 	</head>
 	<body>

package/src/ui/screens/AnalyticsScreen.tsx

@@ -21,7 +21,11 @@
 // a .card-title + .masthead-rule hairline. NO BData, NO mock numbers.
 
 import { useCallback, useEffect, useReducer, useState } from 'react'
-import type { ArticleAnalyticsDetail, ProviderResult } from '../../providers/types.js'
+import type {
+	ArticleAnalyticsDetail,
+	ArticleFunnelStages,
+	ProviderResult,
+} from '../../providers/types.js'
 import { Icon } from '../icons.js'
 import {
 	type AnalyticsData,
@@ -358,6 +362,8 @@ function ArticleAnalyticsDetailBody({
 				/>
 			</div>
 
+			<ArticleFunnelPanel funnel={detail.funnel} />
+
 			<div className="grid-split-wide">
 				<ReadsChart series={readsResult} />
 				<ScrollDepthPanel detail={detail} />
@@ -368,6 +374,63 @@ function ArticleAnalyticsDetailBody({
 	)
 }
 
+// ---------------------------------------------------------------------------
+// ArticleFunnelPanel — the free/premium boundary, per article
+// ---------------------------------------------------------------------------
+// Each stage is number | null; null renders an explicit "not measured", never
+// a silent zero (unmeasured history and uninstrumented events must look
+// different from a genuinely quiet article).
+
+const FUNNEL_STAGE_DEFS: Array<{
+	key: keyof ArticleFunnelStages & string
+	label: string
+	fmt: 'num' | 'pct'
+}> = [
+	{ key: 'views', label: 'Views', fmt: 'num' },
+	{ key: 'uniqueVisitors', label: 'Unique visitors', fmt: 'num' },
+	{ key: 'readCompletionRate', label: 'Read completion', fmt: 'pct' },
+	{ key: 'paywallShown', label: 'Boundary shown', fmt: 'num' },
+	{ key: 'subscribeClicks', label: 'Boundary clicks', fmt: 'num' },
+	{ key: 'boundaryConversionRate', label: 'Boundary conversion', fmt: 'pct' },
+]
+
+export function ArticleFunnelPanel({ funnel }: { funnel: ArticleFunnelStages | undefined }) {
+	return (
+		<div className="panel panel-pad">
+			<div className="kicker" style={{ marginBottom: 10 }}>
+				Conversion funnel
+			</div>
+			<div className="grid-stats">
+				{FUNNEL_STAGE_DEFS.map((stage) => {
+					const raw = funnel?.[stage.key] ?? null
+					const measured = typeof raw === 'number' && Number.isFinite(raw)
+					return (
+						<div key={stage.key}>
+							<div style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{stage.label}</div>
+							<div
+								className="serif tnum"
+								style={{ fontSize: 22, fontWeight: 600, color: 'var(--ink)', margin: '4px 0 2px' }}
+							>
+								{measured ? (
+									stage.fmt === 'pct' ? (
+										formatPercent(raw)
+									) : (
+										formatNumber(raw)
+									)
+								) : (
+									<span style={{ fontSize: 13, color: 'var(--ink-faint)', fontStyle: 'italic' }}>
+										not measured
+									</span>
+								)}
+							</div>
+						</div>
+					)
+				})}
+			</div>
+		</div>
+	)
+}
+
 function ScrollDepthPanel({ detail }: { detail: ArticleAnalyticsDetail }) {
 	const rows = [
 		{ label: '25%', count: detail.scrollDepth.scroll25, rate: detail.scrollDepth.scroll25Rate },
@@ -520,7 +583,7 @@ function AnalyticsBody({ data, isPartial }: { data: AnalyticsData; isPartial: bo
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
 			{isPartial && (
-				<PartialBanner message="Showing reads only — full metrics arrive with the analytics rollup." />
+				<PartialBanner message="Some metrics are unavailable for this range — each tile shows its own state and source." />
 			)}
 
 			{/* KPI cards */}
@@ -561,6 +624,12 @@ const KPI_DEFS: Array<{
 		fmt: 'num',
 		emptyNote: 'No visitor data',
 	},
+	{
+		key: 'subscriptionsStarted',
+		label: 'New subscriptions',
+		fmt: 'num',
+		emptyNote: 'No subscription data',
+	},
 	{
 		key: 'conversionRate',
 		label: 'Conversion',
@@ -569,7 +638,7 @@ const KPI_DEFS: Array<{
 	},
 ]
 
-function KpiCards({ kpis }: { kpis: ProviderResult<Record<string, number | null>> }) {
+export function KpiCards({ kpis }: { kpis: ProviderResult<Record<string, number | null>> }) {
 	const kpiStatus = selectKpiState(kpis)
 
 	if (kpiStatus === 'empty') {
@@ -586,19 +655,22 @@ function KpiCards({ kpis }: { kpis: ProviderResult<Record<string, number | null>
 			{KPI_DEFS.map((def) => {
 				const raw = kpis.data?.[def.key] ?? null
 				const formatted = formatKpi(raw, def.fmt)
-				const isPending =
+				const isUnmeasured =
 					formatted !== null && typeof formatted === 'object' && (formatted as KpiPending).pending
 
-				const displayValue = isPending ? null : (formatted as string)
-				const displayNote = isPending ? '— pending backfill' : null
+				const displayValue = isUnmeasured ? null : (formatted as string)
+				// A null KPI is an honest gap — the provider could not measure it
+				// for this range — not a promise that a backfill will fill it.
+				const displayNote = isUnmeasured ? 'not measured' : null
 
 				return (
 					<KpiCard
 						key={def.key}
 						label={def.label}
-						status={isPending ? 'partial' : kpiStatus}
+						status={isUnmeasured ? 'partial' : kpiStatus}
 						value={displayValue}
 						note={displayNote}
+						source={kpis.sources?.[def.key] ?? null}
 					/>
 				)
 			})}
@@ -611,11 +683,13 @@ function KpiCard({
 	status,
 	value,
 	note,
+	source,
 }: {
 	label: string
 	status: 'live' | 'partial' | 'empty'
 	value: string | null
 	note: string | null
+	source?: string | null
 }) {
 	const empty = status === 'empty' || value === null
 	return (
@@ -631,6 +705,11 @@ function KpiCard({
 			{status === 'partial' && !note && (
 				<span style={{ fontSize: 11, fontWeight: 600, color: 'var(--amber)' }}>partial</span>
 			)}
+			{source && (
+				<div style={{ fontSize: 10, color: 'var(--ink-faint)', marginTop: 4 }} title="Data source">
+					{source}
+				</div>
+			)}
 		</div>
 	)
 }

package/src/ui/screens/AuthorsScreen.tsx

@@ -520,7 +520,7 @@ function initialsFor(name: string): string {
 	return (name.trim().slice(0, 2) || '—').toUpperCase()
 }
 
-const AVATAR_COLORS = ['#0c4a6e', '#1f6b4a', '#5b4bc4', '#8c6d14', '#075985', '#475569']
+const AVATAR_COLORS = ['#2F6FBD', '#1FA3A8', '#8075ED', '#F7A34B', '#2CA8E0', '#4D4D4D']
 
 function avatarColor(seed: string): string {
 	let h = 0

package/src/ui/screens/ContentInsightsScreen.tsx

@@ -171,7 +171,7 @@ export function ContentInsightsScreen() {
 							style={{
 								overflow: 'hidden',
 								marginBottom: 'var(--gap)',
-								borderLeft: `3px solid ${group.lane == null ? 'var(--hairline)' : 'var(--gold)'}`,
+								borderLeft: `3px solid ${group.lane == null ? 'var(--hairline)' : 'var(--accent-primary)'}`,
 							}}
 						>
 							<header