@growth-labs/cms 0.5.26 → 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.26",
+  "version": "0.5.27",
   "type": "module",
   "bin": {
     "growth-labs-cms-migrations": "./dist/cli/migrations.js"

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/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

package/src/ui/screens/EditorScreen.tsx

@@ -58,12 +58,20 @@ const CONTENT_TYPE_LABELS: Record<ContentType, string> = {
 
 const STATUS_PILL_COLORS: Record<ContentStatus, string> = {
 	draft: 'var(--ink-faint)',
-	review: '#a78bfa',
-	scheduled: '#60a5fa',
-	published: '#34d399',
+	review: 'var(--amber)',
+	scheduled: 'var(--accent)',
+	published: 'var(--green)',
 	archived: 'var(--ink-faint)',
 }
 
+export function editorStatusColor(status: ContentStatus): string {
+	return STATUS_PILL_COLORS[status]
+}
+
+export function editorStatusBackground(status: ContentStatus): string {
+	return `color-mix(in srgb, ${editorStatusColor(status)} 14%, transparent)`
+}
+
 // ---------------------------------------------------------------------------
 // EditorScreen
 // ---------------------------------------------------------------------------
@@ -503,8 +511,8 @@ function statusPill(status: ContentStatus): React.CSSProperties {
 		fontWeight: 600,
 		letterSpacing: '0.06em',
 		textTransform: 'uppercase',
-		background: `${STATUS_PILL_COLORS[status]}22`,
-		color: STATUS_PILL_COLORS[status],
+		background: editorStatusBackground(status),
+		color: editorStatusColor(status),
 		flexShrink: 0,
 	}
 }
@@ -526,10 +534,10 @@ const headerBar: React.CSSProperties = {
 	display: 'flex',
 	alignItems: 'center',
 	justifyContent: 'space-between',
-	height: 48,
-	padding: '0 16px',
+	height: 58,
+	padding: '0 20px',
 	borderBottom: '1px solid var(--border)',
-	background: 'var(--panel)',
+	background: 'var(--surface-raised-nav)',
 	flexShrink: 0,
 	gap: 12,
 }
@@ -661,7 +669,7 @@ const formArea: React.CSSProperties = {
 }
 
 const inspectorSlot: React.CSSProperties = {
-	flex: '0 0 340px',
+	flex: '0 0 296px',
 	borderLeft: '1px solid var(--border)',
 	display: 'flex',
 	flexDirection: 'column',

package/src/ui/screens/LibraryScreen.tsx

@@ -753,7 +753,10 @@ function ListRow({
 						>
 							{row.title || '(Untitled)'}
 							{row.featured && (
-								<span title="Premium" style={{ color: 'var(--gold)', flex: 'none' }}>
+								<span
+									title="Premium"
+									style={{ color: 'var(--accent-primary-strong)', flex: 'none' }}
+								>
 									<Icon name="star" size={13} />
 								</span>
 							)}
@@ -1064,7 +1067,7 @@ function BoardCard({
 					{row.updatedAt ? formatDate(row.updatedAt) : (row.authorName ?? '—')}
 				</span>
 				{row.featured && (
-					<span style={{ marginLeft: 'auto', color: 'var(--gold)' }}>
+					<span style={{ marginLeft: 'auto', color: 'var(--accent-primary-strong)' }}>
 						<Icon name="star" size={12} />
 					</span>
 				)}

package/src/ui/screens/SettingsScreen.tsx

@@ -375,7 +375,7 @@ function GeneralSettings({
 // Branding settings
 // ---------------------------------------------------------------------------
 
-const ACCENT_PRESETS = ['#0c4a6e', '#b23a2e', '#1f6b4a', '#5b4bc4', '#374151']
+const ACCENT_PRESETS = ['#2F6FBD', '#1FA3A8', '#2CA8E0', '#8075ED', '#F56A61']
 const TYPEFACE_OPTIONS = ['serif', 'Source Serif 4', 'Spectral', 'Newsreader', 'Inter']
 
 function BrandingSettings({

package/src/ui/screens/SubscriptionsScreen.tsx

@@ -1310,7 +1310,7 @@ function KpiCard({
 // PlanMixChart — stacked bar + legend rows (aside panel)
 // ---------------------------------------------------------------------------
 
-const PLAN_DOT_COLORS = ['#1f6b4a', '#0c4a6e', '#5b4bc4', '#8c6d14', '#475569']
+const PLAN_DOT_COLORS = ['#1FA3A8', '#2F6FBD', '#8075ED', '#F7A34B', '#4D4D4D']
 
 function PlanMixChart({
 	planMix,
@@ -1746,7 +1746,7 @@ function initialsFor(email: string): string {
 	return local.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