@nationaldesignstudio/react 0.0.6 → 0.0.8

package/src/stories/TokenShowcase.tsx

@@ -0,0 +1,1352 @@
+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>
+	);
+};
+
+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>
+
+				{/* 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>
+
+				{/* 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>
+
+				{/* 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>
+			</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" />
+					</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>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+// Primitive spacing tokens with hardcoded Tailwind classes
+type PrimitiveSpacingToken = {
+	token: string;
+	value: string;
+	widthClass: string;
+};
+
+// 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 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>
+	);
+};
+
+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}
+						/>
+					))}
+				</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;
+};
+
+type SemanticTypographyGroup = {
+	label: string;
+	tokens: SemanticTypographyToken[];
+};
+
+const semanticTypographyTokens: SemanticTypographyGroup[] = [
+	{
+		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",
+			},
+		],
+	},
+	{
+		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",
+			},
+		],
+	},
+	{
+		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",
+			},
+		],
+	},
+	{
+		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",
+			},
+		],
+	},
+	{
+		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",
+			},
+		],
+	},
+];
+
+// 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-brand-large-component-button-padding-x-large",
+					value: "32px",
+					widthClass: "w-spacing-brand-large-component-button-padding-x-large",
+				},
+				{
+					token: "spacing-brand-large-component-button-padding-x-medium",
+					value: "24px",
+					widthClass: "w-spacing-brand-large-component-button-padding-x-medium",
+				},
+				{
+					token: "spacing-brand-large-component-button-padding-x-small",
+					value: "16px",
+					widthClass: "w-spacing-brand-large-component-button-padding-x-small",
+				},
+				{
+					token: "spacing-brand-large-component-button-padding-y-large",
+					value: "20px",
+					widthClass: "w-spacing-brand-large-component-button-padding-y-large",
+				},
+				{
+					token: "spacing-brand-large-component-button-padding-y-medium",
+					value: "16px",
+					widthClass: "w-spacing-brand-large-component-button-padding-y-medium",
+				},
+				{
+					token: "spacing-brand-large-component-button-padding-y-small",
+					value: "12px",
+					widthClass: "w-spacing-brand-large-component-button-padding-y-small",
+				},
+				{
+					token: "spacing-brand-large-component-button-gap-icon-text",
+					value: "12px",
+					widthClass: "w-spacing-brand-large-component-button-gap-icon-text",
+				},
+				{
+					token: "spacing-brand-large-component-button-gap-button-group",
+					value: "16px",
+					widthClass: "w-spacing-brand-large-component-button-gap-button-group",
+				},
+			],
+		},
+		{
+			label: "Card",
+			tokens: [
+				{
+					token: "spacing-brand-large-component-card-padding-large",
+					value: "40px",
+					widthClass: "w-spacing-brand-large-component-card-padding-large",
+				},
+				{
+					token: "spacing-brand-large-component-card-padding-medium",
+					value: "32px",
+					widthClass: "w-spacing-brand-large-component-card-padding-medium",
+				},
+				{
+					token: "spacing-brand-large-component-card-padding-small",
+					value: "24px",
+					widthClass: "w-spacing-brand-large-component-card-padding-small",
+				},
+				{
+					token: "spacing-brand-large-component-card-gap-internal",
+					value: "24px",
+					widthClass: "w-spacing-brand-large-component-card-gap-internal",
+				},
+			],
+		},
+		{
+			label: "Feature Section",
+			tokens: [
+				{
+					token: "spacing-brand-large-component-feature-padding-large",
+					value: "48px",
+					widthClass: "w-spacing-brand-large-component-feature-padding-large",
+				},
+				{
+					token: "spacing-brand-large-component-feature-padding-medium",
+					value: "40px",
+					widthClass: "w-spacing-brand-large-component-feature-padding-medium",
+				},
+				{
+					token: "spacing-brand-large-component-feature-padding-small",
+					value: "32px",
+					widthClass: "w-spacing-brand-large-component-feature-padding-small",
+				},
+				{
+					token: "spacing-brand-large-component-feature-gap-icon-content",
+					value: "24px",
+					widthClass:
+						"w-spacing-brand-large-component-feature-gap-icon-content",
+				},
+			],
+		},
+		{
+			label: "Form",
+			tokens: [
+				{
+					token: "spacing-brand-large-component-form-gap-field-field",
+					value: "20px",
+					widthClass: "w-spacing-brand-large-component-form-gap-field-field",
+				},
+				{
+					token: "spacing-brand-large-component-form-gap-label-field",
+					value: "8px",
+					widthClass: "w-spacing-brand-large-component-form-gap-label-field",
+				},
+				{
+					token: "spacing-brand-large-component-form-gap-field-button",
+					value: "24px",
+					widthClass: "w-spacing-brand-large-component-form-gap-field-button",
+				},
+			],
+		},
+		{
+			label: "Testimonial",
+			tokens: [
+				{
+					token: "spacing-brand-large-component-testimonial-padding",
+					value: "40px",
+					widthClass: "w-spacing-brand-large-component-testimonial-padding",
+				},
+				{
+					token:
+						"spacing-brand-large-component-testimonial-gap-quote-attribution",
+					value: "24px",
+					widthClass:
+						"w-spacing-brand-large-component-testimonial-gap-quote-attribution",
+				},
+			],
+		},
+	],
+	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";
+
+	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>
+			<p className={textClass}>{sampleText}</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>
+				))}
+			</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>
+			</div>
+		</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>
+			</div>
+		</div>
+	);
+};
+
+export const ResponsiveTypography: React.FC = () => {
+	return (
+		<div className="space-y-12">
+			{/* Headline example */}
+			<div>
+				<p className="text-sm text-gray-500 mb-2 font-mono">
+					sm: headline-small → md: headline-medium → lg: headline-large
+				</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
+				</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.
+				</p>
+			</div>
+		</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>
+	);
+};