chore(design-system): match studio font stack (#48477)

## What kind of change does this PR introduce?

Chore

## What is the current behavior?

Design system still uses the old CustomFont family, so documented
components no longer match Studio, www, and docs after the Inter /
Manrope rollout.

## What is the new behavior?

Design system uses the same font stack as the other apps:

- Inter for body (`--font-sans`)
- Manrope for headings (`--font-heading`)
- Source Code Pro for mono

Also adopts the Inter-optimised type scale and base weight (`450`) used
in Studio.

## Additional context

Based on Francesco's unshipped `chore/update-fonts` draft (design-system
slice only). Related shipped work: #47306, #47227.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Updated the design system with refreshed typography using Inter and
Manrope, with Source Code Pro for code.
* Refined theme typography and spacing tokens, including a more complete
text scale, updated font weights, and container sizing.
* Improved heading styling and ensured `code`/`pre`/`kbd`/`samp` use
consistent monospace treatment.
* Adjusted default border styling and improved font loading/fallback
behavior for more consistent rendering.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/design-system/app/fonts/index.ts

@@ -1,53 +0,0 @@
-import { Source_Code_Pro } from 'next/font/google'
-import localFont from 'next/font/local'
-
-export const customFont = localFont({
-  variable: '--font-custom',
-  display: 'swap',
-  fallback: ['Circular', 'custom-font', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
-  src: [
-    {
-      path: './CustomFont-Book.woff2',
-      weight: '400',
-      style: 'normal',
-    },
-    {
-      path: './CustomFont-BookItalic.woff2',
-      weight: '400',
-      style: 'italic',
-    },
-    {
-      path: './CustomFont-Medium.woff2',
-      weight: '500',
-      style: 'normal',
-    },
-    {
-      path: './CustomFont-Bold.woff2',
-      weight: '700',
-      style: 'normal',
-    },
-    {
-      path: './CustomFont-BoldItalic.woff2',
-      weight: '700',
-      style: 'italic',
-    },
-    {
-      path: './CustomFont-Black.woff2',
-      weight: '800',
-      style: 'normal',
-    },
-    {
-      path: './CustomFont-BlackItalic.woff2',
-      weight: '800',
-      style: 'italic',
-    },
-  ],
-})
-
-export const sourceCodePro = Source_Code_Pro({
-  subsets: ['latin'],
-  fallback: ['Source Code Pro', 'Office Code Pro', 'Menlo', 'monospace'],
-  variable: '--font-source-code-pro',
-  display: 'swap',
-  weight: ['400', '500', '600', '700'],
-})

apps/design-system/app/layout.tsx

@@ -3,11 +3,11 @@ import '@/styles/globals.css'
 
 import type { Metadata, Viewport } from 'next'
 
-import { customFont, sourceCodePro } from './fonts'
 import { Providers } from './Providers'
 import { Toaster } from './toaster'
+import { inter, manrope, sourceCodePro } from '@/lib/fonts'
 
-const className = `${customFont.variable} ${sourceCodePro.variable}`
+const className = `${inter.variable} ${manrope.variable} ${sourceCodePro.variable}`
 
 const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '/design-system'
 
@@ -126,7 +126,7 @@ export default async function Layout({ children }: RootLayoutProps) {
         {/* [Danny]: This has to be an inline style tag here and not a separate component due to next/font */}
         <style
           dangerouslySetInnerHTML={{
-            __html: `:root{--font-custom:${customFont.style.fontFamily};--font-source-code-pro:${sourceCodePro.style.fontFamily};}`,
+            __html: `:root{--font-sans:${inter.style.fontFamily};--font-heading:${manrope.style.fontFamily};--font-source-code-pro:${sourceCodePro.style.fontFamily};}`,
           }}
         />
       </head>

apps/design-system/lib/fonts.ts

@@ -0,0 +1,23 @@
+import { Inter, Manrope, Source_Code_Pro } from 'next/font/google'
+
+export const manrope = Manrope({
+  variable: '--font-manrope',
+  display: 'swap',
+  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  subsets: ['latin'],
+})
+
+export const inter = Inter({
+  variable: '--font-inter',
+  display: 'swap',
+  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  subsets: ['latin'],
+})
+
+export const sourceCodePro = Source_Code_Pro({
+  subsets: ['latin'],
+  fallback: ['Source Code Pro', 'Office Code Pro', 'Menlo', 'monospace'],
+  variable: '--font-source-code-pro',
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+})

apps/design-system/styles/globals.css

@@ -9,9 +9,30 @@
 @source './../../../packages/ui/src/**/*.{tsx,ts,js}';
 @source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
 
+@theme inline {
+  --font-sans:
+    var(--font-inter), Inter, Helvetica Neue, Helvetica, ui-sans-serif, system-ui, sans-serif;
+  --font-heading: var(--font-manrope, var(--font-sans));
+  --font-mono: var(--font-source-code-pro), 'Source Code Pro', ui-monospace, Menlo, monospace;
+}
+
 @theme {
   /* added to get max-w-site */
   --container-site: 128rem;
+  /* font sizing and weights optimized for Inter */
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --text-lg: 1rem;
+  --text-xl: 1.125rem;
+  --text-2xl: 1.375rem;
+  --text-3xl: 1.75rem;
+  --text-4xl: 2.125rem;
+  --text-5xl: 2.875rem;
+  --text-6xl: 3.625rem;
+  --text-7xl: 4.375rem;
+  --text-8xl: 5.875rem;
+  --text-9xl: 7.875rem;
+  --font-weight-normal: 450;
 }
 
 @layer base {
@@ -30,9 +51,7 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
-}
 
-@layer base {
   * {
     @apply border-border;
   }
@@ -40,13 +59,35 @@
     @apply scroll-smooth;
   }
   body {
-    @apply bg-default text-foreground;
+    @apply bg-default text-foreground font-normal;
     /* font-feature-settings: "rlig" 1, "calt" 1; */
     font-synthesis-weight: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
+  code,
+  .code-content,
+  pre,
+  kbd,
+  samp,
+  .font-mono {
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+    --text-5xl: 3rem;
+    --text-6xl: 3.75rem;
+    --text-7xl: 4.5rem;
+    --text-8xl: 6rem;
+    --text-9xl: 8rem;
+    --font-weight-normal: 400;
+  }
 }
 
 @layer utilities {
@@ -76,6 +117,21 @@
   }
 }
 
+h1:not(.font-mono),
+h2:not(.font-mono),
+h3:not(.font-mono),
+h4:not(.font-mono),
+h5:not(.font-mono),
+h6:not(.font-mono),
+.h1:not(.font-mono),
+.h2:not(.font-mono),
+.h3:not(.font-mono),
+.h4:not(.font-mono),
+.h5:not(.font-mono),
+.h6:not(.font-mono) {
+  @apply font-heading font-semibold;
+}
+
 .rdg-cell {
   padding-inline: 0.5rem;
 }