Design System
Fonts
Load Inter and Instrument Serif to match Campus One's typography
The theme sets three font stacks via Tailwind tokens:
| Token | Stack |
|---|---|
font-sans | "Inter Variable", "Inter", sans-serif |
font-serif | "Instrument Serif", "Iowan Old Style", Georgia, serif |
font-mono | "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace |
The fallbacks are good enough on most systems, but if you want the exact Campus One look, load the webfonts.
Option 1 — Google Fonts (recommended)
Add this link to your <head>:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap"
rel="stylesheet"
/>Option 2 — Next.js next/font
If you're on Next.js, prefer next/font/google — it self-hosts the fonts at build time, eliminates render-blocking, and avoids the layout shift:
import { Inter, Instrument_Serif } from "next/font/google";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
});
const instrumentSerif = Instrument_Serif({
subsets: ["latin"],
weight: "400",
style: ["normal", "italic"],
variable: "--font-instrument-serif",
});
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${inter.variable} ${instrumentSerif.variable}`}>
<body>{children}</body>
</html>
);
}Then in your globals.css, point the theme tokens at the CSS variables:
@theme inline {
--font-sans: var(--font-inter), sans-serif;
--font-serif: var(--font-instrument-serif), Georgia, serif;
}Option 3 — font-mono
We don't load JetBrains Mono by default — the system mono fallback (ui-monospace) is great on every modern OS. Add it via Google Fonts if you want consistency in screenshots or marketing material.