@nationaldesignstudio/react 0.0.10 → 0.0.11

package/src/stories/TokenShowcase.tsx

@@ -1,1352 +0,0 @@
-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>
-	);
-};