diff --git a/packages/ui/src/fallback.css b/packages/ui/src/fallback.css
new file mode 100644
index 000000000..baa15a8b0
--- /dev/null
+++ b/packages/ui/src/fallback.css
@@ -0,0 +1,15 @@
+:root {
+  --chromatic-hue: 220.44;
+  --chromatic-chroma: calc(0.18 + (cos(var(--chromatic-hue) * 3.14159265 / 180) * 0.04));
+  --chromatic-chroma-50: calc(var(--chromatic-chroma) * 0.3);
+  --chromatic-chroma-100: calc(var(--chromatic-chroma) * 0.5);
+  --chromatic-chroma-200: calc(var(--chromatic-chroma) * 0.6);
+  --chromatic-chroma-300: calc(var(--chromatic-chroma) * 0.75);
+  --chromatic-chroma-400: calc(var(--chromatic-chroma) * 0.85);
+  --chromatic-chroma-500: var(--chromatic-chroma);
+  --chromatic-chroma-600: calc(var(--chromatic-chroma) * 1.15);
+  --chromatic-chroma-700: calc(var(--chromatic-chroma) * 1.1);
+  --chromatic-chroma-800: calc(var(--chromatic-chroma) * 0.85);
+  --chromatic-chroma-900: calc(var(--chromatic-chroma) * 0.7);
+  --chromatic-chroma-950: calc(var(--chromatic-chroma) * 0.5);
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 72c2aeb06..3fea0c7ed 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,2 +1,4 @@
+import './fallback.css'
+
 export * from './components/Animations'
 export * from './components/Form'