@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/stories/token-showcase.tsx

@@ -0,0 +1,777 @@
+import type * as React from "react";
+
+// =============================================================================
+// Color Tokens
+// =============================================================================
+
+type ColorScale = {
+	name: string;
+	prefix: string;
+	shades: (string | number)[];
+	vibrant?: (string | number)[];
+};
+
+const neutralScales: ColorScale[] = [
+	{
+		name: "Gray",
+		prefix: "gray",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
+	},
+	{
+		name: "Brown",
+		prefix: "brown",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
+	},
+	{
+		name: "Steel",
+		prefix: "steel",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
+	},
+];
+
+const colorScales: ColorScale[] = [
+	{
+		name: "Red",
+		prefix: "red",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Pink",
+		prefix: "pink",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Purple",
+		prefix: "purple",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Iris",
+		prefix: "iris",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Indigo",
+		prefix: "indigo",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Blue",
+		prefix: "blue",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Ice",
+		prefix: "ice",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Cyan",
+		prefix: "cyan",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Teal",
+		prefix: "teal",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Green",
+		prefix: "green",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Sage",
+		prefix: "sage",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Lime",
+		prefix: "lime",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Yellow",
+		prefix: "yellow",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Amber",
+		prefix: "amber",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Orange",
+		prefix: "orange",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+	{
+		name: "Ember",
+		prefix: "ember",
+		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+		vibrant: ["v100", "v200", "v300", "v400"],
+	},
+];
+
+// Tailwind needs static class names - generate lookup maps
+const bgClasses: Record<string, string> = {
+	// Neutrals
+	"gray-50": "bg-gray-50",
+	"gray-100": "bg-gray-100",
+	"gray-200": "bg-gray-200",
+	"gray-300": "bg-gray-300",
+	"gray-400": "bg-gray-400",
+	"gray-500": "bg-gray-500",
+	"gray-600": "bg-gray-600",
+	"gray-700": "bg-gray-700",
+	"gray-800": "bg-gray-800",
+	"gray-900": "bg-gray-900",
+	"gray-1000": "bg-gray-1000",
+	"gray-1100": "bg-gray-1100",
+	"gray-1200": "bg-gray-1200",
+	"brown-50": "bg-brown-50",
+	"brown-100": "bg-brown-100",
+	"brown-200": "bg-brown-200",
+	"brown-300": "bg-brown-300",
+	"brown-400": "bg-brown-400",
+	"brown-500": "bg-brown-500",
+	"brown-600": "bg-brown-600",
+	"brown-700": "bg-brown-700",
+	"brown-800": "bg-brown-800",
+	"brown-900": "bg-brown-900",
+	"brown-1000": "bg-brown-1000",
+	"brown-1100": "bg-brown-1100",
+	"brown-1200": "bg-brown-1200",
+	"steel-50": "bg-steel-50",
+	"steel-100": "bg-steel-100",
+	"steel-200": "bg-steel-200",
+	"steel-300": "bg-steel-300",
+	"steel-400": "bg-steel-400",
+	"steel-500": "bg-steel-500",
+	"steel-600": "bg-steel-600",
+	"steel-700": "bg-steel-700",
+	"steel-800": "bg-steel-800",
+	"steel-900": "bg-steel-900",
+	"steel-1000": "bg-steel-1000",
+	"steel-1100": "bg-steel-1100",
+	"steel-1200": "bg-steel-1200",
+	// Colors
+	"red-50": "bg-red-50",
+	"red-100": "bg-red-100",
+	"red-200": "bg-red-200",
+	"red-300": "bg-red-300",
+	"red-400": "bg-red-400",
+	"red-500": "bg-red-500",
+	"red-600": "bg-red-600",
+	"red-700": "bg-red-700",
+	"red-800": "bg-red-800",
+	"red-900": "bg-red-900",
+	"red-v100": "bg-red-v100",
+	"red-v200": "bg-red-v200",
+	"red-v300": "bg-red-v300",
+	"red-v400": "bg-red-v400",
+	"pink-50": "bg-pink-50",
+	"pink-100": "bg-pink-100",
+	"pink-200": "bg-pink-200",
+	"pink-300": "bg-pink-300",
+	"pink-400": "bg-pink-400",
+	"pink-500": "bg-pink-500",
+	"pink-600": "bg-pink-600",
+	"pink-700": "bg-pink-700",
+	"pink-800": "bg-pink-800",
+	"pink-900": "bg-pink-900",
+	"pink-v100": "bg-pink-v100",
+	"pink-v200": "bg-pink-v200",
+	"pink-v300": "bg-pink-v300",
+	"pink-v400": "bg-pink-v400",
+	"purple-50": "bg-purple-50",
+	"purple-100": "bg-purple-100",
+	"purple-200": "bg-purple-200",
+	"purple-300": "bg-purple-300",
+	"purple-400": "bg-purple-400",
+	"purple-500": "bg-purple-500",
+	"purple-600": "bg-purple-600",
+	"purple-700": "bg-purple-700",
+	"purple-800": "bg-purple-800",
+	"purple-900": "bg-purple-900",
+	"purple-v100": "bg-purple-v100",
+	"purple-v200": "bg-purple-v200",
+	"purple-v300": "bg-purple-v300",
+	"purple-v400": "bg-purple-v400",
+	"iris-50": "bg-iris-50",
+	"iris-100": "bg-iris-100",
+	"iris-200": "bg-iris-200",
+	"iris-300": "bg-iris-300",
+	"iris-400": "bg-iris-400",
+	"iris-500": "bg-iris-500",
+	"iris-600": "bg-iris-600",
+	"iris-700": "bg-iris-700",
+	"iris-800": "bg-iris-800",
+	"iris-900": "bg-iris-900",
+	"iris-v100": "bg-iris-v100",
+	"iris-v200": "bg-iris-v200",
+	"iris-v300": "bg-iris-v300",
+	"iris-v400": "bg-iris-v400",
+	"indigo-50": "bg-indigo-50",
+	"indigo-100": "bg-indigo-100",
+	"indigo-200": "bg-indigo-200",
+	"indigo-300": "bg-indigo-300",
+	"indigo-400": "bg-indigo-400",
+	"indigo-500": "bg-indigo-500",
+	"indigo-600": "bg-indigo-600",
+	"indigo-700": "bg-indigo-700",
+	"indigo-800": "bg-indigo-800",
+	"indigo-900": "bg-indigo-900",
+	"indigo-v100": "bg-indigo-v100",
+	"indigo-v200": "bg-indigo-v200",
+	"indigo-v300": "bg-indigo-v300",
+	"indigo-v400": "bg-indigo-v400",
+	"blue-50": "bg-blue-50",
+	"blue-100": "bg-blue-100",
+	"blue-200": "bg-blue-200",
+	"blue-300": "bg-blue-300",
+	"blue-400": "bg-blue-400",
+	"blue-500": "bg-blue-500",
+	"blue-600": "bg-blue-600",
+	"blue-700": "bg-blue-700",
+	"blue-800": "bg-blue-800",
+	"blue-900": "bg-blue-900",
+	"blue-v100": "bg-blue-v100",
+	"blue-v200": "bg-blue-v200",
+	"blue-v300": "bg-blue-v300",
+	"blue-v400": "bg-blue-v400",
+	"ice-50": "bg-ice-50",
+	"ice-100": "bg-ice-100",
+	"ice-200": "bg-ice-200",
+	"ice-300": "bg-ice-300",
+	"ice-400": "bg-ice-400",
+	"ice-500": "bg-ice-500",
+	"ice-600": "bg-ice-600",
+	"ice-700": "bg-ice-700",
+	"ice-800": "bg-ice-800",
+	"ice-900": "bg-ice-900",
+	"ice-v100": "bg-ice-v100",
+	"ice-v200": "bg-ice-v200",
+	"ice-v300": "bg-ice-v300",
+	"ice-v400": "bg-ice-v400",
+	"cyan-50": "bg-cyan-50",
+	"cyan-100": "bg-cyan-100",
+	"cyan-200": "bg-cyan-200",
+	"cyan-300": "bg-cyan-300",
+	"cyan-400": "bg-cyan-400",
+	"cyan-500": "bg-cyan-500",
+	"cyan-600": "bg-cyan-600",
+	"cyan-700": "bg-cyan-700",
+	"cyan-800": "bg-cyan-800",
+	"cyan-900": "bg-cyan-900",
+	"cyan-v100": "bg-cyan-v100",
+	"cyan-v200": "bg-cyan-v200",
+	"cyan-v300": "bg-cyan-v300",
+	"cyan-v400": "bg-cyan-v400",
+	"teal-50": "bg-teal-50",
+	"teal-100": "bg-teal-100",
+	"teal-200": "bg-teal-200",
+	"teal-300": "bg-teal-300",
+	"teal-400": "bg-teal-400",
+	"teal-500": "bg-teal-500",
+	"teal-600": "bg-teal-600",
+	"teal-700": "bg-teal-700",
+	"teal-800": "bg-teal-800",
+	"teal-900": "bg-teal-900",
+	"teal-v100": "bg-teal-v100",
+	"teal-v200": "bg-teal-v200",
+	"teal-v300": "bg-teal-v300",
+	"teal-v400": "bg-teal-v400",
+	"green-50": "bg-green-50",
+	"green-100": "bg-green-100",
+	"green-200": "bg-green-200",
+	"green-300": "bg-green-300",
+	"green-400": "bg-green-400",
+	"green-500": "bg-green-500",
+	"green-600": "bg-green-600",
+	"green-700": "bg-green-700",
+	"green-800": "bg-green-800",
+	"green-900": "bg-green-900",
+	"green-v100": "bg-green-v100",
+	"green-v200": "bg-green-v200",
+	"green-v300": "bg-green-v300",
+	"green-v400": "bg-green-v400",
+	"sage-50": "bg-sage-50",
+	"sage-100": "bg-sage-100",
+	"sage-200": "bg-sage-200",
+	"sage-300": "bg-sage-300",
+	"sage-400": "bg-sage-400",
+	"sage-500": "bg-sage-500",
+	"sage-600": "bg-sage-600",
+	"sage-700": "bg-sage-700",
+	"sage-800": "bg-sage-800",
+	"sage-900": "bg-sage-900",
+	"sage-v100": "bg-sage-v100",
+	"sage-v200": "bg-sage-v200",
+	"sage-v300": "bg-sage-v300",
+	"sage-v400": "bg-sage-v400",
+	"lime-50": "bg-lime-50",
+	"lime-100": "bg-lime-100",
+	"lime-200": "bg-lime-200",
+	"lime-300": "bg-lime-300",
+	"lime-400": "bg-lime-400",
+	"lime-500": "bg-lime-500",
+	"lime-600": "bg-lime-600",
+	"lime-700": "bg-lime-700",
+	"lime-800": "bg-lime-800",
+	"lime-900": "bg-lime-900",
+	"lime-v100": "bg-lime-v100",
+	"lime-v200": "bg-lime-v200",
+	"lime-v300": "bg-lime-v300",
+	"lime-v400": "bg-lime-v400",
+	"yellow-50": "bg-yellow-50",
+	"yellow-100": "bg-yellow-100",
+	"yellow-200": "bg-yellow-200",
+	"yellow-300": "bg-yellow-300",
+	"yellow-400": "bg-yellow-400",
+	"yellow-500": "bg-yellow-500",
+	"yellow-600": "bg-yellow-600",
+	"yellow-700": "bg-yellow-700",
+	"yellow-800": "bg-yellow-800",
+	"yellow-900": "bg-yellow-900",
+	"yellow-v100": "bg-yellow-v100",
+	"yellow-v200": "bg-yellow-v200",
+	"yellow-v300": "bg-yellow-v300",
+	"yellow-v400": "bg-yellow-v400",
+	"amber-50": "bg-amber-50",
+	"amber-100": "bg-amber-100",
+	"amber-200": "bg-amber-200",
+	"amber-300": "bg-amber-300",
+	"amber-400": "bg-amber-400",
+	"amber-500": "bg-amber-500",
+	"amber-600": "bg-amber-600",
+	"amber-700": "bg-amber-700",
+	"amber-800": "bg-amber-800",
+	"amber-900": "bg-amber-900",
+	"amber-v100": "bg-amber-v100",
+	"amber-v200": "bg-amber-v200",
+	"amber-v300": "bg-amber-v300",
+	"amber-v400": "bg-amber-v400",
+	"orange-50": "bg-orange-50",
+	"orange-100": "bg-orange-100",
+	"orange-200": "bg-orange-200",
+	"orange-300": "bg-orange-300",
+	"orange-400": "bg-orange-400",
+	"orange-500": "bg-orange-500",
+	"orange-600": "bg-orange-600",
+	"orange-700": "bg-orange-700",
+	"orange-800": "bg-orange-800",
+	"orange-900": "bg-orange-900",
+	"orange-v100": "bg-orange-v100",
+	"orange-v200": "bg-orange-v200",
+	"orange-v300": "bg-orange-v300",
+	"orange-v400": "bg-orange-v400",
+	"ember-50": "bg-ember-50",
+	"ember-100": "bg-ember-100",
+	"ember-200": "bg-ember-200",
+	"ember-300": "bg-ember-300",
+	"ember-400": "bg-ember-400",
+	"ember-500": "bg-ember-500",
+	"ember-600": "bg-ember-600",
+	"ember-700": "bg-ember-700",
+	"ember-800": "bg-ember-800",
+	"ember-900": "bg-ember-900",
+	"ember-v100": "bg-ember-v100",
+	"ember-v200": "bg-ember-v200",
+	"ember-v300": "bg-ember-v300",
+	"ember-v400": "bg-ember-v400",
+	// Alpha
+	"alpha-black-5": "bg-alpha-black-5",
+	"alpha-black-10": "bg-alpha-black-10",
+	"alpha-black-20": "bg-alpha-black-20",
+	"alpha-black-30": "bg-alpha-black-30",
+	"alpha-black-40": "bg-alpha-black-40",
+	"alpha-black-50": "bg-alpha-black-50",
+	"alpha-black-60": "bg-alpha-black-60",
+	"alpha-black-70": "bg-alpha-black-70",
+	"alpha-black-80": "bg-alpha-black-80",
+	"alpha-black-90": "bg-alpha-black-90",
+	"alpha-black-95": "bg-alpha-black-95",
+	"alpha-white-5": "bg-alpha-white-5",
+	"alpha-white-10": "bg-alpha-white-10",
+	"alpha-white-20": "bg-alpha-white-20",
+	"alpha-white-30": "bg-alpha-white-30",
+	"alpha-white-40": "bg-alpha-white-40",
+	"alpha-white-50": "bg-alpha-white-50",
+	"alpha-white-60": "bg-alpha-white-60",
+	"alpha-white-70": "bg-alpha-white-70",
+	"alpha-white-80": "bg-alpha-white-80",
+	"alpha-white-90": "bg-alpha-white-90",
+	"alpha-white-95": "bg-alpha-white-95",
+};
+
+const ColorScaleRow: React.FC<{ scale: ColorScale; showVibrant?: boolean }> = ({
+	scale,
+	showVibrant = true,
+}) => {
+	const allShades =
+		showVibrant && scale.vibrant
+			? [...scale.shades, ...scale.vibrant]
+			: scale.shades;
+	return (
+		<div className="grid grid-cols-[72px_1fr] gap-16 items-center">
+			<span className="text-14 font-medium text-gray-700">{scale.name}</span>
+			<div className="grid grid-flow-col auto-cols-fr gap-2">
+				{allShades.map((shade) => {
+					const key = `${scale.prefix}-${shade}`;
+					return (
+						<div
+							key={key}
+							className={`h-32 rounded-4 ${bgClasses[key] || ""}`}
+							title={`${scale.prefix}-${shade}`}
+						/>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+export const ColorTokens: React.FC = () => (
+	<div className="space-y-48">
+		{/* Neutrals */}
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				Neutrals
+			</h3>
+			<div className="bg-white rounded-8 border border-gray-200 p-24 space-y-12">
+				{neutralScales.map((scale) => (
+					<ColorScaleRow key={scale.prefix} scale={scale} showVibrant={false} />
+				))}
+			</div>
+		</section>
+
+		{/* Chromatic Colors */}
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				Colors
+			</h3>
+			<div className="bg-white rounded-8 border border-gray-200 p-24 space-y-12">
+				{colorScales.map((scale) => (
+					<ColorScaleRow key={scale.prefix} scale={scale} />
+				))}
+			</div>
+		</section>
+
+		{/* Alpha Colors */}
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				Alpha
+			</h3>
+			<div className="grid grid-cols-2 gap-24">
+				<div className="bg-white rounded-8 border border-gray-200 p-24">
+					<div className="text-12 font-medium text-gray-600 mb-16">
+						Black (on light)
+					</div>
+					<div className="grid grid-flow-col auto-cols-fr gap-2 bg-gray-100 p-16 rounded-8">
+						{[5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95].map((alpha) => (
+							<div
+								key={`alpha-black-${alpha}`}
+								className={`h-32 rounded-4 ${bgClasses[`alpha-black-${alpha}`] || ""}`}
+								title={`alpha-black-${alpha}`}
+							/>
+						))}
+					</div>
+				</div>
+				<div className="bg-white rounded-8 border border-gray-200 p-24">
+					<div className="text-12 font-medium text-gray-600 mb-16">
+						White (on dark)
+					</div>
+					<div className="grid grid-flow-col auto-cols-fr gap-2 bg-gray-900 p-16 rounded-8">
+						{[5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95].map((alpha) => (
+							<div
+								key={`alpha-white-${alpha}`}
+								className={`h-32 rounded-4 ${bgClasses[`alpha-white-${alpha}`] || ""}`}
+								title={`alpha-white-${alpha}`}
+							/>
+						))}
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+);
+
+// =============================================================================
+// Spacing Tokens
+// =============================================================================
+
+const spacingScale = [
+	2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96, 112,
+	128, 144, 160, 176, 192, 208, 224, 240, 256, 288, 320, 352, 384, 400,
+];
+
+const widthClasses: Record<number, string> = {
+	2: "w-2",
+	4: "w-4",
+	6: "w-6",
+	8: "w-8",
+	10: "w-10",
+	12: "w-12",
+	16: "w-16",
+	20: "w-20",
+	24: "w-24",
+	28: "w-28",
+	32: "w-32",
+	36: "w-36",
+	40: "w-40",
+	48: "w-48",
+	56: "w-56",
+	64: "w-64",
+	72: "w-72",
+	80: "w-80",
+	96: "w-96",
+	112: "w-112",
+	128: "w-128",
+	144: "w-144",
+	160: "w-160",
+	176: "w-176",
+	192: "w-192",
+	208: "w-208",
+	224: "w-224",
+	240: "w-240",
+	256: "w-256",
+	288: "w-288",
+	320: "w-320",
+	352: "w-352",
+	384: "w-384",
+	400: "w-400",
+};
+
+export const SpacingTokens: React.FC = () => (
+	<div className="bg-white rounded-8 border border-gray-200 overflow-hidden">
+		<div className="grid grid-cols-[64px_1fr_100px] gap-16 px-24 py-12 bg-gray-50 border-b border-gray-200 text-12 font-medium text-gray-500 uppercase">
+			<div>Value</div>
+			<div>Preview</div>
+			<div>Token</div>
+		</div>
+		<div className="divide-y divide-gray-100">
+			{spacingScale.map((size) => (
+				<div
+					key={size}
+					className="grid grid-cols-[64px_1fr_100px] gap-16 px-24 py-8 items-center"
+				>
+					<div className="text-14 font-mono text-gray-600">{size}px</div>
+					<div className="flex items-center">
+						<div
+							className={`h-12 bg-indigo-500 rounded-2 ${widthClasses[size]} max-w-full`}
+						/>
+					</div>
+					<div className="text-12 font-mono text-gray-400">spacing-{size}</div>
+				</div>
+			))}
+		</div>
+	</div>
+);
+
+// =============================================================================
+// Typography Tokens
+// =============================================================================
+
+type TypographyToken = {
+	name: string;
+	class: string;
+	sizes: string;
+};
+
+const headingTokens: TypographyToken[] = [
+	{
+		name: "Display",
+		class: "typography-h1-display",
+		sizes: "64px → 96px → 128px",
+	},
+	{ name: "H1", class: "typography-h1", sizes: "48px → 72px → 96px" },
+	{ name: "H2", class: "typography-h2", sizes: "48px → 64px → 72px" },
+	{ name: "H3", class: "typography-h3", sizes: "32px → 48px → 64px" },
+	{ name: "H4", class: "typography-h4", sizes: "24px → 32px → 48px" },
+	{ name: "H5", class: "typography-h5", sizes: "21px → 24px → 32px" },
+];
+
+const bodyTokens: TypographyToken[] = [
+	{
+		name: "Body Large",
+		class: "typography-body-large",
+		sizes: "16px → 18px → 21px",
+	},
+	{
+		name: "Body Medium",
+		class: "typography-body-medium",
+		sizes: "14px → 16px → 18px",
+	},
+	{
+		name: "Body Small",
+		class: "typography-body-small",
+		sizes: "12px → 14px → 14px",
+	},
+];
+
+const uiTokens: TypographyToken[] = [
+	{ name: "Overline", class: "typography-overline", sizes: "14px" },
+	{ name: "Caption", class: "typography-caption", sizes: "11px" },
+	{ name: "Button Large", class: "typography-ui-button-large", sizes: "18px" },
+	{
+		name: "Button Medium",
+		class: "typography-ui-button-medium",
+		sizes: "16px",
+	},
+	{ name: "Button Small", class: "typography-ui-button-small", sizes: "14px" },
+	{ name: "Label", class: "typography-ui-label", sizes: "14px" },
+];
+
+const TypographyRow: React.FC<{ token: TypographyToken; sample?: string }> = ({
+	token,
+	sample,
+}) => {
+	const isHeading = token.class.includes("h1") || token.class.includes("h2");
+	const text = sample || (isHeading ? "Aa" : "The quick brown fox");
+
+	return (
+		<div className="py-12 border-b border-gray-100 last:border-0">
+			<div className="flex items-baseline justify-between gap-16 mb-4">
+				<code className="text-12 font-mono text-indigo-600 bg-indigo-50 px-8 py-2 rounded-4">
+					{token.class}
+				</code>
+				<span className="text-12 text-gray-400">{token.sizes}</span>
+			</div>
+			<p className={token.class}>{text}</p>
+		</div>
+	);
+};
+
+export const TypographyTokens: React.FC = () => (
+	<div className="space-y-32">
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				Headings (Responsive)
+			</h3>
+			<div className="bg-white rounded-8 border border-gray-200 p-24">
+				{headingTokens.map((token) => (
+					<TypographyRow key={token.class} token={token} />
+				))}
+			</div>
+		</section>
+
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				Body (Responsive)
+			</h3>
+			<div className="bg-white rounded-8 border border-gray-200 p-24">
+				{bodyTokens.map((token) => (
+					<TypographyRow key={token.class} token={token} />
+				))}
+			</div>
+		</section>
+
+		<section>
+			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
+				UI Elements
+			</h3>
+			<div className="bg-white rounded-8 border border-gray-200 p-24">
+				{uiTokens.map((token) => (
+					<TypographyRow key={token.class} token={token} />
+				))}
+			</div>
+		</section>
+	</div>
+);
+
+// =============================================================================
+// Responsive Typography Demo
+// =============================================================================
+
+export const ResponsiveTypography: React.FC = () => (
+	<div className="space-y-32">
+		<div className="bg-indigo-50 border border-indigo-100 rounded-8 p-16">
+			<p className="text-14 text-indigo-700">
+				<strong>Responsive Typography</strong> — Resize viewport to see
+				typography scale. Mobile (&lt;768px) → Tablet → Desktop (&gt;1440px)
+			</p>
+		</div>
+
+		<section className="space-y-16">
+			<div className="border-l-4 border-indigo-500 pl-16">
+				<code className="text-12 font-mono text-gray-500">
+					typography-h1-display
+				</code>
+				<h1 className="typography-h1-display">Display</h1>
+			</div>
+			<div className="border-l-4 border-indigo-400 pl-16">
+				<code className="text-12 font-mono text-gray-500">typography-h1</code>
+				<h1 className="typography-h1">Heading 1</h1>
+			</div>
+			<div className="border-l-4 border-indigo-300 pl-16">
+				<code className="text-12 font-mono text-gray-500">typography-h2</code>
+				<h2 className="typography-h2">Heading 2</h2>
+			</div>
+			<div className="border-l-4 border-indigo-200 pl-16">
+				<code className="text-12 font-mono text-gray-500">typography-h3</code>
+				<h3 className="typography-h3">Heading 3</h3>
+			</div>
+		</section>
+
+		<section className="bg-gray-50 rounded-8 p-16 space-y-12">
+			<div>
+				<code className="text-12 font-mono text-gray-500">
+					typography-body-large
+				</code>
+				<p className="typography-body-large">
+					Large body text scales from 16px to 21px.
+				</p>
+			</div>
+			<div>
+				<code className="text-12 font-mono text-gray-500">
+					typography-body-medium
+				</code>
+				<p className="typography-body-medium">
+					Medium body text scales from 14px to 18px.
+				</p>
+			</div>
+			<div>
+				<code className="text-12 font-mono text-gray-500">
+					typography-body-small
+				</code>
+				<p className="typography-body-small">
+					Small body text scales from 12px to 14px.
+				</p>
+			</div>
+		</section>
+	</div>
+);
+
+// =============================================================================
+// Main Export
+// =============================================================================
+
+export const TokenShowcase: React.FC = () => (
+	<div className="p-32 bg-gray-50 min-h-screen">
+		<div className="max-w-6xl mx-auto">
+			<header className="mb-32">
+				<h1 className="text-24 font-bold text-gray-900">Design Tokens</h1>
+				<p className="text-gray-600">
+					Primitive color palette from the design system
+				</p>
+			</header>
+			<ColorTokens />
+		</div>
+	</div>
+);