diff --git a/.changeset/weak-walls-drum.md b/.changeset/weak-walls-drum.md
new file mode 100644
index 000000000..38ebb2898
--- /dev/null
+++ b/.changeset/weak-walls-drum.md
@@ -0,0 +1,5 @@
+---
+'@launchpad-ui/box': patch
+---
+
+Add typography tokens to box
diff --git a/package.json b/package.json
index 4429759ba..a6ed893a4 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
     "@vanilla-extract/css": "^1.14.0",
-    "@vanilla-extract/vite-plugin": "^3.9.0",
+    "@vanilla-extract/vite-plugin": "^3.9.2",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-v8": "^1.0.0-beta.4",
     "@vitest/ui": "^1.0.0-beta.4",
diff --git a/packages/box/src/styles/rainbow-sprinkles.css.ts b/packages/box/src/styles/rainbow-sprinkles.css.ts
index 11d892715..b8a1a9981 100644
--- a/packages/box/src/styles/rainbow-sprinkles.css.ts
+++ b/packages/box/src/styles/rainbow-sprinkles.css.ts
@@ -3,6 +3,15 @@ import { flatten } from 'flat';
 import { defineProperties, createRainbowSprinkles } from 'rainbow-sprinkles';
 
 const { bg, border, fill, shadow, text, gradient, ...global } = vars.color;
+const { body, heading, small, label, code, display } = vars;
+const typography = {
+  body,
+  heading,
+  small,
+  label,
+  code,
+  display,
+};
 
 type FlattenObjectKeys<T extends Record<string, unknown>, Key = keyof T> = Key extends string
   ? T[Key] extends Record<string, unknown>
@@ -16,6 +25,7 @@ type BackgroundKeys = FlattenObjectKeys<typeof bg>;
 type BorderKeys = FlattenObjectKeys<typeof border>;
 type FillKeys = FlattenObjectKeys<typeof fill>;
 type TextKeys = FlattenObjectKeys<typeof text>;
+type TypographyKeys = FlattenObjectKeys<typeof typography>;
 
 const colors = flatten<typeof global, Record<GlobalKeys, string>>(global);
 const gradients = flatten<typeof gradient, Record<GradientKeys, string>>(gradient);
@@ -23,6 +33,7 @@ const backgrounds = flatten<typeof bg, Record<BackgroundKeys, string>>(bg);
 const borders = flatten<typeof border, Record<BorderKeys, string>>(border);
 const fills = flatten<typeof fill, Record<FillKeys, string>>(fill);
 const texts = flatten<typeof text, Record<TextKeys, string>>(text);
+const typographies = flatten<typeof typography, Record<TypographyKeys, string>>(typography);
 
 const responsiveProperties = defineProperties({
   conditions: {
@@ -53,6 +64,7 @@ const responsiveProperties = defineProperties({
     marginBottom: vars.spacing,
     borderRadius: vars.border.radius,
     borderWidth: vars.border.width,
+    font: typographies,
     fontFamily: vars.font.family,
     fontSize: vars.font.size,
     fontWeight: vars.font.weight,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c0740b7b5..6e8e2999b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -117,8 +117,8 @@ importers:
         specifier: ^1.14.0
         version: 1.14.0
       '@vanilla-extract/vite-plugin':
-        specifier: ^3.9.0
-        version: 3.9.0(@types/node@20.9.0)(vite@5.0.0)
+        specifier: ^3.9.2
+        version: 3.9.2(@types/node@20.9.0)(vite@5.0.0)
       '@vitejs/plugin-react-swc':
         specifier: ^3.5.0
         version: 3.5.0(vite@5.0.0)
@@ -8821,6 +8821,33 @@ packages:
       - terser
     dev: true
 
+  /@vanilla-extract/integration@6.2.4(@types/node@20.9.0):
+    resolution: {integrity: sha512-+AfymNMVq9sEUe0OJpdCokmPZg4Zi6CqKaW/PnUOfDwEn53ighHOMOBl5hAgxYR8Kiz9NG43Bn00mkjWlFi+ng==}
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.23.2)
+      '@vanilla-extract/babel-plugin-debug-ids': 1.0.3
+      '@vanilla-extract/css': 1.14.0
+      esbuild: 0.17.6
+      eval: 0.1.8
+      find-up: 5.0.0
+      javascript-stringify: 2.1.0
+      lodash: 4.17.21
+      mlly: 1.4.2
+      outdent: 0.8.0
+      vite: 4.5.0(@types/node@20.9.0)
+      vite-node: 0.28.5(@types/node@20.9.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /@vanilla-extract/private@1.0.3:
     resolution: {integrity: sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==}
 
@@ -8832,15 +8859,15 @@ packages:
       '@vanilla-extract/css': 1.14.0
     dev: false
 
-  /@vanilla-extract/vite-plugin@3.9.0(@types/node@20.9.0)(vite@5.0.0):
-    resolution: {integrity: sha512-Q2HYAyEJ93Uy7GHQPPiP8SXwPMHGpd4d0YnrIQqB0YZccYbGJR/WFIln9Dmbzx2pdngQUoOfhwEg6kJF8sQrog==}
+  /@vanilla-extract/vite-plugin@3.9.2(@types/node@20.9.0)(vite@5.0.0):
+    resolution: {integrity: sha512-WYgWiEs+nw+lNazyW0Ixp0MMgtNgPL+8fFKrol1V5XoNIzRrYPGfuLhRI7PwheSWQVGF7OOer0kUWQcLey1vOQ==}
     peerDependencies:
-      vite: ^2.2.3 || ^3.0.0 || ^4.0.3 || 5
+      vite: ^2.2.3 || ^3.0.0 || ^4.0.3 || ^5.0.0 || 5
     dependencies:
-      '@vanilla-extract/integration': 6.2.2(@types/node@20.9.0)
+      '@vanilla-extract/integration': 6.2.4(@types/node@20.9.0)
       outdent: 0.8.0
       postcss: 8.4.31
-      postcss-load-config: 3.1.4(postcss@8.4.31)
+      postcss-load-config: 4.0.1(postcss@8.4.31)
       vite: 5.0.0(@types/node@20.9.0)
     transitivePeerDependencies:
       - '@types/node'