diff --git a/styles/src/system/algorithm.ts b/styles/src/system/algorithm.ts
index 7d5161ca22dfd772b55d9991e4294e5d1f68830a..f62a51cbb35a409735905d97744404202809eb4e 100644
--- a/styles/src/system/algorithm.ts
+++ b/styles/src/system/algorithm.ts
@@ -17,11 +17,15 @@ function assignColor(scale: Scale, steps: number, step: number) {
   const rgbaArray = color.rgba();
   const hex = color.hex();
 
+  // Roughly  calculate if a color is dark or light
+  const isLight = lch[0] > 50;
+
   const result = {
     step,
     hex,
     lch,
     rgbaArray,
+    isLight,
   };
 
   return result;
diff --git a/styles/src/system/ref/color.ts b/styles/src/system/ref/color.ts
index f49125f4f7db5c570bc56c7e9783581eea875826..619067f8c130ed8365c2022a69c0c4080542c11c 100644
--- a/styles/src/system/ref/color.ts
+++ b/styles/src/system/ref/color.ts
@@ -2,6 +2,11 @@ import chroma from "chroma-js";
 import { generateColorSet } from "../algorithm";
 import { ColorFamily } from "../types";
 
+// These are the source colors for the color scales in the system.
+// This should never directly be used in the system, or exported to be used in a component or theme
+// As it will generate thousands of lines of code.
+// Instead, use the outputs from the reference palette which exports a smaller subset of colors.
+
 // 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 61c5a5054441a11bb4fff34edb0b14a543b70f02..326986cad5ef463d74ef63963b4113242c9a4345 100644
--- a/styles/src/system/types.ts
+++ b/styles/src/system/types.ts
@@ -6,6 +6,7 @@ export type Color = {
 };
 
 export type ColorSet = Color[];
+
 export type ColorFamily = {
   name: string;
   colors: string[];