src/app/globals.css

@@ -56,6 +56,10 @@
 }
 
 @layer base {
-  body { color: var(--ink); background: var(--bg); }
+  body {
+    color: var(--ink);
+    background: var(--bg);
+    font-family: var(--font-sans), system-ui, sans-serif;
+  }
   :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
 }

src/app/layout.tsx

@@ -1,11 +1,25 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
-import { Roboto } from "next/font/google";
+import { Cormorant_Garamond, Manrope } from "next/font/google";
 import { DEFAULT_THEME, THEME_SCRIPT } from "@/lib/theme";
 import "./globals.css";
+import "../styles/type.css";
 import "../styles/legacy.css";
 
-const roboto = Roboto({ subsets: ["latin"], weight: ["400", "500", "700"] });
+const manrope = Manrope({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800"],
+  variable: "--font-sans",
+  display: "swap",
+});
+
+const cormorant = Cormorant_Garamond({
+  subsets: ["latin"],
+  weight: ["500", "600"],
+  style: ["normal", "italic"],
+  variable: "--font-serif",
+  display: "swap",
+});
 
 export const metadata: Metadata = {
   title: "Minnect feed browser",
@@ -14,7 +28,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={roboto.className} data-theme={DEFAULT_THEME} suppressHydrationWarning>
+    <html lang="en" className={`${manrope.variable} ${cormorant.variable}`} data-theme={DEFAULT_THEME} suppressHydrationWarning>
       <head>
         {/* Applies the stored theme before first paint (ADR 0001, section 5). */}
         <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />

src/styles/type.css

@@ -0,0 +1,39 @@
+/* Reusable type classes (spec "Typography", ADR 0001 section 4).
+   Manrope is the body font on <body>. Cormorant Garamond is for titles only. */
+
+/* Wordmark: the text MINNECT. */
+.type-wordmark {
+  font-family: var(--font-sans), system-ui, sans-serif;
+  font-weight: 800;
+  letter-spacing: 0.26em;
+}
+
+/* Eyebrow label. */
+.type-eyebrow {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--ink-3);
+}
+
+/* Serif title: feed title, panel titles, featured expert names, sheet titles,
+   text-only post slides on mobile. Add .type-title-italic for the italic 500 cut. */
+.type-title {
+  font-family: var(--font-serif), Georgia, serif;
+  font-weight: 500;
+}
+.type-title-strong { font-weight: 600; }
+.type-title-italic { font-style: italic; font-weight: 500; }
+
+/* Post body. */
+.type-post-body {
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+/* Meta text (times, counts). */
+.type-meta {
+  font-size: 12.5px;
+  color: var(--ink-3);
+}