@nationaldesignstudio/react 0.2.0 → 0.3.0

package/src/stories/TokenShowcase.tsx

@@ -1,1429 +1,777 @@
 import type * as React from "react";
 
-const ColorSwatch: React.FC<{
-	bgClass: string;
-	label: string;
-}> = ({ bgClass, label }) => {
-	return (
-		<div className="flex flex-col">
-			<div
-				className={`w-full h-spacing-12 rounded-md border border-gray-200 ${bgClass}`}
-			/>
-			<div className="mt-1 text-xs font-mono text-gray-600">{label}</div>
-		</div>
-	);
+// =============================================================================
+// Color Tokens
+// =============================================================================
+
+type ColorScale = {
+	name: string;
+	prefix: string;
+	shades: (string | number)[];
+	vibrant?: (string | number)[];
 };
 
-export const ColorTokens: React.FC = () => {
-	return (
-		<div className="space-y-8">
-			<div>
-				<h2 className="text-2xl font-bold mb-6">Color Palette</h2>
-
-				{/* Gray */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Gray</h3>
-					<div className="grid grid-cols-13 gap-2">
-						<ColorSwatch bgClass="bg-gray-50" label="50" />
-						<ColorSwatch bgClass="bg-gray-100" label="100" />
-						<ColorSwatch bgClass="bg-gray-200" label="200" />
-						<ColorSwatch bgClass="bg-gray-300" label="300" />
-						<ColorSwatch bgClass="bg-gray-400" label="400" />
-						<ColorSwatch bgClass="bg-gray-500" label="500" />
-						<ColorSwatch bgClass="bg-gray-600" label="600" />
-						<ColorSwatch bgClass="bg-gray-700" label="700" />
-						<ColorSwatch bgClass="bg-gray-800" label="800" />
-						<ColorSwatch bgClass="bg-gray-900" label="900" />
-						<ColorSwatch bgClass="bg-gray-1000" label="1000" />
-						<ColorSwatch bgClass="bg-gray-1100" label="1100" />
-						<ColorSwatch bgClass="bg-gray-1200" label="1200" />
-					</div>
-				</div>
-
-				{/* Brown */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Brown</h3>
-					<div className="grid grid-cols-13 gap-2">
-						<ColorSwatch bgClass="bg-brown-50" label="50" />
-						<ColorSwatch bgClass="bg-brown-100" label="100" />
-						<ColorSwatch bgClass="bg-brown-200" label="200" />
-						<ColorSwatch bgClass="bg-brown-300" label="300" />
-						<ColorSwatch bgClass="bg-brown-400" label="400" />
-						<ColorSwatch bgClass="bg-brown-500" label="500" />
-						<ColorSwatch bgClass="bg-brown-600" label="600" />
-						<ColorSwatch bgClass="bg-brown-700" label="700" />
-						<ColorSwatch bgClass="bg-brown-800" label="800" />
-						<ColorSwatch bgClass="bg-brown-900" label="900" />
-						<ColorSwatch bgClass="bg-brown-1000" label="1000" />
-						<ColorSwatch bgClass="bg-brown-1100" label="1100" />
-						<ColorSwatch bgClass="bg-brown-1200" label="1200" />
-					</div>
-				</div>
-
-				{/* Steel */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Steel</h3>
-					<div className="grid grid-cols-13 gap-2">
-						<ColorSwatch bgClass="bg-steel-50" label="50" />
-						<ColorSwatch bgClass="bg-steel-100" label="100" />
-						<ColorSwatch bgClass="bg-steel-200" label="200" />
-						<ColorSwatch bgClass="bg-steel-300" label="300" />
-						<ColorSwatch bgClass="bg-steel-400" label="400" />
-						<ColorSwatch bgClass="bg-steel-500" label="500" />
-						<ColorSwatch bgClass="bg-steel-600" label="600" />
-						<ColorSwatch bgClass="bg-steel-700" label="700" />
-						<ColorSwatch bgClass="bg-steel-800" label="800" />
-						<ColorSwatch bgClass="bg-steel-900" label="900" />
-						<ColorSwatch bgClass="bg-steel-1000" label="1000" />
-						<ColorSwatch bgClass="bg-steel-1100" label="1100" />
-						<ColorSwatch bgClass="bg-steel-1200" label="1200" />
-					</div>
-				</div>
-
-				{/* Red */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Red</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-red-50" label="50" />
-						<ColorSwatch bgClass="bg-red-100" label="100" />
-						<ColorSwatch bgClass="bg-red-200" label="200" />
-						<ColorSwatch bgClass="bg-red-300" label="300" />
-						<ColorSwatch bgClass="bg-red-400" label="400" />
-						<ColorSwatch bgClass="bg-red-500" label="500" />
-						<ColorSwatch bgClass="bg-red-600" label="600" />
-						<ColorSwatch bgClass="bg-red-700" label="700" />
-						<ColorSwatch bgClass="bg-red-800" label="800" />
-						<ColorSwatch bgClass="bg-red-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-red-v100" label="v100" />
-							<ColorSwatch bgClass="bg-red-v200" label="v200" />
-							<ColorSwatch bgClass="bg-red-v300" label="v300" />
-							<ColorSwatch bgClass="bg-red-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Pink */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Pink</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-pink-50" label="50" />
-						<ColorSwatch bgClass="bg-pink-100" label="100" />
-						<ColorSwatch bgClass="bg-pink-200" label="200" />
-						<ColorSwatch bgClass="bg-pink-300" label="300" />
-						<ColorSwatch bgClass="bg-pink-400" label="400" />
-						<ColorSwatch bgClass="bg-pink-500" label="500" />
-						<ColorSwatch bgClass="bg-pink-600" label="600" />
-						<ColorSwatch bgClass="bg-pink-700" label="700" />
-						<ColorSwatch bgClass="bg-pink-800" label="800" />
-						<ColorSwatch bgClass="bg-pink-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-pink-v100" label="v100" />
-							<ColorSwatch bgClass="bg-pink-v200" label="v200" />
-							<ColorSwatch bgClass="bg-pink-v300" label="v300" />
-							<ColorSwatch bgClass="bg-pink-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Purple */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Purple</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-purple-50" label="50" />
-						<ColorSwatch bgClass="bg-purple-100" label="100" />
-						<ColorSwatch bgClass="bg-purple-200" label="200" />
-						<ColorSwatch bgClass="bg-purple-300" label="300" />
-						<ColorSwatch bgClass="bg-purple-400" label="400" />
-						<ColorSwatch bgClass="bg-purple-500" label="500" />
-						<ColorSwatch bgClass="bg-purple-600" label="600" />
-						<ColorSwatch bgClass="bg-purple-700" label="700" />
-						<ColorSwatch bgClass="bg-purple-800" label="800" />
-						<ColorSwatch bgClass="bg-purple-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-purple-v100" label="v100" />
-							<ColorSwatch bgClass="bg-purple-v200" label="v200" />
-							<ColorSwatch bgClass="bg-purple-v300" label="v300" />
-							<ColorSwatch bgClass="bg-purple-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Iris */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Iris</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-iris-50" label="50" />
-						<ColorSwatch bgClass="bg-iris-100" label="100" />
-						<ColorSwatch bgClass="bg-iris-200" label="200" />
-						<ColorSwatch bgClass="bg-iris-300" label="300" />
-						<ColorSwatch bgClass="bg-iris-400" label="400" />
-						<ColorSwatch bgClass="bg-iris-500" label="500" />
-						<ColorSwatch bgClass="bg-iris-600" label="600" />
-						<ColorSwatch bgClass="bg-iris-700" label="700" />
-						<ColorSwatch bgClass="bg-iris-800" label="800" />
-						<ColorSwatch bgClass="bg-iris-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-iris-v100" label="v100" />
-							<ColorSwatch bgClass="bg-iris-v200" label="v200" />
-							<ColorSwatch bgClass="bg-iris-v300" label="v300" />
-							<ColorSwatch bgClass="bg-iris-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Indigo */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Indigo</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-indigo-50" label="50" />
-						<ColorSwatch bgClass="bg-indigo-100" label="100" />
-						<ColorSwatch bgClass="bg-indigo-200" label="200" />
-						<ColorSwatch bgClass="bg-indigo-300" label="300" />
-						<ColorSwatch bgClass="bg-indigo-400" label="400" />
-						<ColorSwatch bgClass="bg-indigo-500" label="500" />
-						<ColorSwatch bgClass="bg-indigo-600" label="600" />
-						<ColorSwatch bgClass="bg-indigo-700" label="700" />
-						<ColorSwatch bgClass="bg-indigo-800" label="800" />
-						<ColorSwatch bgClass="bg-indigo-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-indigo-v100" label="v100" />
-							<ColorSwatch bgClass="bg-indigo-v200" label="v200" />
-							<ColorSwatch bgClass="bg-indigo-v300" label="v300" />
-							<ColorSwatch bgClass="bg-indigo-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Blue */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Blue</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-blue-50" label="50" />
-						<ColorSwatch bgClass="bg-blue-100" label="100" />
-						<ColorSwatch bgClass="bg-blue-200" label="200" />
-						<ColorSwatch bgClass="bg-blue-300" label="300" />
-						<ColorSwatch bgClass="bg-blue-400" label="400" />
-						<ColorSwatch bgClass="bg-blue-500" label="500" />
-						<ColorSwatch bgClass="bg-blue-600" label="600" />
-						<ColorSwatch bgClass="bg-blue-700" label="700" />
-						<ColorSwatch bgClass="bg-blue-800" label="800" />
-						<ColorSwatch bgClass="bg-blue-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-blue-v100" label="v100" />
-							<ColorSwatch bgClass="bg-blue-v200" label="v200" />
-							<ColorSwatch bgClass="bg-blue-v300" label="v300" />
-							<ColorSwatch bgClass="bg-blue-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Ice */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Ice</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-ice-50" label="50" />
-						<ColorSwatch bgClass="bg-ice-100" label="100" />
-						<ColorSwatch bgClass="bg-ice-200" label="200" />
-						<ColorSwatch bgClass="bg-ice-300" label="300" />
-						<ColorSwatch bgClass="bg-ice-400" label="400" />
-						<ColorSwatch bgClass="bg-ice-500" label="500" />
-						<ColorSwatch bgClass="bg-ice-600" label="600" />
-						<ColorSwatch bgClass="bg-ice-700" label="700" />
-						<ColorSwatch bgClass="bg-ice-800" label="800" />
-						<ColorSwatch bgClass="bg-ice-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-ice-v100" label="v100" />
-							<ColorSwatch bgClass="bg-ice-v200" label="v200" />
-							<ColorSwatch bgClass="bg-ice-v300" label="v300" />
-							<ColorSwatch bgClass="bg-ice-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Cyan */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Cyan</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-cyan-50" label="50" />
-						<ColorSwatch bgClass="bg-cyan-100" label="100" />
-						<ColorSwatch bgClass="bg-cyan-200" label="200" />
-						<ColorSwatch bgClass="bg-cyan-300" label="300" />
-						<ColorSwatch bgClass="bg-cyan-400" label="400" />
-						<ColorSwatch bgClass="bg-cyan-500" label="500" />
-						<ColorSwatch bgClass="bg-cyan-600" label="600" />
-						<ColorSwatch bgClass="bg-cyan-700" label="700" />
-						<ColorSwatch bgClass="bg-cyan-800" label="800" />
-						<ColorSwatch bgClass="bg-cyan-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-cyan-v100" label="v100" />
-							<ColorSwatch bgClass="bg-cyan-v200" label="v200" />
-							<ColorSwatch bgClass="bg-cyan-v300" label="v300" />
-							<ColorSwatch bgClass="bg-cyan-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Teal */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Teal</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-teal-50" label="50" />
-						<ColorSwatch bgClass="bg-teal-100" label="100" />
-						<ColorSwatch bgClass="bg-teal-200" label="200" />
-						<ColorSwatch bgClass="bg-teal-300" label="300" />
-						<ColorSwatch bgClass="bg-teal-400" label="400" />
-						<ColorSwatch bgClass="bg-teal-500" label="500" />
-						<ColorSwatch bgClass="bg-teal-600" label="600" />
-						<ColorSwatch bgClass="bg-teal-700" label="700" />
-						<ColorSwatch bgClass="bg-teal-800" label="800" />
-						<ColorSwatch bgClass="bg-teal-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-teal-v100" label="v100" />
-							<ColorSwatch bgClass="bg-teal-v200" label="v200" />
-							<ColorSwatch bgClass="bg-teal-v300" label="v300" />
-							<ColorSwatch bgClass="bg-teal-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Green */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Green</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-green-50" label="50" />
-						<ColorSwatch bgClass="bg-green-100" label="100" />
-						<ColorSwatch bgClass="bg-green-200" label="200" />
-						<ColorSwatch bgClass="bg-green-300" label="300" />
-						<ColorSwatch bgClass="bg-green-400" label="400" />
-						<ColorSwatch bgClass="bg-green-500" label="500" />
-						<ColorSwatch bgClass="bg-green-600" label="600" />
-						<ColorSwatch bgClass="bg-green-700" label="700" />
-						<ColorSwatch bgClass="bg-green-800" label="800" />
-						<ColorSwatch bgClass="bg-green-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-green-v100" label="v100" />
-							<ColorSwatch bgClass="bg-green-v200" label="v200" />
-							<ColorSwatch bgClass="bg-green-v300" label="v300" />
-							<ColorSwatch bgClass="bg-green-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Sage */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Sage</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-sage-50" label="50" />
-						<ColorSwatch bgClass="bg-sage-100" label="100" />
-						<ColorSwatch bgClass="bg-sage-200" label="200" />
-						<ColorSwatch bgClass="bg-sage-300" label="300" />
-						<ColorSwatch bgClass="bg-sage-400" label="400" />
-						<ColorSwatch bgClass="bg-sage-500" label="500" />
-						<ColorSwatch bgClass="bg-sage-600" label="600" />
-						<ColorSwatch bgClass="bg-sage-700" label="700" />
-						<ColorSwatch bgClass="bg-sage-800" label="800" />
-						<ColorSwatch bgClass="bg-sage-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-sage-v100" label="v100" />
-							<ColorSwatch bgClass="bg-sage-v200" label="v200" />
-							<ColorSwatch bgClass="bg-sage-v300" label="v300" />
-							<ColorSwatch bgClass="bg-sage-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Lime */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Lime</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-lime-50" label="50" />
-						<ColorSwatch bgClass="bg-lime-100" label="100" />
-						<ColorSwatch bgClass="bg-lime-200" label="200" />
-						<ColorSwatch bgClass="bg-lime-300" label="300" />
-						<ColorSwatch bgClass="bg-lime-400" label="400" />
-						<ColorSwatch bgClass="bg-lime-500" label="500" />
-						<ColorSwatch bgClass="bg-lime-600" label="600" />
-						<ColorSwatch bgClass="bg-lime-700" label="700" />
-						<ColorSwatch bgClass="bg-lime-800" label="800" />
-						<ColorSwatch bgClass="bg-lime-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-lime-v100" label="v100" />
-							<ColorSwatch bgClass="bg-lime-v200" label="v200" />
-							<ColorSwatch bgClass="bg-lime-v300" label="v300" />
-							<ColorSwatch bgClass="bg-lime-v400" label="v400" />
-						</div>
-					</div>
-				</div>
-
-				{/* Yellow */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Yellow</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-yellow-50" label="50" />
-						<ColorSwatch bgClass="bg-yellow-100" label="100" />
-						<ColorSwatch bgClass="bg-yellow-200" label="200" />
-						<ColorSwatch bgClass="bg-yellow-300" label="300" />
-						<ColorSwatch bgClass="bg-yellow-400" label="400" />
-						<ColorSwatch bgClass="bg-yellow-500" label="500" />
-						<ColorSwatch bgClass="bg-yellow-600" label="600" />
-						<ColorSwatch bgClass="bg-yellow-700" label="700" />
-						<ColorSwatch bgClass="bg-yellow-800" label="800" />
-						<ColorSwatch bgClass="bg-yellow-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-yellow-v100" label="v100" />
-							<ColorSwatch bgClass="bg-yellow-v200" label="v200" />
-							<ColorSwatch bgClass="bg-yellow-v300" label="v300" />
-							<ColorSwatch bgClass="bg-yellow-v400" label="v400" />
-						</div>
-					</div>
-				</div>
+const neutralScales: ColorScale[] = [
+	{
+		name: "Gray",
+		prefix: "gray",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
+	},
+	{
+		name: "Brown",
+		prefix: "brown",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
+	},
+	{
+		name: "Steel",
+		prefix: "steel",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
+	},
+];
 
-				{/* Amber */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Amber</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-amber-50" label="50" />
-						<ColorSwatch bgClass="bg-amber-100" label="100" />
-						<ColorSwatch bgClass="bg-amber-200" label="200" />
-						<ColorSwatch bgClass="bg-amber-300" label="300" />
-						<ColorSwatch bgClass="bg-amber-400" label="400" />
-						<ColorSwatch bgClass="bg-amber-500" label="500" />
-						<ColorSwatch bgClass="bg-amber-600" label="600" />
-						<ColorSwatch bgClass="bg-amber-700" label="700" />
-						<ColorSwatch bgClass="bg-amber-800" label="800" />
-						<ColorSwatch bgClass="bg-amber-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-amber-v100" label="v100" />
-							<ColorSwatch bgClass="bg-amber-v200" label="v200" />
-							<ColorSwatch bgClass="bg-amber-v300" label="v300" />
-							<ColorSwatch bgClass="bg-amber-v400" label="v400" />
-						</div>
-					</div>
-				</div>
+const colorScales: ColorScale[] = [
+	{
+		name: "Red",
+		prefix: "red",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Pink",
+		prefix: "pink",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Purple",
+		prefix: "purple",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Iris",
+		prefix: "iris",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Indigo",
+		prefix: "indigo",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Blue",
+		prefix: "blue",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Ice",
+		prefix: "ice",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Cyan",
+		prefix: "cyan",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Teal",
+		prefix: "teal",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Green",
+		prefix: "green",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Sage",
+		prefix: "sage",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Lime",
+		prefix: "lime",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Yellow",
+		prefix: "yellow",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Amber",
+		prefix: "amber",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Orange",
+		prefix: "orange",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Ember",
+		prefix: "ember",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+];
 
-				{/* Orange */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Orange</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-orange-50" label="50" />
-						<ColorSwatch bgClass="bg-orange-100" label="100" />
-						<ColorSwatch bgClass="bg-orange-200" label="200" />
-						<ColorSwatch bgClass="bg-orange-300" label="300" />
-						<ColorSwatch bgClass="bg-orange-400" label="400" />
-						<ColorSwatch bgClass="bg-orange-500" label="500" />
-						<ColorSwatch bgClass="bg-orange-600" label="600" />
-						<ColorSwatch bgClass="bg-orange-700" label="700" />
-						<ColorSwatch bgClass="bg-orange-800" label="800" />
-						<ColorSwatch bgClass="bg-orange-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-orange-v100" label="v100" />
-							<ColorSwatch bgClass="bg-orange-v200" label="v200" />
-							<ColorSwatch bgClass="bg-orange-v300" label="v300" />
-							<ColorSwatch bgClass="bg-orange-v400" label="v400" />
-						</div>
-					</div>
-				</div>
+// Tailwind needs static class names - generate lookup maps
+const bgClasses: Record<string, string> = {
+	// Neutrals
+	"gray-50": "bg-gray-50",
+	"gray-100": "bg-gray-100",
+	"gray-200": "bg-gray-200",
+	"gray-300": "bg-gray-300",
+	"gray-400": "bg-gray-400",
+	"gray-500": "bg-gray-500",
+	"gray-600": "bg-gray-600",
+	"gray-700": "bg-gray-700",
+	"gray-800": "bg-gray-800",
+	"gray-900": "bg-gray-900",
+	"gray-1000": "bg-gray-1000",
+	"gray-1100": "bg-gray-1100",
+	"gray-1200": "bg-gray-1200",
+	"brown-50": "bg-brown-50",
+	"brown-100": "bg-brown-100",
+	"brown-200": "bg-brown-200",
+	"brown-300": "bg-brown-300",
+	"brown-400": "bg-brown-400",
+	"brown-500": "bg-brown-500",
+	"brown-600": "bg-brown-600",
+	"brown-700": "bg-brown-700",
+	"brown-800": "bg-brown-800",
+	"brown-900": "bg-brown-900",
+	"brown-1000": "bg-brown-1000",
+	"brown-1100": "bg-brown-1100",
+	"brown-1200": "bg-brown-1200",
+	"steel-50": "bg-steel-50",
+	"steel-100": "bg-steel-100",
+	"steel-200": "bg-steel-200",
+	"steel-300": "bg-steel-300",
+	"steel-400": "bg-steel-400",
+	"steel-500": "bg-steel-500",
+	"steel-600": "bg-steel-600",
+	"steel-700": "bg-steel-700",
+	"steel-800": "bg-steel-800",
+	"steel-900": "bg-steel-900",
+	"steel-1000": "bg-steel-1000",
+	"steel-1100": "bg-steel-1100",
+	"steel-1200": "bg-steel-1200",
+	// Colors
+	"red-50": "bg-red-50",
+	"red-100": "bg-red-100",
+	"red-200": "bg-red-200",
+	"red-300": "bg-red-300",
+	"red-400": "bg-red-400",
+	"red-500": "bg-red-500",
+	"red-600": "bg-red-600",
+	"red-700": "bg-red-700",
+	"red-800": "bg-red-800",
+	"red-900": "bg-red-900",
+	"red-v100": "bg-red-v100",
+	"red-v200": "bg-red-v200",
+	"red-v300": "bg-red-v300",
+	"red-v400": "bg-red-v400",
+	"pink-50": "bg-pink-50",
+	"pink-100": "bg-pink-100",
+	"pink-200": "bg-pink-200",
+	"pink-300": "bg-pink-300",
+	"pink-400": "bg-pink-400",
+	"pink-500": "bg-pink-500",
+	"pink-600": "bg-pink-600",
+	"pink-700": "bg-pink-700",
+	"pink-800": "bg-pink-800",
+	"pink-900": "bg-pink-900",
+	"pink-v100": "bg-pink-v100",
+	"pink-v200": "bg-pink-v200",
+	"pink-v300": "bg-pink-v300",
+	"pink-v400": "bg-pink-v400",
+	"purple-50": "bg-purple-50",
+	"purple-100": "bg-purple-100",
+	"purple-200": "bg-purple-200",
+	"purple-300": "bg-purple-300",
+	"purple-400": "bg-purple-400",
+	"purple-500": "bg-purple-500",
+	"purple-600": "bg-purple-600",
+	"purple-700": "bg-purple-700",
+	"purple-800": "bg-purple-800",
+	"purple-900": "bg-purple-900",
+	"purple-v100": "bg-purple-v100",
+	"purple-v200": "bg-purple-v200",
+	"purple-v300": "bg-purple-v300",
+	"purple-v400": "bg-purple-v400",
+	"iris-50": "bg-iris-50",
+	"iris-100": "bg-iris-100",
+	"iris-200": "bg-iris-200",
+	"iris-300": "bg-iris-300",
+	"iris-400": "bg-iris-400",
+	"iris-500": "bg-iris-500",
+	"iris-600": "bg-iris-600",
+	"iris-700": "bg-iris-700",
+	"iris-800": "bg-iris-800",
+	"iris-900": "bg-iris-900",
+	"iris-v100": "bg-iris-v100",
+	"iris-v200": "bg-iris-v200",
+	"iris-v300": "bg-iris-v300",
+	"iris-v400": "bg-iris-v400",
+	"indigo-50": "bg-indigo-50",
+	"indigo-100": "bg-indigo-100",
+	"indigo-200": "bg-indigo-200",
+	"indigo-300": "bg-indigo-300",
+	"indigo-400": "bg-indigo-400",
+	"indigo-500": "bg-indigo-500",
+	"indigo-600": "bg-indigo-600",
+	"indigo-700": "bg-indigo-700",
+	"indigo-800": "bg-indigo-800",
+	"indigo-900": "bg-indigo-900",
+	"indigo-v100": "bg-indigo-v100",
+	"indigo-v200": "bg-indigo-v200",
+	"indigo-v300": "bg-indigo-v300",
+	"indigo-v400": "bg-indigo-v400",
+	"blue-50": "bg-blue-50",
+	"blue-100": "bg-blue-100",
+	"blue-200": "bg-blue-200",
+	"blue-300": "bg-blue-300",
+	"blue-400": "bg-blue-400",
+	"blue-500": "bg-blue-500",
+	"blue-600": "bg-blue-600",
+	"blue-700": "bg-blue-700",
+	"blue-800": "bg-blue-800",
+	"blue-900": "bg-blue-900",
+	"blue-v100": "bg-blue-v100",
+	"blue-v200": "bg-blue-v200",
+	"blue-v300": "bg-blue-v300",
+	"blue-v400": "bg-blue-v400",
+	"ice-50": "bg-ice-50",
+	"ice-100": "bg-ice-100",
+	"ice-200": "bg-ice-200",
+	"ice-300": "bg-ice-300",
+	"ice-400": "bg-ice-400",
+	"ice-500": "bg-ice-500",
+	"ice-600": "bg-ice-600",
+	"ice-700": "bg-ice-700",
+	"ice-800": "bg-ice-800",
+	"ice-900": "bg-ice-900",
+	"ice-v100": "bg-ice-v100",
+	"ice-v200": "bg-ice-v200",
+	"ice-v300": "bg-ice-v300",
+	"ice-v400": "bg-ice-v400",
+	"cyan-50": "bg-cyan-50",
+	"cyan-100": "bg-cyan-100",
+	"cyan-200": "bg-cyan-200",
+	"cyan-300": "bg-cyan-300",
+	"cyan-400": "bg-cyan-400",
+	"cyan-500": "bg-cyan-500",
+	"cyan-600": "bg-cyan-600",
+	"cyan-700": "bg-cyan-700",
+	"cyan-800": "bg-cyan-800",
+	"cyan-900": "bg-cyan-900",
+	"cyan-v100": "bg-cyan-v100",
+	"cyan-v200": "bg-cyan-v200",
+	"cyan-v300": "bg-cyan-v300",
+	"cyan-v400": "bg-cyan-v400",
+	"teal-50": "bg-teal-50",
+	"teal-100": "bg-teal-100",
+	"teal-200": "bg-teal-200",
+	"teal-300": "bg-teal-300",
+	"teal-400": "bg-teal-400",
+	"teal-500": "bg-teal-500",
+	"teal-600": "bg-teal-600",
+	"teal-700": "bg-teal-700",
+	"teal-800": "bg-teal-800",
+	"teal-900": "bg-teal-900",
+	"teal-v100": "bg-teal-v100",
+	"teal-v200": "bg-teal-v200",
+	"teal-v300": "bg-teal-v300",
+	"teal-v400": "bg-teal-v400",
+	"green-50": "bg-green-50",
+	"green-100": "bg-green-100",
+	"green-200": "bg-green-200",
+	"green-300": "bg-green-300",
+	"green-400": "bg-green-400",
+	"green-500": "bg-green-500",
+	"green-600": "bg-green-600",
+	"green-700": "bg-green-700",
+	"green-800": "bg-green-800",
+	"green-900": "bg-green-900",
+	"green-v100": "bg-green-v100",
+	"green-v200": "bg-green-v200",
+	"green-v300": "bg-green-v300",
+	"green-v400": "bg-green-v400",
+	"sage-50": "bg-sage-50",
+	"sage-100": "bg-sage-100",
+	"sage-200": "bg-sage-200",
+	"sage-300": "bg-sage-300",
+	"sage-400": "bg-sage-400",
+	"sage-500": "bg-sage-500",
+	"sage-600": "bg-sage-600",
+	"sage-700": "bg-sage-700",
+	"sage-800": "bg-sage-800",
+	"sage-900": "bg-sage-900",
+	"sage-v100": "bg-sage-v100",
+	"sage-v200": "bg-sage-v200",
+	"sage-v300": "bg-sage-v300",
+	"sage-v400": "bg-sage-v400",
+	"lime-50": "bg-lime-50",
+	"lime-100": "bg-lime-100",
+	"lime-200": "bg-lime-200",
+	"lime-300": "bg-lime-300",
+	"lime-400": "bg-lime-400",
+	"lime-500": "bg-lime-500",
+	"lime-600": "bg-lime-600",
+	"lime-700": "bg-lime-700",
+	"lime-800": "bg-lime-800",
+	"lime-900": "bg-lime-900",
+	"lime-v100": "bg-lime-v100",
+	"lime-v200": "bg-lime-v200",
+	"lime-v300": "bg-lime-v300",
+	"lime-v400": "bg-lime-v400",
+	"yellow-50": "bg-yellow-50",
+	"yellow-100": "bg-yellow-100",
+	"yellow-200": "bg-yellow-200",
+	"yellow-300": "bg-yellow-300",
+	"yellow-400": "bg-yellow-400",
+	"yellow-500": "bg-yellow-500",
+	"yellow-600": "bg-yellow-600",
+	"yellow-700": "bg-yellow-700",
+	"yellow-800": "bg-yellow-800",
+	"yellow-900": "bg-yellow-900",
+	"yellow-v100": "bg-yellow-v100",
+	"yellow-v200": "bg-yellow-v200",
+	"yellow-v300": "bg-yellow-v300",
+	"yellow-v400": "bg-yellow-v400",
+	"amber-50": "bg-amber-50",
+	"amber-100": "bg-amber-100",
+	"amber-200": "bg-amber-200",
+	"amber-300": "bg-amber-300",
+	"amber-400": "bg-amber-400",
+	"amber-500": "bg-amber-500",
+	"amber-600": "bg-amber-600",
+	"amber-700": "bg-amber-700",
+	"amber-800": "bg-amber-800",
+	"amber-900": "bg-amber-900",
+	"amber-v100": "bg-amber-v100",
+	"amber-v200": "bg-amber-v200",
+	"amber-v300": "bg-amber-v300",
+	"amber-v400": "bg-amber-v400",
+	"orange-50": "bg-orange-50",
+	"orange-100": "bg-orange-100",
+	"orange-200": "bg-orange-200",
+	"orange-300": "bg-orange-300",
+	"orange-400": "bg-orange-400",
+	"orange-500": "bg-orange-500",
+	"orange-600": "bg-orange-600",
+	"orange-700": "bg-orange-700",
+	"orange-800": "bg-orange-800",
+	"orange-900": "bg-orange-900",
+	"orange-v100": "bg-orange-v100",
+	"orange-v200": "bg-orange-v200",
+	"orange-v300": "bg-orange-v300",
+	"orange-v400": "bg-orange-v400",
+	"ember-50": "bg-ember-50",
+	"ember-100": "bg-ember-100",
+	"ember-200": "bg-ember-200",
+	"ember-300": "bg-ember-300",
+	"ember-400": "bg-ember-400",
+	"ember-500": "bg-ember-500",
+	"ember-600": "bg-ember-600",
+	"ember-700": "bg-ember-700",
+	"ember-800": "bg-ember-800",
+	"ember-900": "bg-ember-900",
+	"ember-v100": "bg-ember-v100",
+	"ember-v200": "bg-ember-v200",
+	"ember-v300": "bg-ember-v300",
+	"ember-v400": "bg-ember-v400",
+	// Alpha
+	"alpha-black-5": "bg-alpha-black-5",
+	"alpha-black-10": "bg-alpha-black-10",
+	"alpha-black-20": "bg-alpha-black-20",
+	"alpha-black-30": "bg-alpha-black-30",
+	"alpha-black-40": "bg-alpha-black-40",
+	"alpha-black-50": "bg-alpha-black-50",
+	"alpha-black-60": "bg-alpha-black-60",
+	"alpha-black-70": "bg-alpha-black-70",
+	"alpha-black-80": "bg-alpha-black-80",
+	"alpha-black-90": "bg-alpha-black-90",
+	"alpha-black-95": "bg-alpha-black-95",
+	"alpha-white-5": "bg-alpha-white-5",
+	"alpha-white-10": "bg-alpha-white-10",
+	"alpha-white-20": "bg-alpha-white-20",
+	"alpha-white-30": "bg-alpha-white-30",
+	"alpha-white-40": "bg-alpha-white-40",
+	"alpha-white-50": "bg-alpha-white-50",
+	"alpha-white-60": "bg-alpha-white-60",
+	"alpha-white-70": "bg-alpha-white-70",
+	"alpha-white-80": "bg-alpha-white-80",
+	"alpha-white-90": "bg-alpha-white-90",
+	"alpha-white-95": "bg-alpha-white-95",
+};
 
-				{/* Ember */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Ember</h3>
-					<div className="grid grid-cols-10 gap-2 mb-2">
-						<ColorSwatch bgClass="bg-ember-50" label="50" />
-						<ColorSwatch bgClass="bg-ember-100" label="100" />
-						<ColorSwatch bgClass="bg-ember-200" label="200" />
-						<ColorSwatch bgClass="bg-ember-300" label="300" />
-						<ColorSwatch bgClass="bg-ember-400" label="400" />
-						<ColorSwatch bgClass="bg-ember-500" label="500" />
-						<ColorSwatch bgClass="bg-ember-600" label="600" />
-						<ColorSwatch bgClass="bg-ember-700" label="700" />
-						<ColorSwatch bgClass="bg-ember-800" label="800" />
-						<ColorSwatch bgClass="bg-ember-900" label="900" />
-					</div>
-					<div className="mt-3">
-						<div className="text-sm text-gray-500 mb-2">Vibrant</div>
-						<div className="grid grid-cols-4 gap-2 max-w-xs">
-							<ColorSwatch bgClass="bg-ember-v100" label="v100" />
-							<ColorSwatch bgClass="bg-ember-v200" label="v200" />
-							<ColorSwatch bgClass="bg-ember-v300" label="v300" />
-							<ColorSwatch bgClass="bg-ember-v400" label="v400" />
-						</div>
-					</div>
-				</div>
+const ColorScaleRow: React.FC<{ scale: ColorScale; showVibrant?: boolean }> = ({
+	scale,
+	showVibrant = true,
+}) => {
+	const allShades =
+		showVibrant && scale.vibrant
+			? [...scale.shades, ...scale.vibrant]
+			: scale.shades;
+	return (
+		<div className="grid grid-cols-[72px_1fr] gap-16 items-center">
+			<span className="text-14 font-medium text-gray-700">{scale.name}</span>
+			<div className="grid grid-flow-col auto-cols-fr gap-2">
+				{allShades.map((shade) => {
+					const key = `${scale.prefix}-${shade}`;
+					return (
+						<div
+							key={key}
+							className={`h-32 rounded-4 ${bgClasses[key] || ""}`}
+							title={`${scale.prefix}-${shade}`}
+						/>
+					);
+				})}
 			</div>
+		</div>
+	);
+};
 
-			{/* Alpha Colors */}
-			<div>
-				<h2 className="text-2xl font-bold mb-6">Alpha Colors</h2>
-
-				{/* Alpha Black */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Alpha Black</h3>
-					<div className="grid grid-cols-11 gap-2 p-4 rounded-lg bg-gray-50">
-						<ColorSwatch bgClass="bg-alpha-black-5" label="5" />
-						<ColorSwatch bgClass="bg-alpha-black-10" label="10" />
-						<ColorSwatch bgClass="bg-alpha-black-20" label="20" />
-						<ColorSwatch bgClass="bg-alpha-black-30" label="30" />
-						<ColorSwatch bgClass="bg-alpha-black-40" label="40" />
-						<ColorSwatch bgClass="bg-alpha-black-50" label="50" />
-						<ColorSwatch bgClass="bg-alpha-black-60" label="60" />
-						<ColorSwatch bgClass="bg-alpha-black-70" label="70" />
-						<ColorSwatch bgClass="bg-alpha-black-80" label="80" />
-						<ColorSwatch bgClass="bg-alpha-black-90" label="90" />
-						<ColorSwatch bgClass="bg-alpha-black-95" label="95" />
+export const ColorTokens: React.FC = () => (
+	<div className="space-y-48">
+		{/* Neutrals */}
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				Neutrals
+			</h3>
+			<div className="bg-white rounded-8 border border-gray-200 p-24 space-y-12">
+				{neutralScales.map((scale) => (
+					<ColorScaleRow key={scale.prefix} scale={scale} showVibrant={false} />
+				))}
+			</div>
+		</section>
+
+		{/* Chromatic Colors */}
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				Colors
+			</h3>
+			<div className="bg-white rounded-8 border border-gray-200 p-24 space-y-12">
+				{colorScales.map((scale) => (
+					<ColorScaleRow key={scale.prefix} scale={scale} />
+				))}
+			</div>
+		</section>
+
+		{/* Alpha Colors */}
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				Alpha
+			</h3>
+			<div className="grid grid-cols-2 gap-24">
+				<div className="bg-white rounded-8 border border-gray-200 p-24">
+					<div className="text-12 font-medium text-gray-600 mb-16">
+						Black (on light)
+					</div>
+					<div className="grid grid-flow-col auto-cols-fr gap-2 bg-gray-100 p-16 rounded-8">
+						{[5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95].map((alpha) => (
+							<div
+								key={`alpha-black-${alpha}`}
+								className={`h-32 rounded-4 ${bgClasses[`alpha-black-${alpha}`] || ""}`}
+								title={`alpha-black-${alpha}`}
+							/>
+						))}
 					</div>
 				</div>
-
-				{/* Alpha White */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Alpha White</h3>
-					<div className="grid grid-cols-11 gap-2 p-4 rounded-lg bg-gray-900">
-						<ColorSwatch bgClass="bg-alpha-white-5" label="5" />
-						<ColorSwatch bgClass="bg-alpha-white-10" label="10" />
-						<ColorSwatch bgClass="bg-alpha-white-20" label="20" />
-						<ColorSwatch bgClass="bg-alpha-white-30" label="30" />
-						<ColorSwatch bgClass="bg-alpha-white-40" label="40" />
-						<ColorSwatch bgClass="bg-alpha-white-50" label="50" />
-						<ColorSwatch bgClass="bg-alpha-white-60" label="60" />
-						<ColorSwatch bgClass="bg-alpha-white-70" label="70" />
-						<ColorSwatch bgClass="bg-alpha-white-80" label="80" />
-						<ColorSwatch bgClass="bg-alpha-white-90" label="90" />
-						<ColorSwatch bgClass="bg-alpha-white-95" label="95" />
+				<div className="bg-white rounded-8 border border-gray-200 p-24">
+					<div className="text-12 font-medium text-gray-600 mb-16">
+						White (on dark)
+					</div>
+					<div className="grid grid-flow-col auto-cols-fr gap-2 bg-gray-900 p-16 rounded-8">
+						{[5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95].map((alpha) => (
+							<div
+								key={`alpha-white-${alpha}`}
+								className={`h-32 rounded-4 ${bgClasses[`alpha-white-${alpha}`] || ""}`}
+								title={`alpha-white-${alpha}`}
+							/>
+						))}
 					</div>
 				</div>
 			</div>
-		</div>
-	);
-};
+		</section>
+	</div>
+);
 
-// Primitive spacing tokens with hardcoded Tailwind classes
-type PrimitiveSpacingToken = {
-	token: string;
-	value: string;
-	widthClass: string;
-};
+// =============================================================================
+// Spacing Tokens
+// =============================================================================
 
-// Primitive spacing tokens - widthClass uses generated @utility classes
-const primitiveSpacingTokens: PrimitiveSpacingToken[] = [
-	{ token: "spacing-2", value: "2px", widthClass: "w-spacing-2" },
-	{ token: "spacing-4", value: "4px", widthClass: "w-spacing-4" },
-	{ token: "spacing-6", value: "6px", widthClass: "w-spacing-6" },
-	{ token: "spacing-8", value: "8px", widthClass: "w-spacing-8" },
-	{ token: "spacing-10", value: "10px", widthClass: "w-spacing-10" },
-	{ token: "spacing-12", value: "12px", widthClass: "w-spacing-12" },
-	{ token: "spacing-16", value: "16px", widthClass: "w-spacing-16" },
-	{ token: "spacing-20", value: "20px", widthClass: "w-spacing-20" },
-	{ token: "spacing-24", value: "24px", widthClass: "w-spacing-24" },
-	{ token: "spacing-28", value: "28px", widthClass: "w-spacing-28" },
-	{ token: "spacing-32", value: "32px", widthClass: "w-spacing-32" },
-	{ token: "spacing-36", value: "36px", widthClass: "w-spacing-36" },
-	{ token: "spacing-40", value: "40px", widthClass: "w-spacing-40" },
-	{ token: "spacing-48", value: "48px", widthClass: "w-spacing-48" },
-	{ token: "spacing-56", value: "56px", widthClass: "w-spacing-56" },
-	{ token: "spacing-64", value: "64px", widthClass: "w-spacing-64" },
-	{ token: "spacing-72", value: "72px", widthClass: "w-spacing-72" },
-	{ token: "spacing-80", value: "80px", widthClass: "w-spacing-80" },
-	{ token: "spacing-96", value: "96px", widthClass: "w-spacing-96" },
-	{ token: "spacing-112", value: "112px", widthClass: "w-spacing-112" },
-	{ token: "spacing-128", value: "128px", widthClass: "w-spacing-128" },
-	{ token: "spacing-144", value: "144px", widthClass: "w-spacing-144" },
-	{ token: "spacing-160", value: "160px", widthClass: "w-spacing-160" },
-	{ token: "spacing-176", value: "176px", widthClass: "w-spacing-176" },
-	{ token: "spacing-192", value: "192px", widthClass: "w-spacing-192" },
-	{ token: "spacing-208", value: "208px", widthClass: "w-spacing-208" },
-	{ token: "spacing-224", value: "224px", widthClass: "w-spacing-224" },
-	{ token: "spacing-240", value: "240px", widthClass: "w-spacing-240" },
-	{ token: "spacing-256", value: "256px", widthClass: "w-spacing-256" },
-	{ token: "spacing-288", value: "288px", widthClass: "w-spacing-288" },
-	{ token: "spacing-320", value: "320px", widthClass: "w-spacing-320" },
-	{ token: "spacing-352", value: "352px", widthClass: "w-spacing-352" },
-	{ token: "spacing-384", value: "384px", widthClass: "w-spacing-384" },
-	{ token: "spacing-400", value: "400px", widthClass: "w-spacing-400" },
+const spacingScale = [
+	2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96, 112,
+	128, 144, 160, 176, 192, 208, 224, 240, 256, 288, 320, 352, 384, 400,
 ];
 
-const PrimitiveSpacingSwatch: React.FC<{
-	token: string;
-	value: string;
-	widthClass: string;
-}> = ({ token, value, widthClass }) => {
-	return (
-		<div className="flex items-center gap-32 py-2 border-b border-gray-100">
-			<div className="w-16 text-sm font-mono text-gray-600">{value}</div>
-			<div className="flex-1 flex items-center justify-between gap-3">
-				<div className="flex-1">
-					<div className={`h-4 bg-blue-500 rounded max-w-400 ${widthClass}`} />
-				</div>
-				<div className="text-xs text-gray-400 font-mono whitespace-nowrap">
-					{token}
-				</div>
-			</div>
-		</div>
-	);
+const widthClasses: Record<number, string> = {
+	2: "w-spacing-2",
+	4: "w-spacing-4",
+	6: "w-spacing-6",
+	8: "w-spacing-8",
+	10: "w-spacing-10",
+	12: "w-spacing-12",
+	16: "w-spacing-16",
+	20: "w-spacing-20",
+	24: "w-spacing-24",
+	28: "w-spacing-28",
+	32: "w-spacing-32",
+	36: "w-spacing-36",
+	40: "w-spacing-40",
+	48: "w-spacing-48",
+	56: "w-spacing-56",
+	64: "w-spacing-64",
+	72: "w-spacing-72",
+	80: "w-spacing-80",
+	96: "w-spacing-96",
+	112: "w-spacing-112",
+	128: "w-spacing-128",
+	144: "w-spacing-144",
+	160: "w-spacing-160",
+	176: "w-spacing-176",
+	192: "w-spacing-192",
+	208: "w-spacing-208",
+	224: "w-spacing-224",
+	240: "w-spacing-240",
+	256: "w-spacing-256",
+	288: "w-spacing-288",
+	320: "w-spacing-320",
+	352: "w-spacing-352",
+	384: "w-spacing-384",
+	400: "w-spacing-400",
 };
 
-export const SpacingTokens: React.FC = () => {
-	return (
-		<div className="space-y-8">
-			<div>
-				<h2 className="text-2xl font-bold mb-6">Spacing Scale</h2>
-				<p className="text-gray-600 mb-6">
-					Consistent spacing values used for margins, padding, and gaps
-					throughout the design system.
-				</p>
-
-				<div className="bg-white rounded-lg border border-gray-200 p-6">
-					{primitiveSpacingTokens.map((t) => (
-						<PrimitiveSpacingSwatch
-							key={t.token}
-							token={t.token}
-							value={t.value}
-							widthClass={t.widthClass}
+export const SpacingTokens: React.FC = () => (
+	<div className="bg-white rounded-8 border border-gray-200 overflow-hidden">
+		<div className="grid grid-cols-[64px_1fr_100px] gap-16 px-24 py-12 bg-gray-50 border-b border-gray-200 text-12 font-medium text-gray-500 uppercase">
+			<div>Value</div>
+			<div>Preview</div>
+			<div>Token</div>
+		</div>
+		<div className="divide-y divide-gray-100">
+			{spacingScale.map((size) => (
+				<div
+					key={size}
+					className="grid grid-cols-[64px_1fr_100px] gap-16 px-24 py-8 items-center"
+				>
+					<div className="text-14 font-mono text-gray-600">{size}px</div>
+					<div className="flex items-center">
+						<div
+							className={`h-12 bg-indigo-500 rounded-2 ${widthClasses[size]} max-w-full`}
 						/>
-					))}
+					</div>
+					<div className="text-12 font-mono text-gray-400">spacing-{size}</div>
 				</div>
-			</div>
+			))}
 		</div>
-	);
-};
+	</div>
+);
 
-// Semantic Typography tokens with hardcoded Tailwind classes
-// Each token includes the full class name for Tailwind to pick up statically
-type SemanticTypographyToken = {
-	token: string;
-	textClass: string;
-	desc: string;
-};
+// =============================================================================
+// Typography Tokens
+// =============================================================================
 
-type SemanticTypographyGroup = {
-	label: string;
-	tokens: SemanticTypographyToken[];
+type TypographyToken = {
+	name: string;
+	class: string;
+	sizes: string;
 };
 
-const semanticTypographyTokens: SemanticTypographyGroup[] = [
+const headingTokens: TypographyToken[] = [
 	{
-		label: "Display",
-		tokens: [
-			{
-				token: "brand-large-display-hero",
-				textClass: "typography-brand-large-display-hero",
-				desc: "Hero - 280px",
-			},
-			{
-				token: "brand-large-display-xl",
-				textClass: "typography-brand-large-display-xl",
-				desc: "XL - 224px",
-			},
-			{
-				token: "brand-large-display-large",
-				textClass: "typography-brand-large-display-large",
-				desc: "Large - 192px",
-			},
-			{
-				token: "brand-large-display-medium",
-				textClass: "typography-brand-large-display-medium",
-				desc: "Medium - 168px",
-			},
-			{
-				token: "brand-large-display-small",
-				textClass: "typography-brand-large-display-small",
-				desc: "Small - 148px",
-			},
-		],
-	},
-	{
-		label: "Headline",
-		tokens: [
-			{
-				token: "brand-large-headline-xl",
-				textClass: "typography-brand-large-headline-xl",
-				desc: "XL - 112px",
-			},
-			{
-				token: "brand-large-headline-large",
-				textClass: "typography-brand-large-headline-large",
-				desc: "Large - 96px",
-			},
-			{
-				token: "brand-large-headline-medium",
-				textClass: "typography-brand-large-headline-medium",
-				desc: "Medium - 72px",
-			},
-			{
-				token: "brand-large-headline-small",
-				textClass: "typography-brand-large-headline-small",
-				desc: "Small - 56px",
-			},
-		],
-	},
-	{
-		label: "Subheading",
-		tokens: [
-			{
-				token: "brand-large-subheading-large",
-				textClass: "typography-brand-large-subheading-large",
-				desc: "Large - 42px",
-			},
-			{
-				token: "brand-large-subheading-medium",
-				textClass: "typography-brand-large-subheading-medium",
-				desc: "Medium - 32px",
-			},
-			{
-				token: "brand-large-subheading-small",
-				textClass: "typography-brand-large-subheading-small",
-				desc: "Small - 24px",
-			},
-			{
-				token: "brand-large-subheading-xs",
-				textClass: "typography-brand-large-subheading-xs",
-				desc: "XS - 18px",
-			},
-			{
-				token: "brand-large-subheading-xss",
-				textClass: "typography-brand-large-subheading-xss",
-				desc: "XSS - 16px",
-			},
-		],
-	},
-	{
-		label: "Body",
-		tokens: [
-			{
-				token: "brand-large-body-large",
-				textClass: "typography-brand-large-body-large",
-				desc: "Large - 21px",
-			},
-			{
-				token: "brand-large-body-medium",
-				textClass: "typography-brand-large-body-medium",
-				desc: "Medium - 18px",
-			},
-			{
-				token: "brand-large-body-small",
-				textClass: "typography-brand-large-body-small",
-				desc: "Small - 16px",
-			},
-		],
+		name: "Display",
+		class: "typography-h1-display",
+		sizes: "64px → 96px → 128px",
 	},
+	{ name: "H1", class: "typography-h1", sizes: "48px → 72px → 96px" },
+	{ name: "H2", class: "typography-h2", sizes: "48px → 64px → 72px" },
+	{ name: "H3", class: "typography-h3", sizes: "32px → 48px → 64px" },
+	{ name: "H4", class: "typography-h4", sizes: "24px → 32px → 48px" },
+	{ name: "H5", class: "typography-h5", sizes: "21px → 24px → 32px" },
+];
+
+const bodyTokens: TypographyToken[] = [
 	{
-		label: "Button",
-		tokens: [
-			{
-				token: "brand-large-button-xl",
-				textClass: "typography-brand-large-button-xl",
-				desc: "XL - 24px",
-			},
-			{
-				token: "brand-large-button-large",
-				textClass: "typography-brand-large-button-large",
-				desc: "Large - 18px",
-			},
-			{
-				token: "brand-large-button-medium",
-				textClass: "typography-brand-large-button-medium",
-				desc: "Medium - 16px",
-			},
-			{
-				token: "brand-large-button-small",
-				textClass: "typography-brand-large-button-small",
-				desc: "Small - 14px",
-			},
-		],
+		name: "Body Large",
+		class: "typography-body-large",
+		sizes: "16px → 18px → 21px",
 	},
 	{
-		label: "Link",
-		tokens: [
-			{
-				token: "brand-large-link-large",
-				textClass: "typography-brand-large-link-large",
-				desc: "Large - 18px",
-			},
-			{
-				token: "brand-large-link-medium",
-				textClass: "typography-brand-large-link-medium",
-				desc: "Medium - 16px",
-			},
-			{
-				token: "brand-large-link-small",
-				textClass: "typography-brand-large-link-small",
-				desc: "Small - 14px",
-			},
-		],
+		name: "Body Medium",
+		class: "typography-body-medium",
+		sizes: "14px → 16px → 18px",
 	},
 	{
-		label: "Label",
-		tokens: [
-			{
-				token: "brand-large-label-large",
-				textClass: "typography-brand-large-label-large",
-				desc: "Large - 16px",
-			},
-			{
-				token: "brand-large-label-medium",
-				textClass: "typography-brand-large-label-medium",
-				desc: "Medium - 14px",
-			},
-			{
-				token: "brand-large-label-small",
-				textClass: "typography-brand-large-label-small",
-				desc: "Small - 12px",
-			},
-		],
+		name: "Body Small",
+		class: "typography-body-small",
+		sizes: "12px → 14px → 14px",
 	},
+];
+
+const uiTokens: TypographyToken[] = [
+	{ name: "Overline", class: "typography-overline", sizes: "14px" },
+	{ name: "Caption", class: "typography-caption", sizes: "11px" },
+	{ name: "Button Large", class: "typography-ui-button-large", sizes: "18px" },
 	{
-		label: "Caption",
-		tokens: [
-			{
-				token: "brand-large-caption-large",
-				textClass: "typography-brand-large-caption-large",
-				desc: "Large - 14px",
-			},
-			{
-				token: "brand-large-caption-small",
-				textClass: "typography-brand-large-caption-small",
-				desc: "Small - 12px",
-			},
-		],
+		name: "Button Medium",
+		class: "typography-ui-button-medium",
+		sizes: "16px",
 	},
+	{ name: "Button Small", class: "typography-ui-button-small", sizes: "14px" },
+	{ name: "Label", class: "typography-ui-label", sizes: "14px" },
 ];
 
-// Semantic Spacing tokens with hardcoded Tailwind classes
-// Each token includes the full class name for Tailwind to pick up statically
-type SemanticSpacingToken = {
-	token: string;
-	value: string;
-	widthClass: string;
-};
-
-type SemanticSpacingGroup = {
-	label: string;
-	tokens: SemanticSpacingToken[];
-};
-
-const semanticSpacingTokens: {
-	component: SemanticSpacingGroup[];
-	layout: SemanticSpacingGroup[];
-	content: SemanticSpacingGroup[];
-} = {
-	component: [
-		{
-			label: "Button",
-			tokens: [
-				{
-					token: "spacing-component-button-padding-x-large",
-					value: "32px",
-					widthClass: "w-spacing-component-button-padding-x-large",
-				},
-				{
-					token: "spacing-component-button-padding-x-medium",
-					value: "20px",
-					widthClass: "w-spacing-component-button-padding-x-medium",
-				},
-				{
-					token: "spacing-component-button-padding-x-small",
-					value: "12px",
-					widthClass: "w-spacing-component-button-padding-x-small",
-				},
-				{
-					token: "spacing-component-button-padding-y-large",
-					value: "20px",
-					widthClass: "w-spacing-component-button-padding-y-large",
-				},
-				{
-					token: "spacing-component-button-padding-y-medium",
-					value: "12px",
-					widthClass: "w-spacing-component-button-padding-y-medium",
-				},
-				{
-					token: "spacing-component-button-padding-y-small",
-					value: "8px",
-					widthClass: "w-spacing-component-button-padding-y-small",
-				},
-				{
-					token: "spacing-component-button-height-large",
-					value: "56px",
-					widthClass: "w-spacing-component-button-height-large",
-				},
-				{
-					token: "spacing-component-button-height-medium",
-					value: "40px",
-					widthClass: "w-spacing-component-button-height-medium",
-				},
-				{
-					token: "spacing-component-button-height-small",
-					value: "28px",
-					widthClass: "w-spacing-component-button-height-small",
-				},
-				{
-					token: "spacing-component-button-radius-large",
-					value: "10px",
-					widthClass: "w-spacing-component-button-radius-large",
-				},
-				{
-					token: "spacing-component-button-radius-medium",
-					value: "6px",
-					widthClass: "w-spacing-component-button-radius-medium",
-				},
-				{
-					token: "spacing-component-button-radius-small",
-					value: "4px",
-					widthClass: "w-spacing-component-button-radius-small",
-				},
-				{
-					token: "spacing-component-button-gap-icon-text",
-					value: "6px",
-					widthClass: "w-spacing-component-button-gap-icon-text",
-				},
-				{
-					token: "spacing-component-button-gap-button-group",
-					value: "12px",
-					widthClass: "w-spacing-component-button-gap-button-group",
-				},
-			],
-		},
-		{
-			label: "Card",
-			tokens: [
-				{
-					token: "spacing-component-card-padding-large",
-					value: "40px",
-					widthClass: "w-spacing-component-card-padding-large",
-				},
-				{
-					token: "spacing-component-card-padding-medium",
-					value: "32px",
-					widthClass: "w-spacing-component-card-padding-medium",
-				},
-				{
-					token: "spacing-component-card-padding-small",
-					value: "24px",
-					widthClass: "w-spacing-component-card-padding-small",
-				},
-				{
-					token: "spacing-component-card-gap-internal",
-					value: "24px",
-					widthClass: "w-spacing-component-card-gap-internal",
-				},
-			],
-		},
-		{
-			label: "Feature Section",
-			tokens: [
-				{
-					token: "spacing-component-feature-padding-large",
-					value: "48px",
-					widthClass: "w-spacing-component-feature-padding-large",
-				},
-				{
-					token: "spacing-component-feature-padding-medium",
-					value: "40px",
-					widthClass: "w-spacing-component-feature-padding-medium",
-				},
-				{
-					token: "spacing-component-feature-padding-small",
-					value: "32px",
-					widthClass: "w-spacing-component-feature-padding-small",
-				},
-				{
-					token: "spacing-component-feature-gap-icon-content",
-					value: "24px",
-					widthClass: "w-spacing-component-feature-gap-icon-content",
-				},
-			],
-		},
-		{
-			label: "Form",
-			tokens: [
-				{
-					token: "spacing-component-form-gap-field-field",
-					value: "20px",
-					widthClass: "w-spacing-component-form-gap-field-field",
-				},
-				{
-					token: "spacing-component-form-gap-label-field",
-					value: "8px",
-					widthClass: "w-spacing-component-form-gap-label-field",
-				},
-				{
-					token: "spacing-component-form-gap-field-button",
-					value: "24px",
-					widthClass: "w-spacing-component-form-gap-field-button",
-				},
-			],
-		},
-		{
-			label: "Testimonial",
-			tokens: [
-				{
-					token: "spacing-component-testimonial-padding",
-					value: "40px",
-					widthClass: "w-spacing-component-testimonial-padding",
-				},
-				{
-					token: "spacing-component-testimonial-gap-quote-attribution",
-					value: "24px",
-					widthClass: "w-spacing-component-testimonial-gap-quote-attribution",
-				},
-			],
-		},
-		{
-			label: "Accordion",
-			tokens: [
-				{
-					token: "spacing-component-accordion-padding-y",
-					value: "28px",
-					widthClass: "w-spacing-component-accordion-padding-y",
-				},
-			],
-		},
-		{
-			label: "Navbar",
-			tokens: [
-				{
-					token: "spacing-component-navbar-padding-x-mobile",
-					value: "20px",
-					widthClass: "w-spacing-component-navbar-padding-x-mobile",
-				},
-				{
-					token: "spacing-component-navbar-padding-x-tablet",
-					value: "32px",
-					widthClass: "w-spacing-component-navbar-padding-x-tablet",
-				},
-				{
-					token: "spacing-component-navbar-padding-y-mobile",
-					value: "8px",
-					widthClass: "w-spacing-component-navbar-padding-y-mobile",
-				},
-				{
-					token: "spacing-component-navbar-padding-y-tablet",
-					value: "16px",
-					widthClass: "w-spacing-component-navbar-padding-y-tablet",
-				},
-				{
-					token: "spacing-component-navbar-padding-y-desktop",
-					value: "24px",
-					widthClass: "w-spacing-component-navbar-padding-y-desktop",
-				},
-				{
-					token: "spacing-component-navbar-gap-links",
-					value: "40px",
-					widthClass: "w-spacing-component-navbar-gap-links",
-				},
-				{
-					token: "spacing-component-navbar-gap-actions",
-					value: "8px",
-					widthClass: "w-spacing-component-navbar-gap-actions",
-				},
-			],
-		},
-	],
-	layout: [
-		{
-			label: "Hero Section",
-			tokens: [
-				{
-					token: "spacing-brand-large-layout-hero-padding-y-large",
-					value: "112px",
-					widthClass: "w-spacing-brand-large-layout-hero-padding-y-large",
-				},
-				{
-					token: "spacing-brand-large-layout-hero-padding-y-medium",
-					value: "96px",
-					widthClass: "w-spacing-brand-large-layout-hero-padding-y-medium",
-				},
-				{
-					token: "spacing-brand-large-layout-hero-padding-y-small",
-					value: "80px",
-					widthClass: "w-spacing-brand-large-layout-hero-padding-y-small",
-				},
-				{
-					token: "spacing-brand-large-layout-hero-gap-content-cta",
-					value: "40px",
-					widthClass: "w-spacing-brand-large-layout-hero-gap-content-cta",
-				},
-			],
-		},
-		{
-			label: "Section",
-			tokens: [
-				{
-					token: "spacing-brand-large-layout-section-gap-xlarge",
-					value: "224px",
-					widthClass: "w-spacing-brand-large-layout-section-gap-xlarge",
-				},
-				{
-					token: "spacing-brand-large-layout-section-gap-large",
-					value: "160px",
-					widthClass: "w-spacing-brand-large-layout-section-gap-large",
-				},
-				{
-					token: "spacing-brand-large-layout-section-gap-medium",
-					value: "112px",
-					widthClass: "w-spacing-brand-large-layout-section-gap-medium",
-				},
-				{
-					token: "spacing-brand-large-layout-section-gap-small",
-					value: "80px",
-					widthClass: "w-spacing-brand-large-layout-section-gap-small",
-				},
-				{
-					token: "spacing-brand-large-layout-section-gap-default",
-					value: "160px",
-					widthClass: "w-spacing-brand-large-layout-section-gap-default",
-				},
-				{
-					token: "spacing-brand-large-layout-section-padding-y-large",
-					value: "128px",
-					widthClass: "w-spacing-brand-large-layout-section-padding-y-large",
-				},
-				{
-					token: "spacing-brand-large-layout-section-padding-y-medium",
-					value: "96px",
-					widthClass: "w-spacing-brand-large-layout-section-padding-y-medium",
-				},
-				{
-					token: "spacing-brand-large-layout-section-padding-y-small",
-					value: "64px",
-					widthClass: "w-spacing-brand-large-layout-section-padding-y-small",
-				},
-			],
-		},
-		{
-			label: "Container",
-			tokens: [
-				{
-					token: "spacing-brand-large-layout-container-padding-x-large",
-					value: "48px",
-					widthClass: "w-spacing-brand-large-layout-container-padding-x-large",
-				},
-				{
-					token: "spacing-brand-large-layout-container-padding-x-medium",
-					value: "32px",
-					widthClass: "w-spacing-brand-large-layout-container-padding-x-medium",
-				},
-				{
-					token: "spacing-brand-large-layout-container-padding-x-small",
-					value: "20px",
-					widthClass: "w-spacing-brand-large-layout-container-padding-x-small",
-				},
-			],
-		},
-		{
-			label: "Grid",
-			tokens: [
-				{
-					token: "spacing-brand-large-layout-grid-gap-large",
-					value: "48px",
-					widthClass: "w-spacing-brand-large-layout-grid-gap-large",
-				},
-				{
-					token: "spacing-brand-large-layout-grid-gap-medium",
-					value: "32px",
-					widthClass: "w-spacing-brand-large-layout-grid-gap-medium",
-				},
-				{
-					token: "spacing-brand-large-layout-grid-gap-small",
-					value: "24px",
-					widthClass: "w-spacing-brand-large-layout-grid-gap-small",
-				},
-			],
-		},
-	],
-	content: [
-		{
-			label: "Content Stack",
-			tokens: [
-				{
-					token: "spacing-brand-large-content-stack-display-body-tight",
-					value: "16px",
-					widthClass: "w-spacing-brand-large-content-stack-display-body-tight",
-				},
-				{
-					token: "spacing-brand-large-content-stack-display-body-normal",
-					value: "24px",
-					widthClass: "w-spacing-brand-large-content-stack-display-body-normal",
-				},
-				{
-					token: "spacing-brand-large-content-stack-display-body-relaxed",
-					value: "32px",
-					widthClass:
-						"w-spacing-brand-large-content-stack-display-body-relaxed",
-				},
-				{
-					token: "spacing-brand-large-content-stack-headline-subheading",
-					value: "16px",
-					widthClass: "w-spacing-brand-large-content-stack-headline-subheading",
-				},
-				{
-					token: "spacing-brand-large-content-stack-subheading-body",
-					value: "12px",
-					widthClass: "w-spacing-brand-large-content-stack-subheading-body",
-				},
-				{
-					token: "spacing-brand-large-content-stack-body-cta",
-					value: "32px",
-					widthClass: "w-spacing-brand-large-content-stack-body-cta",
-				},
-				{
-					token: "spacing-brand-large-content-stack-eyebrow-headline",
-					value: "12px",
-					widthClass: "w-spacing-brand-large-content-stack-eyebrow-headline",
-				},
-				{
-					token: "spacing-brand-large-content-stack-body-body",
-					value: "20px",
-					widthClass: "w-spacing-brand-large-content-stack-body-body",
-				},
-			],
-		},
-	],
-};
-
-// Typography sample component using hardcoded classes
-const SemanticTypographySwatch: React.FC<{
-	token: string;
-	textClass: string;
-	desc: string;
-}> = ({ token, textClass, desc }) => {
-	const isLargeType = token.includes("display") || token.includes("headline");
-	const sampleText = isLargeType
-		? "Aa"
-		: "The quick brown fox jumps over the lazy dog";
+const TypographyRow: React.FC<{ token: TypographyToken; sample?: string }> = ({
+	token,
+	sample,
+}) => {
+	const isHeading = token.class.includes("h1") || token.class.includes("h2");
+	const text = sample || (isHeading ? "Aa" : "The quick brown fox");
 
 	return (
-		<div className="py-4 border-b border-gray-100">
-			<div className="flex justify-between items-start mb-2">
-				<span className="text-xs font-mono text-blue-600 bg-blue-50 px-2 py-1 rounded">
-					{token}
-				</span>
-				<span className="text-xs text-gray-500">{desc}</span>
+		<div className="py-12 border-b border-gray-100 last:border-0">
+			<div className="flex items-baseline justify-between gap-16 mb-4">
+				<code className="text-12 font-mono text-indigo-600 bg-indigo-50 px-8 py-2 rounded-4">
+					{token.class}
+				</code>
+				<span className="text-12 text-gray-400">{token.sizes}</span>
 			</div>
-			<p className={textClass}>{sampleText}</p>
+			<p className={token.class}>{text}</p>
 		</div>
 	);
 };
 
-export const TypographyTokens: React.FC = () => {
-	return (
-		<div className="space-y-8">
-			<div>
-				<h2 className="text-2xl font-bold mb-6">Semantic Typography</h2>
-				<p className="text-gray-600 mb-6">
-					Typography tokens for marketing pages, landing pages, and promotional
-					content.
-				</p>
-
-				{semanticTypographyTokens.map((group) => (
-					<div key={group.label} className="mb-8">
-						<h3 className="text-lg font-semibold mb-3">{group.label}</h3>
-						<div className="bg-white rounded-lg border border-gray-200 p-6 overflow-x-auto">
-							{group.tokens.map((t) => (
-								<SemanticTypographySwatch
-									key={t.token}
-									token={t.token}
-									textClass={t.textClass}
-									desc={t.desc}
-								/>
-							))}
-						</div>
-					</div>
+export const TypographyTokens: React.FC = () => (
+	<div className="space-y-32">
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				Headings (Responsive)
+			</h3>
+			<div className="bg-white rounded-8 border border-gray-200 p-24">
+				{headingTokens.map((token) => (
+					<TypographyRow key={token.class} token={token} />
 				))}
 			</div>
-		</div>
-	);
-};
-
-// Semantic Spacing Component - Individual row for each token
-// Uses hardcoded Tailwind classes for static analysis
-const SemanticSpacingSwatch: React.FC<{
-	token: string;
-	value: string;
-	widthClass: string;
-}> = ({ token, value, widthClass }) => {
-	return (
-		<div className="flex items-center gap-32 py-2 border-b border-gray-100">
-			<div className="w-16 text-sm font-mono text-gray-600">{value}</div>
-			<div className="flex-1 flex items-center justify-between gap-3">
-				<div className="flex-1">
-					<div className={`h-4 bg-green-500 rounded max-w-400 ${widthClass}`} />
-				</div>
-				<div className="text-xs text-gray-400 font-mono whitespace-nowrap">
-					{token}
-				</div>
+		</section>
+
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				Body (Responsive)
+			</h3>
+			<div className="bg-white rounded-8 border border-gray-200 p-24">
+				{bodyTokens.map((token) => (
+					<TypographyRow key={token.class} token={token} />
+				))}
+			</div>
+		</section>
+
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				UI Elements
+			</h3>
+			<div className="bg-white rounded-8 border border-gray-200 p-24">
+				{uiTokens.map((token) => (
+					<TypographyRow key={token.class} token={token} />
+				))}
 			</div>
+		</section>
+	</div>
+);
+
+// =============================================================================
+// Responsive Typography Demo
+// =============================================================================
+
+export const ResponsiveTypography: React.FC = () => (
+	<div className="space-y-32">
+		<div className="bg-indigo-50 border border-indigo-100 rounded-8 p-16">
+			<p className="text-14 text-indigo-700">
+				<strong>Responsive Typography</strong> — Resize viewport to see
+				typography scale. Mobile (&lt;768px) → Tablet → Desktop (&gt;1440px)
+			</p>
 		</div>
-	);
-};
-
-export const SemanticSpacingTokens: React.FC = () => {
-	return (
-		<div className="space-y-8">
-			<div>
-				<h2 className="text-2xl font-bold mb-6">Semantic Spacing</h2>
-				<p className="text-gray-600 mb-6">
-					Purpose-driven spacing tokens for components, layouts, and content
-					stacks. These provide consistent spacing across the design system.
-				</p>
-
-				{/* Component Spacing */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Component Spacing</h3>
-					<div className="bg-white rounded-lg border border-gray-200 p-6">
-						{semanticSpacingTokens.component.map((group) => (
-							<div key={group.label} className="mb-6 last:mb-0">
-								<div className="text-sm text-gray-500 mb-2">{group.label}</div>
-								{group.tokens.map((t) => (
-									<SemanticSpacingSwatch
-										key={t.token}
-										token={t.token}
-										value={t.value}
-										widthClass={t.widthClass}
-									/>
-								))}
-							</div>
-						))}
-					</div>
-				</div>
 
-				{/* Layout Spacing */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Layout Spacing</h3>
-					<div className="bg-white rounded-lg border border-gray-200 p-6">
-						{semanticSpacingTokens.layout.map((group) => (
-							<div key={group.label} className="mb-6 last:mb-0">
-								<div className="text-sm text-gray-500 mb-2">{group.label}</div>
-								{group.tokens.map((t) => (
-									<SemanticSpacingSwatch
-										key={t.token}
-										token={t.token}
-										value={t.value}
-										widthClass={t.widthClass}
-									/>
-								))}
-							</div>
-						))}
-					</div>
-				</div>
-
-				{/* Content Spacing */}
-				<div className="mb-8">
-					<h3 className="text-lg font-semibold mb-3">Content Stack Spacing</h3>
-					<div className="bg-white rounded-lg border border-gray-200 p-6">
-						{semanticSpacingTokens.content.map((group) => (
-							<div key={group.label} className="mb-6 last:mb-0">
-								<div className="text-sm text-gray-500 mb-2">{group.label}</div>
-								{group.tokens.map((t) => (
-									<SemanticSpacingSwatch
-										key={t.token}
-										token={t.token}
-										value={t.value}
-										widthClass={t.widthClass}
-									/>
-								))}
-							</div>
-						))}
-					</div>
-				</div>
+		<section className="space-y-16">
+			<div className="border-l-4 border-indigo-500 pl-16">
+				<code className="text-12 font-mono text-gray-500">
+					typography-h1-display
+				</code>
+				<h1 className="typography-h1-display">Display</h1>
 			</div>
-		</div>
-	);
-};
+			<div className="border-l-4 border-indigo-400 pl-16">
+				<code className="text-12 font-mono text-gray-500">typography-h1</code>
+				<h1 className="typography-h1">Heading 1</h1>
+			</div>
+			<div className="border-l-4 border-indigo-300 pl-16">
+				<code className="text-12 font-mono text-gray-500">typography-h2</code>
+				<h2 className="typography-h2">Heading 2</h2>
+			</div>
+			<div className="border-l-4 border-indigo-200 pl-16">
+				<code className="text-12 font-mono text-gray-500">typography-h3</code>
+				<h3 className="typography-h3">Heading 3</h3>
+			</div>
+		</section>
 
-export const ResponsiveTypography: React.FC = () => {
-	return (
-		<div className="space-y-12">
-			{/* Headline example */}
+		<section className="bg-gray-50 rounded-8 p-16 space-y-12">
 			<div>
-				<p className="text-sm text-gray-500 mb-2 font-mono">
-					sm: headline-small → md: headline-medium → lg: headline-large
+				<code className="text-12 font-mono text-gray-500">
+					typography-body-large
+				</code>
+				<p className="typography-body-large">
+					Large body text scales from 16px to 21px.
 				</p>
-				<h1 className="typography-brand-small-headline-small md:typography-brand-medium-headline-medium lg:typography-brand-large-headline-large">
-					Responsive Headline
-				</h1>
 			</div>
-
-			{/* Subheading example */}
 			<div>
-				<p className="text-sm text-gray-500 mb-2 font-mono">
-					sm: subheading-small → md: subheading-medium → lg: subheading-large
+				<code className="text-12 font-mono text-gray-500">
+					typography-body-medium
+				</code>
+				<p className="typography-body-medium">
+					Medium body text scales from 14px to 18px.
 				</p>
-				<h2 className="typography-brand-small-subheading-small md:typography-brand-medium-subheading-medium lg:typography-brand-large-subheading-large">
-					Responsive Subheading
-				</h2>
 			</div>
-
-			{/* Body example */}
 			<div>
-				<p className="text-sm text-gray-500 mb-2 font-mono">
-					sm: body-small → md: body-medium → lg: body-large
-				</p>
-				<p className="typography-brand-small-body-small md:typography-brand-medium-body-medium lg:typography-brand-large-body-large">
-					This body text adapts to the screen size. On mobile it uses the small
-					variant, on tablet the medium variant, and on desktop the large
-					variant. Resize the viewport to see it change.
+				<code className="text-12 font-mono text-gray-500">
+					typography-body-small
+				</code>
+				<p className="typography-body-small">
+					Small body text scales from 12px to 14px.
 				</p>
 			</div>
+		</section>
+	</div>
+);
+
+// =============================================================================
+// Main Export
+// =============================================================================
+
+export const TokenShowcase: React.FC = () => (
+	<div className="p-32 bg-gray-50 min-h-screen">
+		<div className="max-w-6xl mx-auto">
+			<header className="mb-32">
+				<h1 className="text-24 font-bold text-gray-900">Design Tokens</h1>
+				<p className="text-gray-600">
+					Primitive color palette from the design system
+				</p>
+			</header>
+			<ColorTokens />
 		</div>
-	);
-};
-
-export const TokenShowcase: React.FC = () => {
-	return (
-		<div className="p-8 bg-gray-50 min-h-screen">
-			<div className="max-w-7xl mx-auto">
-				<div className="mb-8">
-					<h1 className="text-3xl font-bold mb-2">Design Tokens</h1>
-					<p className="text-lg text-gray-600">
-						Primitive color tokens available in the design system
-					</p>
-				</div>
-				<ColorTokens />
-			</div>
-		</div>
-	);
-};
+	</div>
+);