diff --git a/styles/src/system/algorithm.ts b/styles/src/system/algorithm.ts
index f62a51cbb3..9b76040e02 100644
--- a/styles/src/system/algorithm.ts
+++ b/styles/src/system/algorithm.ts
@@ -38,9 +38,9 @@ export function generateColors(props: ColorProps, inverted: boolean) {
 
   const { start, middle, end } = props.color;
 
-  const startColor = validColor(start);
-  const middleColor = validColor(middle);
-  const endColor = validColor(end);
+  const startColor = typeof start === "string" ? validColor(start) : start;
+  const middleColor = typeof middle === "string" ? validColor(middle) : middle;
+  const endColor = typeof end === "string" ? validColor(end) : end;
 
   // TODO: Use curve when generating colors
 
diff --git a/styles/src/system/ref/color.ts b/styles/src/system/ref/color.ts
index 619067f8c1..5d91604695 100644
--- a/styles/src/system/ref/color.ts
+++ b/styles/src/system/ref/color.ts
@@ -7,6 +7,9 @@ import { ColorFamily } from "../types";
 // As it will generate thousands of lines of code.
 // Instead, use the outputs from the reference palette which exports a smaller subset of colors.
 
+// Token or user-facing colors should use short, clear names
+// and a 100-900 scale to match the font weight scale.
+
 // Colors should use the LCH color space.
 // https://www.w3.org/TR/css-color-4/#lch-colors
 
diff --git a/styles/src/system/types.ts b/styles/src/system/types.ts
index 326986cad5..260a204b02 100644
--- a/styles/src/system/types.ts
+++ b/styles/src/system/types.ts
@@ -1,3 +1,5 @@
+import { Color as ChromaColor } from "chroma-js";
+
 export type Color = {
   step: number;
   hex: string;
@@ -18,8 +20,8 @@ export type ColorFamily = {
 export interface ColorProps {
   name: string;
   color: {
-    start: string;
-    middle: string;
-    end: string;
+    start: string | ChromaColor;
+    middle: string | ChromaColor;
+    end: string | ChromaColor;
   };
 }