MIND-Studio · rep0x · Jun 21, 2026 · Jun 21, 2026 · Jun 21, 2026 · Jun 21, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@inrupt/solid-client-authn-browser": "^4.0.0",
     "@inrupt/solid-client-authn-node": "^3.1.0",
     "@mind-studio/core": "^0.8.0",
-    "@mind-studio/ui": "^0.4.0",
+    "@mind-studio/ui": "^0.7.0",
     "lucide-react": "^0.460.0",
     "next": "16.2.6",
     "react": "19.2.4",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Space_Grotesk } from "next/font/google";
+import { Fraunces, Geist, Geist_Mono, Space_Grotesk } from "next/font/google";
 import { headers } from "next/headers";
 import { Providers } from "@/components/Providers";
 import { profile } from "@/lib/profile";
@@ -9,6 +9,8 @@ import "./globals.css";
 const display = Space_Grotesk({ subsets: ["latin"], variable: "--font-display-var" });
 const sans = Geist({ subsets: ["latin"], variable: "--font-sans-var" });
 const mono = Geist_Mono({ subsets: ["latin"], variable: "--font-mono-var" });
+// Serif for ui 0.7.0's h1–h3 rule, which resolves to --font-fraunces.
+const serif = Fraunces({ subsets: ["latin"], variable: "--font-fraunces", display: "swap" });
 
 // Host-resolved per-project metadata: the document title/description reflect the
 // project of the subdomain being served (one image, many projects in subdomain
@@ -26,7 +28,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
   return (
     <html
       lang={profile.locale}
-      className={`dark ${display.variable} ${sans.variable} ${mono.variable}`}
+      className={`dark ${display.variable} ${sans.variable} ${mono.variable} ${serif.variable}`}
       suppressHydrationWarning
     >
       <body className="font-sans antialiased">

diff --git a/src/components/Landing.tsx b/src/components/Landing.tsx
@@ -5,7 +5,7 @@
 // a light-shaft hero, the login card always visible on the right. Logged-in
 // users never see this — Shell renders the dashboard for them.
 
-import { Symbol } from "@mind-studio/ui";
+import { Logo } from "@mind-studio/ui";
 import {
   CalendarDays,
   FileText,
@@ -61,13 +61,10 @@ export function Landing({ onLoggedIn }: { onLoggedIn?: () => void }) {
         {/* public header — no nav (anonymous) */}
         <header className="flex items-center justify-between py-5">
           <div className="flex items-center gap-3">
-            <Symbol className="h-8 w-8 rounded-lg" />
-            <span className="font-display text-lg font-semibold tracking-tight">
-              {profile.appName}
-              {brand.title !== profile.appName && (
-                <span className="font-normal text-muted-foreground"> · {brand.title}</span>
-              )}
-            </span>
+            <Logo label={profile.appName} />
+            {brand.title !== profile.appName && (
+              <span className="text-sm font-normal text-muted-foreground">· {brand.title}</span>
+            )}
           </div>
           <span className="hidden font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground sm:inline">
             {brand.title}

diff --git a/src/components/RouterShell.tsx b/src/components/RouterShell.tsx
@@ -16,6 +16,7 @@ import {
   Button,
   Card,
   CardContent,
+  Logo,
   Spinner,
   Symbol,
 } from "@mind-studio/ui";
@@ -208,10 +209,7 @@ function ApexChrome({ displayName, children }: { displayName: string; children:
       <div className="mx-auto flex min-h-screen max-w-6xl flex-col px-4 sm:px-6">
         <header className="flex items-center justify-between gap-3 border-b border-border/60 py-3">
           <div className="flex items-center gap-3">
-            <Symbol className="h-8 w-8 rounded-lg" />
-            <span className="font-display text-lg font-semibold tracking-tight">
-              {profile.appName}
-            </span>
+            <Logo label={profile.appName} />
           </div>
           <div className="flex items-center gap-2.5">
             <Avatar className="size-7">

diff --git a/src/components/Shell.tsx b/src/components/Shell.tsx
@@ -12,6 +12,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Logo,
   Spinner,
   Symbol,
 } from "@mind-studio/ui";
@@ -267,10 +268,7 @@ export function Shell({ children }: { children: ReactNode }) {
             <div className="flex items-center justify-between gap-3 py-3">
               <div className="flex items-center gap-2">
                 <Link href="/" className="group flex items-center gap-3">
-                  <Symbol className="h-8 w-8 rounded-lg transition-transform duration-300 group-hover:rotate-3 group-hover:scale-105" />
-                  <span className="font-display text-lg font-semibold tracking-tight">
-                    {profile.appName}
-                  </span>
+                  <Logo label={profile.appName} />
                 </Link>
                 {myProjects.length > 1 && (
                   <DropdownMenu>

diff --git a/src/components/WorkspaceShell.tsx b/src/components/WorkspaceShell.tsx
@@ -9,7 +9,7 @@
 // every path), so navigation is route-aware HERE: <Link> changes the URL,
 // RouterShell re-mounts us, and we pick the view from usePathname().
 
-import { Avatar, AvatarFallback, Button, Symbol } from "@mind-studio/ui";
+import { Avatar, AvatarFallback, Button, Logo } from "@mind-studio/ui";
 import { CalendarDays, FileText, LayoutDashboard, LogOut, SquareKanban, Users } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -126,13 +126,9 @@ export function WorkspaceShell({
         <header className="sticky top-0 z-40 -mx-4 border-b border-border/60 bg-background/80 px-4 backdrop-blur-md sm:-mx-6 sm:px-6">
           <div className="flex items-center justify-between gap-3 py-3">
             <Link href="/" className="group flex items-center gap-3">
-              <Symbol className="h-8 w-8 rounded-lg transition-transform duration-300 group-hover:rotate-3 group-hover:scale-105" />
-              <span className="font-display text-lg font-semibold tracking-tight">
-                {profile.appName}
-                <span className="hidden font-normal text-muted-foreground sm:inline">
-                  {" "}
-                  · {HUB_BRANDING.title}
-                </span>
+              <Logo label={profile.appName} />
+              <span className="hidden text-sm font-normal text-muted-foreground sm:inline">
+                · {HUB_BRANDING.title}
               </span>
             </Link>
             <div className="flex items-center gap-2.5">

diff --git a/src/lib/theme/emai.ts b/src/lib/theme/emai.ts
@@ -55,6 +55,9 @@ export const emai: Theme = parseTheme(
     radius: "0.5rem",
     font: {
       sans: "var(--font-sans-var), ui-sans-serif, system-ui, sans-serif",
+      // ui 0.7.0 maps h1–h3 → --mind-font-serif; keep the fleet Fraunces stack.
+      serif:
+        'var(--font-fraunces), "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", serif',
       mono: "var(--font-mono-var), ui-monospace, SFMono-Regular, monospace",
     },
     logo: {