Add typography system with Public Sans and 16 type styles

Self-host Public Sans via @fontsource-variable (weights 100-900, normal
+ italic). Add 6 composed @utility classes in typography.css for styles
that combine multiple properties (body-strong, small-strong, label,
overline, body-link, small-link). Matching text styles created in the
Figma design file via MCP for designer use.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package-lock.json

@@ -8,6 +8,7 @@
       "name": "sdc-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@fontsource-variable/public-sans": "^5.2.7",
         "@tailwindcss/vite": "^4.3.0",
         "clsx": "^2.1.1",
         "react": "^19.2.6",
@@ -915,6 +916,15 @@
         "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
+    "node_modules/@fontsource-variable/public-sans": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/public-sans/-/public-sans-5.2.7.tgz",
+      "integrity": "sha512-4mvade2J3slKkvwRkS+p8T3szet/0vhWoSnuUJTVU81Uo2pRpSZY/Y8bSLRqpSwzIPxjVmRJ53oq6JKP/l/PSg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@fontsource-variable/public-sans": "^5.2.7",
     "@tailwindcss/vite": "^4.3.0",
     "clsx": "^2.1.1",
     "react": "^19.2.6",

src/styles/global.css

@@ -1,13 +1,12 @@
+@import "@fontsource-variable/public-sans";
+@import "@fontsource-variable/public-sans/wght-italic.css";
 @import "tailwindcss";
 @import "../tokens/tokens.css";
+@import "./typography.css";
 
 @layer base {
-  html {
-    font-size: 15px;
-  }
-
   body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    font-family: var(--font-sans);
     line-height: 1.5;
     background-color: var(--color-bg);
     color: var(--color-text);

src/styles/typography.css

@@ -0,0 +1,41 @@
+@utility text-body-strong {
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  font-weight: 700;
+}
+
+@utility text-small-strong {
+  font-size: var(--text-small);
+  line-height: var(--text-small--line-height);
+  font-weight: 700;
+}
+
+@utility text-label {
+  font-size: var(--text-h6);
+  line-height: var(--text-h6--line-height);
+  font-weight: 500;
+}
+
+@utility text-overline {
+  font-size: var(--text-caption);
+  line-height: var(--text-caption--line-height);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+@utility text-body-link {
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  font-weight: 700;
+  text-decoration-line: underline;
+  color: var(--color-blue-02);
+}
+
+@utility text-small-link {
+  font-size: var(--text-small);
+  line-height: var(--text-small--line-height);
+  font-weight: 700;
+  text-decoration-line: underline;
+  color: var(--color-blue-02);
+}