diff --git a/apps/example-nextjs/components/billing.css.ts b/apps/example-nextjs/components/billing.css.ts
index 6493dbe..5789cf6 100644
--- a/apps/example-nextjs/components/billing.css.ts
+++ b/apps/example-nextjs/components/billing.css.ts
@@ -1,3 +1,4 @@
+import { vars } from '@vanilla-extract-rollup-example/ui';
 import { style } from '@vanilla-extract/css';
 
 export const pageContainer = style({
@@ -15,6 +16,6 @@ export const usageGrid = style([
   {
     gridTemplateColumns: '1fr 1fr 1fr',
     display: 'grid',
-    gap: '24px',
+    gap: vars.space.large,
   },
-]);
\ No newline at end of file
+]);
diff --git a/apps/example-vite/src/billing.css.ts b/apps/example-vite/src/billing.css.ts
index 6493dbe..5789cf6 100644
--- a/apps/example-vite/src/billing.css.ts
+++ b/apps/example-vite/src/billing.css.ts
@@ -1,3 +1,4 @@
+import { vars } from '@vanilla-extract-rollup-example/ui';
 import { style } from '@vanilla-extract/css';
 
 export const pageContainer = style({
@@ -15,6 +16,6 @@ export const usageGrid = style([
   {
     gridTemplateColumns: '1fr 1fr 1fr',
     display: 'grid',
-    gap: '24px',
+    gap: vars.space.large,
   },
-]);
\ No newline at end of file
+]);