@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/components/organisms/card/card.visual.test.tsx

@@ -24,7 +24,7 @@ describe("Card Visual Regression", () => {
 					<CardContent>
 						<CardBody>
 							<CardEyebrow>Optional Eyebrow</CardEyebrow>
-							<div className="flex flex-col gap-[6px]">
+							<div className="flex flex-col gap-6">
 								<CardTitle>Card Title</CardTitle>
 								<CardDescription>
 									Use cards when citizens need to scan items at a glance.
@@ -32,10 +32,10 @@ describe("Card Visual Regression", () => {
 							</div>
 						</CardBody>
 						<CardActions>
-							<Button size="default" variant="charcoal">
+							<Button size="md" variant="primary">
 								Primary
 							</Button>
-							<Button size="default" variant="charcoalOutline">
+							<Button size="md" variant="primary-outline">
 								Secondary
 							</Button>
 						</CardActions>
@@ -59,7 +59,7 @@ describe("Card Visual Regression", () => {
 					<CardContent>
 						<CardBody>
 							<CardEyebrow>Eyebrow</CardEyebrow>
-							<div className="flex flex-col gap-[9px]">
+							<div className="flex flex-col gap-8">
 								<CardTitle>
 									Cards can support multi line headings easily.
 								</CardTitle>
@@ -69,10 +69,10 @@ describe("Card Visual Regression", () => {
 							</div>
 						</CardBody>
 						<CardActions>
-							<Button size="sm" variant="charcoal">
+							<Button size="sm" variant="primary">
 								Primary
 							</Button>
-							<Button size="sm" variant="charcoalOutline">
+							<Button size="sm" variant="primary-outline">
 								Secondary
 							</Button>
 						</CardActions>
@@ -93,7 +93,7 @@ describe("Card Visual Regression", () => {
 					<CardContent>
 						<CardBody>
 							<CardEyebrow>Category</CardEyebrow>
-							<div className="flex flex-col gap-[6px]">
+							<div className="flex flex-col gap-6">
 								<CardTitle>Card Without Image</CardTitle>
 								<CardDescription>
 									Cards can be used without images for text-focused content.
@@ -101,7 +101,7 @@ describe("Card Visual Regression", () => {
 							</div>
 						</CardBody>
 						<CardActions>
-							<Button size="default" variant="charcoal">
+							<Button size="md" variant="primary">
 								Learn More
 							</Button>
 						</CardActions>
@@ -124,7 +124,7 @@ describe("Card Visual Regression", () => {
 					<CardImage />
 					<CardContent>
 						<CardBody>
-							<div className="flex flex-col gap-[6px]">
+							<div className="flex flex-col gap-6">
 								<CardTitle>Card Title</CardTitle>
 								<CardDescription>
 									The eyebrow is optional and can be omitted when not needed.
@@ -132,7 +132,7 @@ describe("Card Visual Regression", () => {
 							</div>
 						</CardBody>
 						<CardActions>
-							<Button size="default" variant="charcoal">
+							<Button size="md" variant="primary">
 								Primary
 							</Button>
 						</CardActions>
@@ -156,7 +156,7 @@ describe("Card Visual Regression", () => {
 					<CardContent>
 						<CardBody>
 							<CardEyebrow>Information</CardEyebrow>
-							<div className="flex flex-col gap-[6px]">
+							<div className="flex flex-col gap-6">
 								<CardTitle>Informational Card</CardTitle>
 								<CardDescription>
 									Cards without actions can be used for purely informational

package/src/components/organisms/navbar/navbar.tsx

@@ -138,7 +138,7 @@ const NavbarLink = React.forwardRef<HTMLAnchorElement, NavbarLinkProps>(
 			<Comp
 				ref={ref}
 				className={cn(
-					"typography-brand-medium-link-small text-gray-900 transition-colors hover:text-gray-700",
+					"typography-body-small font-medium text-gray-900 transition-colors hover:text-gray-700",
 					active && "text-gray-1100",
 					className,
 				)}
@@ -301,7 +301,7 @@ const NavbarMobileMenuLink = React.forwardRef<
 		<Comp
 			ref={ref}
 			className={cn(
-				"typography-brand-medium-link-medium text-gray-900 transition-colors hover:text-gray-700",
+				"typography-body-medium font-medium text-gray-900 transition-colors hover:text-gray-700",
 				"py-spacing-component-navbar-padding-y-mobile",
 				active && "text-gray-1100",
 				className,

package/src/components/organisms/navbar/navbar.visual.test.tsx

@@ -26,7 +26,7 @@ describe("Navbar Visual Regression", () => {
 					<NavbarLink href="#">Contact</NavbarLink>
 				</NavbarLinks>
 				<NavbarActions>
-					<Button size="sm" variant="charcoal">
+					<Button size="sm" variant="primary">
 						Sign In
 					</Button>
 				</NavbarActions>
@@ -55,7 +55,7 @@ describe("Navbar Visual Regression", () => {
 					<NavbarLink href="#">Contact</NavbarLink>
 				</NavbarLinks>
 				<NavbarActions>
-					<Button size="sm" variant="charcoal">
+					<Button size="sm" variant="primary">
 						Sign In
 					</Button>
 				</NavbarActions>

package/src/components/organisms/us-gov-banner/us-gov-banner.tsx

@@ -3,8 +3,8 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 const usGovBannerVariants = tv({
 	slots: {
-		root: "flex w-full items-center justify-center py-spacing-12",
-		content: "flex items-center gap-spacing-8",
+		root: "flex w-full items-center justify-center py-12",
+		content: "flex items-center gap-8",
 		text: "text-[11px] leading-[13px] tracking-[0.17px]",
 	},
 	variants: {

package/src/components/sections/banner/banner.stories.tsx

@@ -143,11 +143,7 @@ export const CustomBackground: Story = {
 		<Banner
 			heading="Custom Styled Banner"
 			description="This banner has a custom background color applied via className."
-			action={
-				<Button variant="outline" colorScheme="light">
-					Action
-				</Button>
-			}
+			action={<Button variant="secondary-outline">Action</Button>}
 			className="bg-gray-1000 text-gray-50 [&_h2]:text-gray-50 [&_p]:text-gray-200"
 		/>
 	),

package/src/components/sections/banner/banner.test.tsx

@@ -156,8 +156,8 @@ describe("Banner", () => {
 
 			const banner = page.getByTestId("banner");
 			// Mobile padding
-			await expect.element(banner).toHaveClass(/px-spacing-20/);
-			await expect.element(banner).toHaveClass(/py-spacing-32/);
+			await expect.element(banner).toHaveClass(/px-20/);
+			await expect.element(banner).toHaveClass(/py-32/);
 		});
 	});
 

package/src/components/sections/banner/banner.tsx

@@ -21,9 +21,9 @@ const bannerVariants = tv({
 		"col-full",
 		// Responsive padding: mobile -> tablet -> desktop
 		// Uses primitive spacing tokens
-		"px-spacing-20 py-spacing-32",
-		"md:p-spacing-56",
-		"lg:px-spacing-72 lg:pb-spacing-72 lg:pt-0",
+		"px-20 py-32",
+		"md:p-56",
+		"lg:px-72 lg:pb-72 lg:pt-0",
 	],
 	variants: {
 		colorScheme: {
@@ -95,12 +95,12 @@ const Banner = React.forwardRef<HTMLElement, BannerProps>(
 				<div
 					className={cn(
 						// Uses primitive spacing tokens
-						"flex flex-col md:flex-row gap-spacing-20 items-start md:items-center md:justify-between",
-						colorScheme === "dark" && "border-t border-gray-700 py-spacing-36",
+						"flex flex-col md:flex-row gap-20 items-start md:items-center md:justify-between",
+						colorScheme === "dark" && "border-t border-gray-700 py-36",
 					)}
 				>
 					{/* Copy section */}
-					<div className="flex flex-col gap-spacing-6 items-start">
+					<div className="flex flex-col gap-6 items-start">
 						<h2
 							className={cn(
 								"typography-subheading-small",

package/src/components/sections/card-grid/card-grid.tsx

@@ -16,9 +16,9 @@ const cardGridVariants = tv({
 	base: [
 		"grid-container",
 		// Small (mobile): 72px y padding
-		"py-spacing-72",
+		"py-72",
 		// Large (desktop): 128px y padding
-		"lg:py-spacing-128",
+		"lg:py-128",
 	],
 	variants: {
 		variant: {
@@ -83,9 +83,9 @@ const CardGrid = React.forwardRef<HTMLElement, CardGridProps>(
 				<h2
 					className={cn(
 						"col-full",
-						"typography-headline-small text-gray-900",
+						"typography-h4 text-gray-900",
 						// Gap after title: mobile default, md: 56px, lg: 64px
-						"mb-spacing-36 md:mb-spacing-56 lg:mb-spacing-64",
+						"mb-36 md:mb-56 lg:mb-64",
 					)}
 				>
 					{title}
@@ -96,7 +96,7 @@ const CardGrid = React.forwardRef<HTMLElement, CardGridProps>(
 					className={cn(
 						"col-full",
 						// Mobile: single column
-						"grid grid-cols-1 gap-spacing-20",
+						"grid grid-cols-1 gap-20",
 						// Tablet: 2 columns
 						"md:grid-cols-2",
 						// Desktop: 3 columns for variant A, 2 columns for variant B

package/src/components/sections/faq-section/faq-section.tsx

@@ -66,9 +66,9 @@ const FaqSection = React.forwardRef<HTMLElement, FaqSectionProps>(
 				title={title}
 				className={cn(
 					// Override title typography to be larger
-					"[&_h2]:typography-subheading-large",
+					"[&_h2]:typography-h4",
 					// Accordion typography overrides
-					"[&_button]:typography-body-large [&_button]:md:typography-subheading-small",
+					"[&_button]:typography-body-large [&_button]:md:typography-h5",
 					"[&_[data-accordion-panel]]:typography-body-medium [&_[data-accordion-panel]]:md:typography-body-large",
 					className,
 				)}

package/src/components/sections/hero/hero.stories.tsx

@@ -159,7 +159,7 @@ export const WithCloudflareStream: Story = {
  * Mock banner component for story demonstration
  */
 const MockBanner = () => (
-	<div className="bg-gray-1200 px-spacing-16 py-spacing-8 text-center text-14 text-text-inverted">
+	<div className="bg-gray-1200 px-16 py-8 text-center text-14 text-text-inverted">
 		An official website of the United States government
 	</div>
 );
@@ -168,10 +168,10 @@ const MockBanner = () => (
  * Mock navigation component for story demonstration
  */
 const MockNavigation = () => (
-	<nav className="flex items-center justify-between px-spacing-56 py-spacing-16">
-		<div className="flex items-center gap-spacing-24">
+	<nav className="flex items-center justify-between px-56 py-16">
+		<div className="flex items-center gap-24">
 			<div className="size-48 rounded-full bg-gray-50" />
-			<div className="flex gap-spacing-24 text-14 text-text-inverted">
+			<div className="flex gap-24 text-14 text-text-inverted">
 				<span className="cursor-pointer hover:opacity-80">Link 1</span>
 				<span className="cursor-pointer hover:opacity-80">Link 2</span>
 			</div>
@@ -199,7 +199,7 @@ export const WithTopSlot: Story = {
  */
 export const WithRoundedCorners: Story = {
 	render: () => (
-		<div className="bg-bg-page p-spacing-32">
+		<div className="bg-bg-page p-32">
 			<Hero
 				variant="A1"
 				title="Rounded Corners"
@@ -234,7 +234,7 @@ export const WithTopAndRoundedCorners: Story = {
 					</>
 				}
 			>
-				<p className="mt-spacing-16 max-w-[560px] text-20 text-text-inverted">
+				<p className="mt-16 max-w-[560px] text-20 text-text-inverted">
 					A subtitle or description can be added as children
 				</p>
 			</Hero>
@@ -261,7 +261,7 @@ export const UsingSubComponents: Story = {
 				<h1 className="text-64 font-medium text-text-inverted lg:text-128">
 					Custom Layout
 				</h1>
-				<p className="mt-spacing-16 text-20 text-text-inverted">
+				<p className="mt-16 text-20 text-text-inverted">
 					Using HeroHeader and HeroContent sub-components
 				</p>
 			</HeroContent>

package/src/components/sections/hero/hero.test.tsx

@@ -67,8 +67,8 @@ describe("Hero", () => {
 			render(<Hero title="Default" data-testid="hero" />);
 
 			const hero = page.getByTestId("hero");
-			// Uses semantic token bg-bg-overlay for default background
-			await expect.element(hero).toHaveClass(/bg-bg-overlay/);
+			// Uses semantic token bg-bg-page for default dark colorScheme
+			await expect.element(hero).toHaveClass(/bg-bg-page/);
 		});
 
 		test("applies minimum height for viewport coverage", async () => {
@@ -115,7 +115,7 @@ describe("Hero", () => {
 			render(<Hero title="A1 Hero" variant="A1" data-testid="hero" />);
 
 			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/bg-bg-overlay/);
+			await expect.element(hero).toHaveClass(/bg-bg-page/);
 			await expect.element(hero).toHaveClass(/min-h-\[80vh\]/);
 		});
 
@@ -123,7 +123,7 @@ describe("Hero", () => {
 			render(<Hero title="A2 Hero" variant="A2" data-testid="hero" />);
 
 			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/bg-bg-overlay/);
+			await expect.element(hero).toHaveClass(/bg-bg-page/);
 			await expect.element(hero).toHaveClass(/min-h-\[80vh\]/);
 		});
 
@@ -131,7 +131,7 @@ describe("Hero", () => {
 			render(<Hero title="A3 Hero" variant="A3" data-testid="hero" />);
 
 			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/bg-bg-overlay/);
+			await expect.element(hero).toHaveClass(/bg-bg-page/);
 			await expect.element(hero).toHaveClass(/min-h-\[80vh\]/);
 		});
 	});

package/src/components/sections/hero/hero.tsx

@@ -18,8 +18,7 @@ export {
 	type BackgroundVideoProps as HeroBackgroundVideoProps,
 } from "@/components/atoms/background";
 
-const DEFAULT_TITLE_TYPOGRAPHY =
-	"text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192 font-medium";
+const DEFAULT_TITLE_TYPOGRAPHY = "typography-h1-display";
 
 const heroVariants = tv({
 	slots: {
@@ -27,8 +26,8 @@ const heroVariants = tv({
 		top: "relative z-10 w-full",
 		content: [
 			"relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col",
-			"p-spacing-20",
-			"md:p-spacing-56",
+			"p-20",
+			"md:p-56",
 		],
 		title: DEFAULT_TITLE_TYPOGRAPHY,
 	},
@@ -36,15 +35,15 @@ const heroVariants = tv({
 		variant: {
 			A1: {
 				root: "min-h-[80vh]",
-				content: ["justify-end", "lg:p-spacing-72"],
+				content: ["justify-end", "lg:p-72"],
 			},
 			A2: {
 				root: "min-h-[80vh]",
-				content: ["justify-start", "lg:p-spacing-64"],
+				content: ["justify-start", "lg:p-64"],
 			},
 			A3: {
 				root: "min-h-[80vh]",
-				content: ["items-center justify-center", "lg:p-spacing-64"],
+				content: ["items-center justify-center", "lg:p-64"],
 			},
 		},
 		colorScheme: {
@@ -80,9 +79,9 @@ const heroHeaderVariants = tv({
 const heroContentVariants = tv({
 	base: [
 		"relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col",
-		"p-spacing-20",
-		"md:p-spacing-56",
-		"lg:p-spacing-72",
+		"p-20",
+		"md:p-56",
+		"lg:p-72",
 	],
 });
 
@@ -136,7 +135,7 @@ export interface HeroProps
 	title?: string;
 	/**
 	 * Custom typography class for the title using primitive tokens.
-	 * Default: "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192"
+	 * Default: "typography-h1-display"
 	 */
 	titleClassName?: string;
 	/**

package/src/components/sections/prose/prose.test.tsx

@@ -131,7 +131,7 @@ describe("Prose", () => {
 			);
 
 			const heading = page.getByRole("heading", { name: "H2 Test" });
-			await expect.element(heading).toHaveClass(/typography-headline-medium/);
+			await expect.element(heading).toHaveClass(/typography-h3/);
 		});
 
 		test("h3 heading has correct typography class", async () => {
@@ -144,7 +144,7 @@ describe("Prose", () => {
 			);
 
 			const heading = page.getByRole("heading", { name: "H3 Test" });
-			await expect.element(heading).toHaveClass(/typography-headline-small/);
+			await expect.element(heading).toHaveClass(/typography-h4/);
 		});
 	});
 

package/src/components/sections/prose/prose.tsx

@@ -23,7 +23,7 @@ const Prose = React.forwardRef<HTMLDivElement, ProseProps>(
 				className={cn(
 					"flex w-full max-w-[700px] flex-col overflow-hidden",
 					// Responsive gap between sections
-					"gap-spacing-56 md:gap-spacing-72 xl:gap-spacing-96",
+					"gap-56 md:gap-72 xl:gap-96",
 					className,
 				)}
 				{...props}
@@ -52,15 +52,14 @@ export interface ProseSectionProps extends React.HTMLAttributes<HTMLElement> {
  * A section within Prose content, containing a heading and body text.
  *
  * Responsive typography:
- * - h2: Uses typography-headline-medium (42px mobile → 56px tablet → 72px desktop)
- * - h3: Uses typography-headline-small (32px mobile → 42px tablet → 56px desktop)
- * - Body: Uses typography-body-medium (16px mobile/tablet → 18px desktop)
+ * - h2: Uses typography-h3
+ * - h3: Uses typography-h4
+ * - Body: Uses typography-body-medium
  */
 const ProseSection = React.forwardRef<HTMLElement, ProseSectionProps>(
 	({ className, heading, as = "h2", children, ...props }, ref) => {
 		const Heading = as;
-		const headingClass =
-			as === "h2" ? "typography-headline-medium" : "typography-headline-small";
+		const headingClass = as === "h2" ? "typography-h3" : "typography-h4";
 
 		return (
 			<section
@@ -68,7 +67,7 @@ const ProseSection = React.forwardRef<HTMLElement, ProseSectionProps>(
 				className={cn(
 					"flex w-full flex-col",
 					// Responsive gap between heading and body
-					"gap-spacing-24 md:gap-spacing-40",
+					"gap-24 md:gap-40",
 					className,
 				)}
 				{...props}

package/src/components/sections/river/river.stories.tsx

@@ -51,7 +51,7 @@ Playground.args = {
 	headline: "Feature Headline",
 	body: "Use rivers to present content with supporting media. They work great for feature highlights, product showcases, and storytelling sections.",
 	primaryAction: <Button>Primary Action</Button>,
-	secondaryAction: <Button variant="charcoalOutline">Secondary</Button>,
+	secondaryAction: <Button variant="outline">Secondary</Button>,
 	media: <PlaceholderImage />,
 };
 
@@ -69,7 +69,7 @@ export const VariantA: Story = {
 			headline="Text Left, Media Right"
 			body="Variant A places the text content on the left (9 columns) and media on the right (15 columns) on desktop viewports. On mobile and tablet, they stack vertically."
 			primaryAction={<Button>Primary Action</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+			secondaryAction={<Button variant="outline">Secondary</Button>}
 			media={<PlaceholderImage />}
 		/>
 	),
@@ -85,7 +85,7 @@ export const VariantB: Story = {
 			headline="Media Left, Text Right"
 			body="Variant B places the media on the left (15 columns) and text content on the right (9 columns) on desktop viewports. On mobile and tablet, they stack vertically with text first."
 			primaryAction={<Button>Primary Action</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+			secondaryAction={<Button variant="outline">Secondary</Button>}
 			media={<PlaceholderImage />}
 		/>
 	),
@@ -102,7 +102,7 @@ export const VariantADesktop: Story = {
 			headline="Desktop View"
 			body="On desktop (lg, 1440px), the content spans 9 columns and the media spans 15 columns in a horizontal layout."
 			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+			secondaryAction={<Button variant="outline">Secondary</Button>}
 			media={<PlaceholderImage />}
 		/>
 	),
@@ -118,7 +118,7 @@ export const VariantATablet: Story = {
 			headline="Tablet View"
 			body="On tablet (md, 768px), the content and media stack vertically with the text above the media."
 			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+			secondaryAction={<Button variant="outline">Secondary</Button>}
 			media={<PlaceholderImage />}
 		/>
 	),
@@ -135,7 +135,7 @@ export const VariantAMobile: Story = {
 			body="On mobile (sm, 320px), content is stacked with smaller button sizing."
 			primaryAction={<Button size="sm">Primary</Button>}
 			secondaryAction={
-				<Button size="sm" variant="charcoalOutline">
+				<Button size="sm" variant="outline">
 					Secondary
 				</Button>
 			}
@@ -154,7 +154,7 @@ export const VariantBDesktop: Story = {
 			headline="Desktop View - Reversed"
 			body="Variant B reverses the layout, placing media on the left and content on the right."
 			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+			secondaryAction={<Button variant="outline">Secondary</Button>}
 			media={<PlaceholderImage />}
 		/>
 	),
@@ -224,7 +224,7 @@ export const WithImage: Story = {
 			headline="Real World Example"
 			body="Rivers work great with actual images, videos, or any media content. The media column is designed to accommodate various aspect ratios."
 			primaryAction={<Button>Get Started</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Learn More</Button>}
+			secondaryAction={<Button variant="outline">Learn More</Button>}
 			media={
 				<img
 					src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop"

package/src/components/sections/river/river.test.tsx

@@ -177,9 +177,9 @@ describe("River", () => {
 
 			const river = page.getByTestId("river");
 			// Mobile padding
-			await expect.element(river).toHaveClass(/px-spacing-20/);
-			await expect.element(river).toHaveClass(/pt-spacing-72/);
-			await expect.element(river).toHaveClass(/pb-spacing-20/);
+			await expect.element(river).toHaveClass(/px-20/);
+			await expect.element(river).toHaveClass(/pt-72/);
+			await expect.element(river).toHaveClass(/pb-20/);
 		});
 	});
 
@@ -246,7 +246,7 @@ describe("River", () => {
 			);
 
 			const headline = page.getByRole("heading", { level: 2 });
-			await expect.element(headline).toHaveClass(/typography-headline-small/);
+			await expect.element(headline).toHaveClass(/typography-h4/);
 			await expect.element(headline).toHaveClass(/text-gray-900/);
 		});
 

package/src/components/sections/river/river.tsx

@@ -16,11 +16,11 @@ const riverVariants = tv({
 	base: [
 		"col-full",
 		// Small (mobile): 20px x, 72px top, 20px bottom
-		"px-spacing-20 pt-spacing-72 pb-spacing-20",
+		"px-20 pt-72 pb-20",
 		// Medium (tablet): 56px x, 96px y
-		"md:px-spacing-56 md:py-spacing-96",
+		"md:px-56 md:py-96",
 		// Large (desktop): 72px x, 128px y
-		"lg:px-spacing-72 lg:py-spacing-128",
+		"lg:px-72 lg:py-128",
 	],
 	variants: {
 		variant: {
@@ -77,7 +77,7 @@ export interface RiverProps
  *     headline="Feature Headline"
  *     body="Description of the feature..."
  *     primaryAction={<Button>Primary</Button>}
- *     secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+ *     secondaryAction={<Button variant="outline">Secondary</Button>}
  *     media={<img src="..." alt="Feature" />}
  *   />
  * </div>
@@ -106,19 +106,14 @@ const River = React.forwardRef<HTMLElement, RiverProps>(
 				)}
 			>
 				{/* Text content with 16px gap - uses primitive spacing tokens */}
-				<div className="flex flex-col gap-spacing-16">
-					<h2 className="typography-headline-small text-gray-900">
-						{headline}
-					</h2>
+				<div className="flex flex-col gap-16">
+					<h2 className="typography-h4 text-gray-900">{headline}</h2>
 					<p className="typography-body-small text-gray-800">{body}</p>
 				</div>
 
 				{/* Buttons with 36px gap from text, responsive sizes - uses primitive spacing tokens */}
 				<div
-					className={cn(
-						"flex flex-row gap-spacing-16 mt-spacing-36",
-						"[&>*]:flex-shrink-0",
-					)}
+					className={cn("flex flex-row gap-16 mt-36", "[&>*]:flex-shrink-0")}
 				>
 					{primaryAction}
 					{secondaryAction}
@@ -147,10 +142,7 @@ const River = React.forwardRef<HTMLElement, RiverProps>(
 			>
 				{/* Inner grid container for 24-col layout - uses primitive spacing tokens */}
 				<div
-					className={cn(
-						"grid grid-cols-1 gap-spacing-36",
-						"lg:grid-cols-24 lg:gap-spacing-36",
-					)}
+					className={cn("grid grid-cols-1 gap-36", "lg:grid-cols-24 lg:gap-36")}
 				>
 					{variant === "B" ? (
 						<>