diff --git a/apps/website/app/admin/users/AdminUsersWrapper.tsx b/apps/website/app/admin/users/AdminUsersWrapper.tsx
index 0bd7d7152..b2f5e3aa0 100644
--- a/apps/website/app/admin/users/AdminUsersWrapper.tsx
+++ b/apps/website/app/admin/users/AdminUsersWrapper.tsx
@@ -6,7 +6,7 @@ import { AdminUsersTemplate } from '@/templates/AdminUsersTemplate';
 import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
 import { updateUserStatus, deleteUser } from '@/app/actions/adminActions';
 import { routes } from '@/lib/routing/RouteConfig';
-import { ConfirmDialog } from '@/components/shared/ux/ConfirmDialog';
+import { ConfirmDialog } from '@/ui/ConfirmDialog';
 
 interface AdminUsersWrapperProps {
   initialViewData: AdminUsersViewData;
diff --git a/apps/website/app/drivers/DriversPageClient.tsx b/apps/website/app/drivers/DriversPageClient.tsx
index 868880835..fa73c19c2 100644
--- a/apps/website/app/drivers/DriversPageClient.tsx
+++ b/apps/website/app/drivers/DriversPageClient.tsx
@@ -3,7 +3,7 @@
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
 import { DriversTemplate } from '@/templates/DriversTemplate';
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { useRouter } from 'next/navigation';
 import { useMemo, useState } from 'react';
diff --git a/apps/website/app/drivers/[id]/DriverProfilePageClient.tsx b/apps/website/app/drivers/[id]/DriverProfilePageClient.tsx
index 4e51e0439..bb44d53ae 100644
--- a/apps/website/app/drivers/[id]/DriverProfilePageClient.tsx
+++ b/apps/website/app/drivers/[id]/DriverProfilePageClient.tsx
@@ -4,7 +4,7 @@ import type { ProfileTab } from '@/components/profile/ProfileTabs';
 import type { DriverProfileViewData } from '@/lib/types/view-data/DriverProfileViewData';
 import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
diff --git a/apps/website/app/leagues/LeaguesPageClient.tsx b/apps/website/app/leagues/LeaguesPageClient.tsx
index 6e129379c..ea559ae2f 100644
--- a/apps/website/app/leagues/LeaguesPageClient.tsx
+++ b/apps/website/app/leagues/LeaguesPageClient.tsx
@@ -4,26 +4,26 @@ import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
 import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
-    Award,
-    Clock,
-    Flag,
-    Flame,
-    Globe,
-    Plus,
-    Search,
-    Sparkles,
-    Target,
-    Timer,
-    Trophy,
-    Users,
-    type LucideIcon,
+  Award,
+  Clock,
+  Flag,
+  Flame,
+  Globe,
+  Plus,
+  Search,
+  Sparkles,
+  Target,
+  Timer,
+  Trophy,
+  Users,
+  type LucideIcon,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
diff --git a/apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx b/apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx
index 944714277..5cc1f82a4 100644
--- a/apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx
+++ b/apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx
@@ -1,26 +1,26 @@
 'use client';
 
 import {
-    createRaceAction,
-    deleteRaceAction,
-    publishScheduleAction,
-    unpublishScheduleAction,
-    updateRaceAction
+  createRaceAction,
+  deleteRaceAction,
+  publishScheduleAction,
+  unpublishScheduleAction,
+  updateRaceAction
 } from '@/app/actions/leagueScheduleActions';
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
-import { ConfirmDialog } from '@/components/shared/ux/ConfirmDialog';
+import { PageWrapper } from '@/ui/PageWrapper';
+import { ConfirmDialog } from '@/ui/ConfirmDialog';
 import {
-    useLeagueAdminSchedule,
-    useLeagueAdminStatus,
-    useLeagueSeasons
+  useLeagueAdminSchedule,
+  useLeagueAdminStatus,
+  useLeagueSeasons
 } from "@/hooks/league/useLeagueScheduleAdminPageData";
 import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
 import { RaceScheduleCommandModel } from '@/lib/command-models/leagues/RaceScheduleCommandModel';
 import { LeagueAdminScheduleTemplate } from '@/templates/LeagueAdminScheduleTemplate';
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
diff --git a/apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx b/apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx
index 8448caa09..a914db385 100644
--- a/apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx
+++ b/apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx
@@ -11,10 +11,10 @@ import type { StewardingViewData } from '@/lib/view-data/leagues/StewardingViewD
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { ProtestViewModel } from '@/lib/view-models/ProtestViewModel';
 import { RaceViewModel } from '@/lib/view-models/RaceViewModel';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { useMemo, useState } from 'react';
 
diff --git a/apps/website/app/leagues/[id]/stewarding/protests/[protestId]/ProtestDetailPageClient.tsx b/apps/website/app/leagues/[id]/stewarding/protests/[protestId]/ProtestDetailPageClient.tsx
index 043f23b39..9023311d2 100644
--- a/apps/website/app/leagues/[id]/stewarding/protests/[protestId]/ProtestDetailPageClient.tsx
+++ b/apps/website/app/leagues/[id]/stewarding/protests/[protestId]/ProtestDetailPageClient.tsx
@@ -7,44 +7,44 @@ import { PROTEST_SERVICE_TOKEN } from '@/lib/di/tokens';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import {
-    AlertCircle,
-    AlertTriangle,
-    ArrowLeft,
-    Calendar,
-    CheckCircle,
-    ChevronDown,
-    Clock,
-    ExternalLink,
-    Flag,
-    Gavel,
-    Grid3x3,
-    MapPin,
-    MessageCircle,
-    Send,
-    Shield,
-    ShieldAlert,
-    TrendingDown,
-    User,
-    Video,
-    XCircle,
-    type LucideIcon
+  AlertCircle,
+  AlertTriangle,
+  ArrowLeft,
+  Calendar,
+  CheckCircle,
+  ChevronDown,
+  Clock,
+  ExternalLink,
+  Flag,
+  Gavel,
+  Grid3x3,
+  MapPin,
+  MessageCircle,
+  Send,
+  Shield,
+  ShieldAlert,
+  TrendingDown,
+  User,
+  Video,
+  XCircle,
+  type LucideIcon
 } from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
 
 // Shared state components
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
-import { StateContainer } from '@/components/shared/state/StateContainer';
+import { LoadingWrapper } from '@/ui/LoadingWrapper';
+import { StateContainer } from '@/ui/StateContainer';
 import { useLeagueAdminStatus } from "@/hooks/league/useLeagueAdminStatus";
 import { useProtestDetail } from "@/hooks/league/useProtestDetail";
 import { routes } from '@/lib/routing/RouteConfig';
-import { GridItem } from '@/ui/primitives/GridItem';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon as UIIcon } from '@/ui/Icon';
 import { Link as UILink } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 type PenaltyUiConfig = {
diff --git a/apps/website/app/leagues/[id]/wallet/LeagueWalletPageClient.tsx b/apps/website/app/leagues/[id]/wallet/LeagueWalletPageClient.tsx
index b440b6083..4a70ebb2c 100644
--- a/apps/website/app/leagues/[id]/wallet/LeagueWalletPageClient.tsx
+++ b/apps/website/app/leagues/[id]/wallet/LeagueWalletPageClient.tsx
@@ -2,15 +2,15 @@
 
 import { WalletSummaryPanel } from '@/components/leagues/WalletSummaryPanel';
 import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Icon as UIIcon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
-    Download
+  Download
 } from 'lucide-react';
 
 interface WalletTemplateProps {
diff --git a/apps/website/app/leagues/create/CreateLeagueWizard.tsx b/apps/website/app/leagues/create/CreateLeagueWizard.tsx
index 6d7aeb2bc..598ded00f 100644
--- a/apps/website/app/leagues/create/CreateLeagueWizard.tsx
+++ b/apps/website/app/leagues/create/CreateLeagueWizard.tsx
@@ -2,28 +2,28 @@
 
 import { useAuth } from '@/components/auth/AuthContext';
 import { LeagueReviewSummary } from '@/components/leagues/LeagueReviewSummary';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
-    AlertCircle,
-    Award,
-    Calendar,
-    Check,
-    CheckCircle2,
-    ChevronLeft,
-    ChevronRight,
-    FileText,
-    Loader2,
-    Scale,
-    Sparkles,
-    Trophy,
-    Users,
+  AlertCircle,
+  Award,
+  Calendar,
+  Check,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  Loader2,
+  Scale,
+  Sparkles,
+  Trophy,
+  Users,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { FormEvent, useCallback, useEffect, useState } from 'react';
@@ -33,8 +33,8 @@ import { LeagueWizardCommandModel } from '@/lib/command-models/leagues/LeagueWiz
 import { LeagueBasicsSection } from '@/components/leagues/LeagueBasicsSection';
 import { LeagueDropSection } from '@/components/leagues/LeagueDropSection';
 import {
-    ChampionshipsSection,
-    ScoringPatternSection
+  ChampionshipsSection,
+  ScoringPatternSection
 } from '@/components/leagues/LeagueScoringSection';
 import { LeagueStewardingSection } from '@/components/leagues/LeagueStewardingSection';
 import { LeagueStructureSection } from '@/components/leagues/LeagueStructureSection';
diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx
index dfdea5efc..b738ed0e9 100644
--- a/apps/website/app/page.tsx
+++ b/apps/website/app/page.tsx
@@ -1,4 +1,4 @@
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import { PageWrapper } from '@/ui/PageWrapper';
 import { HomeTemplate, type HomeViewData } from '@/templates/HomeTemplate';
 import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
 import { HomePageQuery } from '@/lib/page-queries/HomePageQuery';
diff --git a/apps/website/app/profile/liveries/upload/ProfileLiveryUploadPageClient.tsx b/apps/website/app/profile/liveries/upload/ProfileLiveryUploadPageClient.tsx
index 936055ed6..8baed0815 100644
--- a/apps/website/app/profile/liveries/upload/ProfileLiveryUploadPageClient.tsx
+++ b/apps/website/app/profile/liveries/upload/ProfileLiveryUploadPageClient.tsx
@@ -2,6 +2,7 @@
 
 import { UploadDropzone } from '@/components/media/UploadDropzone';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
@@ -9,7 +10,6 @@ import { Heading } from '@/ui/Heading';
 import { MediaMetaPanel, mapMediaMetadata } from '@/ui/MediaMetaPanel';
 import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/primitives/Box';
 import Link from 'next/link';
 import { useState } from 'react';
 
diff --git a/apps/website/app/profile/settings/ProfileSettingsPageClient.tsx b/apps/website/app/profile/settings/ProfileSettingsPageClient.tsx
index ae75f8e2b..df0bd662e 100644
--- a/apps/website/app/profile/settings/ProfileSettingsPageClient.tsx
+++ b/apps/website/app/profile/settings/ProfileSettingsPageClient.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { InlineNotice } from '@/components/shared/ux/InlineNotice';
-import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+import { InlineNotice } from '@/ui/InlineNotice';
+import { ProgressLine } from '@/ui/ProgressLine';
 import type { Result } from '@/lib/contracts/Result';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
 import { ProfileSettingsTemplate } from '@/templates/ProfileSettingsTemplate';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
diff --git a/apps/website/app/profile/sponsorship-requests/SponsorshipRequestsClient.tsx b/apps/website/app/profile/sponsorship-requests/SponsorshipRequestsClient.tsx
index 24d2ace6d..8de372633 100644
--- a/apps/website/app/profile/sponsorship-requests/SponsorshipRequestsClient.tsx
+++ b/apps/website/app/profile/sponsorship-requests/SponsorshipRequestsClient.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { InlineNotice } from '@/components/shared/ux/InlineNotice';
-import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+import { InlineNotice } from '@/ui/InlineNotice';
+import { ProgressLine } from '@/ui/ProgressLine';
 import type { Result } from '@/lib/contracts/Result';
 import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
 import { SponsorshipRequestsTemplate } from '@/templates/SponsorshipRequestsTemplate';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
diff --git a/apps/website/app/races/[id]/page.tsx b/apps/website/app/races/[id]/page.tsx
index 612972fd0..44ab5c6b3 100644
--- a/apps/website/app/races/[id]/page.tsx
+++ b/apps/website/app/races/[id]/page.tsx
@@ -1,5 +1,5 @@
 import { notFound } from 'next/navigation';
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import { PageWrapper } from '@/ui/PageWrapper';
 import { RaceDetailPageQuery } from '@/lib/page-queries/races/RaceDetailPageQuery';
 import { RaceDetailPageClient } from './RaceDetailPageClient';
 
diff --git a/apps/website/app/races/[id]/results/page.tsx b/apps/website/app/races/[id]/results/page.tsx
index 1119923e6..1a42ae803 100644
--- a/apps/website/app/races/[id]/results/page.tsx
+++ b/apps/website/app/races/[id]/results/page.tsx
@@ -1,5 +1,5 @@
 import { notFound } from 'next/navigation';
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import { PageWrapper } from '@/ui/PageWrapper';
 import { RaceResultsPageQuery } from '@/lib/page-queries/races/RaceResultsPageQuery';
 import { RaceResultsPageClient } from './RaceResultsPageClient';
 
diff --git a/apps/website/app/races/[id]/stewarding/page.tsx b/apps/website/app/races/[id]/stewarding/page.tsx
index f0b8ed925..0088de93d 100644
--- a/apps/website/app/races/[id]/stewarding/page.tsx
+++ b/apps/website/app/races/[id]/stewarding/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { notFound } from 'next/navigation';
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import { PageWrapper } from '@/ui/PageWrapper';
 import { RaceStewardingTemplate, type StewardingTab } from '@/templates/RaceStewardingTemplate';
 import { RaceStewardingPageQuery } from '@/lib/page-queries/races/RaceStewardingPageQuery';
 import { type RaceStewardingViewData } from '@/lib/view-data/races/RaceStewardingViewData';
diff --git a/apps/website/app/races/all/RacesAllPageClient.tsx b/apps/website/app/races/all/RacesAllPageClient.tsx
index dff052156..745c56875 100644
--- a/apps/website/app/races/all/RacesAllPageClient.tsx
+++ b/apps/website/app/races/all/RacesAllPageClient.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
+import { StatefulPageWrapper } from '@/ui/StatefulPageWrapper';
 import { RacesAllTemplate } from '@/templates/RacesAllTemplate';
 import { useAllRacesPageData } from '@/hooks/race/useAllRacesPageData';
 import { type RacesViewData, type RaceViewData } from '@/lib/view-data/RacesViewData';
diff --git a/apps/website/app/sponsor/billing/page.tsx b/apps/website/app/sponsor/billing/page.tsx
index 5ceb57ee0..cd70e8a09 100644
--- a/apps/website/app/sponsor/billing/page.tsx
+++ b/apps/website/app/sponsor/billing/page.tsx
@@ -2,10 +2,10 @@
 
 import { useSponsorBilling } from "@/hooks/sponsor/useSponsorBilling";
 import { SponsorBillingTemplate } from "@/templates/SponsorBillingTemplate";
-import { Box } from "@/ui/primitives/Box";
-import { Text } from "@/ui/Text";
+import { Box } from "@/ui/Box";
 import { Button } from "@/ui/Button";
-import { DollarSign, AlertTriangle, Calendar, TrendingUp } from "lucide-react";
+import { Text } from "@/ui/Text";
+import { AlertTriangle, Calendar, DollarSign, TrendingUp } from "lucide-react";
 
 export default function SponsorBillingPage() {
   const { data: billingData, isLoading, error, retry } = useSponsorBilling('demo-sponsor-1');
@@ -40,11 +40,6 @@ export default function SponsorBillingPage() {
     console.log('Setting default payment method:', methodId);
   };
 
-  const handleRemoveMethod = (methodId: string) => {
-    if (window.confirm('Remove this payment method?')) {
-      console.log('Removing payment method:', methodId);
-    }
-  };
 
   const handleDownloadInvoice = (invoiceId: string) => {
     console.log('Downloading invoice:', invoiceId);
diff --git a/apps/website/app/sponsor/campaigns/page.tsx b/apps/website/app/sponsor/campaigns/page.tsx
index 9b6e9b17b..72b10937b 100644
--- a/apps/website/app/sponsor/campaigns/page.tsx
+++ b/apps/website/app/sponsor/campaigns/page.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { useState } from 'react';
 import { useSponsorSponsorships } from "@/hooks/sponsor/useSponsorSponsorships";
 import { SponsorCampaignsTemplate, SponsorshipType } from "@/templates/SponsorCampaignsTemplate";
-import { Box } from "@/ui/primitives/Box";
-import { Text } from "@/ui/Text";
+import { Box } from "@/ui/Box";
 import { Button } from "@/ui/Button";
+import { Text } from "@/ui/Text";
+import { useState } from 'react';
 
 export default function SponsorCampaignsPage() {
   const [typeFilter, setTypeFilter] = useState<SponsorshipType>('all');
diff --git a/apps/website/app/sponsor/layout.tsx b/apps/website/app/sponsor/layout.tsx
index c89ba96b3..422244dd3 100644
--- a/apps/website/app/sponsor/layout.tsx
+++ b/apps/website/app/sponsor/layout.tsx
@@ -1,5 +1,5 @@
 import { createRouteGuard } from '@/lib/auth/createRouteGuard';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 
diff --git a/apps/website/app/sponsor/leagues/[id]/page.tsx b/apps/website/app/sponsor/leagues/[id]/page.tsx
index 15ab351f3..2586a3e13 100644
--- a/apps/website/app/sponsor/leagues/[id]/page.tsx
+++ b/apps/website/app/sponsor/leagues/[id]/page.tsx
@@ -1,5 +1,5 @@
 import { notFound } from 'next/navigation';
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import { PageWrapper } from '@/ui/PageWrapper';
 import { SponsorLeagueDetailPageClient } from './SponsorLeagueDetailPageClient';
 import { SponsorsApiClient } from '@/lib/api/sponsors/SponsorsApiClient';
 import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
diff --git a/apps/website/app/sponsor/leagues/page.tsx b/apps/website/app/sponsor/leagues/page.tsx
index 5134338bf..c474b13f1 100644
--- a/apps/website/app/sponsor/leagues/page.tsx
+++ b/apps/website/app/sponsor/leagues/page.tsx
@@ -1,4 +1,4 @@
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
+import { PageWrapper } from '@/ui/PageWrapper';
 import { SponsorLeaguesPageClient } from './SponsorLeaguesPageClient';
 import { SponsorsApiClient } from '@/lib/api/sponsors/SponsorsApiClient';
 import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
diff --git a/apps/website/app/sponsor/settings/page.tsx b/apps/website/app/sponsor/settings/page.tsx
index 853aa1b69..20edcf390 100644
--- a/apps/website/app/sponsor/settings/page.tsx
+++ b/apps/website/app/sponsor/settings/page.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { SponsorSettingsTemplate } from '@/templates/SponsorSettingsTemplate';
 import { logoutAction } from '@/app/actions/logoutAction';
-import { ConfirmDialog } from '@/components/shared/ux/ConfirmDialog';
+import { ConfirmDialog } from '@/ui/ConfirmDialog';
 import { useRouter } from 'next/navigation';
 import { routes } from '@/lib/routing/RouteConfig';
 import { logger } from '@/lib/infrastructure/logging/logger';
diff --git a/apps/website/app/sponsor/signup/page.tsx b/apps/website/app/sponsor/signup/page.tsx
index fda0cef9b..28237d635 100644
--- a/apps/website/app/sponsor/signup/page.tsx
+++ b/apps/website/app/sponsor/signup/page.tsx
@@ -5,31 +5,31 @@ import { SponsorHero } from '@/components/sponsors/SponsorHero';
 import { SponsorWorkflowMockup } from '@/components/sponsors/SponsorWorkflowMockup';
 import { SponsorSignupCommandModel } from '@/lib/command-models/sponsors/SponsorSignupCommandModel';
 import { siteConfig } from '@/lib/siteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion, useReducedMotion } from 'framer-motion';
 import {
-    ArrowRight,
-    BarChart3,
-    Building2,
-    Car,
-    CheckCircle2,
-    Eye,
-    Flag,
-    Globe,
-    Mail,
-    Megaphone,
-    Shield,
-    Target,
-    TrendingUp,
-    Trophy,
-    Upload,
-    Users
+  ArrowRight,
+  BarChart3,
+  Building2,
+  Car,
+  CheckCircle2,
+  Eye,
+  Flag,
+  Globe,
+  Mail,
+  Megaphone,
+  Shield,
+  Target,
+  TrendingUp,
+  Trophy,
+  Upload,
+  Users
 } from 'lucide-react';
 import { useState } from 'react';
 
diff --git a/apps/website/app/teams/create/page.tsx b/apps/website/app/teams/create/page.tsx
index 842b2db27..b79967070 100644
--- a/apps/website/app/teams/create/page.tsx
+++ b/apps/website/app/teams/create/page.tsx
@@ -4,7 +4,7 @@ import { CreateTeamForm } from '@/components/teams/CreateTeamForm';
 import { routes } from '@/lib/routing/RouteConfig';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Section } from '@/ui/Section';
 import { useRouter } from 'next/navigation';
 
diff --git a/apps/website/components/TeamRankingsFilter.tsx b/apps/website/components/TeamRankingsFilter.tsx
index 65eb336cd..85e346e07 100644
--- a/apps/website/components/TeamRankingsFilter.tsx
+++ b/apps/website/components/TeamRankingsFilter.tsx
@@ -2,7 +2,7 @@ import { Badge } from '@/ui/Badge';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Hash, LucideIcon, Percent, Search, Star, Trophy } from 'lucide-react';
 
diff --git a/apps/website/components/actions/ActionFiltersBar.tsx b/apps/website/components/actions/ActionFiltersBar.tsx
index ab2215688..1405705d8 100644
--- a/apps/website/components/actions/ActionFiltersBar.tsx
+++ b/apps/website/components/actions/ActionFiltersBar.tsx
@@ -4,7 +4,7 @@ import { Input } from '@/ui/Input';
 import { ControlBar } from '@/ui/ControlBar';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
-import { Group } from '@/ui/Group';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { useState } from 'react';
 
 export function ActionFiltersBar() {
@@ -12,39 +12,41 @@ export function ActionFiltersBar() {
   
   return (
     <ControlBar
-      actions={
+      leftContent={
         <Input 
           placeholder="SEARCH_ID..." 
         />
       }
     >
-      <Group direction="row" align="center" gap={2}>
-        <Text size="xs" variant="low" weight="bold" uppercase>Filter:</Text>
-        <Select 
-          options={[
-            { label: 'All Types', value: 'all' },
-            { label: 'User Update', value: 'user' },
-            { label: 'Onboarding', value: 'onboarding' }
-          ]}
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-          fullWidth={false}
-        />
-      </Group>
-      <Group direction="row" align="center" gap={2}>
-        <Text size="xs" variant="low" weight="bold" uppercase>Status:</Text>
-        <Select 
-          options={[
-            { label: 'All Status', value: 'all' },
-            { label: 'Completed', value: 'completed' },
-            { label: 'Pending', value: 'pending' },
-            { label: 'Failed', value: 'failed' }
-          ]}
-          value="all"
-          onChange={() => {}}
-          fullWidth={false}
-        />
-      </Group>
+      <ButtonGroup gap={4}>
+        <ButtonGroup gap={2}>
+          <Text size="xs" variant="low" weight="bold" uppercase>Filter:</Text>
+          <Select 
+            options={[
+              { label: 'All Types', value: 'all' },
+              { label: 'User Update', value: 'user' },
+              { label: 'Onboarding', value: 'onboarding' }
+            ]}
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            fullWidth={false}
+          />
+        </ButtonGroup>
+        <ButtonGroup gap={2}>
+          <Text size="xs" variant="low" weight="bold" uppercase>Status:</Text>
+          <Select 
+            options={[
+              { label: 'All Status', value: 'all' },
+              { label: 'Completed', value: 'completed' },
+              { label: 'Pending', value: 'pending' },
+              { label: 'Failed', value: 'failed' }
+            ]}
+            value="all"
+            onChange={() => {}}
+            fullWidth={false}
+          />
+        </ButtonGroup>
+      </ButtonGroup>
     </ControlBar>
   );
 }
diff --git a/apps/website/components/actions/ActionsHeader.tsx b/apps/website/components/actions/ActionsHeader.tsx
index f71c75ae6..0e39a7de4 100644
--- a/apps/website/components/actions/ActionsHeader.tsx
+++ b/apps/website/components/actions/ActionsHeader.tsx
@@ -3,6 +3,7 @@
 import { Header } from '@/ui/Header';
 import { StatusIndicator } from '@/ui/StatusIndicator';
 import { Text } from '@/ui/Text';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { Activity } from 'lucide-react';
 import React from 'react';
 
@@ -15,12 +16,11 @@ export function ActionsHeader({ title }: ActionsHeaderProps) {
     <Header
       actions={<StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />}
     >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-        <div style={{ width: '0.5rem', height: '1.5rem', backgroundColor: 'var(--ui-color-intent-primary)', borderRadius: 'var(--ui-radius-sm)' }} />
+      <ButtonGroup gap={4}>
         <Text as="h1" size="xl" weight="medium" variant="high" uppercase>
           {title}
         </Text>
-      </div>
+      </ButtonGroup>
     </Header>
   );
 }
diff --git a/apps/website/components/auth/AuthFooterLinks.tsx b/apps/website/components/auth/AuthFooterLinks.tsx
index 4055609b8..8874530dd 100644
--- a/apps/website/components/auth/AuthFooterLinks.tsx
+++ b/apps/website/components/auth/AuthFooterLinks.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import React from 'react';
 
 interface AuthFooterLinksProps {
diff --git a/apps/website/components/auth/AuthForm.tsx b/apps/website/components/auth/AuthForm.tsx
index 3f1f2093a..1dfb75a48 100644
--- a/apps/website/components/auth/AuthForm.tsx
+++ b/apps/website/components/auth/AuthForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import React from 'react';
 
 interface AuthFormProps {
diff --git a/apps/website/components/auth/AuthLoading.tsx b/apps/website/components/auth/AuthLoading.tsx
index d2d9d11e8..f4164eed2 100644
--- a/apps/website/components/auth/AuthLoading.tsx
+++ b/apps/website/components/auth/AuthLoading.tsx
@@ -1,7 +1,7 @@
 import { LoadingSpinner } from '../../ui/LoadingSpinner';
-import { Box } from '../../ui/primitives/Box';
-import { Stack } from '../../ui/primitives/Stack';
+import { Stack } from '../../ui/Stack';
 import { Text } from '../../ui/Text';
+import { Section } from '../../ui/Section';
 
 interface AuthLoadingProps {
   message?: string;
@@ -9,19 +9,13 @@ interface AuthLoadingProps {
 
 export function AuthLoading({ message = 'Authenticating...' }: AuthLoadingProps) {
   return (
-    <Box 
-      fullWidth 
-      minHeight="100vh" 
-      display="flex" 
-      center 
-      bg="bg-[#0f1115]"
-    >
-      <Stack align="center" gap={4}>
+    <Section variant="dark" padding="none">
+      <Stack align="center" justify="center" gap={4} fullWidth>
         <LoadingSpinner size={10} />
-        <Text color="text-gray-400" weight="medium">
+        <Text variant="low" weight="medium">
           {message}
         </Text>
       </Stack>
-    </Box>
+    </Section>
   );
 }
diff --git a/apps/website/components/dashboard/DashboardKpiRow.tsx b/apps/website/components/dashboard/DashboardKpiRow.tsx
index f371fa4b9..a886e9901 100644
--- a/apps/website/components/dashboard/DashboardKpiRow.tsx
+++ b/apps/website/components/dashboard/DashboardKpiRow.tsx
@@ -1,11 +1,12 @@
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { Card } from '@/ui/Card';
 
 interface KpiItem {
   label: string;
   value: string | number;
-  color?: string;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
 }
 
 interface DashboardKpiRowProps {
@@ -16,32 +17,31 @@ interface DashboardKpiRowProps {
  * DashboardKpiRow
  * 
  * A horizontal row of key performance indicators with telemetry styling.
- * Uses UI primitives to comply with architectural constraints.
  */
 export function DashboardKpiRow({ items }: DashboardKpiRowProps) {
   return (
-    <Grid responsiveGridCols={{ base: 2, md: 3, lg: 6 }} gap={4}>
+    <Grid cols={{ base: 2, md: 3, lg: 6 }} gap={4}>
       {items.map((item, index) => (
-        <Stack key={index} borderLeft pl={4} borderColor="var(--color-outline)">
-          <Text 
-            size="xs" 
-            weight="bold" 
-            uppercase 
-            letterSpacing="tighter" 
-            color="var(--color-text-low)"
-            block
-          >
-            {item.label}
-          </Text>
-          <Text 
-            size="xl" 
-            font="mono" 
-            weight="bold"
-            color={item.color || 'var(--color-text-high)'}
-          >
-            {item.value}
-          </Text>
-        </Stack>
+        <Card key={index} variant="dark">
+          <Stack gap={1}>
+            <Text 
+              size="xs" 
+              weight="bold" 
+              uppercase 
+              variant="low"
+            >
+              {item.label}
+            </Text>
+            <Text 
+              size="xl" 
+              font="mono" 
+              weight="bold"
+              variant={item.intent || 'high'}
+            >
+              {item.value}
+            </Text>
+          </Stack>
+        </Card>
       ))}
     </Grid>
   );
diff --git a/apps/website/components/dashboard/DashboardRail.tsx b/apps/website/components/dashboard/DashboardRail.tsx
index 313fed7fa..7aa41da9b 100644
--- a/apps/website/components/dashboard/DashboardRail.tsx
+++ b/apps/website/components/dashboard/DashboardRail.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import React from 'react';
 
 interface DashboardRailProps {
@@ -13,7 +13,7 @@ interface DashboardRailProps {
  */
 export function DashboardRail({ children }: DashboardRailProps) {
   return (
-    <Stack as="nav" h="full" align="center" py={4} gap={4}>
+    <Stack align="center" gap={4} fullWidth>
       {children}
     </Stack>
   );
diff --git a/apps/website/components/dashboard/DashboardShell.tsx b/apps/website/components/dashboard/DashboardShell.tsx
index 4f2023273..0fa4d4b59 100644
--- a/apps/website/components/dashboard/DashboardShell.tsx
+++ b/apps/website/components/dashboard/DashboardShell.tsx
@@ -1,7 +1,7 @@
-import { Sidebar } from '@/ui/Sidebar';
+import { Box } from '@/ui/Box';
 import { Header } from '@/ui/Header';
 import { MainContent } from '@/ui/MainContent';
-import { Box } from '@/ui/primitives/Box';
+import { Sidebar } from '@/ui/Sidebar';
 import React from 'react';
 
 interface DashboardShellProps {
diff --git a/apps/website/components/dev/DebugModeToggle.tsx b/apps/website/components/dev/DebugModeToggle.tsx
index 8a5dbc40d..0e796c497 100644
--- a/apps/website/components/dev/DebugModeToggle.tsx
+++ b/apps/website/components/dev/DebugModeToggle.tsx
@@ -8,6 +8,8 @@ import { Text } from '@/ui/Text';
 import { FloatingAction } from '@/ui/FloatingAction';
 import { DebugPanel } from '@/ui/DebugPanel';
 import { StatGrid } from '@/ui/StatGrid';
+import { Stack } from '@/ui/Stack';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { Bug, Shield } from 'lucide-react';
 import React, { useCallback, useEffect, useState } from 'react';
 
@@ -207,13 +209,13 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
           onClose={() => setIsOpen(false)}
           icon={<Icon icon={Bug} size={4} intent="success" />}
         >
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Stack gap={4}>
             {/* Debug Toggle */}
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.5rem', backgroundColor: 'var(--ui-color-bg-surface-muted)', borderRadius: '0.5rem' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <Stack align="center" justify="between">
+              <ButtonGroup gap={2}>
                 <Icon icon={Shield} size={4} intent={debugEnabled ? 'success' : 'low'} />
                 <Text size="sm" weight="medium">Debug Mode</Text>
-              </div>
+              </ButtonGroup>
               <Button
                 onClick={toggleDebug}
                 size="sm"
@@ -221,7 +223,7 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
               >
                 {debugEnabled ? 'ON' : 'OFF'}
               </Button>
-            </div>
+            </Stack>
 
             {/* Metrics */}
             {debugEnabled && (
@@ -238,41 +240,41 @@ export function DebugModeToggle({ show }: DebugModeToggleProps) {
 
             {/* Actions */}
             {debugEnabled && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+              <Stack gap={2}>
                 <Text size="xs" weight="semibold" variant="low" uppercase>Test Actions</Text>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
-                  <Button onClick={triggerTestError} variant="danger" size="sm">Test Error</Button>
-                  <Button onClick={triggerTestApiCall} size="sm">Test API</Button>
-                </div>
+                <ButtonGroup gap={2}>
+                  <Button onClick={triggerTestError} variant="danger" size="sm" fullWidth>Test Error</Button>
+                  <Button onClick={triggerTestApiCall} size="sm" fullWidth>Test API</Button>
+                </ButtonGroup>
 
-                <Text size="xs" weight="semibold" variant="low" uppercase style={{ marginTop: '0.5rem' }}>Utilities</Text>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
-                  <Button onClick={copyDebugInfo} variant="secondary" size="sm">Copy Info</Button>
-                  <Button onClick={clearAllLogs} variant="secondary" size="sm">Clear Logs</Button>
-                </div>
-              </div>
+                <Text size="xs" weight="semibold" variant="low" uppercase>Utilities</Text>
+                <ButtonGroup gap={2}>
+                  <Button onClick={copyDebugInfo} variant="secondary" size="sm" fullWidth>Copy Info</Button>
+                  <Button onClick={clearAllLogs} variant="secondary" size="sm" fullWidth>Clear Logs</Button>
+                </ButtonGroup>
+              </Stack>
             )}
 
             {/* Quick Links */}
             {debugEnabled && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+              <Stack gap={1}>
                 <Text size="xs" weight="semibold" variant="low" uppercase>Quick Access</Text>
-                <div style={{ fontSize: '10px', color: 'var(--ui-color-text-low)', fontFamily: 'var(--ui-font-mono)' }}>
-                  <div>• window.__GRIDPILOT_GLOBAL_HANDLER__</div>
-                  <div>• window.__GRIDPILOT_API_LOGGER__</div>
-                  <div>• window.__GRIDPILOT_REACT_ERRORS__</div>
-                </div>
-              </div>
+                <Stack gap={0.5}>
+                  <Text size="xs" variant="low" font="mono">• window.__GRIDPILOT_GLOBAL_HANDLER__</Text>
+                  <Text size="xs" variant="low" font="mono">• window.__GRIDPILOT_API_LOGGER__</Text>
+                  <Text size="xs" variant="low" font="mono">• window.__GRIDPILOT_REACT_ERRORS__</Text>
+                </Stack>
+              </Stack>
             )}
 
             {/* Status */}
-            <div style={{ paddingTop: '0.5rem', borderTop: '1px solid var(--ui-color-border-muted)', textAlign: 'center' }}>
-              <Text size="xs" variant="low" style={{ fontSize: '10px' }}>
+            <Stack align="center">
+              <Text size="xs" variant="low">
                 {debugEnabled ? 'Debug features active' : 'Debug mode disabled'}
                 {isDev && ' • Development Environment'}
               </Text>
-            </div>
-          </div>
+            </Stack>
+          </Stack>
         </DebugPanel>
       )}
     </React.Fragment>
diff --git a/apps/website/components/dev/DevToolbar.tsx b/apps/website/components/dev/DevToolbar.tsx
index 3fdefac9c..173df45fc 100644
--- a/apps/website/components/dev/DevToolbar.tsx
+++ b/apps/website/components/dev/DevToolbar.tsx
@@ -4,7 +4,7 @@ import { useNotifications } from '@/components/notifications/NotificationProvide
 import type { NotificationVariant } from '@/components/notifications/notificationTypes';
 import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
 import { ApiConnectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
-import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
+import { CircuitBreakerRegistry } from '@/lib/api/base/CircuitBreakerRegistry';
 import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { Activity, AlertTriangle, ChevronDown, ChevronUp, MessageSquare, Wrench, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
@@ -16,7 +16,7 @@ import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { APIStatusSection } from './sections/APIStatusSection';
 import { NotificationSendSection } from './sections/NotificationSendSection';
 import { NotificationTypeSection } from './sections/NotificationTypeSection';
@@ -229,7 +229,7 @@ export function DevToolbar() {
 
   if (isMinimized) {
     return (
-      <Stack position="fixed" bottom="4" right="4" zIndex={50}>
+      <Stack align="end" justify="end">
         <IconButton
           icon={Wrench}
           onClick={() => setIsMinimized(false)}
@@ -242,25 +242,13 @@ export function DevToolbar() {
   }
 
   return (
-    <Stack 
-      position="fixed" 
-      bottom="4" 
-      right="4" 
-      zIndex={50} 
-      w="80" 
-      bg="bg-deep-graphite" 
-      border 
-      borderColor="border-charcoal-outline" 
-      rounded="xl" 
-      shadow="2xl" 
-      overflow="hidden"
-    >
+    <Stack gap={4}>
       {/* Header */}
-      <Stack direction="row" align="center" justify="between" px={4} py={3} bg="bg-iron-gray/50" borderBottom borderColor="border-charcoal-outline">
+      <Stack direction="row" align="center" justify="between" gap={4}>
         <Stack direction="row" align="center" gap={2}>
-          <Icon icon={Wrench} size={4} color="rgb(59, 130, 246)" />
-          <Text size="sm" weight="semibold" color="text-white">Dev Toolbar</Text>
-          <Badge variant="primary" size="xs">
+          <Icon icon={Wrench} size={4} intent="primary" />
+          <Text size="sm" weight="semibold" variant="high">Dev Toolbar</Text>
+          <Badge variant="primary" size="sm">
             DEMO
           </Badge>
         </Stack>
@@ -282,12 +270,11 @@ export function DevToolbar() {
 
       {/* Content */}
       {isExpanded && (
-        <Stack p={4}>
+        <Stack gap={4}>
           <Stack gap={3}>
             {/* Notification Section - Accordion */}
             <Accordion
               title="Notifications"
-              icon={<Icon icon={MessageSquare} size={4} color="rgb(156, 163, 175)" />}
               isOpen={openAccordion === 'notifications'}
               onToggle={() => setOpenAccordion(openAccordion === 'notifications' ? null : 'notifications')}
             >
@@ -313,7 +300,6 @@ export function DevToolbar() {
             {/* API Status Section - Accordion */}
             <Accordion
               title="API Status"
-              icon={<Icon icon={Activity} size={4} color="rgb(156, 163, 175)" />}
               isOpen={openAccordion === 'apiStatus'}
               onToggle={() => setOpenAccordion(openAccordion === 'apiStatus' ? null : 'apiStatus')}
             >
@@ -331,27 +317,26 @@ export function DevToolbar() {
             {/* Error Stats Section - Accordion */}
             <Accordion
               title="Error Stats"
-              icon={<Icon icon={AlertTriangle} size={4} color="rgb(156, 163, 175)" />}
               isOpen={openAccordion === 'errors'}
               onToggle={() => setOpenAccordion(openAccordion === 'errors' ? null : 'errors')}
             >
               <Stack gap={2}>
-                <Stack direction="row" justify="between" align="center" p={2} bg="bg-iron-gray/30" rounded="md">
-                  <Text size="xs" color="text-gray-400">Total Errors</Text>
-                  <Text size="xs" font="mono" weight="bold" color="text-red-400">{errorStats.total}</Text>
+                <Stack direction="row" justify="between" align="center" gap={2}>
+                  <Text size="xs" variant="low">Total Errors</Text>
+                  <Text size="xs" font="mono" weight="bold" variant="critical">{errorStats.total}</Text>
                 </Stack>
                 {Object.keys(errorStats.byType).length > 0 ? (
                   <Stack gap={1}>
                     {Object.entries(errorStats.byType).map(([type, count]) => (
-                      <Stack key={type} direction="row" justify="between" align="center" p={1.5} bg="bg-deep-graphite" rounded="md">
-                        <Text size="xs" color="text-gray-300">{type}</Text>
-                        <Text size="xs" font="mono" color="text-warning-amber">{count}</Text>
+                      <Stack key={type} direction="row" justify="between" align="center" gap={2}>
+                        <Text size="xs" variant="low">{type}</Text>
+                        <Text size="xs" font="mono" variant="warning">{count}</Text>
                       </Stack>
                     ))}
                   </Stack>
                 ) : (
-                  <Stack align="center" py={2}>
-                    <Text size="xs" color="text-gray-500">No errors yet</Text>
+                  <Stack align="center">
+                    <Text size="xs" variant="low">No errors yet</Text>
                   </Stack>
                 )}
                 <Button
@@ -374,8 +359,8 @@ export function DevToolbar() {
 
       {/* Collapsed state hint */}
       {!isExpanded && (
-        <Stack px={4} py={2}>
-          <Text size="xs" color="text-gray-500">Click ↑ to expand dev tools</Text>
+        <Stack>
+          <Text size="xs" variant="low">Click ↑ to expand dev tools</Text>
         </Stack>
       )}
     </Stack>
diff --git a/apps/website/components/dev/sections/APIStatusSection.tsx b/apps/website/components/dev/sections/APIStatusSection.tsx
index 3cb52864f..b5adf0fa5 100644
--- a/apps/website/components/dev/sections/APIStatusSection.tsx
+++ b/apps/website/components/dev/sections/APIStatusSection.tsx
@@ -4,8 +4,8 @@ import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Badge, StatRow, StatusIndicator } from '@/ui/StatusIndicator';
 import { Text } from '@/ui/Text';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Activity, RefreshCw, Terminal, Wifi } from 'lucide-react';
 
 interface APIStatusSectionProps {
diff --git a/apps/website/components/dev/sections/NotificationSendSection.tsx b/apps/website/components/dev/sections/NotificationSendSection.tsx
index ca1168c95..168e20f95 100644
--- a/apps/website/components/dev/sections/NotificationSendSection.tsx
+++ b/apps/website/components/dev/sections/NotificationSendSection.tsx
@@ -2,7 +2,7 @@
 
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Bell, Loader2 } from 'lucide-react';
 import type { DemoNotificationType, DemoUrgency } from '../types';
diff --git a/apps/website/components/dev/sections/NotificationTypeSection.tsx b/apps/website/components/dev/sections/NotificationTypeSection.tsx
index 145c13196..45162444f 100644
--- a/apps/website/components/dev/sections/NotificationTypeSection.tsx
+++ b/apps/website/components/dev/sections/NotificationTypeSection.tsx
@@ -2,8 +2,8 @@
 
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertTriangle, Award, LucideIcon, MessageSquare, Shield, TrendingUp, Vote } from 'lucide-react';
 import type { DemoNotificationType } from '../types';
diff --git a/apps/website/components/dev/sections/ReplaySection.tsx b/apps/website/components/dev/sections/ReplaySection.tsx
index a33f592e9..87e566a1b 100644
--- a/apps/website/components/dev/sections/ReplaySection.tsx
+++ b/apps/website/components/dev/sections/ReplaySection.tsx
@@ -4,7 +4,7 @@ import { getGlobalReplaySystem } from '@/lib/infrastructure/ErrorReplay';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Box, Clock, Copy, Download, Play, Trash2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
diff --git a/apps/website/components/dev/sections/UrgencySection.tsx b/apps/website/components/dev/sections/UrgencySection.tsx
index c6f85a4ff..8fa9b117f 100644
--- a/apps/website/components/dev/sections/UrgencySection.tsx
+++ b/apps/website/components/dev/sections/UrgencySection.tsx
@@ -2,8 +2,8 @@
 
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, Bell, BellRing, LucideIcon } from 'lucide-react';
 import type { DemoUrgency } from '../types';
diff --git a/apps/website/components/drivers/CareerHighlights.tsx b/apps/website/components/drivers/CareerHighlights.tsx
index 8b08e2db2..c7b981934 100644
--- a/apps/website/components/drivers/CareerHighlights.tsx
+++ b/apps/website/components/drivers/CareerHighlights.tsx
@@ -3,8 +3,8 @@ import { Card } from '@/ui/Card';
 import { GoalCard } from '@/ui/GoalCard';
 import { Heading } from '@/ui/Heading';
 import { MilestoneItem } from '@/components/achievements/MilestoneItem';
-import { Stack } from '@/ui/primitives/Stack';
-import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 
 interface Achievement {
   id: string;
diff --git a/apps/website/components/drivers/CareerStats.tsx b/apps/website/components/drivers/CareerStats.tsx
index 02b4ebc3f..824ce1782 100644
--- a/apps/website/components/drivers/CareerStats.tsx
+++ b/apps/website/components/drivers/CareerStats.tsx
@@ -1,10 +1,10 @@
 
 
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { StatGridItem } from '@/ui/StatGridItem';
 import { TrendingUp } from 'lucide-react';
 
diff --git a/apps/website/components/drivers/CreateDriverForm.tsx b/apps/website/components/drivers/CreateDriverForm.tsx
index 460287575..4d0140a73 100644
--- a/apps/website/components/drivers/CreateDriverForm.tsx
+++ b/apps/website/components/drivers/CreateDriverForm.tsx
@@ -3,7 +3,7 @@
 import { Button } from '@/ui/Button';
 import { InfoBox } from '@/ui/InfoBox';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
 import { AlertCircle } from 'lucide-react';
diff --git a/apps/website/components/drivers/DriverCard.tsx b/apps/website/components/drivers/DriverCard.tsx
index 05c2a3a9c..538a027bd 100644
--- a/apps/website/components/drivers/DriverCard.tsx
+++ b/apps/website/components/drivers/DriverCard.tsx
@@ -1,10 +1,10 @@
-import { DriverIdentity } from '@/components/drivers/DriverIdentity';
+import { DriverIdentity } from '@/ui/DriverIdentity';
 import { DriverStats } from '@/components/drivers/DriverStats';
 import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { routes } from '@/lib/routing/RouteConfig';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 export interface DriverCardProps {
   id: string;
diff --git a/apps/website/components/drivers/DriverEntryRow.tsx b/apps/website/components/drivers/DriverEntryRow.tsx
index 71036edbc..e7748fd0a 100644
--- a/apps/website/components/drivers/DriverEntryRow.tsx
+++ b/apps/website/components/drivers/DriverEntryRow.tsx
@@ -4,7 +4,7 @@ import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Zap } from 'lucide-react';
 
diff --git a/apps/website/components/drivers/DriverHeaderPanel.tsx b/apps/website/components/drivers/DriverHeaderPanel.tsx
index 35d5eaaa7..ee5b3b0bc 100644
--- a/apps/website/components/drivers/DriverHeaderPanel.tsx
+++ b/apps/website/components/drivers/DriverHeaderPanel.tsx
@@ -1,6 +1,6 @@
 import { RatingBadge } from '@/components/drivers/RatingBadge';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import React from 'react';
 
diff --git a/apps/website/components/drivers/DriverPerformanceOverview.tsx b/apps/website/components/drivers/DriverPerformanceOverview.tsx
index 8568267ec..8a5c5cf6b 100644
--- a/apps/website/components/drivers/DriverPerformanceOverview.tsx
+++ b/apps/website/components/drivers/DriverPerformanceOverview.tsx
@@ -1,8 +1,8 @@
 'use client';
 
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/primitives/Box';
 
 interface DriverPerformanceOverviewProps {
   stats: {
diff --git a/apps/website/components/drivers/DriverProfile.tsx b/apps/website/components/drivers/DriverProfile.tsx
index bb470dc60..945b2ff82 100644
--- a/apps/website/components/drivers/DriverProfile.tsx
+++ b/apps/website/components/drivers/DriverProfile.tsx
@@ -8,7 +8,7 @@ import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { StatCard } from '@/ui/StatCard';
 import { Text } from '@/ui/Text';
 import { ProfileStats } from './ProfileStats';
diff --git a/apps/website/components/drivers/DriverProfileHeader.tsx b/apps/website/components/drivers/DriverProfileHeader.tsx
index f9a35b1e9..294d290ed 100644
--- a/apps/website/components/drivers/DriverProfileHeader.tsx
+++ b/apps/website/components/drivers/DriverProfileHeader.tsx
@@ -4,7 +4,7 @@ import { RatingBadge } from '@/components/drivers/RatingBadge';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Check, Globe, Trophy, UserPlus } from 'lucide-react';
 import { SafetyRatingBadge } from './SafetyRatingBadge';
diff --git a/apps/website/components/drivers/DriverProfileTabs.tsx b/apps/website/components/drivers/DriverProfileTabs.tsx
index 27369bf2d..3c13f8431 100644
--- a/apps/website/components/drivers/DriverProfileTabs.tsx
+++ b/apps/website/components/drivers/DriverProfileTabs.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/primitives/Box';
 import { BarChart3, LayoutDashboard, ShieldCheck } from 'lucide-react';
 
 export type ProfileTab = 'overview' | 'stats' | 'ratings';
diff --git a/apps/website/components/drivers/DriverRacingProfile.tsx b/apps/website/components/drivers/DriverRacingProfile.tsx
index 2d8cdab16..2fb02791b 100644
--- a/apps/website/components/drivers/DriverRacingProfile.tsx
+++ b/apps/website/components/drivers/DriverRacingProfile.tsx
@@ -2,7 +2,7 @@
 
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Car, Clock, MailCheck, MapPin, Users2 } from 'lucide-react';
 
 interface DriverRacingProfileProps {
diff --git a/apps/website/components/drivers/DriverRatingPill.tsx b/apps/website/components/drivers/DriverRatingPill.tsx
index 9bc622cce..f9f080143 100644
--- a/apps/website/components/drivers/DriverRatingPill.tsx
+++ b/apps/website/components/drivers/DriverRatingPill.tsx
@@ -1,7 +1,7 @@
 
 
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Star, Trophy } from 'lucide-react';
 
diff --git a/apps/website/components/drivers/DriverSearchBar.tsx b/apps/website/components/drivers/DriverSearchBar.tsx
index e0c2c9ccb..e09353d89 100644
--- a/apps/website/components/drivers/DriverSearchBar.tsx
+++ b/apps/website/components/drivers/DriverSearchBar.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import { Box } from '@/ui/Box';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/primitives/Box';
 import { Search } from 'lucide-react';
 
 interface DriverSearchBarProps {
diff --git a/apps/website/components/drivers/DriverStats.tsx b/apps/website/components/drivers/DriverStats.tsx
index f621314a5..aea091e57 100644
--- a/apps/website/components/drivers/DriverStats.tsx
+++ b/apps/website/components/drivers/DriverStats.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface DriverStatsProps {
diff --git a/apps/website/components/drivers/DriverStatsPanel.tsx b/apps/website/components/drivers/DriverStatsPanel.tsx
index 6bb69046d..535d45c4a 100644
--- a/apps/website/components/drivers/DriverStatsPanel.tsx
+++ b/apps/website/components/drivers/DriverStatsPanel.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/primitives/Box';
 
 interface StatItem {
   label: string;
diff --git a/apps/website/components/drivers/DriverSummaryPill.tsx b/apps/website/components/drivers/DriverSummaryPill.tsx
index b74e865f2..b53f65cd4 100644
--- a/apps/website/components/drivers/DriverSummaryPill.tsx
+++ b/apps/website/components/drivers/DriverSummaryPill.tsx
@@ -3,7 +3,7 @@
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import React from 'react';
 
diff --git a/apps/website/components/drivers/DriverTable.tsx b/apps/website/components/drivers/DriverTable.tsx
index b3881cae4..dde184b86 100644
--- a/apps/website/components/drivers/DriverTable.tsx
+++ b/apps/website/components/drivers/DriverTable.tsx
@@ -2,8 +2,11 @@
 
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
+import { Table, TableHead, TableBody, TableRow, TableHeaderCell } from '@/ui/Table';
 import { TrendingUp } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Icon } from '@/ui/Icon';
 import React from 'react';
 
 interface DriverTableProps {
@@ -14,31 +17,29 @@ export function DriverTable({ children }: DriverTableProps) {
   return (
     <Stack gap={4}>
       <Stack direction="row" align="center" gap={3}>
-        <Stack display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="xl" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20">
-          <TrendingUp size={20} color="#198CFF" />
-        </Stack>
+        <Card variant="dark">
+          <Icon icon={TrendingUp} size={5} intent="primary" />
+        </Card>
         <Stack>
           <Heading level={2}>Driver Rankings</Heading>
-          <Text size="xs" color="text-gray-500">Top performers by skill rating</Text>
+          <Text size="xs" variant="low">Top performers by skill rating</Text>
         </Stack>
       </Stack>
 
-      <Stack overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50">
-        <Stack as="table" w="full" textAlign="left">
-          <Stack as="thead">
-            <Stack as="tr" borderBottom borderColor="border-charcoal-outline" bg="bg-deep-charcoal/80">
-              <Stack as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="center" width="60px">#</Stack>
-              <Stack as="th" px={6} py={4} fontSize="xs" color="text-gray-500">Driver</Stack>
-              <Stack as="th" px={6} py={4} fontSize="xs" color="text-gray-500" width="150px">Nationality</Stack>
-              <Stack as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="right" width="100px">Rating</Stack>
-              <Stack as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="right" width="80px">Wins</Stack>
-            </Stack>
-          </Stack>
-          <Stack as="tbody">
-            {children}
-          </Stack>
-        </Stack>
-      </Stack>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell textAlign="center" w="60px">#</TableHeaderCell>
+            <TableHeaderCell>Driver</TableHeaderCell>
+            <TableHeaderCell w="150px">Nationality</TableHeaderCell>
+            <TableHeaderCell textAlign="right" w="100px">Rating</TableHeaderCell>
+            <TableHeaderCell textAlign="right" w="80px">Wins</TableHeaderCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {children}
+        </TableBody>
+      </Table>
     </Stack>
   );
 }
diff --git a/apps/website/components/drivers/DriverTableRow.tsx b/apps/website/components/drivers/DriverTableRow.tsx
index c394ef3aa..d456fb48f 100644
--- a/apps/website/components/drivers/DriverTableRow.tsx
+++ b/apps/website/components/drivers/DriverTableRow.tsx
@@ -3,7 +3,9 @@
 import { RatingBadge } from '@/components/drivers/RatingBadge';
 import { Image } from '@/ui/Image';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
+import { TableRow, TableCell } from '@/ui/Table';
+import { Avatar } from '@/ui/Avatar';
 
 interface DriverTableRowProps {
   rank: number;
@@ -24,61 +26,45 @@ export function DriverTableRow({
   wins,
   onClick,
 }: DriverTableRowProps) {
-  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
-
   return (
-    <Stack 
-      as="tr" 
-      onClick={onClick}
-      cursor="pointer"
-      transition
-      hoverBg="bg-primary-blue/5"
-      group
-      borderBottom
-      borderColor="border-charcoal-outline/50"
-    >
-      <Stack as="td" px={6} py={4} textAlign="center">
+    <TableRow onClick={onClick} clickable>
+      <TableCell textAlign="center">
         <Text 
           size="sm" 
           weight="bold" 
           font="mono" 
-          color={rank <= 3 ? 'text-warning-amber' : 'text-gray-500'}
+          variant={rank <= 3 ? 'warning' : 'low'}
         >
           {rank}
         </Text>
-      </Stack>
-      <Stack as="td" px={6} py={4}>
+      </TableCell>
+      <TableCell>
         <Stack direction="row" align="center" gap={3}>
-          <Stack position="relative" h="8" w="8" overflow="hidden" rounded="full" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal">
-            <Image 
-              src={avatarUrl || defaultAvatar} 
-              alt={name} 
-              fill 
-              objectFit="cover"
-            />
-          </Stack>
+          <Avatar 
+            src={avatarUrl || undefined} 
+            alt={name} 
+            size="sm"
+          />
           <Text 
             size="sm" 
             weight="semibold" 
-            color="text-white" 
-            groupHoverTextColor="text-primary-blue" 
-            transition
+            variant="high"
           >
             {name}
           </Text>
         </Stack>
-      </Stack>
-      <Stack as="td" px={6} py={4}>
-        <Text size="xs" color="text-gray-400">{nationality}</Text>
-      </Stack>
-      <Stack as="td" px={6} py={4} textAlign="right">
+      </TableCell>
+      <TableCell>
+        <Text size="xs" variant="low">{nationality}</Text>
+      </TableCell>
+      <TableCell textAlign="right">
         <RatingBadge rating={rating} size="sm" />
-      </Stack>
-      <Stack as="td" px={6} py={4} textAlign="right">
-        <Text size="sm" weight="semibold" font="mono" color="text-performance-green">
+      </TableCell>
+      <TableCell textAlign="right">
+        <Text size="sm" weight="semibold" font="mono" variant="success">
           {wins}
         </Text>
-      </Stack>
-    </Stack>
+      </TableCell>
+    </TableRow>
   );
 }
diff --git a/apps/website/components/drivers/DriversDirectoryHeader.tsx b/apps/website/components/drivers/DriversDirectoryHeader.tsx
index 48f2452fb..555ba4e56 100644
--- a/apps/website/components/drivers/DriversDirectoryHeader.tsx
+++ b/apps/website/components/drivers/DriversDirectoryHeader.tsx
@@ -2,15 +2,18 @@
 
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { Section } from '@/ui/Section';
+import { Container } from '@/ui/Container';
+import { Card } from '@/ui/Card';
+import { Icon } from '@/ui/Icon';
 import { Trophy, Users } from 'lucide-react';
 
 interface DriverStat {
   label: string;
   value: string | number;
-  color?: string;
-  animate?: boolean;
+  intent?: 'primary' | 'success' | 'warning' | 'telemetry';
 }
 
 interface DriversDirectoryHeaderProps {
@@ -29,71 +32,53 @@ export function DriversDirectoryHeader({
   onViewLeaderboard,
 }: DriversDirectoryHeaderProps) {
   const stats: DriverStat[] = [
-    { label: 'drivers', value: totalDrivers, color: 'text-primary-blue' },
-    { label: 'active', value: activeDrivers, color: 'text-performance-green', animate: true },
-    { label: 'total wins', value: totalWins.toLocaleString(), color: 'text-warning-amber' },
-    { label: 'races', value: totalRaces.toLocaleString(), color: 'text-neon-aqua' },
+    { label: 'drivers', value: totalDrivers, intent: 'primary' },
+    { label: 'active', value: activeDrivers, intent: 'success' },
+    { label: 'total wins', value: totalWins.toLocaleString(), intent: 'warning' },
+    { label: 'races', value: totalRaces.toLocaleString(), intent: 'telemetry' },
   ];
 
   return (
-    <Stack 
-      as="header" 
-      position="relative" 
-      overflow="hidden" 
-      rounded="2xl" 
-      border 
-      borderColor="border-charcoal-outline/50" 
-      bg="bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60" 
-      p={{ base: 8, lg: 10 }}
-    >
-      {/* Background Accents */}
-      <Stack position="absolute" right="-24" top="-24" w="96" h="96" rounded="full" bg="bg-primary-blue/5" blur="3xl" />
-      <Stack position="absolute" bottom="-16" left="-16" w="64" h="64" rounded="full" bg="bg-neon-aqua/5" blur="3xl" />
-
-      <Stack position="relative" display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={8}>
-        <Stack maxWidth="2xl">
-          <Stack direction="row" align="center" gap={3} mb={4}>
-            <Stack display="flex" h="12" w="12" alignItems="center" justifyContent="center" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal" shadow="lg">
-              <Users size={24} color="#198CFF" />
+    <Section variant="dark" padding="md">
+      <Container>
+        <Stack direction="row" align="center" justify="between" gap={8}>
+          <Stack gap={6}>
+            <Stack direction="row" align="center" gap={3}>
+              <Card variant="dark">
+                <Icon icon={Users} size={6} intent="primary" />
+              </Card>
+              <Heading level={1}>Drivers</Heading>
             </Stack>
-            <Heading level={1}>Drivers</Heading>
-          </Stack>
-          
-          <Text size="lg" color="text-gray-400" block leading="relaxed">
-            Meet the racers who make every lap count. From rookies to champions, track their journey and see who&apos;s dominating the grid.
-          </Text>
+            
+            <Text size="lg" variant="low">
+              Meet the racers who make every lap count. From rookies to champions, track their journey and see who&apos;s dominating the grid.
+            </Text>
 
-          <Stack display="flex" flexWrap="wrap" gap={6} mt={6}>
-            {stats.map((stat, index) => (
-              <Stack key={index} direction="row" align="center" gap={2}>
-                <Stack 
-                  w="2" 
-                  h="2" 
-                  rounded="full" 
-                  bg={stat.color?.replace('text-', 'bg-') || 'bg-primary-blue'} 
-                  animate={stat.animate ? 'pulse' : 'none'} 
-                />
-                <Text size="sm" color="text-gray-400">
-                  <Text as="span" weight="semibold" color="text-white">{stat.value}</Text> {stat.label}
-                </Text>
-              </Stack>
-            ))}
+            <Stack direction="row" gap={6} wrap>
+              {stats.map((stat, index) => (
+                <Stack key={index} direction="row" align="center" gap={2}>
+                  <Text size="sm" variant="low">
+                    <Text as="span" weight="semibold" variant="high">{stat.value}</Text> {stat.label}
+                  </Text>
+                </Stack>
+              ))}
+            </Stack>
+          </Stack>
+
+          <Stack gap={2} align="center">
+            <Button
+              variant="primary"
+              onClick={onViewLeaderboard}
+              icon={<Icon icon={Trophy} size={5} />}
+            >
+              View Leaderboard
+            </Button>
+            <Text size="xs" variant="low" align="center">
+              See full driver rankings
+            </Text>
           </Stack>
         </Stack>
-
-        <Stack gap={2}>
-          <Button
-            variant="primary"
-            onClick={onViewLeaderboard}
-            icon={<Trophy size={20} />}
-          >
-            View Leaderboard
-          </Button>
-          <Text size="xs" color="text-gray-500" align="center" block>
-            See full driver rankings
-          </Text>
-        </Stack>
-      </Stack>
-    </Stack>
+      </Container>
+    </Section>
   );
 }
diff --git a/apps/website/components/drivers/DriversSearch.tsx b/apps/website/components/drivers/DriversSearch.tsx
index 7fc1a2fd3..e25f51032 100644
--- a/apps/website/components/drivers/DriversSearch.tsx
+++ b/apps/website/components/drivers/DriversSearch.tsx
@@ -1,8 +1,8 @@
 
 
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/primitives/Box';
 import { Search } from 'lucide-react';
 
 interface DriversSearchProps {
diff --git a/apps/website/components/drivers/FeaturedDriverCard.tsx b/apps/website/components/drivers/FeaturedDriverCard.tsx
index 01af63361..257372ae6 100644
--- a/apps/website/components/drivers/FeaturedDriverCard.tsx
+++ b/apps/website/components/drivers/FeaturedDriverCard.tsx
@@ -3,11 +3,11 @@
 import { MedalBadge } from '@/components/leaderboards/MedalBadge';
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
 import { MiniStat } from '@/ui/MiniStat';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Flag, Shield, Star, TrendingUp } from 'lucide-react';
 
diff --git a/apps/website/components/drivers/LiveryCard.tsx b/apps/website/components/drivers/LiveryCard.tsx
index 56ec86ad5..d02a7eeba 100644
--- a/apps/website/components/drivers/LiveryCard.tsx
+++ b/apps/website/components/drivers/LiveryCard.tsx
@@ -3,7 +3,7 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Car, Download, Edit, Trash2 } from 'lucide-react';
 
diff --git a/apps/website/components/drivers/PerformanceMetrics.tsx b/apps/website/components/drivers/PerformanceMetrics.tsx
index 56f87bd44..979ad03bd 100644
--- a/apps/website/components/drivers/PerformanceMetrics.tsx
+++ b/apps/website/components/drivers/PerformanceMetrics.tsx
@@ -1,7 +1,7 @@
 
 
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 
 interface PerformanceMetricsProps {
diff --git a/apps/website/components/drivers/PerformanceOverview.tsx b/apps/website/components/drivers/PerformanceOverview.tsx
index b89e65dbf..ee29f2070 100644
--- a/apps/website/components/drivers/PerformanceOverview.tsx
+++ b/apps/website/components/drivers/PerformanceOverview.tsx
@@ -5,9 +5,9 @@ import { CircularProgress } from '@/ui/CircularProgress';
 import { Heading } from '@/ui/Heading';
 import { HorizontalBarChart } from '@/ui/HorizontalBarChart';
 import { Icon } from '@/ui/Icon';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Activity, BarChart3, Target, TrendingUp } from 'lucide-react';
 
diff --git a/apps/website/components/drivers/ProfileHeader.tsx b/apps/website/components/drivers/ProfileHeader.tsx
index d11202621..265074932 100644
--- a/apps/website/components/drivers/ProfileHeader.tsx
+++ b/apps/website/components/drivers/ProfileHeader.tsx
@@ -8,7 +8,7 @@ import { CountryFlag } from '@/ui/CountryFlag';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface ProfileHeaderProps {
diff --git a/apps/website/components/drivers/ProfileHero.tsx b/apps/website/components/drivers/ProfileHero.tsx
index b87489112..22823e76c 100644
--- a/apps/website/components/drivers/ProfileHero.tsx
+++ b/apps/website/components/drivers/ProfileHero.tsx
@@ -6,8 +6,8 @@ import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Calendar, Clock, ExternalLink, Globe, Star, Trophy, UserPlus } from 'lucide-react';
 
diff --git a/apps/website/components/drivers/ProfileSettings.tsx b/apps/website/components/drivers/ProfileSettings.tsx
index a9f39b232..5107ed85e 100644
--- a/apps/website/components/drivers/ProfileSettings.tsx
+++ b/apps/website/components/drivers/ProfileSettings.tsx
@@ -6,7 +6,7 @@ import { Card } from '@/ui/Card';
 import { Checkbox } from '@/ui/Checkbox';
 import { Heading } from '@/ui/Heading';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { TextArea } from '@/ui/TextArea';
 import { Toggle } from '@/ui/Toggle';
diff --git a/apps/website/components/drivers/ProfileStats.tsx b/apps/website/components/drivers/ProfileStats.tsx
index 2ebdfbee0..99d10d299 100644
--- a/apps/website/components/drivers/ProfileStats.tsx
+++ b/apps/website/components/drivers/ProfileStats.tsx
@@ -4,7 +4,7 @@ import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { StatCard } from '@/ui/StatCard';
 import { Text } from '@/ui/Text';
 import { useMemo } from 'react';
diff --git a/apps/website/components/drivers/RacingProfile.tsx b/apps/website/components/drivers/RacingProfile.tsx
index 1e06d97d1..f196549df 100644
--- a/apps/website/components/drivers/RacingProfile.tsx
+++ b/apps/website/components/drivers/RacingProfile.tsx
@@ -3,7 +3,7 @@
 import { Card, Card as Surface } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Flag, UserPlus, Users } from 'lucide-react';
 
diff --git a/apps/website/components/drivers/RatingBadge.tsx b/apps/website/components/drivers/RatingBadge.tsx
index 15fbf4124..561ff3dac 100644
--- a/apps/website/components/drivers/RatingBadge.tsx
+++ b/apps/website/components/drivers/RatingBadge.tsx
@@ -3,33 +3,22 @@ import { Badge } from '@/ui/Badge';
 
 interface RatingBadgeProps {
   rating: number;
-  size?: 'sm' | 'md' | 'lg';
-  className?: string;
+  size?: 'sm' | 'md';
 }
 
-export function RatingBadge({ rating, size = 'md', className = '' }: RatingBadgeProps) {
-  const getColor = (val: number) => {
-    if (val >= 2500) return { variant: 'warning' as const };
-    if (val >= 2000) return { color: 'text-purple-400', bg: 'bg-purple-400/10', borderColor: 'border-purple-400/20' };
-    if (val >= 1500) return { variant: 'primary' as const };
-    if (val >= 1000) return { variant: 'success' as const };
-    return { variant: 'default' as const };
+export function RatingBadge({ rating, size = 'md' }: RatingBadgeProps) {
+  const getVariant = (val: number): 'warning' | 'primary' | 'success' | 'default' => {
+    if (val >= 2500) return 'warning';
+    if (val >= 2000) return 'primary'; // Simplified
+    if (val >= 1500) return 'primary';
+    if (val >= 1000) return 'success';
+    return 'default';
   };
 
-  const sizeMap: Record<string, 'xs' | 'sm' | 'md'> = {
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md',
-  };
-
-  const config = getColor(rating);
-
   return (
     <Badge 
-      {...config}
-      size={sizeMap[size]} 
-      className={`font-mono ${className}`}
-      rounded="sm"
+      variant={getVariant(rating)}
+      size={size} 
     >
       {rating.toLocaleString()}
     </Badge>
diff --git a/apps/website/components/drivers/RatingBreakdown.tsx b/apps/website/components/drivers/RatingBreakdown.tsx
index 031269ec4..cdb0faa7e 100644
--- a/apps/website/components/drivers/RatingBreakdown.tsx
+++ b/apps/website/components/drivers/RatingBreakdown.tsx
@@ -4,7 +4,7 @@ import { RatingComponent } from '@/components/drivers/RatingComponent';
 import { RatingHistoryItem } from '@/components/drivers/RatingHistoryItem';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface RatingBreakdownProps {
diff --git a/apps/website/components/drivers/RatingComponent.tsx b/apps/website/components/drivers/RatingComponent.tsx
index 0376b7ea5..aab598f99 100644
--- a/apps/website/components/drivers/RatingComponent.tsx
+++ b/apps/website/components/drivers/RatingComponent.tsx
@@ -1,6 +1,6 @@
 
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { ProgressBar } from '@/ui/ProgressBar';
 import { Text } from '@/ui/Text';
 
diff --git a/apps/website/components/drivers/RatingHistoryItem.tsx b/apps/website/components/drivers/RatingHistoryItem.tsx
index 9493dec7a..8a587e217 100644
--- a/apps/website/components/drivers/RatingHistoryItem.tsx
+++ b/apps/website/components/drivers/RatingHistoryItem.tsx
@@ -1,6 +1,6 @@
 
 
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface RatingHistoryItemProps {
diff --git a/apps/website/components/drivers/SafetyRatingBadge.tsx b/apps/website/components/drivers/SafetyRatingBadge.tsx
index c22e44d69..44dabc9a5 100644
--- a/apps/website/components/drivers/SafetyRatingBadge.tsx
+++ b/apps/website/components/drivers/SafetyRatingBadge.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/primitives/Box';
 import { Shield } from 'lucide-react';
 
 interface SafetyRatingBadgeProps {
diff --git a/apps/website/components/drivers/SkillDistribution.tsx b/apps/website/components/drivers/SkillDistribution.tsx
index 9604d2963..2d6b87a64 100644
--- a/apps/website/components/drivers/SkillDistribution.tsx
+++ b/apps/website/components/drivers/SkillDistribution.tsx
@@ -1,8 +1,8 @@
 
 
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { BarChart3 } from 'lucide-react';
 
diff --git a/apps/website/components/drivers/SkillLevelButton.tsx b/apps/website/components/drivers/SkillLevelButton.tsx
index e44ba41d8..c3ed015aa 100644
--- a/apps/website/components/drivers/SkillLevelButton.tsx
+++ b/apps/website/components/drivers/SkillLevelButton.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/components/drivers/SkillLevelHeader.tsx b/apps/website/components/drivers/SkillLevelHeader.tsx
index c130523cd..c21fb05ff 100644
--- a/apps/website/components/drivers/SkillLevelHeader.tsx
+++ b/apps/website/components/drivers/SkillLevelHeader.tsx
@@ -1,7 +1,7 @@
 import { Badge } from '@/ui/Badge';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ChevronRight, LucideIcon, UserPlus } from 'lucide-react';
 
diff --git a/apps/website/components/errors/EnhancedErrorBoundary.tsx b/apps/website/components/errors/EnhancedErrorBoundary.tsx
index a38f51b67..77dd47e21 100644
--- a/apps/website/components/errors/EnhancedErrorBoundary.tsx
+++ b/apps/website/components/errors/EnhancedErrorBoundary.tsx
@@ -4,7 +4,7 @@ import React, { Component, ReactNode, ErrorInfo, useState, version } from 'react
 import { ApiError } from '@/lib/api/base/ApiError';
 import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { DevErrorPanel } from './DevErrorPanel';
-import { ErrorDisplay } from '@/components/shared/state/ErrorDisplay';
+import { ErrorDisplay } from '@/ui/ErrorDisplay';
 
 interface Props {
   children: ReactNode;
diff --git a/apps/website/components/errors/EnhancedFormError.tsx b/apps/website/components/errors/EnhancedFormError.tsx
index dd6a9c6e5..7f767ed6c 100644
--- a/apps/website/components/errors/EnhancedFormError.tsx
+++ b/apps/website/components/errors/EnhancedFormError.tsx
@@ -5,7 +5,7 @@ import { getErrorSeverity, isConnectivityError, isRetryable, parseApiError } fro
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
diff --git a/apps/website/components/errors/ErrorAnalyticsDashboard.tsx b/apps/website/components/errors/ErrorAnalyticsDashboard.tsx
index a3e88b1bd..cb80e698e 100644
--- a/apps/website/components/errors/ErrorAnalyticsDashboard.tsx
+++ b/apps/website/components/errors/ErrorAnalyticsDashboard.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     Activity,
diff --git a/apps/website/components/errors/ErrorDisplay.tsx b/apps/website/components/errors/ErrorDisplay.tsx
index 4349fed1d..9baa4d8dc 100644
--- a/apps/website/components/errors/ErrorDisplay.tsx
+++ b/apps/website/components/errors/ErrorDisplay.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { ApiError } from '@/lib/api/base/ApiError';
-import { ErrorDisplay as UiErrorDisplay } from '@/components/shared/state/ErrorDisplay';
+import { ErrorDisplay as UiErrorDisplay } from '@/ui/ErrorDisplay';
 
 interface ErrorDisplayProps {
   error: ApiError;
diff --git a/apps/website/components/errors/ErrorScreen.tsx b/apps/website/components/errors/ErrorScreen.tsx
index 676a15447..8d1073452 100644
--- a/apps/website/components/errors/ErrorScreen.tsx
+++ b/apps/website/components/errors/ErrorScreen.tsx
@@ -3,6 +3,7 @@
 import { Card } from '@/ui/Card';
 import { Glow } from '@/ui/Glow';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
 import { AppErrorBoundaryView } from './AppErrorBoundaryView';
 import { ErrorDetailsBlock } from './ErrorDetailsBlock';
@@ -32,13 +33,13 @@ export function ErrorScreen({ error, reset, onHome }: ErrorScreenProps) {
         description="The application encountered an unexpected state. Our telemetry has logged the incident."
       >
         {/* Error Message Summary */}
-        <div style={{ width: '100%', marginBottom: '1.5rem' }}>
+        <Stack fullWidth marginBottom={6}>
           <Card variant="outline">
             <Text font="mono" size="sm" variant="warning" block>
               {error.message || 'Unknown execution error'}
             </Text>
           </Card>
-        </div>
+        </Stack>
 
         <ErrorRecoveryActions onRetry={reset} onHome={onHome} />
         
diff --git a/apps/website/components/feed/ActivityFeed.tsx b/apps/website/components/feed/ActivityFeed.tsx
index 01b777747..6a7c324ae 100644
--- a/apps/website/components/feed/ActivityFeed.tsx
+++ b/apps/website/components/feed/ActivityFeed.tsx
@@ -9,6 +9,8 @@ import { Icon } from '@/ui/Icon';
 import { EmptyState } from '@/ui/EmptyState';
 import { Button } from '@/ui/Button';
 
+import { Stack } from '@/ui/Stack';
+
 interface FeedItem {
   id: string;
   headline: string;
@@ -32,7 +34,7 @@ export function ActivityFeed({ items, hasItems }: ActivityFeedProps) {
         actions={<Icon icon={Activity} size={5} intent="primary" />}
       />
       {hasItems ? (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <Stack gap={4}>
           {items.slice(0, 5).map((item) => (
             <ActivityItem
               key={item.id}
@@ -47,7 +49,7 @@ export function ActivityFeed({ items, hasItems }: ActivityFeedProps) {
               )}
             </ActivityItem>
           ))}
-        </div>
+        </Stack>
       ) : (
         <EmptyState
           icon={Activity}
diff --git a/apps/website/components/feed/FeedLayout.tsx b/apps/website/components/feed/FeedLayout.tsx
index db248df9c..114b280a4 100644
--- a/apps/website/components/feed/FeedLayout.tsx
+++ b/apps/website/components/feed/FeedLayout.tsx
@@ -4,8 +4,8 @@ import { UpcomingRacesSidebar } from '@/components/races/UpcomingRacesSidebar';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Section } from '@/ui/Section';
 import { Text } from '@/ui/Text';
 
diff --git a/apps/website/components/home/HomeFeatureDescription.tsx b/apps/website/components/home/HomeFeatureDescription.tsx
index 55b643181..58ffb403c 100644
--- a/apps/website/components/home/HomeFeatureDescription.tsx
+++ b/apps/website/components/home/HomeFeatureDescription.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface HomeFeatureDescriptionProps {
   lead: string;
diff --git a/apps/website/components/home/HomeFeatureSection.tsx b/apps/website/components/home/HomeFeatureSection.tsx
index 8e98b454d..a5039f7f7 100644
--- a/apps/website/components/home/HomeFeatureSection.tsx
+++ b/apps/website/components/home/HomeFeatureSection.tsx
@@ -3,8 +3,8 @@
 import React from 'react';
 import { Panel } from '@/ui/Panel';
 import { Glow } from '@/ui/Glow';
-import { Stack } from '@/ui/primitives/Stack';
-import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Section } from '@/ui/Section';
@@ -19,7 +19,6 @@ interface HomeFeatureSectionProps {
 
 /**
  * HomeFeatureSection - A semantic section highlighting a feature.
- * Refactored to use semantic HTML and Tailwind.
  */
 export function HomeFeatureSection({
   heading,
@@ -28,18 +27,6 @@ export function HomeFeatureSection({
   layout,
   accentColor = 'primary',
 }: HomeFeatureSectionProps) {
-  const accentBorderColor = {
-    primary: 'border-primary-accent/40',
-    aqua: 'border-telemetry-aqua/40',
-    amber: 'border-warning-amber/40',
-  }[accentColor];
-
-  const accentBgColor = {
-    primary: 'primary-accent',
-    aqua: 'telemetry-aqua',
-    amber: 'warning-amber',
-  }[accentColor];
-
   const glowColor = ({
     primary: 'primary',
     aqua: 'aqua',
@@ -47,7 +34,7 @@ export function HomeFeatureSection({
   }[accentColor] || 'primary') as 'primary' | 'aqua' | 'amber' | 'purple';
 
   return (
-    <Section variant="dark" py={24} borderBottom borderColor="border-gray" overflow="hidden" position="relative">
+    <Section variant="dark" padding="lg">
       <Glow 
         color={glowColor} 
         size="lg" 
@@ -56,31 +43,25 @@ export function HomeFeatureSection({
       />
       
       <Container>
-        <Grid cols={1} lgCols={2} gap={12} alignItems="center">
+        <Grid cols={{ base: 1, lg: 2 }} gap={12}>
           {/* Text Content */}
-          <Stack gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
+          <Stack gap={8}>
             <Stack gap={4}>
-              <Stack w="12" h="1" bg={accentBgColor}>{null}</Stack>
-              <Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" letterSpacing="tighter" lineHeight="none" color="text-white">
+              <Heading level={2} weight="bold">
                 {heading}
               </Heading>
             </Stack>
-            <Stack color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
+            <Stack>
               {description}
             </Stack>
           </Stack>
 
           {/* Mockup Panel */}
-          <Stack order={{ lg: layout === 'text-right' ? 1 : 2 }}>
-            <Panel padding={1} variant="dark" border={true} position="relative" group overflow="hidden">
-              <Stack bg="graphite-black" minHeight="300px" align="center" justify="center">
-                {mockup}
-              </Stack>
-              {/* Decorative corner accents */}
-              <Stack position="absolute" top="0" left="0" w="4" h="4" borderTop borderLeft borderColor={accentBorderColor} opacity={0.4}>{null}</Stack>
-              <Stack position="absolute" bottom="0" right="0" w="4" h="4" borderBottom borderRight borderColor={accentBorderColor} opacity={0.4}>{null}</Stack>
-            </Panel>
-          </Stack>
+          <Panel variant="dark">
+            <Stack align="center" justify="center">
+              {mockup}
+            </Stack>
+          </Panel>
         </Grid>
       </Container>
     </Section>
diff --git a/apps/website/components/home/HomeFooterCTA.tsx b/apps/website/components/home/HomeFooterCTA.tsx
index 384fb6a35..6568ee4d4 100644
--- a/apps/website/components/home/HomeFooterCTA.tsx
+++ b/apps/website/components/home/HomeFooterCTA.tsx
@@ -8,8 +8,8 @@ import { DiscordIcon } from '@/ui/icons/DiscordIcon';
 import { Code, Lightbulb, LucideIcon, MessageSquare, Users } from 'lucide-react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
-import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 import { Card } from '@/ui/Card';
 import { Section } from '@/ui/Section';
 import { Container } from '@/ui/Container';
@@ -18,71 +18,59 @@ export function HomeFooterCTA() {
   const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';
 
   return (
-    <Section variant="dark" py={32} borderBottom borderColor="border-gray/50" overflow="hidden" position="relative">
+    <Section variant="dark" padding="lg">
       <Glow color="primary" size="xl" position="center" opacity={0.05} />
       
       <Container>
-        <Card position="relative" overflow="hidden" variant="outline" p={{ base: 8, md: 12 }} className="bg-panel-gray/40">
-          {/* Discord brand accent */}
-          <Stack position="absolute" top={0} left={0} right={0} h="1" bg="primary-accent">{null}</Stack>
-          
-          <Stack align="center" gap={12} center>
+        <Card variant="outline">
+          <Stack align="center" gap={12}>
             {/* Header */}
             <Stack align="center" gap={6}>
-              <Stack position="relative" align="center" justify="center" w={{ base: '16', md: '20' }} h={{ base: '16', md: '20' }} bg="primary-accent/10" border borderColor="primary-accent/30">
-                <DiscordIcon color="text-primary-accent" size={40} />
-                <Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent">{null}</Stack>
-                <Stack position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent">{null}</Stack>
-              </Stack>
+              <DiscordIcon size={40} />
               
               <Stack gap={4} align="center">
-                <Heading level={2} weight="bold" color="text-white" fontSize={{ base: '2xl', md: '4xl' }} letterSpacing="tight">
+                <Heading level={2} weight="bold" align="center">
                   Join the Grid on Discord
                 </Heading>
-                <Stack w="16" h="1" bg="primary-accent">{null}</Stack>
               </Stack>
             </Stack>
 
             {/* Personal message */}
-            <Stack maxWidth="2xl" mx="auto" align="center">
-              <Stack gap={6}>
-                <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed" textAlign="center">
-                  GridPilot is a <Text as="span" color="text-white" weight="bold">solo developer project</Text> built for the community.
-                </Text>
-                <Text size="base" color="text-gray-400" weight="normal" leading="relaxed" textAlign="center">
-                  We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
-                </Text>
-              </Stack>
+            <Stack align="center" gap={6}>
+              <Text size="lg" variant="high" weight="medium" align="center">
+                GridPilot is a <Text as="span" variant="high" weight="bold">solo developer project</Text> built for the community.
+              </Text>
+              <Text size="base" variant="low" align="center">
+                We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
+              </Text>
             </Stack>
 
             {/* Benefits grid */}
-            <Stack maxWidth="4xl" mx="auto" fullWidth>
-              <Grid cols={1} mdCols={2} gap={6}>
-                <BenefitItem 
-                  icon={MessageSquare} 
-                  title="Share your pain points" 
-                  description="Tell us what frustrates you about league racing today." 
-                />
-                <BenefitItem 
-                  icon={Lightbulb} 
-                  title="Shape the product" 
-                  description="Your ideas directly influence our roadmap." 
-                />
-                <BenefitItem 
-                  icon={Users} 
-                  title="Connect with racers" 
-                  description="Join a community of like-minded competitive drivers." 
-                />
-                <BenefitItem 
-                  icon={Code} 
-                  title="Early Access" 
-                  description="Test new features before they go public." 
-                />
-              </Grid>
-            </Stack>
+            <Grid cols={{ base: 1, md: 2 }} gap={6}>
+              <BenefitItem 
+                icon={MessageSquare} 
+                title="Share your pain points" 
+                description="Tell us what frustrates you about league racing today." 
+              />
+              <BenefitItem 
+                icon={Lightbulb} 
+                title="Shape the product" 
+                description="Your ideas directly influence our roadmap." 
+              />
+              <BenefitItem 
+                icon={Users} 
+                title="Connect with racers" 
+                description="Join a community of like-minded competitive drivers." 
+              />
+              <BenefitItem 
+                icon={Code} 
+                title="Early Access" 
+                description="Test new features before they go public." 
+              />
+            </Grid>
 
             {/* CTA Button */}
-            <Stack gap={6} pt={4} align="center">
+            <Stack gap={6} align="center">
               <Button
                 as="a"
                 href={discordUrl}
@@ -90,19 +78,14 @@ export function HomeFooterCTA() {
                 rel="noopener noreferrer"
                 variant="primary"
                 size="lg"
-                px={16}
-                py={4}
-                h="auto"
                 icon={<DiscordIcon size={24} />}
               >
                 Join Discord
               </Button>
               
-              <Stack border borderStyle="dashed" borderColor="primary-accent/50" px={4} py={1}>
-                <Text size="xs" color="text-primary-accent" weight="bold" font="mono" uppercase letterSpacing="widest">
-                  Early Alpha Access Available
-                </Text>
-              </Stack>
+              <Text size="xs" variant="primary" weight="bold" font="mono" uppercase>
+                Early Alpha Access Available
+              </Text>
             </Stack>
           </Stack>
         </Card>
@@ -113,14 +96,14 @@ export function HomeFooterCTA() {
 
 function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
   return (
-    <Stack direction="row" align="start" gap={5} p={6} bg="panel-gray/20" border borderColor="border-gray" className="transition-all hover:border-primary-accent/30 group">
-      <Stack align="center" justify="center" flexShrink={0} w="10" h="10" bg="primary-accent/5" border borderColor="border-gray/50" className="transition-all group-hover:border-primary-accent/30">
-        <Icon icon={icon} size={5} color="text-primary-accent" />
+    <Card variant="dark">
+      <Stack align="start" gap={5}>
+        <Icon icon={icon} size={5} intent="primary" />
+        <Stack gap={2}>
+          <Text size="base" weight="bold" variant="high">{title}</Text>
+          <Text size="sm" variant="low">{description}</Text>
+        </Stack>
       </Stack>
-      <Stack gap={2}>
-        <Text size="base" weight="bold" color="text-white" letterSpacing="wide">{title}</Text>
-        <Text size="sm" color="text-gray-400" leading="relaxed">{description}</Text>
-      </Stack>
-    </Stack>
+    </Card>
   );
 }
diff --git a/apps/website/components/home/HomeHeader.tsx b/apps/website/components/home/HomeHeader.tsx
index 76cbe31ee..e2914981a 100644
--- a/apps/website/components/home/HomeHeader.tsx
+++ b/apps/website/components/home/HomeHeader.tsx
@@ -5,7 +5,9 @@ import { Container } from '@/ui/Container';
 import { Glow } from '@/ui/Glow';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
+import { Section } from '@/ui/Section';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 
 interface HomeHeaderProps {
   title: string;
@@ -23,7 +25,6 @@ interface HomeHeaderProps {
 
 /**
  * HomeHeader - Semantic hero section for the landing page.
- * Follows "Precision Racing Minimal" theme.
  */
 export function HomeHeader({
   title,
@@ -33,43 +34,29 @@ export function HomeHeader({
   secondaryAction,
 }: HomeHeaderProps) {
   return (
-    <Stack as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
+    <Section variant="dark" padding="lg">
       <Glow color="primary" size="xl" position="top-right" opacity={0.1} />
       
       <Container>
-        <Stack maxWidth="4xl" fullWidth>
-          <Stack direction="row" align="center" gap={3} borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" bg="primary-accent/5" px={4} py={1} mb={8}>
-            <Text size="xs" weight="bold" uppercase letterSpacing="0.3em" color="text-primary-accent">
-              {subtitle}
-            </Text>
-          </Stack>
+        <Stack gap={8}>
+          <Text size="xs" weight="bold" uppercase variant="primary">
+            {subtitle}
+          </Text>
           
-          <Heading 
-            level={1} 
-            fontSize={{ base: '5xl', md: '7xl', lg: '8xl' }} 
-            weight="bold" 
-            color="text-white" 
-            letterSpacing="tighter" 
-            lineHeight="0.9" 
-            mb={8}
-          >
+          <Heading level={1} weight="bold">
             {title}
           </Heading>
           
-          <Stack borderLeft borderStyle="solid" borderColor="border-gray" pl={8} mb={12} maxWidth="2xl">
-            <Text size="lg" color="text-gray-400" leading="relaxed" opacity={0.8}>
-              {description}
-            </Text>
-          </Stack>
+          <Text size="lg" variant="low">
+            {description}
+          </Text>
 
-          <Stack direction={{ base: 'col', md: 'row' }} gap={4}>
+          <ButtonGroup gap={4}>
             <Button
               as="a"
               href={primaryAction.href}
               variant="primary"
-              h="14"
-              px={12}
-              fontSize="xs"
+              size="lg"
             >
               {primaryAction.label}
             </Button>
@@ -77,18 +64,13 @@ export function HomeHeader({
               as="a"
               href={secondaryAction.href}
               variant="secondary"
-              h="14"
-              px={12}
-              fontSize="xs"
-              bg="transparent"
-              borderColor="border-gray"
-              hoverBorderColor="primary-accent/50"
+              size="lg"
             >
               {secondaryAction.label}
             </Button>
-          </Stack>
+          </ButtonGroup>
         </Stack>
       </Container>
-    </Stack>
+    </Section>
   );
 }
diff --git a/apps/website/components/home/HomeStatsStrip.tsx b/apps/website/components/home/HomeStatsStrip.tsx
index c0450d207..b5288557a 100644
--- a/apps/website/components/home/HomeStatsStrip.tsx
+++ b/apps/website/components/home/HomeStatsStrip.tsx
@@ -4,58 +4,40 @@ import React from 'react';
 import { MetricCard } from '@/ui/MetricCard';
 import { Activity, Users, Trophy, Calendar } from 'lucide-react';
 import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
 
 /**
  * HomeStatsStrip - A thin strip showing some status or quick info.
  * Part of the "Telemetry-workspace" feel.
- * Refactored to use semantic HTML and Tailwind.
  */
 export function HomeStatsStrip() {
   return (
-    <Stack bg="graphite-black" borderBottom borderTop borderColor="border-gray/30" py={0}>
-      <Container>
-        <Grid cols={2} mdCols={4} gap={0} borderLeft borderRight borderColor="border-gray/30">
-          <MetricCard 
-            label="Active Drivers" 
-            value="1,284" 
-            icon={Users} 
-            trend={{ value: 12, isPositive: true }}
-            border={false}
-            bg="transparent"
-          />
-          <Stack borderLeft borderColor="border-gray/30">
-            <MetricCard 
-              label="Live Sessions" 
-              value="42" 
-              icon={Activity} 
-              color="text-telemetry-aqua"
-              border={false}
-              bg="transparent"
-            />
-          </Stack>
-          <Stack borderLeft borderColor="border-gray/30">
-            <MetricCard 
-              label="Total Races" 
-              value="15,402" 
-              icon={Trophy} 
-              color="text-warning-amber"
-              border={false}
-              bg="transparent"
-            />
-          </Stack>
-          <Stack borderLeft borderColor="border-gray/30">
-            <MetricCard 
-              label="Next Event" 
-              value="14:00" 
-              icon={Calendar} 
-              border={false}
-              bg="transparent"
-            />
-          </Stack>
-        </Grid>
-      </Container>
-    </Stack>
+    <Container>
+      <Grid cols={{ base: 2, md: 4 }} gap={4}>
+        <MetricCard 
+          label="Active Drivers" 
+          value="1,284" 
+          icon={Users} 
+          trend={{ value: 12, isPositive: true }}
+        />
+        <MetricCard 
+          label="Live Sessions" 
+          value="42" 
+          icon={Activity} 
+          intent="telemetry"
+        />
+        <MetricCard 
+          label="Total Races" 
+          value="15,402" 
+          icon={Trophy} 
+          intent="warning"
+        />
+        <MetricCard 
+          label="Next Event" 
+          value="14:00" 
+          icon={Calendar} 
+        />
+      </Grid>
+    </Container>
   );
 }
diff --git a/apps/website/components/home/LeagueSummaryPanel.tsx b/apps/website/components/home/LeagueSummaryPanel.tsx
index 26cfeb1e0..3c15106c9 100644
--- a/apps/website/components/home/LeagueSummaryPanel.tsx
+++ b/apps/website/components/home/LeagueSummaryPanel.tsx
@@ -2,9 +2,9 @@
 
 import { LeagueCard } from '@/components/leagues/LeagueCard';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
 
 interface League {
   id: string;
diff --git a/apps/website/components/home/QuickLinksPanel.tsx b/apps/website/components/home/QuickLinksPanel.tsx
index e2813f712..873d5e6ad 100644
--- a/apps/website/components/home/QuickLinksPanel.tsx
+++ b/apps/website/components/home/QuickLinksPanel.tsx
@@ -4,13 +4,11 @@ import { routes } from '@/lib/routing/RouteConfig';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { Plus, Search, Shield, Users } from 'lucide-react';
 
 /**
  * QuickLinksPanel - Semantic quick actions bar.
- * Replaces HomeQuickActions with a more semantic implementation.
  */
 export function QuickLinksPanel() {
   const links = [
@@ -21,34 +19,20 @@ export function QuickLinksPanel() {
   ];
 
   return (
-    <Stack as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
-      <Container>
-        <Stack direction="row" wrap justify="center" gap={4}>
-          {links.map((link) => (
-            <Button
-              key={link.label}
-              as="a"
-              href={link.href}
-              variant="secondary"
-              px={6}
-              bg="graphite-black"
-              borderColor="border-gray/50"
-              className="flex items-center gap-3 transition-all hover:border-primary-accent/50 group"
-            >
-              <Icon 
-                icon={link.icon} 
-                size={4} 
-                color="text-gray-500"
-                groupHoverTextColor="primary-accent"
-                transition
-              />
-              <Text size="xs" weight="bold" uppercase letterSpacing="widest">
-                {link.label}
-              </Text>
-            </Button>
-          ))}
-        </Stack>
-      </Container>
-    </Stack>
+    <Container>
+      <ButtonGroup alignment="center" gap={4} marginTop={8}>
+        {links.map((link) => (
+          <Button
+            key={link.label}
+            as="a"
+            href={link.href}
+            variant="secondary"
+            icon={<Icon icon={link.icon} size={4} intent="low" />}
+          >
+            {link.label}
+          </Button>
+        ))}
+      </ButtonGroup>
+    </Container>
   );
 }
diff --git a/apps/website/components/home/RecentRacesPanel.tsx b/apps/website/components/home/RecentRacesPanel.tsx
index 6a4f5cdb7..eb653c402 100644
--- a/apps/website/components/home/RecentRacesPanel.tsx
+++ b/apps/website/components/home/RecentRacesPanel.tsx
@@ -5,7 +5,7 @@ import { routes } from '@/lib/routing/RouteConfig';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
 import { Panel } from '@/ui/Panel';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface Race {
diff --git a/apps/website/components/home/TeamSummaryPanel.tsx b/apps/website/components/home/TeamSummaryPanel.tsx
index 6164bc6c2..38d5ad4eb 100644
--- a/apps/website/components/home/TeamSummaryPanel.tsx
+++ b/apps/website/components/home/TeamSummaryPanel.tsx
@@ -2,9 +2,9 @@
 
 import { TeamCard } from '@/components/teams/TeamCard';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
 
 interface Team {
   id: string;
diff --git a/apps/website/components/landing/AlternatingSection.tsx b/apps/website/components/landing/AlternatingSection.tsx
index 3ff3bb9f1..dec164936 100644
--- a/apps/website/components/landing/AlternatingSection.tsx
+++ b/apps/website/components/landing/AlternatingSection.tsx
@@ -1,17 +1,16 @@
-import { useParallax } from "@/hooks/useScrollProgress";
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 import { Text } from '@/ui/Text';
-import { useRef } from 'react';
+import { Section } from '@/ui/Section';
+import { Panel } from '@/ui/Panel';
 
 interface AlternatingSectionProps {
   heading: string;
   description: string | React.ReactNode;
   mockup: React.ReactNode;
   layout: 'text-left' | 'text-right';
-  backgroundImage?: string;
-  backgroundVideo?: string;
 }
 
 export function AlternatingSection({
@@ -19,112 +18,49 @@ export function AlternatingSection({
   description,
   mockup,
   layout,
-  backgroundImage,
-  backgroundVideo
 }: AlternatingSectionProps) {
-  const sectionRef = useRef<HTMLElement>(null);
-  const bgParallax = useParallax(sectionRef, 0.1);
-
-  return (
-    <Stack 
-      as="section" 
-      ref={sectionRef} 
-      position="relative" 
-      overflow="hidden" 
-      bg="graphite-black" 
-      py={{ base: 20, md: 32 }}
-      className="border-b border-border-gray"
-    >
-      {backgroundVideo && (
-        <Stack
-          position="absolute"
-          inset="0"
-          fullWidth
-          fullHeight
-          overflow="hidden"
-        >
-          <Stack
-            as="video"
-            autoPlay
-            loop
-            muted
-            playsInline
-            fullWidth
-            fullHeight
-            objectFit="cover"
-            opacity={0.1}
-          >
-            <Stack as="source" src={backgroundVideo} type="video/mp4" />
-          </Stack>
-          {/* Dark overlay to ensure readability */}
-          <Stack position="absolute" inset="0" bg="linear-gradient(to bottom, #0C0D0F, transparent, #0C0D0F)" />
-        </Stack>
-      )}
-      {backgroundImage && !backgroundVideo && (
-        <Stack
-          position="absolute"
-          inset="0"
-          fullWidth
-          fullHeight
-          overflow="hidden"
-        >
-          <Stack
-            position="absolute"
-            inset="0"
-            bg={`url(${backgroundImage})`}
-            backgroundSize="cover"
-            backgroundPosition="center"
-            opacity={0.1}
-            style={{ transform: `translateY(${bgParallax * 0.3}px)` }}
-          />
-          {/* Dark overlay to ensure readability */}
-          <Stack position="absolute" inset="0" bg="linear-gradient(to bottom, #0C0D0F, transparent, #0C0D0F)" />
-        </Stack>
-      )}
-      
-      <Container size="lg" position="relative" zIndex={10}>
-        <Stack display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 12, lg: 24 }} alignItems="center">
-          {/* Text Content */}
-          <Stack
-            display="flex"
-            flexDirection="column"
-            gap={8}
-            order={{ lg: layout === 'text-right' ? 2 : 1 }}
-          >
-            <Stack gap={4}>
-              <Stack w="8" h="1" bg="primary-accent" />
-              <Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" className="tracking-tighter uppercase leading-none">
-                {heading}
-              </Heading>
-            </Stack>
-            <Stack className="text-gray-500 border-l border-border-gray/20 pl-6">
-              {typeof description === 'string' ? (
-                <Text size="lg" leading="relaxed" weight="normal">{description}</Text>
-              ) : (
-                description
-              )}
-            </Stack>
-          </Stack>
-
-          {/* Mockup */}
-          <Stack
-            position="relative"
-            order={{ lg: layout === 'text-right' ? 1 : 2 }}
-            className="bg-panel-gray/20 border border-border-gray/30 rounded-none p-1 shadow-2xl group"
-          >
-            <Stack 
-              fullWidth 
-              minHeight={{ base: '240px', md: '380px' }} 
-              className="overflow-hidden rounded-none border border-border-gray/20 bg-graphite-black"
-            >
-              {mockup}
-            </Stack>
-            {/* Decorative corner accents */}
-            <Stack position="absolute" top="-1px" left="-1px" w="3" h="3" borderTop borderLeft borderColor="primary-accent/40" />
-            <Stack position="absolute" bottom="-1px" right="-1px" w="3" h="3" borderBottom borderRight borderColor="primary-accent/40" />
-          </Stack>
-        </Stack>
-      </Container>
+  const textContent = (
+    <Stack gap={8}>
+      <Stack gap={4}>
+        <Heading level={2} weight="bold">
+          {heading}
+        </Heading>
+      </Stack>
+      <Stack>
+        {typeof description === 'string' ? (
+          <Text size="lg" variant="low">{description}</Text>
+        ) : (
+          description
+        )}
+      </Stack>
     </Stack>
   );
+
+  const mockupContent = (
+    <Panel variant="dark">
+      <Stack align="center" justify="center">
+        {mockup}
+      </Stack>
+    </Panel>
+  );
+
+  return (
+    <Section variant="dark" padding="lg">
+      <Container size="lg">
+        <Grid cols={{ base: 1, lg: 2 }} gap={12}>
+          {layout === 'text-left' ? (
+            <>
+              {textContent}
+              {mockupContent}
+            </>
+          ) : (
+            <>
+              {mockupContent}
+              {textContent}
+            </>
+          )}
+        </Grid>
+      </Container>
+    </Section>
+  );
 }
diff --git a/apps/website/components/landing/BenefitCard.tsx b/apps/website/components/landing/BenefitCard.tsx
index 451f6e957..ee0f25435 100644
--- a/apps/website/components/landing/BenefitCard.tsx
+++ b/apps/website/components/landing/BenefitCard.tsx
@@ -1,9 +1,9 @@
 
 
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Surface } from '@/ui/primitives/Surface';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { motion, useReducedMotion } from 'framer-motion';
 import { LucideIcon } from 'lucide-react';
diff --git a/apps/website/components/landing/DiscoverySection.tsx b/apps/website/components/landing/DiscoverySection.tsx
index f633dcc8f..42a376dde 100644
--- a/apps/website/components/landing/DiscoverySection.tsx
+++ b/apps/website/components/landing/DiscoverySection.tsx
@@ -1,10 +1,10 @@
 'use client';
 
 import { routes } from '@/lib/routing/RouteConfig';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
 import { Text } from '@/ui/Text';
diff --git a/apps/website/components/landing/FAQ.tsx b/apps/website/components/landing/FAQ.tsx
index cc82525f7..9b7e4c3a9 100644
--- a/apps/website/components/landing/FAQ.tsx
+++ b/apps/website/components/landing/FAQ.tsx
@@ -2,7 +2,7 @@
 
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion } from 'framer-motion';
 import { ChevronDown } from 'lucide-react';
diff --git a/apps/website/components/landing/FeatureGrid.tsx b/apps/website/components/landing/FeatureGrid.tsx
index 9422f706a..e7ec48788 100644
--- a/apps/website/components/landing/FeatureGrid.tsx
+++ b/apps/website/components/landing/FeatureGrid.tsx
@@ -9,7 +9,7 @@ import { StandingsTableMockup } from '@/components/mockups/StandingsTableMockup'
 import { TeamCompetitionMockup } from '@/components/mockups/TeamCompetitionMockup';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Section } from '@/ui/Section';
 import { Text } from '@/ui/Text';
 
diff --git a/apps/website/components/landing/FeatureItem.tsx b/apps/website/components/landing/FeatureItem.tsx
index b37b93efa..b746605fa 100644
--- a/apps/website/components/landing/FeatureItem.tsx
+++ b/apps/website/components/landing/FeatureItem.tsx
@@ -1,5 +1,5 @@
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/components/landing/LandingHero.tsx b/apps/website/components/landing/LandingHero.tsx
index d0a07e7df..748cbfa8c 100644
--- a/apps/website/components/landing/LandingHero.tsx
+++ b/apps/website/components/landing/LandingHero.tsx
@@ -3,7 +3,7 @@ import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Glow } from '@/ui/Glow';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { useRef } from 'react';
 
diff --git a/apps/website/components/layout/AuthedNav.tsx b/apps/website/components/layout/AuthedNav.tsx
index 2a0dbfdef..78b700c0f 100644
--- a/apps/website/components/layout/AuthedNav.tsx
+++ b/apps/website/components/layout/AuthedNav.tsx
@@ -1,5 +1,5 @@
 import { routes } from '@/lib/routing/RouteConfig';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Calendar, Home, Layout, Settings, Trophy, Users } from 'lucide-react';
 import { NavLink } from './NavLink';
 
diff --git a/apps/website/components/layout/HeaderActions.tsx b/apps/website/components/layout/HeaderActions.tsx
index 147e1f3ce..f72569ae0 100644
--- a/apps/website/components/layout/HeaderActions.tsx
+++ b/apps/website/components/layout/HeaderActions.tsx
@@ -1,6 +1,6 @@
 import { routes } from '@/lib/routing/RouteConfig';
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { LogIn, UserPlus } from 'lucide-react';
 
 interface HeaderActionsProps {
diff --git a/apps/website/components/layout/PublicNav.tsx b/apps/website/components/layout/PublicNav.tsx
index 47e9ed0e8..3fe644905 100644
--- a/apps/website/components/layout/PublicNav.tsx
+++ b/apps/website/components/layout/PublicNav.tsx
@@ -1,5 +1,5 @@
 import { routes } from '@/lib/routing/RouteConfig';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Calendar, Home, Layout, Trophy, Users } from 'lucide-react';
 import { NavLink } from './NavLink';
 
diff --git a/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx b/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
index 35b4ee22b..248ff0966 100644
--- a/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
+++ b/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
@@ -1,10 +1,10 @@
 import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
 import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
+import { Box } from '@/ui/Box';
 import { Image } from '@/ui/Image';
 import { LeaderboardList } from '@/ui/LeaderboardList';
 import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Trophy } from 'lucide-react';
 
diff --git a/apps/website/components/leaderboards/LeaderboardHeader.tsx b/apps/website/components/leaderboards/LeaderboardHeader.tsx
index 61141ff2e..e1c974987 100644
--- a/apps/website/components/leaderboards/LeaderboardHeader.tsx
+++ b/apps/website/components/leaderboards/LeaderboardHeader.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ArrowLeft, LucideIcon } from 'lucide-react';
 import React from 'react';
diff --git a/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx b/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx
index f836a99d0..70fdfe0e9 100644
--- a/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx
+++ b/apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx
@@ -1,8 +1,8 @@
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { ArrowLeft, LucideIcon } from 'lucide-react';
 import React from 'react';
diff --git a/apps/website/components/leaderboards/LeaderboardPodium.tsx b/apps/website/components/leaderboards/LeaderboardPodium.tsx
index 2a7feee96..5e2569e39 100644
--- a/apps/website/components/leaderboards/LeaderboardPodium.tsx
+++ b/apps/website/components/leaderboards/LeaderboardPodium.tsx
@@ -1,7 +1,7 @@
 import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
 import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface PodiumDriver {
diff --git a/apps/website/components/leaderboards/LeaderboardTableShell.tsx b/apps/website/components/leaderboards/LeaderboardTableShell.tsx
index 2cef7e069..e4673befa 100644
--- a/apps/website/components/leaderboards/LeaderboardTableShell.tsx
+++ b/apps/website/components/leaderboards/LeaderboardTableShell.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import React from 'react';
 
diff --git a/apps/website/components/leaderboards/LeaderboardsHero.tsx b/apps/website/components/leaderboards/LeaderboardsHero.tsx
index eca0b66ca..224053c24 100644
--- a/apps/website/components/leaderboards/LeaderboardsHero.tsx
+++ b/apps/website/components/leaderboards/LeaderboardsHero.tsx
@@ -4,8 +4,8 @@ import { Button } from '@/ui/Button';
 import { DecorativeBlur } from '@/ui/DecorativeBlur';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Award, Trophy, Users } from 'lucide-react';
 
diff --git a/apps/website/components/leaderboards/MedalBadge.tsx b/apps/website/components/leaderboards/MedalBadge.tsx
index b3e2a9918..e01758c96 100644
--- a/apps/website/components/leaderboards/MedalBadge.tsx
+++ b/apps/website/components/leaderboards/MedalBadge.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Crown } from 'lucide-react';
 
diff --git a/apps/website/components/leaderboards/RankingList.tsx b/apps/website/components/leaderboards/RankingList.tsx
index 4ae4527ee..f15187ae6 100644
--- a/apps/website/components/leaderboards/RankingList.tsx
+++ b/apps/website/components/leaderboards/RankingList.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { ReactNode } from 'react';
 
 interface RankingListProps {
diff --git a/apps/website/components/leaderboards/RankingListItem.tsx b/apps/website/components/leaderboards/RankingListItem.tsx
index 8b2e6aa05..7eb1a1db8 100644
--- a/apps/website/components/leaderboards/RankingListItem.tsx
+++ b/apps/website/components/leaderboards/RankingListItem.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface RankingListItemProps {
diff --git a/apps/website/components/leaderboards/RankingRow.tsx b/apps/website/components/leaderboards/RankingRow.tsx
index 08cef236c..954bb27ae 100644
--- a/apps/website/components/leaderboards/RankingRow.tsx
+++ b/apps/website/components/leaderboards/RankingRow.tsx
@@ -1,6 +1,6 @@
 import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { TableCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { DeltaChip } from './DeltaChip';
diff --git a/apps/website/components/leaderboards/RankingsPodium.tsx b/apps/website/components/leaderboards/RankingsPodium.tsx
index 7d578c6a1..a6660e8fb 100644
--- a/apps/website/components/leaderboards/RankingsPodium.tsx
+++ b/apps/website/components/leaderboards/RankingsPodium.tsx
@@ -1,7 +1,7 @@
 
 
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface PodiumDriver {
diff --git a/apps/website/components/leaderboards/RankingsTable.tsx b/apps/website/components/leaderboards/RankingsTable.tsx
index fe74fd011..53ca2d5ee 100644
--- a/apps/website/components/leaderboards/RankingsTable.tsx
+++ b/apps/website/components/leaderboards/RankingsTable.tsx
@@ -2,7 +2,7 @@
 
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { Medal } from 'lucide-react';
diff --git a/apps/website/components/leaderboards/SeasonSelector.tsx b/apps/website/components/leaderboards/SeasonSelector.tsx
index 6df957ec8..f03c9c581 100644
--- a/apps/website/components/leaderboards/SeasonSelector.tsx
+++ b/apps/website/components/leaderboards/SeasonSelector.tsx
@@ -1,5 +1,5 @@
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { Calendar } from 'lucide-react';
diff --git a/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx b/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
index 03441a68b..0584a163c 100644
--- a/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
+++ b/apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
@@ -1,10 +1,10 @@
 import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { getMediaUrl } from '@/lib/utilities/media';
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
 import { LeaderboardList } from '@/ui/LeaderboardList';
 import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
 
diff --git a/apps/website/components/leagues/AvailableLeagueCard.tsx b/apps/website/components/leagues/AvailableLeagueCard.tsx
index c9f82795e..8b8491bc0 100644
--- a/apps/website/components/leagues/AvailableLeagueCard.tsx
+++ b/apps/website/components/leagues/AvailableLeagueCard.tsx
@@ -6,7 +6,8 @@ import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
 import { Text } from '@/ui/Text';
 import { CheckCircle2, Clock, Star } from 'lucide-react';
 
@@ -39,9 +40,9 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
   };
 
   const statusConfig = {
-    active: { color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Active Season' },
-    upcoming: { color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Starting Soon' },
-    completed: { color: 'text-gray-400', bgColor: 'bg-gray-400/10', label: 'Season Ended' },
+    active: { intent: 'success' as const, label: 'Active Season' },
+    upcoming: { intent: 'warning' as const, label: 'Starting Soon' },
+    completed: { intent: 'default' as const, label: 'Season Ended' },
   };
 
   const config = tierConfig[league.tier];
@@ -51,41 +52,38 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
     <Card>
       <Stack gap={4}>
         {/* Header */}
-        <Stack direction="row" align="start" justify="between">
-          <Stack flexGrow={1}>
-            <Stack direction="row" align="center" gap={2} mb={1} wrap>
+        <Stack align="start" justify="between">
+          <Stack>
+            <Stack gap={2}>
               <Badge variant="primary">{config.icon} {config.label}</Badge>
-              <Stack px={2} py={0.5} rounded="full" className={status.bgColor}>
-                <Text size="xs" weight="medium" className={status.color}>{status.label}</Text>
-              </Stack>
+              <Badge variant={status.intent}>{status.label}</Badge>
             </Stack>
             <Heading level={3}>{league.name}</Heading>
-            <Text size="sm" color="text-gray-500" block mt={1}>{league.game}</Text>
+            <Text size="sm" variant="low">{league.game}</Text>
           </Stack>
-          <Stack px={2} py={1} rounded="lg" bg="bg-iron-gray/50">
-            <Stack direction="row" align="center" gap={1}>
-              <Icon icon={Star} size={3.5} color="text-yellow-400" />
-              <Text size="sm" weight="medium" color="text-white">{league.rating}</Text>
+          <Badge variant="default">
+            <Stack align="center" gap={1}>
+              <Icon icon={Star} size={3.5} intent="warning" />
+              <Text size="sm" weight="medium" variant="high">{league.rating}</Text>
             </Stack>
-          </Stack>
+          </Badge>
         </Stack>
 
         {/* Description */}
-        <Text size="sm" color="text-gray-400" block truncate>{league.description}</Text>
+        <Text size="sm" variant="low">{league.description}</Text>
 
         {/* Stats Grid */}
-        <Stack display="grid" gridCols={3} gap={2}>
+        <Grid cols={3} gap={2}>
           <StatItem label="Drivers" value={league.drivers} />
           <StatItem label="Avg Views" value={league.formattedAvgViews} />
-          <StatItem label="CPM" value={league.formattedCpm} color="text-performance-green" />
-        </Stack>
+          <StatItem label="CPM" value={league.formattedCpm} intent="success" />
+        </Grid>
 
         {/* Next Race */}
         {league.nextRace && (
-          <Stack direction="row" align="center" gap={2}>
-            <Icon icon={Clock} size={4} color="text-gray-400" />
-            <Text size="sm" color="text-gray-400">Next:</Text>
-            <Text size="sm" color="text-white">{league.nextRace}</Text>
+          <Stack align="center" gap={2}>
+            <Icon icon={Clock} size={4} intent="low" />
+            <Text size="sm" variant="low">Next: {league.nextRace}</Text>
           </Stack>
         )}
 
@@ -104,22 +102,18 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
         </Stack>
 
         {/* Actions */}
-        <Stack direction="row" gap={2}>
-          <Stack flexGrow={1}>
-            <Link href={`/sponsor/leagues/${league.id}`} block>
-              <Button variant="secondary" fullWidth size="sm">
-                View Details
+        <Stack gap={2}>
+          <Link href={`/sponsor/leagues/${league.id}`}>
+            <Button variant="secondary" fullWidth size="sm">
+              View Details
+            </Button>
+          </Link>
+          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
+            <Link href={`/sponsor/leagues/${league.id}?action=sponsor`}>
+              <Button variant="primary" fullWidth size="sm">
+                Sponsor
               </Button>
             </Link>
-          </Stack>
-          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
-            <Stack flexGrow={1}>
-              <Link href={`/sponsor/leagues/${league.id}?action=sponsor`} block>
-                <Button variant="primary" fullWidth size="sm">
-                  Sponsor
-                </Button>
-              </Link>
-            </Stack>
           )}
         </Stack>
       </Stack>
@@ -127,34 +121,36 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
   );
 }
 
-function StatItem({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
+function StatItem({ label, value, intent = 'high' }: { label: string, value: string | number, intent?: 'high' | 'success' }) {
   return (
-    <Stack p={2} bg="bg-iron-gray/50" rounded="lg" textAlign="center">
-      <Text weight="bold" className={color}>{value}</Text>
-      <Text size="xs" color="text-gray-500" block mt={1}>{label}</Text>
-    </Stack>
+    <Card variant="dark">
+      <Stack align="center">
+        <Text weight="bold" variant={intent}>{value}</Text>
+        <Text size="xs" variant="low" uppercase>{label}</Text>
+      </Stack>
+    </Card>
   );
 }
 
 function SlotRow({ label, available, price }: { label: string, available: boolean, price: string }) {
   return (
-    <Stack p={2} rounded="lg" bg="bg-iron-gray/30">
-      <Stack direction="row" align="center" justify="between">
-        <Stack direction="row" align="center" gap={2}>
-          <Stack width="2.5" height="2.5" rounded="full" bg={available ? 'bg-performance-green' : 'bg-error-red'} />
-          <Text size="sm" color="text-gray-300">{label}</Text>
+    <Card variant="dark">
+      <Stack align="center" justify="between">
+        <Stack align="center" gap={2}>
+          <Icon icon={CheckCircle2} size={3} intent={available ? 'success' : 'critical'} />
+          <Text size="sm" variant="low">{label}</Text>
         </Stack>
         <Stack>
           {available ? (
-            <Text size="sm" weight="semibold" color="text-white">{price}</Text>
+            <Text size="sm" weight="semibold" variant="high">{price}</Text>
           ) : (
-            <Stack direction="row" align="center" gap={1}>
-              <Icon icon={CheckCircle2} size={3} color="text-gray-500" />
-              <Text size="sm" color="text-gray-500">Filled</Text>
+            <Stack align="center" gap={1}>
+              <Icon icon={CheckCircle2} size={3} intent="low" />
+              <Text size="sm" variant="low">Filled</Text>
             </Stack>
           )}
         </Stack>
       </Stack>
-    </Stack>
+    </Card>
   );
 }
diff --git a/apps/website/components/leagues/ChampionshipStandings.tsx b/apps/website/components/leagues/ChampionshipStandings.tsx
index 0b1feb8c0..23473cc90 100644
--- a/apps/website/components/leagues/ChampionshipStandings.tsx
+++ b/apps/website/components/leagues/ChampionshipStandings.tsx
@@ -6,7 +6,7 @@ import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { SummaryItem } from '@/ui/SummaryItem';
 import { Text } from '@/ui/Text';
 import { Award, ChevronRight } from 'lucide-react';
diff --git a/apps/website/components/leagues/ChampionshipStandingsList.tsx b/apps/website/components/leagues/ChampionshipStandingsList.tsx
index ad4bd7091..1becffa90 100644
--- a/apps/website/components/leagues/ChampionshipStandingsList.tsx
+++ b/apps/website/components/leagues/ChampionshipStandingsList.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { ReactNode } from 'react';
 
 interface ChampionshipStandingsListProps {
diff --git a/apps/website/components/leagues/EndRaceModal.tsx b/apps/website/components/leagues/EndRaceModal.tsx
index 498c272a5..57ae58207 100644
--- a/apps/website/components/leagues/EndRaceModal.tsx
+++ b/apps/website/components/leagues/EndRaceModal.tsx
@@ -4,7 +4,7 @@ import { InfoBanner } from '@/ui/InfoBanner';
 import { Modal } from '@/ui/Modal';
 import { ModalIcon } from '@/ui/ModalIcon';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { TestTube } from 'lucide-react';
 
 interface EndRaceModalProps {
diff --git a/apps/website/components/leagues/JoinLeagueButton.tsx b/apps/website/components/leagues/JoinLeagueButton.tsx
index 847d81de5..80d3f35bd 100644
--- a/apps/website/components/leagues/JoinLeagueButton.tsx
+++ b/apps/website/components/leagues/JoinLeagueButton.tsx
@@ -3,9 +3,9 @@
 import { useLeagueMembershipMutation } from "@/hooks/league/useLeagueMembershipMutation";
 import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
 import { getMembership } from '@/lib/leagueMembership';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Modal } from '@/ui/Modal';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { useState } from 'react';
 
diff --git a/apps/website/components/leagues/JoinRequestItem.tsx b/apps/website/components/leagues/JoinRequestItem.tsx
index 53df15a78..550450c04 100644
--- a/apps/website/components/leagues/JoinRequestItem.tsx
+++ b/apps/website/components/leagues/JoinRequestItem.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface JoinRequestItemProps {
diff --git a/apps/website/components/leagues/JoinRequestList.tsx b/apps/website/components/leagues/JoinRequestList.tsx
index bb9da0fc0..d346d6faa 100644
--- a/apps/website/components/leagues/JoinRequestList.tsx
+++ b/apps/website/components/leagues/JoinRequestList.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { ReactNode } from 'react';
 
 interface JoinRequestListProps {
diff --git a/apps/website/components/leagues/LeagueActivityFeed.tsx b/apps/website/components/leagues/LeagueActivityFeed.tsx
index ab9a5230c..abdbde462 100644
--- a/apps/website/components/leagues/LeagueActivityFeed.tsx
+++ b/apps/website/components/leagues/LeagueActivityFeed.tsx
@@ -3,7 +3,7 @@ import { useLeagueRaces } from "@/hooks/league/useLeagueRaces";
 import { LeagueActivityService } from '@/lib/services/league/LeagueActivityService';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { AlertTriangle, Calendar, Flag, Shield, UserMinus, UserPlus } from 'lucide-react';
 import { useMemo } from 'react';
 
diff --git a/apps/website/components/leagues/LeagueBasicsSection.tsx b/apps/website/components/leagues/LeagueBasicsSection.tsx
index f64addd52..a2ecf651f 100644
--- a/apps/website/components/leagues/LeagueBasicsSection.tsx
+++ b/apps/website/components/leagues/LeagueBasicsSection.tsx
@@ -2,12 +2,12 @@
 
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import { Button } from '@/ui/Button';
-import { Grid } from '@/ui/primitives/Grid';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
 import { Check, FileText, Gamepad2 } from 'lucide-react';
diff --git a/apps/website/components/leagues/LeagueChampionshipStats.tsx b/apps/website/components/leagues/LeagueChampionshipStats.tsx
index fbb2f14f6..bc02c5342 100644
--- a/apps/website/components/leagues/LeagueChampionshipStats.tsx
+++ b/apps/website/components/leagues/LeagueChampionshipStats.tsx
@@ -1,6 +1,6 @@
 import { HorizontalStatCard } from '@/ui/HorizontalStatCard';
 import { Text } from '@/ui/Text';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 
 interface LeagueChampionshipStatsProps {
   standings: Array<{
diff --git a/apps/website/components/leagues/LeagueCover.tsx b/apps/website/components/leagues/LeagueCover.tsx
index 78377a0f1..b65a51731 100644
--- a/apps/website/components/leagues/LeagueCover.tsx
+++ b/apps/website/components/leagues/LeagueCover.tsx
@@ -1,6 +1,6 @@
 import { SafeImage } from '@/components/shared/SafeImage';
+import { Box } from '@/ui/Box';
 import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
-import { Box } from '@/ui/primitives/Box';
 
 export interface LeagueCoverProps {
   leagueId?: string;
diff --git a/apps/website/components/leagues/LeagueDecalPlacementEditor.tsx b/apps/website/components/leagues/LeagueDecalPlacementEditor.tsx
index 3ebb264ca..32f2e9e89 100644
--- a/apps/website/components/leagues/LeagueDecalPlacementEditor.tsx
+++ b/apps/website/components/leagues/LeagueDecalPlacementEditor.tsx
@@ -4,7 +4,7 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     Image as ImageIcon,
diff --git a/apps/website/components/leagues/LeagueHeader.tsx b/apps/website/components/leagues/LeagueHeader.tsx
index 33d2cae92..f49ca2e4f 100644
--- a/apps/website/components/leagues/LeagueHeader.tsx
+++ b/apps/website/components/leagues/LeagueHeader.tsx
@@ -2,7 +2,7 @@
 
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ReactNode } from 'react';
 
diff --git a/apps/website/components/leagues/LeagueHeaderPanel.tsx b/apps/website/components/leagues/LeagueHeaderPanel.tsx
index 6e8923558..2c8113bbe 100644
--- a/apps/website/components/leagues/LeagueHeaderPanel.tsx
+++ b/apps/website/components/leagues/LeagueHeaderPanel.tsx
@@ -4,7 +4,7 @@ import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData'
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Activity, Timer, Trophy, Users, type LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/components/leagues/LeagueLogo.tsx b/apps/website/components/leagues/LeagueLogo.tsx
index e33338de2..c94c799cc 100644
--- a/apps/website/components/leagues/LeagueLogo.tsx
+++ b/apps/website/components/leagues/LeagueLogo.tsx
@@ -1,6 +1,6 @@
 import { SafeImage } from '@/components/shared/SafeImage';
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Trophy } from 'lucide-react';
 
 export interface LeagueLogoProps {
diff --git a/apps/website/components/leagues/LeagueMemberRow.tsx b/apps/website/components/leagues/LeagueMemberRow.tsx
index 3e0fbc2d6..89ac9c601 100644
--- a/apps/website/components/leagues/LeagueMemberRow.tsx
+++ b/apps/website/components/leagues/LeagueMemberRow.tsx
@@ -1,4 +1,4 @@
-import { DriverIdentity } from '@/components/drivers/DriverIdentity';
+import { DriverIdentity } from '@/ui/DriverIdentity';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Badge } from '@/ui/Badge';
 import { TableCell, TableRow } from '@/ui/Table';
diff --git a/apps/website/components/leagues/LeagueMembershipFeesSection.tsx b/apps/website/components/leagues/LeagueMembershipFeesSection.tsx
index 43effc1f0..16739b3a9 100644
--- a/apps/website/components/leagues/LeagueMembershipFeesSection.tsx
+++ b/apps/website/components/leagues/LeagueMembershipFeesSection.tsx
@@ -4,7 +4,7 @@ import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar, DollarSign, TrendingUp, User } from 'lucide-react';
 import { useState } from 'react';
diff --git a/apps/website/components/leagues/LeagueNavTabs.tsx b/apps/website/components/leagues/LeagueNavTabs.tsx
index 0e626a2f0..150afc165 100644
--- a/apps/website/components/leagues/LeagueNavTabs.tsx
+++ b/apps/website/components/leagues/LeagueNavTabs.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface Tab {
   label: string;
diff --git a/apps/website/components/leagues/LeagueOwnershipTransfer.tsx b/apps/website/components/leagues/LeagueOwnershipTransfer.tsx
index e3955f8c3..f2fba5f57 100644
--- a/apps/website/components/leagues/LeagueOwnershipTransfer.tsx
+++ b/apps/website/components/leagues/LeagueOwnershipTransfer.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { UserCog } from 'lucide-react';
diff --git a/apps/website/components/leagues/LeagueReviewSummary.tsx b/apps/website/components/leagues/LeagueReviewSummary.tsx
index bef37554a..4de605070 100644
--- a/apps/website/components/leagues/LeagueReviewSummary.tsx
+++ b/apps/website/components/leagues/LeagueReviewSummary.tsx
@@ -20,12 +20,12 @@ import {
 } from 'lucide-react';
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Card } from '@/ui/Card';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
  
 interface LeagueReviewSummaryProps {
   form: LeagueConfigFormModel;
diff --git a/apps/website/components/leagues/LeagueRulesPanel.tsx b/apps/website/components/leagues/LeagueRulesPanel.tsx
index bc3162736..48f23693f 100644
--- a/apps/website/components/leagues/LeagueRulesPanel.tsx
+++ b/apps/website/components/leagues/LeagueRulesPanel.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Info, Shield } from 'lucide-react';
 
diff --git a/apps/website/components/leagues/LeagueSchedule.tsx b/apps/website/components/leagues/LeagueSchedule.tsx
index 96a434ad9..b0007b6c8 100644
--- a/apps/website/components/leagues/LeagueSchedule.tsx
+++ b/apps/website/components/leagues/LeagueSchedule.tsx
@@ -7,11 +7,11 @@ import type { LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueSchedu
 import { useState } from 'react';
 
 // Shared state components
-import { StateContainer } from '@/components/shared/state/StateContainer';
+import { StateContainer } from '@/ui/StateContainer';
 import { useLeagueSchedule } from "@/hooks/league/useLeagueSchedule";
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar } from 'lucide-react';
 
diff --git a/apps/website/components/leagues/LeagueSchedulePanel.tsx b/apps/website/components/leagues/LeagueSchedulePanel.tsx
index 5f7a72f79..2826d3d10 100644
--- a/apps/website/components/leagues/LeagueSchedulePanel.tsx
+++ b/apps/website/components/leagues/LeagueSchedulePanel.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Clock, MapPin } from 'lucide-react';
 
diff --git a/apps/website/components/leagues/LeagueScoringSection.tsx b/apps/website/components/leagues/LeagueScoringSection.tsx
index 04b86937f..0285bdb69 100644
--- a/apps/website/components/leagues/LeagueScoringSection.tsx
+++ b/apps/website/components/leagues/LeagueScoringSection.tsx
@@ -4,11 +4,11 @@ import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
 import type { CustomPointsConfig } from '@/lib/view-models/ScoringConfigurationViewModel';
 import { Button } from '@/ui/Button';
-import { Grid } from '@/ui/primitives/Grid';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Award, Check, Globe, HelpCircle, Medal, Minus, Plus, RotateCcw, Settings, Trophy, X, Zap } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';
diff --git a/apps/website/components/leagues/LeagueSlider.tsx b/apps/website/components/leagues/LeagueSlider.tsx
index c720b58ce..1d7385927 100644
--- a/apps/website/components/leagues/LeagueSlider.tsx
+++ b/apps/website/components/leagues/LeagueSlider.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ChevronLeft, ChevronRight, type LucideIcon } from 'lucide-react';
 import { useCallback, useRef, useState } from 'react';
diff --git a/apps/website/components/leagues/LeagueSponsorshipsSection.tsx b/apps/website/components/leagues/LeagueSponsorshipsSection.tsx
index bdacf5152..5040ccf84 100644
--- a/apps/website/components/leagues/LeagueSponsorshipsSection.tsx
+++ b/apps/website/components/leagues/LeagueSponsorshipsSection.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { StatBox } from '@/ui/StatBox';
 import { Text } from '@/ui/Text';
 import { Award, DollarSign, Star, X } from 'lucide-react';
diff --git a/apps/website/components/leagues/LeagueStandingsTable.tsx b/apps/website/components/leagues/LeagueStandingsTable.tsx
index 352779bf0..4d6dd9ad4 100644
--- a/apps/website/components/leagues/LeagueStandingsTable.tsx
+++ b/apps/website/components/leagues/LeagueStandingsTable.tsx
@@ -2,7 +2,7 @@
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface StandingEntry {
   position: number;
diff --git a/apps/website/components/leagues/LeagueStewardingSection.tsx b/apps/website/components/leagues/LeagueStewardingSection.tsx
index 1b8707cb0..f43f8e706 100644
--- a/apps/website/components/leagues/LeagueStewardingSection.tsx
+++ b/apps/website/components/leagues/LeagueStewardingSection.tsx
@@ -4,7 +4,7 @@ import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import { Checkbox } from '@/ui/Checkbox';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { AlertTriangle, Bell, Clock, Scale, Shield, Vote } from 'lucide-react';
diff --git a/apps/website/components/leagues/LeagueStructureSection.tsx b/apps/website/components/leagues/LeagueStructureSection.tsx
index e57d756dc..e7f12886e 100644
--- a/apps/website/components/leagues/LeagueStructureSection.tsx
+++ b/apps/website/components/leagues/LeagueStructureSection.tsx
@@ -4,7 +4,7 @@ import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Check, HelpCircle, User, Users2, X } from 'lucide-react';
 import type * as React from 'react';
diff --git a/apps/website/components/leagues/LeagueSummaryCard.tsx b/apps/website/components/leagues/LeagueSummaryCard.tsx
index 4feeb93af..44f97ab69 100644
--- a/apps/website/components/leagues/LeagueSummaryCard.tsx
+++ b/apps/website/components/leagues/LeagueSummaryCard.tsx
@@ -1,13 +1,13 @@
 import { ArrowRight } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { LeagueLogo } from './LeagueLogo';
 import { Link } from '@/ui/Link';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface LeagueSummaryCardProps {
   id: string;
diff --git a/apps/website/components/leagues/LeagueTabs.tsx b/apps/website/components/leagues/LeagueTabs.tsx
index 9a36c8cdb..0fe0dd060 100644
--- a/apps/website/components/leagues/LeagueTabs.tsx
+++ b/apps/website/components/leagues/LeagueTabs.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface Tab {
diff --git a/apps/website/components/leagues/LeagueTimingsSection.tsx b/apps/website/components/leagues/LeagueTimingsSection.tsx
index c5f2789b9..ac5cdbbf0 100644
--- a/apps/website/components/leagues/LeagueTimingsSection.tsx
+++ b/apps/website/components/leagues/LeagueTimingsSection.tsx
@@ -6,7 +6,7 @@ import type { Weekday } from '@/lib/types/Weekday';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     Calendar,
diff --git a/apps/website/components/leagues/LeagueVisibilitySection.tsx b/apps/website/components/leagues/LeagueVisibilitySection.tsx
index 068295bb7..44a103266 100644
--- a/apps/website/components/leagues/LeagueVisibilitySection.tsx
+++ b/apps/website/components/leagues/LeagueVisibilitySection.tsx
@@ -3,7 +3,7 @@
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Check, HelpCircle, Trophy, Users, X } from 'lucide-react';
 import type * as React from 'react';
diff --git a/apps/website/components/leagues/PenaltyHistoryList.tsx b/apps/website/components/leagues/PenaltyHistoryList.tsx
index 304d49d37..84d2c1085 100644
--- a/apps/website/components/leagues/PenaltyHistoryList.tsx
+++ b/apps/website/components/leagues/PenaltyHistoryList.tsx
@@ -5,7 +5,7 @@ import { ProtestViewModel } from "@/lib/view-models/ProtestViewModel";
 import { RaceViewModel } from "@/lib/view-models/RaceViewModel";
 import { DriverViewModel } from "@/lib/view-models/DriverViewModel";
 import { Card } from "@/ui/Card";
-import { Stack } from "@/ui/primitives/Stack";
+import { Stack } from "@/ui/Stack";
 import { Text } from "@/ui/Text";
 import { Heading } from "@/ui/Heading";
 import { Icon } from "@/ui/Icon";
diff --git a/apps/website/components/leagues/PendingProtestsList.tsx b/apps/website/components/leagues/PendingProtestsList.tsx
index 4ed8ca062..64402c75e 100644
--- a/apps/website/components/leagues/PendingProtestsList.tsx
+++ b/apps/website/components/leagues/PendingProtestsList.tsx
@@ -1,7 +1,7 @@
 import { DriverViewModel } from "@/lib/view-models/DriverViewModel";
 import { ProtestViewModel } from "@/lib/view-models/ProtestViewModel";
 import { RaceViewModel } from "@/lib/view-models/RaceViewModel";
-import { Stack } from "@/ui/primitives/Stack";
+import { Stack } from "@/ui/Stack";
 import { Card } from "@/ui/Card";
 import { ProtestListItem } from "./ProtestListItem";
 import { Text } from "@/ui/Text";
diff --git a/apps/website/components/leagues/ProtestListItem.tsx b/apps/website/components/leagues/ProtestListItem.tsx
index f86fd1141..37155b988 100644
--- a/apps/website/components/leagues/ProtestListItem.tsx
+++ b/apps/website/components/leagues/ProtestListItem.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, AlertTriangle, Video } from 'lucide-react';
 
diff --git a/apps/website/components/leagues/QuickPenaltyModal.tsx b/apps/website/components/leagues/QuickPenaltyModal.tsx
index 51f7cc93e..d59379e46 100644
--- a/apps/website/components/leagues/QuickPenaltyModal.tsx
+++ b/apps/website/components/leagues/QuickPenaltyModal.tsx
@@ -4,7 +4,7 @@ import { usePenaltyMutation } from "@/hooks/league/usePenaltyMutation";
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
diff --git a/apps/website/components/leagues/ReadonlyLeagueInfo.tsx b/apps/website/components/leagues/ReadonlyLeagueInfo.tsx
index 00d30f970..306a55db7 100644
--- a/apps/website/components/leagues/ReadonlyLeagueInfo.tsx
+++ b/apps/website/components/leagues/ReadonlyLeagueInfo.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { InfoItem } from '@/ui/InfoItem';
-import { Box } from '@/ui/primitives/Box';
 import { Award, Calendar, Eye, Gamepad2, Hash, Trophy, Users } from 'lucide-react';
 
 interface ReadonlyLeagueInfoProps {
diff --git a/apps/website/components/leagues/ReviewProtestModal.tsx b/apps/website/components/leagues/ReviewProtestModal.tsx
index 5424f128f..d9aa8059f 100644
--- a/apps/website/components/leagues/ReviewProtestModal.tsx
+++ b/apps/website/components/leagues/ReviewProtestModal.tsx
@@ -7,13 +7,13 @@ import { ProtestViewModel } from "../../lib/view-models/ProtestViewModel";
 import { Modal } from "@/ui/Modal";
 import { Button } from "@/ui/Button";
 import { Card } from "@/ui/Card";
-import { Stack } from "@/ui/primitives/Stack";
+import { Stack } from "@/ui/Stack";
 import { Text } from "@/ui/Text";
 import { Heading } from "@/ui/Heading";
 import { Icon } from "@/ui/Icon";
 import { TextArea } from "@/ui/TextArea";
 import { Input } from "@/ui/Input";
-import { Grid } from "@/ui/primitives/Grid";
+import { Grid } from "@/ui/Grid";
 import {
   AlertCircle,
   Video,
diff --git a/apps/website/components/leagues/RosterTable.tsx b/apps/website/components/leagues/RosterTable.tsx
index 6ed4e9f7a..4863700dd 100644
--- a/apps/website/components/leagues/RosterTable.tsx
+++ b/apps/website/components/leagues/RosterTable.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { ReactNode } from 'react';
diff --git a/apps/website/components/leagues/ScheduleRaceCard.tsx b/apps/website/components/leagues/ScheduleRaceCard.tsx
index f2ef3a37c..84898bad6 100644
--- a/apps/website/components/leagues/ScheduleRaceCard.tsx
+++ b/apps/website/components/leagues/ScheduleRaceCard.tsx
@@ -3,11 +3,11 @@
 import React from 'react';
 import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Badge } from '@/ui/Badge';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Icon } from '@/ui/Icon';
 
 interface Race {
diff --git a/apps/website/components/leagues/ScheduleTable.tsx b/apps/website/components/leagues/ScheduleTable.tsx
index 24a937b09..f88baa02c 100644
--- a/apps/website/components/leagues/ScheduleTable.tsx
+++ b/apps/website/components/leagues/ScheduleTable.tsx
@@ -3,8 +3,8 @@
 import { routes } from '@/lib/routing/RouteConfig';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { Calendar, ChevronRight, MapPin } from 'lucide-react';
diff --git a/apps/website/components/leagues/SponsorshipRequestCard.tsx b/apps/website/components/leagues/SponsorshipRequestCard.tsx
index 78c9338a1..15c9815da 100644
--- a/apps/website/components/leagues/SponsorshipRequestCard.tsx
+++ b/apps/website/components/leagues/SponsorshipRequestCard.tsx
@@ -2,8 +2,8 @@
 
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { AlertCircle, CheckCircle, XCircle } from 'lucide-react';
 
diff --git a/apps/website/components/leagues/StandingsTable.tsx b/apps/website/components/leagues/StandingsTable.tsx
index 8241b20e0..134d15940 100644
--- a/apps/website/components/leagues/StandingsTable.tsx
+++ b/apps/website/components/leagues/StandingsTable.tsx
@@ -7,7 +7,7 @@ import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { Edit, User } from 'lucide-react';
diff --git a/apps/website/components/leagues/StewardingQueuePanel.tsx b/apps/website/components/leagues/StewardingQueuePanel.tsx
index 39e4dbadd..b4a7894f1 100644
--- a/apps/website/components/leagues/StewardingQueuePanel.tsx
+++ b/apps/website/components/leagues/StewardingQueuePanel.tsx
@@ -3,7 +3,7 @@
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Clock, MessageSquare, ShieldAlert } from 'lucide-react';
 
diff --git a/apps/website/components/leagues/StewardingStats.tsx b/apps/website/components/leagues/StewardingStats.tsx
index 05de95ed9..2a2003325 100644
--- a/apps/website/components/leagues/StewardingStats.tsx
+++ b/apps/website/components/leagues/StewardingStats.tsx
@@ -1,5 +1,5 @@
 import { StatBox } from '@/ui/StatBox';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { CheckCircle, Clock, Gavel } from 'lucide-react';
 
 interface StewardingStatsProps {
diff --git a/apps/website/components/leagues/TransactionRow.tsx b/apps/website/components/leagues/TransactionRow.tsx
index 1f2c8058d..4410469fc 100644
--- a/apps/website/components/leagues/TransactionRow.tsx
+++ b/apps/website/components/leagues/TransactionRow.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { ArrowDownRight, ArrowUpRight, DollarSign, LucideIcon, TrendingUp } from 'lucide-react';
 
diff --git a/apps/website/components/leagues/WalletSummaryPanel.tsx b/apps/website/components/leagues/WalletSummaryPanel.tsx
index ba16dccac..360e91e19 100644
--- a/apps/website/components/leagues/WalletSummaryPanel.tsx
+++ b/apps/website/components/leagues/WalletSummaryPanel.tsx
@@ -2,8 +2,8 @@
 
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { ArrowDownLeft, ArrowUpRight, History, Wallet } from 'lucide-react';
 
diff --git a/apps/website/components/mockups/CareerProgressionMockup.tsx b/apps/website/components/mockups/CareerProgressionMockup.tsx
index d5868d939..1366cc499 100644
--- a/apps/website/components/mockups/CareerProgressionMockup.tsx
+++ b/apps/website/components/mockups/CareerProgressionMockup.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion, useReducedMotion } from 'framer-motion';
 import { useEffect, useState } from 'react';
diff --git a/apps/website/components/mockups/CompanionAutomationMockup.tsx b/apps/website/components/mockups/CompanionAutomationMockup.tsx
index 613f2c6ab..a958ef394 100644
--- a/apps/website/components/mockups/CompanionAutomationMockup.tsx
+++ b/apps/website/components/mockups/CompanionAutomationMockup.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion, useReducedMotion } from 'framer-motion';
 import { useEffect, useState } from 'react';
diff --git a/apps/website/components/mockups/DriverProfileMockup.tsx b/apps/website/components/mockups/DriverProfileMockup.tsx
index 748c03c77..5d42ff02f 100644
--- a/apps/website/components/mockups/DriverProfileMockup.tsx
+++ b/apps/website/components/mockups/DriverProfileMockup.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from 'framer-motion';
 import { useEffect, useState } from 'react';
diff --git a/apps/website/components/mockups/LeagueDiscoveryMockup.tsx b/apps/website/components/mockups/LeagueDiscoveryMockup.tsx
index 8a36203df..6af133ad7 100644
--- a/apps/website/components/mockups/LeagueDiscoveryMockup.tsx
+++ b/apps/website/components/mockups/LeagueDiscoveryMockup.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion, useReducedMotion } from 'framer-motion';
 import { useEffect, useState } from 'react';
diff --git a/apps/website/components/mockups/LeagueHomeMockup.tsx b/apps/website/components/mockups/LeagueHomeMockup.tsx
index 963548667..43ebd91a7 100644
--- a/apps/website/components/mockups/LeagueHomeMockup.tsx
+++ b/apps/website/components/mockups/LeagueHomeMockup.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion, useReducedMotion } from 'framer-motion';
 import { useEffect, useState } from 'react';
diff --git a/apps/website/components/mockups/ProtestWorkflowMockup.tsx b/apps/website/components/mockups/ProtestWorkflowMockup.tsx
index 476cf4c46..36ae8e462 100644
--- a/apps/website/components/mockups/ProtestWorkflowMockup.tsx
+++ b/apps/website/components/mockups/ProtestWorkflowMockup.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { motion, useReducedMotion } from 'framer-motion';
 import { useEffect, useState } from 'react';
diff --git a/apps/website/components/mockups/RaceHistoryMockup.tsx b/apps/website/components/mockups/RaceHistoryMockup.tsx
index 1aec36da5..558c8d30a 100644
--- a/apps/website/components/mockups/RaceHistoryMockup.tsx
+++ b/apps/website/components/mockups/RaceHistoryMockup.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion, useReducedMotion } from 'framer-motion';
 import { useEffect, useState } from 'react';
diff --git a/apps/website/components/mockups/SimPlatformMockup.tsx b/apps/website/components/mockups/SimPlatformMockup.tsx
index d281fc0b2..cbee21ef4 100644
--- a/apps/website/components/mockups/SimPlatformMockup.tsx
+++ b/apps/website/components/mockups/SimPlatformMockup.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { useEffect, useState } from 'react';
 
diff --git a/apps/website/components/mockups/StandingsTableMockup.tsx b/apps/website/components/mockups/StandingsTableMockup.tsx
index 359e3b75b..432ba270c 100644
--- a/apps/website/components/mockups/StandingsTableMockup.tsx
+++ b/apps/website/components/mockups/StandingsTableMockup.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion, useMotionValue, useReducedMotion, useSpring } from 'framer-motion';
 import { useEffect, useState } from 'react';
diff --git a/apps/website/components/mockups/TeamCompetitionMockup.tsx b/apps/website/components/mockups/TeamCompetitionMockup.tsx
index 878daf095..fc20134d1 100644
--- a/apps/website/components/mockups/TeamCompetitionMockup.tsx
+++ b/apps/website/components/mockups/TeamCompetitionMockup.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion, useReducedMotion } from 'framer-motion';
 import { useEffect, useState } from 'react';
diff --git a/apps/website/components/notifications/NotificationCenter.tsx b/apps/website/components/notifications/NotificationCenter.tsx
index e4a10520f..6bd47cf09 100644
--- a/apps/website/components/notifications/NotificationCenter.tsx
+++ b/apps/website/components/notifications/NotificationCenter.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     AlertTriangle,
diff --git a/apps/website/components/notifications/NotificationProvider.tsx b/apps/website/components/notifications/NotificationProvider.tsx
index 887fba0ac..5f10f229d 100644
--- a/apps/website/components/notifications/NotificationProvider.tsx
+++ b/apps/website/components/notifications/NotificationProvider.tsx
@@ -6,7 +6,7 @@ import { v4 as uuid } from 'uuid';
 import { ModalNotification } from './ModalNotification';
 import { ToastNotification } from './ToastNotification';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 import type { Notification, NotificationAction, NotificationVariant } from './notificationTypes';
 
diff --git a/apps/website/components/onboarding/AvatarStep.tsx b/apps/website/components/onboarding/AvatarStep.tsx
index db777ea9a..c08cf5db7 100644
--- a/apps/website/components/onboarding/AvatarStep.tsx
+++ b/apps/website/components/onboarding/AvatarStep.tsx
@@ -1,9 +1,9 @@
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Check, Loader2, Palette, Sparkles, Upload, User } from 'lucide-react';
 import { ChangeEvent, useRef } from 'react';
diff --git a/apps/website/components/onboarding/OnboardingCTA.tsx b/apps/website/components/onboarding/OnboardingCTA.tsx
index 78b6e1972..2dd6308c0 100644
--- a/apps/website/components/onboarding/OnboardingCTA.tsx
+++ b/apps/website/components/onboarding/OnboardingCTA.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/primitives/Stack';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 
 interface OnboardingCTAProps {
   onBack?: () => void;
@@ -23,19 +23,16 @@ export function OnboardingCTA({
   type = 'button',
 }: OnboardingCTAProps) {
   return (
-    <Stack direction="row" justify="between" mt={8} gap={4}>
-      {onBack ? (
+    <ButtonGroup alignment={onBack ? 'between' : 'end'} marginTop={8}>
+      {onBack && (
         <Button
           type="button"
           variant="secondary"
           onClick={onBack}
           disabled={isLoading}
-          className="px-8"
         >
           {backLabel}
         </Button>
-      ) : (
-        <div />
       )}
 
       <Button
@@ -43,17 +40,10 @@ export function OnboardingCTA({
         variant="primary"
         onClick={onNext}
         disabled={isLoading || !canNext}
-        className="px-8 min-w-[140px]"
+        isLoading={isLoading}
       >
-        {isLoading ? (
-          <Stack direction="row" gap={2} align="center">
-            <span className="animate-spin">⟳</span>
-            <span>Processing...</span>
-          </Stack>
-        ) : (
-          isLastStep ? 'Complete Setup' : nextLabel
-        )}
+        {isLastStep ? 'Complete Setup' : nextLabel}
       </Button>
-    </Stack>
+    </ButtonGroup>
   );
 }
diff --git a/apps/website/components/onboarding/OnboardingError.tsx b/apps/website/components/onboarding/OnboardingError.tsx
index 602d84e78..05c40c5b9 100644
--- a/apps/website/components/onboarding/OnboardingError.tsx
+++ b/apps/website/components/onboarding/OnboardingError.tsx
@@ -1,4 +1,4 @@
-import { Box } from '../../ui/primitives/Box';
+import { Box } from '../../ui/Box';
 import { Text } from '../../ui/Text';
 
 interface OnboardingErrorProps {
diff --git a/apps/website/components/onboarding/OnboardingForm.tsx b/apps/website/components/onboarding/OnboardingForm.tsx
index 146b891f8..87899b474 100644
--- a/apps/website/components/onboarding/OnboardingForm.tsx
+++ b/apps/website/components/onboarding/OnboardingForm.tsx
@@ -1,5 +1,5 @@
 import { FormEvent, ReactNode } from 'react';
-import { Box } from '../../ui/primitives/Box';
+import { Box } from '../../ui/Box';
 
 interface OnboardingFormProps {
   children: ReactNode;
diff --git a/apps/website/components/onboarding/OnboardingHelpPanel.tsx b/apps/website/components/onboarding/OnboardingHelpPanel.tsx
index 0abc571ec..6ac7a0621 100644
--- a/apps/website/components/onboarding/OnboardingHelpPanel.tsx
+++ b/apps/website/components/onboarding/OnboardingHelpPanel.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { HelpCircle } from 'lucide-react';
 
diff --git a/apps/website/components/onboarding/OnboardingNavigation.tsx b/apps/website/components/onboarding/OnboardingNavigation.tsx
index 5e5476fbf..75ef26b12 100644
--- a/apps/website/components/onboarding/OnboardingNavigation.tsx
+++ b/apps/website/components/onboarding/OnboardingNavigation.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@/ui/Button';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 
 interface OnboardingNavigationProps {
   onBack: () => void;
@@ -10,16 +11,14 @@ interface OnboardingNavigationProps {
 
 export function OnboardingNavigation({ onBack, onNext, isLastStep, canSubmit, loading }: OnboardingNavigationProps) {
   return (
-    <div className="mt-8 flex items-center justify-between">
+    <ButtonGroup alignment="between" marginTop={8}>
       <Button
         type="button"
         variant="secondary"
         onClick={onBack}
         disabled={loading}
-        className="flex items-center gap-2"
       >
-        <span>←</span>
-        Back
+        ← Back
       </Button>
 
       {!isLastStep ? (
@@ -28,31 +27,19 @@ export function OnboardingNavigation({ onBack, onNext, isLastStep, canSubmit, lo
           variant="primary"
           onClick={onNext}
           disabled={loading}
-          className="flex items-center gap-2"
         >
-          Continue
-          <span>→</span>
+          Continue →
         </Button>
       ) : (
         <Button
           type="submit"
           variant="primary"
           disabled={loading || !canSubmit}
-          className="flex items-center gap-2"
+          isLoading={loading}
         >
-          {loading ? (
-            <>
-              <span className="animate-spin">⟳</span>
-              Creating Profile...
-            </>
-          ) : (
-            <>
-              <span>✓</span>
-              Complete Setup
-            </>
-          )}
+          {loading ? 'Creating Profile...' : '✓ Complete Setup'}
         </Button>
       )}
-    </div>
+    </ButtonGroup>
   );
 }
\ No newline at end of file
diff --git a/apps/website/components/onboarding/OnboardingPrimaryActions.tsx b/apps/website/components/onboarding/OnboardingPrimaryActions.tsx
index 3ff74eefa..b4b966315 100644
--- a/apps/website/components/onboarding/OnboardingPrimaryActions.tsx
+++ b/apps/website/components/onboarding/OnboardingPrimaryActions.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
 
 interface OnboardingPrimaryActionsProps {
diff --git a/apps/website/components/onboarding/OnboardingShell.tsx b/apps/website/components/onboarding/OnboardingShell.tsx
index 85faa4325..74a55674c 100644
--- a/apps/website/components/onboarding/OnboardingShell.tsx
+++ b/apps/website/components/onboarding/OnboardingShell.tsx
@@ -1,5 +1,5 @@
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface OnboardingShellProps {
   children: React.ReactNode;
diff --git a/apps/website/components/onboarding/OnboardingStepHeader.tsx b/apps/website/components/onboarding/OnboardingStepHeader.tsx
index fe3330975..a7389d0eb 100644
--- a/apps/website/components/onboarding/OnboardingStepHeader.tsx
+++ b/apps/website/components/onboarding/OnboardingStepHeader.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface OnboardingStepHeaderProps {
diff --git a/apps/website/components/onboarding/OnboardingStepPanel.tsx b/apps/website/components/onboarding/OnboardingStepPanel.tsx
index f4b440007..a3613098a 100644
--- a/apps/website/components/onboarding/OnboardingStepPanel.tsx
+++ b/apps/website/components/onboarding/OnboardingStepPanel.tsx
@@ -1,5 +1,5 @@
 import { Panel } from '@/ui/Panel';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface OnboardingStepPanelProps {
diff --git a/apps/website/components/onboarding/OnboardingStepper.tsx b/apps/website/components/onboarding/OnboardingStepper.tsx
index c440a4b96..caead1bd9 100644
--- a/apps/website/components/onboarding/OnboardingStepper.tsx
+++ b/apps/website/components/onboarding/OnboardingStepper.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion } from 'framer-motion';
 
diff --git a/apps/website/components/onboarding/PersonalInfoStep.tsx b/apps/website/components/onboarding/PersonalInfoStep.tsx
index 2ea4ba894..117a2b208 100644
--- a/apps/website/components/onboarding/PersonalInfoStep.tsx
+++ b/apps/website/components/onboarding/PersonalInfoStep.tsx
@@ -1,8 +1,8 @@
 import { CountrySelect } from '@/components/shared/CountrySelect';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { ChevronRight, Clock } from 'lucide-react';
diff --git a/apps/website/components/profile/LiveryGallery.tsx b/apps/website/components/profile/LiveryGallery.tsx
index ceeadccef..4a8fd4810 100644
--- a/apps/website/components/profile/LiveryGallery.tsx
+++ b/apps/website/components/profile/LiveryGallery.tsx
@@ -2,7 +2,7 @@
 
 import { LiveryCard } from '@/components/drivers/LiveryCard';
 import { ProfileLiveryViewData } from '@/lib/view-data/ProfileLiveriesViewData';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import React from 'react';
 import { ProfileSection } from './ProfileSection';
 
diff --git a/apps/website/components/profile/ProfileNavTabs.tsx b/apps/website/components/profile/ProfileNavTabs.tsx
index 646d56efe..f3c4a86d8 100644
--- a/apps/website/components/profile/ProfileNavTabs.tsx
+++ b/apps/website/components/profile/ProfileNavTabs.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 export type ProfileTab = 'overview' | 'history' | 'stats' | 'leagues' | 'liveries' | 'settings';
diff --git a/apps/website/components/profile/ProfileSettingsPanel.tsx b/apps/website/components/profile/ProfileSettingsPanel.tsx
index 28e974fee..fdab0ac8d 100644
--- a/apps/website/components/profile/ProfileSettingsPanel.tsx
+++ b/apps/website/components/profile/ProfileSettingsPanel.tsx
@@ -5,7 +5,7 @@ import { Card } from '@/ui/Card';
 import { Checkbox } from '@/ui/Checkbox';
 import { Heading } from '@/ui/Heading';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { TextArea } from '@/ui/TextArea';
 import { Toggle } from '@/ui/Toggle';
diff --git a/apps/website/components/profile/SessionHistoryTable.tsx b/apps/website/components/profile/SessionHistoryTable.tsx
index fe74fec2b..c1baf90af 100644
--- a/apps/website/components/profile/SessionHistoryTable.tsx
+++ b/apps/website/components/profile/SessionHistoryTable.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Badge } from '@/ui/Badge';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { Calendar, Trophy } from 'lucide-react';
diff --git a/apps/website/components/profile/SponsorshipRequestsPanel.tsx b/apps/website/components/profile/SponsorshipRequestsPanel.tsx
index 1fd67fd31..d2d7b4f86 100644
--- a/apps/website/components/profile/SponsorshipRequestsPanel.tsx
+++ b/apps/website/components/profile/SponsorshipRequestsPanel.tsx
@@ -3,7 +3,7 @@
 import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 import { Button } from '@/ui/Button';
 import { Card, Card as Surface } from '@/ui/Card';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ProfileSection } from './ProfileSection';
 
diff --git a/apps/website/components/races/FileProtestModal.tsx b/apps/website/components/races/FileProtestModal.tsx
index 0775af54e..944488cd6 100644
--- a/apps/website/components/races/FileProtestModal.tsx
+++ b/apps/website/components/races/FileProtestModal.tsx
@@ -6,7 +6,7 @@ import { Icon } from '@/ui/Icon';
 import { InfoBox } from '@/ui/InfoBox';
 import { Input } from '@/ui/Input';
 import { Modal } from '@/ui/Modal';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
diff --git a/apps/website/components/races/FinishDistributionChart.tsx b/apps/website/components/races/FinishDistributionChart.tsx
index d99f1d753..764ba2ed4 100644
--- a/apps/website/components/races/FinishDistributionChart.tsx
+++ b/apps/website/components/races/FinishDistributionChart.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface FinishDistributionProps {
diff --git a/apps/website/components/races/ImportResultsForm.tsx b/apps/website/components/races/ImportResultsForm.tsx
index a7b6f896b..051d3e509 100644
--- a/apps/website/components/races/ImportResultsForm.tsx
+++ b/apps/website/components/races/ImportResultsForm.tsx
@@ -4,7 +4,7 @@ import { useInject } from '@/lib/di/hooks/useInject';
 import { RACE_RESULTS_SERVICE_TOKEN } from '@/lib/di/tokens';
 import { FilePicker } from '@/ui/FilePicker';
 import { InfoBox } from '@/ui/InfoBox';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle } from 'lucide-react';
 import React, { useState } from 'react';
diff --git a/apps/website/components/races/LatestResultsSidebar.tsx b/apps/website/components/races/LatestResultsSidebar.tsx
index a27bdfc43..a94a8b015 100644
--- a/apps/website/components/races/LatestResultsSidebar.tsx
+++ b/apps/website/components/races/LatestResultsSidebar.tsx
@@ -1,8 +1,8 @@
 import { RaceResultList } from '@/components/races/RaceResultList';
 import { RaceSummaryItem } from '@/components/races/RaceSummaryItem';
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
 
 type RaceWithResults = {
   raceId: string;
diff --git a/apps/website/components/races/LiveRaceBanner.tsx b/apps/website/components/races/LiveRaceBanner.tsx
index a9a39a315..77dbfc6d8 100644
--- a/apps/website/components/races/LiveRaceBanner.tsx
+++ b/apps/website/components/races/LiveRaceBanner.tsx
@@ -1,7 +1,7 @@
 
 
 import { LiveRaceItem } from '@/components/races/LiveRaceItem';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface LiveRaceBannerProps {
diff --git a/apps/website/components/races/LiveRaceItem.tsx b/apps/website/components/races/LiveRaceItem.tsx
index a1947842d..d67740aac 100644
--- a/apps/website/components/races/LiveRaceItem.tsx
+++ b/apps/website/components/races/LiveRaceItem.tsx
@@ -1,8 +1,8 @@
 
 
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { ChevronRight, PlayCircle } from 'lucide-react';
 
diff --git a/apps/website/components/races/LiveRacesBanner.tsx b/apps/website/components/races/LiveRacesBanner.tsx
index 0aadfe221..45d311f09 100644
--- a/apps/website/components/races/LiveRacesBanner.tsx
+++ b/apps/website/components/races/LiveRacesBanner.tsx
@@ -2,7 +2,7 @@
 
 import { LiveRaceItem } from '@/components/races/LiveRaceItem';
 import type { RaceViewData } from '@/lib/view-data/RacesViewData';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface LiveRacesBannerProps {
diff --git a/apps/website/components/races/NextRaceCard.tsx b/apps/website/components/races/NextRaceCard.tsx
index ed445d151..c9db11afd 100644
--- a/apps/website/components/races/NextRaceCard.tsx
+++ b/apps/website/components/races/NextRaceCard.tsx
@@ -5,8 +5,8 @@ import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Calendar, ChevronRight, Clock } from 'lucide-react';
 
diff --git a/apps/website/components/races/PenaltyFAB.tsx b/apps/website/components/races/PenaltyFAB.tsx
index 58c4427da..8d81fdc45 100644
--- a/apps/website/components/races/PenaltyFAB.tsx
+++ b/apps/website/components/races/PenaltyFAB.tsx
@@ -1,8 +1,8 @@
 
 
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Plus } from 'lucide-react';
 
 interface PenaltyFABProps {
diff --git a/apps/website/components/races/PenaltyRow.tsx b/apps/website/components/races/PenaltyRow.tsx
index f6a3d0b94..a3d6b2ec8 100644
--- a/apps/website/components/races/PenaltyRow.tsx
+++ b/apps/website/components/races/PenaltyRow.tsx
@@ -1,8 +1,8 @@
 
 
 import { Badge } from '@/ui/Badge';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 
 interface PenaltyRowProps {
diff --git a/apps/website/components/races/PointsTable.tsx b/apps/website/components/races/PointsTable.tsx
index 2f9ecd2a9..3394fc73f 100644
--- a/apps/website/components/races/PointsTable.tsx
+++ b/apps/website/components/races/PointsTable.tsx
@@ -1,6 +1,6 @@
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 
diff --git a/apps/website/components/races/RaceActionBar.tsx b/apps/website/components/races/RaceActionBar.tsx
index ed9383a12..aa4cb50cb 100644
--- a/apps/website/components/races/RaceActionBar.tsx
+++ b/apps/website/components/races/RaceActionBar.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { CheckCircle, LogOut, PlayCircle, Scale, Trophy, XCircle } from 'lucide-react';
 
 interface RaceActionBarProps {
@@ -41,7 +41,7 @@ export function RaceActionBar({
   isLoading = {}
 }: RaceActionBarProps) {
   return (
-    <Stack direction="row" gap={3} wrap>
+    <ButtonGroup gap={3}>
       {status === 'scheduled' && (
         <>
           {!isUserRegistered && canRegister && (
@@ -140,6 +140,6 @@ export function RaceActionBar({
           Reopen Race
         </Button>
       )}
-    </Stack>
+    </ButtonGroup>
   );
 }
diff --git a/apps/website/components/races/RaceCard.tsx b/apps/website/components/races/RaceCard.tsx
index a8453c731..97119da75 100644
--- a/apps/website/components/races/RaceCard.tsx
+++ b/apps/website/components/races/RaceCard.tsx
@@ -5,8 +5,9 @@ import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
 import { ArrowRight, Car, ChevronRight, LucideIcon, Trophy, Zap } from 'lucide-react';
 
 interface RaceCardProps {
@@ -19,9 +20,7 @@ interface RaceCardProps {
   strengthOfField?: number | null;
   onClick?: () => void;
   statusConfig: {
-    border: string;
-    bg: string;
-    color: string;
+    intent: 'primary' | 'success' | 'warning' | 'critical' | 'default' | 'secondary' | 'info' | 'danger';
     icon: LucideIcon | null;
     label: string;
   };
@@ -42,73 +41,40 @@ export function RaceCard({
 
   return (
     <Card
-      bg="bg-surface-charcoal"
-      rounded="xl"
-      border
-      borderColor="border-outline-steel"
-      p={4}
+      variant="dark"
       onClick={onClick}
-      cursor={onClick ? 'pointer' : 'default'}
-      hoverBorderColor="border-primary-accent"
-      transition
-      position="relative"
-      overflow="hidden"
-      group
     >
-      {/* Live indicator */}
-      {status === 'running' && (
-        <Stack
-          position="absolute"
-          top="0"
-          left="0"
-          right="0"
-          h="1"
-          bg="bg-success-green"
-          animate="pulse"
-        >{null}</Stack>
-      )}
-
       <Stack direction="row" align="start" gap={4}>
         {/* Time Column */}
-        <Stack textAlign="center" flexShrink={0} w="16">
-          <Text size="lg" weight="bold" color="text-white" block>
+        <Stack align="center" gap={1}>
+          <Text size="lg" weight="bold" variant="high">
             {scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
           </Text>
-          <Text size="xs" color={statusConfig.color} block>
+          <Text size="xs" variant={statusConfig.intent === 'default' ? 'low' : (statusConfig.intent as any)}>
             {status === 'running' ? 'LIVE' : scheduledAtDate.toLocaleDateString()}
           </Text>
         </Stack>
 
-        {/* Divider */}
-        <Stack
-          w="px"
-          bg="border-outline-steel"
-          alignSelf="stretch"
-        >{null}</Stack>
-
         {/* Main Content */}
-        <Stack flex={1} minWidth="0">
+        <Stack gap={4} fullWidth>
           <Stack direction="row" align="start" justify="between" gap={4}>
-            <Stack minWidth="0">
+            <Stack>
               <Heading
                 level={3}
-                truncate
-                groupHoverTextColor="text-primary-accent"
-                transition
               >
                 {track}
               </Heading>
-              <Stack direction="row" align="center" gap={3} mt={1}>
+              <Stack direction="row" align="center" gap={3}>
                 <Stack direction="row" align="center" gap={1}>
-                  <Icon icon={Car} size={3.5} color="var(--text-gray-400)" />
-                  <Text size="sm" color="text-gray-400">
+                  <Icon icon={Car} size={3.5} intent="low" />
+                  <Text size="sm" variant="low">
                     {car}
                   </Text>
                 </Stack>
                 {strengthOfField && (
                   <Stack direction="row" align="center" gap={1}>
-                    <Icon icon={Zap} size={3.5} color="var(--warning-amber)" />
-                    <Text size="sm" color="text-gray-400">
+                    <Icon icon={Zap} size={3.5} intent="warning" />
+                    <Text size="sm" variant="low">
                       SOF {strengthOfField}
                     </Text>
                   </Stack>
@@ -117,39 +83,23 @@ export function RaceCard({
             </Stack>
 
             {/* Status Badge */}
-            <Stack
-              direction="row"
-              align="center"
-              gap={1.5}
-              px={2.5}
-              py={1}
-              rounded="full"
-              border
-              borderColor="border-outline-steel"
-              bg="bg-base-black"
-              bgOpacity={0.5}
-            >
-              {statusConfig.icon && (
-                <Icon icon={statusConfig.icon} size={3.5} color={statusConfig.color} />
-              )}
-              <Text size="xs" weight="medium" color={statusConfig.color}>
-                {statusConfig.label}
-              </Text>
-            </Stack>
+            <Badge variant={statusConfig.intent}>
+              {statusConfig.label}
+            </Badge>
           </Stack>
 
           {/* League Link */}
-          <Stack mt={3} pt={3} borderTop borderStyle="solid" borderColor="border-outline-steel">
+          <Stack>
             <Link
               href={routes.league.detail(leagueId ?? '')}
               onClick={(e) => e.stopPropagation()}
             >
               <Stack direction="row" align="center" gap={2}>
-                <Icon icon={Trophy} size={3.5} color="var(--primary-accent)" />
-                <Text size="sm" color="text-primary-accent">
+                <Icon icon={Trophy} size={3.5} intent="primary" />
+                <Text size="sm" variant="primary">
                   {leagueName}
                 </Text>
-                <Icon icon={ArrowRight} size={3} color="var(--primary-accent)" />
+                <Icon icon={ArrowRight} size={3} intent="primary" />
               </Stack>
             </Link>
           </Stack>
@@ -159,10 +109,7 @@ export function RaceCard({
         <Icon
           icon={ChevronRight}
           size={5}
-          color="var(--text-gray-500)"
-          groupHoverTextColor="text-primary-accent"
-          transition
-          flexShrink={0}
+          intent="low"
         />
       </Stack>
     </Card>
diff --git a/apps/website/components/races/RaceDetailCard.tsx b/apps/website/components/races/RaceDetailCard.tsx
index f7d2f667e..76a832c6e 100644
--- a/apps/website/components/races/RaceDetailCard.tsx
+++ b/apps/website/components/races/RaceDetailCard.tsx
@@ -1,12 +1,8 @@
 
 
-import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Panel } from '@/ui/Panel';
+import { Grid } from '@/ui/Grid';
 import { StatGridItem } from '@/ui/StatGridItem';
-import { Flag } from 'lucide-react';
 
 interface RaceDetailCardProps {
   track: string;
@@ -18,16 +14,13 @@ interface RaceDetailCardProps {
 
 export function RaceDetailCard({ track, car, sessionType, statusLabel, statusColor }: RaceDetailCardProps) {
   return (
-    <Card>
-      <Stack gap={4}>
-        <Heading level={2} icon={<Icon icon={Flag} size={5} color="text-primary-blue" />}>Race Details</Heading>
-        <Grid cols={2} gap={4}>
-          <StatGridItem label="Track" value={track} />
-          <StatGridItem label="Car" value={car} />
-          <StatGridItem label="Session Type" value={sessionType} />
-          <StatGridItem label="Status" value={statusLabel} color={statusColor} />
-        </Grid>
-      </Stack>
-    </Card>
+    <Panel title="Race Details">
+      <Grid cols={2} gap={4}>
+        <StatGridItem label="Track" value={track} />
+        <StatGridItem label="Car" value={car} />
+        <StatGridItem label="Session Type" value={sessionType} />
+        <StatGridItem label="Status" value={statusLabel} />
+      </Grid>
+    </Panel>
   );
 }
diff --git a/apps/website/components/races/RaceDetailsHeader.tsx b/apps/website/components/races/RaceDetailsHeader.tsx
index 5af00303e..832fe9661 100644
--- a/apps/website/components/races/RaceDetailsHeader.tsx
+++ b/apps/website/components/races/RaceDetailsHeader.tsx
@@ -3,7 +3,7 @@
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Calendar, ChevronLeft, MapPin } from 'lucide-react';
 import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
 
diff --git a/apps/website/components/races/RaceEntryList.tsx b/apps/website/components/races/RaceEntryList.tsx
index d1bf3ca93..f4225a022 100644
--- a/apps/website/components/races/RaceEntryList.tsx
+++ b/apps/website/components/races/RaceEntryList.tsx
@@ -1,10 +1,8 @@
 
 
 import { DriverEntryRow } from '@/components/drivers/DriverEntryRow';
-import { Card, Card as Surface } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Panel } from '@/ui/Panel';
+import { EmptyState } from '@/ui/EmptyState';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
 
@@ -24,37 +22,30 @@ interface RaceEntryListProps {
 
 export function RaceEntryList({ entries, onDriverClick }: RaceEntryListProps) {
   return (
-    <Card>
-      <Stack gap={4}>
-        <Stack direction="row" align="center" justify="between">
-          <Heading level={2} icon={<Icon icon={Users} size={5} color="rgb(59, 130, 246)" />}>Entry List</Heading>
-          <Text size="sm" color="text-gray-400">{entries.length} drivers</Text>
-        </Stack>
-
-        {entries.length === 0 ? (
-          <Stack align="center" py={8} gap={3}>
-            <Surface variant="muted" rounded="full" p={4}>
-              <Icon icon={Users} size={6} color="rgb(82, 82, 82)" />
-            </Surface>
-            <Text color="text-gray-400">No drivers registered yet</Text>
-          </Stack>
-        ) : (
-          <Stack gap={1}>
-            {entries.map((driver, index) => (
-              <DriverEntryRow
-                key={driver.id}
-                index={index}
-                name={driver.name}
-                avatarUrl={driver.avatarUrl}
-                country={driver.country}
-                rating={driver.rating}
-                isCurrentUser={driver.isCurrentUser}
-                onClick={() => onDriverClick(driver.id)}
-              />
-            ))}
-          </Stack>
-        )}
-      </Stack>
-    </Card>
+    <Panel 
+      title="Entry List" 
+      actions={<Text size="sm" variant="low">{entries.length} drivers</Text>}
+    >
+      {entries.length === 0 ? (
+        <EmptyState
+          icon={Users}
+          title="No drivers registered yet"
+          variant="minimal"
+        />
+      ) : (
+        entries.map((driver, index) => (
+          <DriverEntryRow
+            key={driver.id}
+            index={index}
+            name={driver.name}
+            avatarUrl={driver.avatarUrl}
+            country={driver.country}
+            rating={driver.rating}
+            isCurrentUser={driver.isCurrentUser}
+            onClick={() => onDriverClick(driver.id)}
+          />
+        ))
+      )}
+    </Panel>
   );
 }
diff --git a/apps/website/components/races/RaceFilterBar.tsx b/apps/website/components/races/RaceFilterBar.tsx
index e1fb9037b..48b2734cf 100644
--- a/apps/website/components/races/RaceFilterBar.tsx
+++ b/apps/website/components/races/RaceFilterBar.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { FilterGroup } from '@/ui/FilterGroup';
 import { Select } from '@/ui/Select';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface RaceFilterBarProps {
   timeFilter: TimeFilter;
diff --git a/apps/website/components/races/RaceFilterModal.tsx b/apps/website/components/races/RaceFilterModal.tsx
index 580923637..3adb2cccc 100644
--- a/apps/website/components/races/RaceFilterModal.tsx
+++ b/apps/website/components/races/RaceFilterModal.tsx
@@ -4,7 +4,7 @@ import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Modal } from '@/ui/Modal';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { Filter, Search } from 'lucide-react';
diff --git a/apps/website/components/races/RaceHeaderPanel.tsx b/apps/website/components/races/RaceHeaderPanel.tsx
index cd58b5447..b08be1163 100644
--- a/apps/website/components/races/RaceHeaderPanel.tsx
+++ b/apps/website/components/races/RaceHeaderPanel.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar, Car, MapPin } from 'lucide-react';
 import React from 'react';
diff --git a/apps/website/components/races/RaceHero.tsx b/apps/website/components/races/RaceHero.tsx
index 10deb137a..39ed89396 100644
--- a/apps/website/components/races/RaceHero.tsx
+++ b/apps/website/components/races/RaceHero.tsx
@@ -4,7 +4,7 @@ import { Badge } from '@/ui/Badge';
 import { Heading } from '@/ui/Heading';
 import { Hero } from '@/ui/Hero';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar, Car, Clock, LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/components/races/RaceJoinButton.tsx b/apps/website/components/races/RaceJoinButton.tsx
index 88b452b78..76eb70488 100644
--- a/apps/website/components/races/RaceJoinButton.tsx
+++ b/apps/website/components/races/RaceJoinButton.tsx
@@ -1,10 +1,10 @@
 
 
 import { Button } from '@/ui/Button';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { Icon } from '@/ui/Icon';
 import { InfoBanner } from '@/ui/InfoBanner';
-import { Stack } from '@/ui/primitives/Stack';
-import { CheckCircle2, PlayCircle, UserMinus, UserPlus, XCircle } from 'lucide-react';
+import { PlayCircle, UserMinus, UserPlus, XCircle, CheckCircle2 } from 'lucide-react';
 
 interface RaceJoinButtonProps {
   raceStatus: 'scheduled' | 'running' | 'completed' | 'cancelled';
@@ -56,8 +56,8 @@ export function RaceJoinButton({
 
     if (isUserRegistered) {
       return (
-        <Stack gap={3} fullWidth>
-          <InfoBanner type="success" icon={CheckCircle2}>
+        <ButtonGroup alignment="start" gap={3}>
+          <InfoBanner type="success">
             You&apos;re Registered
           </InfoBanner>
           <Button
@@ -69,7 +69,7 @@ export function RaceJoinButton({
           >
             {isLoading.withdraw ? 'Withdrawing...' : 'Withdraw'}
           </Button>
-        </Stack>
+        </ButtonGroup>
       );
     }
 
diff --git a/apps/website/components/races/RaceList.tsx b/apps/website/components/races/RaceList.tsx
index 1b71d53e1..f3bf8f737 100644
--- a/apps/website/components/races/RaceList.tsx
+++ b/apps/website/components/races/RaceList.tsx
@@ -3,11 +3,9 @@
 import { RaceListItem } from '@/components/races/RaceListItem';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { RaceViewData } from '@/lib/view-data/RacesViewData';
-import { Card } from '@/ui/Card';
 import { DateHeader } from '@/ui/DateHeader';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Text } from '@/ui/Text';
+import { EmptyState } from '@/ui/EmptyState';
+import { Stack } from '@/ui/Stack';
 import { Calendar, CheckCircle2, Clock, PlayCircle, XCircle } from 'lucide-react';
 
 interface RaceListProps {
@@ -46,21 +44,11 @@ export function RaceList({ racesByDate, totalCount, onRaceClick }: RaceListProps
 
   if (racesByDate.length === 0) {
     return (
-      <Card py={12} textAlign="center" bg="bg-surface-charcoal" border borderColor="border-outline-steel">
-        <Stack align="center" gap={4}>
-          <Stack p={4} bg="bg-base-black" rounded="full" border borderColor="border-outline-steel">
-            <Icon icon={Calendar} size={8} color="var(--text-gray-500)" />
-          </Stack>
-          <Stack>
-            <Text weight="medium" color="text-white" block mb={1}>No races found</Text>
-            <Text size="sm" color="text-gray-500">
-              {totalCount === 0
-                ? 'No races have been scheduled yet'
-                : 'Try adjusting your filters'}
-            </Text>
-          </Stack>
-        </Stack>
-      </Card>
+      <EmptyState
+        icon={Calendar}
+        title="No races found"
+        description={totalCount === 0 ? 'No races have been scheduled yet' : 'Try adjusting your filters'}
+      />
     );
   }
 
@@ -69,8 +57,7 @@ export function RaceList({ racesByDate, totalCount, onRaceClick }: RaceListProps
       {racesByDate.map((group) => (
         <Stack key={group.dateKey} gap={3}>
           <DateHeader 
-            label={group.dateLabel} 
-            count={group.races.length} 
+            date={group.dateLabel} 
           />
 
           <Stack gap={2}>
diff --git a/apps/website/components/races/RacePageHeader.tsx b/apps/website/components/races/RacePageHeader.tsx
index 10cb60847..c6cd59f2a 100644
--- a/apps/website/components/races/RacePageHeader.tsx
+++ b/apps/website/components/races/RacePageHeader.tsx
@@ -2,9 +2,9 @@
 
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { CalendarDays, Clock, Flag, LucideIcon, Trophy, Zap } from 'lucide-react';
 
diff --git a/apps/website/components/races/RaceResultCard.tsx b/apps/website/components/races/RaceResultCard.tsx
index 59e50ffba..d354a8cbb 100644
--- a/apps/website/components/races/RaceResultCard.tsx
+++ b/apps/website/components/races/RaceResultCard.tsx
@@ -4,7 +4,7 @@ import { routes } from '@/lib/routing/RouteConfig';
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ChevronRight } from 'lucide-react';
 
diff --git a/apps/website/components/races/RaceResultHero.tsx b/apps/website/components/races/RaceResultHero.tsx
index 829801f14..0e630312a 100644
--- a/apps/website/components/races/RaceResultHero.tsx
+++ b/apps/website/components/races/RaceResultHero.tsx
@@ -2,8 +2,8 @@
 
 import { DecorativeBlur } from '@/ui/DecorativeBlur';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Trophy } from 'lucide-react';
 
diff --git a/apps/website/components/races/RaceResultList.tsx b/apps/website/components/races/RaceResultList.tsx
index 1a558dcb6..c93d8c3f1 100644
--- a/apps/website/components/races/RaceResultList.tsx
+++ b/apps/website/components/races/RaceResultList.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { ReactNode } from 'react';
 
 interface RaceResultListProps {
diff --git a/apps/website/components/races/RaceResultsHeader.tsx b/apps/website/components/races/RaceResultsHeader.tsx
index 29c3967e0..d406bfe3e 100644
--- a/apps/website/components/races/RaceResultsHeader.tsx
+++ b/apps/website/components/races/RaceResultsHeader.tsx
@@ -2,7 +2,7 @@
 
 import { Icon } from '@/ui/Icon';
 import { PageHero } from '@/ui/PageHero';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar, Trophy, Users, Zap } from 'lucide-react';
 
@@ -23,42 +23,42 @@ export function RaceResultsHeader({
   leagueName,
   raceSOF
 }: RaceResultsHeaderProps) {
-  const stats = [
-    ...(raceScheduledAt ? [{
-      icon: Calendar,
-      value: new Date(raceScheduledAt).toLocaleDateString('en-US', {
-        weekday: 'short',
-        month: 'short',
-        day: 'numeric',
-      }),
-      label: '',
-      color: 'text-gray-400'
-    }] : []),
-    ...(totalDrivers !== undefined && totalDrivers !== null ? [{
-      icon: Users,
-      value: totalDrivers,
-      label: 'drivers classified',
-      color: 'text-gray-400'
-    }] : []),
-    ...(leagueName ? [{
-      value: leagueName,
-      label: '',
-      color: 'text-primary-blue'
-    }] : [])
-  ];
-
   return (
     <PageHero
       title={`${raceTrack || DEFAULT_RACE_TRACK} Results`}
-      icon={Trophy}
-      stats={stats}
     >
-      {raceSOF && (
-        <Stack direction="row" align="center" gap={1.5} mt={4}>
-          <Icon icon={Zap} size={4} color="text-warning-amber" />
-          <Text size="sm" color="text-warning-amber">SOF {raceSOF}</Text>
+      <Stack gap={4}>
+        <Stack direction="row" align="center" gap={4} wrap>
+          {raceScheduledAt && (
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Calendar} size={4} intent="low" />
+              <Text size="sm" variant="low">
+                {new Date(raceScheduledAt).toLocaleDateString('en-US', {
+                  weekday: 'short',
+                  month: 'short',
+                  day: 'numeric',
+                })}
+              </Text>
+            </Stack>
+          )}
+          {totalDrivers !== undefined && totalDrivers !== null && (
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Users} size={4} intent="low" />
+              <Text size="sm" variant="low">{totalDrivers} drivers classified</Text>
+            </Stack>
+          )}
+          {leagueName && (
+            <Text size="sm" variant="primary">{leagueName}</Text>
+          )}
         </Stack>
-      )}
+
+        {raceSOF && (
+          <Stack direction="row" align="center" gap={1.5}>
+            <Icon icon={Zap} size={4} intent="warning" />
+            <Text size="sm" variant="warning">SOF {raceSOF}</Text>
+          </Stack>
+        )}
+      </Stack>
     </PageHero>
   );
 }
diff --git a/apps/website/components/races/RaceStewardingStats.tsx b/apps/website/components/races/RaceStewardingStats.tsx
index 4370bad65..0ce7fbe91 100644
--- a/apps/website/components/races/RaceStewardingStats.tsx
+++ b/apps/website/components/races/RaceStewardingStats.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Grid } from '@/ui/Grid';
 import { StatGridItem } from '@/ui/StatGridItem';
 import { CheckCircle, Clock, Gavel } from 'lucide-react';
 
@@ -10,25 +10,25 @@ interface RaceStewardingStatsProps {
 
 export function RaceStewardingStats({ pendingCount, resolvedCount, penaltiesCount }: RaceStewardingStatsProps) {
   return (
-    <Box display="grid" gridCols={3} gap={4}>
+    <Grid cols={3} gap={4}>
       <StatGridItem
         label="Pending"
         value={pendingCount}
         icon={Clock}
-        color="text-warning-amber"
+        intent="warning"
       />
       <StatGridItem
         label="Resolved"
         value={resolvedCount}
         icon={CheckCircle}
-        color="text-performance-green"
+        intent="success"
       />
       <StatGridItem
         label="Penalties"
         value={penaltiesCount}
         icon={Gavel}
-        color="text-red-400"
+        intent="critical"
       />
-    </Box>
+    </Grid>
   );
 }
diff --git a/apps/website/components/races/SessionSummaryPanel.tsx b/apps/website/components/races/SessionSummaryPanel.tsx
index 6531ac950..78a864918 100644
--- a/apps/website/components/races/SessionSummaryPanel.tsx
+++ b/apps/website/components/races/SessionSummaryPanel.tsx
@@ -1,5 +1,5 @@
+import { Box } from '@/ui/Box';
 import { Panel } from '@/ui/Panel';
-import { Box } from '@/ui/primitives/Box';
 import { StatusDot } from '@/ui/StatusDot';
 import { Text } from '@/ui/Text';
 
diff --git a/apps/website/components/races/StandingsItem.tsx b/apps/website/components/races/StandingsItem.tsx
index 3636c4b13..0179f0372 100644
--- a/apps/website/components/races/StandingsItem.tsx
+++ b/apps/website/components/races/StandingsItem.tsx
@@ -1,8 +1,8 @@
 import { Badge } from '@/ui/Badge';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { StatItem } from '@/ui/StatItem';
 
 interface StandingsItemProps {
diff --git a/apps/website/components/races/StandingsList.tsx b/apps/website/components/races/StandingsList.tsx
index eb2b15ac9..039653f56 100644
--- a/apps/website/components/races/StandingsList.tsx
+++ b/apps/website/components/races/StandingsList.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { StandingsItem } from './StandingsItem';
 
 interface Standing {
diff --git a/apps/website/components/races/TelemetryLine.tsx b/apps/website/components/races/TelemetryLine.tsx
index b840d304f..b69a99479 100644
--- a/apps/website/components/races/TelemetryLine.tsx
+++ b/apps/website/components/races/TelemetryLine.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 
 interface TelemetryLineProps {
   color?: 'primary' | 'aqua' | 'amber' | 'green' | 'red';
diff --git a/apps/website/components/races/TelemetryStrip.tsx b/apps/website/components/races/TelemetryStrip.tsx
index 4ce196996..6b4e1aba0 100644
--- a/apps/website/components/races/TelemetryStrip.tsx
+++ b/apps/website/components/races/TelemetryStrip.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface TelemetryItem {
diff --git a/apps/website/components/races/TrackConditionsPanel.tsx b/apps/website/components/races/TrackConditionsPanel.tsx
index c863b400e..ee6e4d8ff 100644
--- a/apps/website/components/races/TrackConditionsPanel.tsx
+++ b/apps/website/components/races/TrackConditionsPanel.tsx
@@ -2,7 +2,7 @@
 
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Droplets, Sun, Thermometer, Wind, type LucideIcon } from 'lucide-react';
 
 interface TrackConditionsPanelProps {
diff --git a/apps/website/components/races/TrackImage.tsx b/apps/website/components/races/TrackImage.tsx
index 64b5f17cd..f820cf0bf 100644
--- a/apps/website/components/races/TrackImage.tsx
+++ b/apps/website/components/races/TrackImage.tsx
@@ -1,6 +1,6 @@
+import { Box } from '@/ui/Box';
 import { Image } from '@/ui/Image';
 import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
-import { Box } from '@/ui/primitives/Box';
 
 export interface TrackImageProps {
   trackId?: string;
diff --git a/apps/website/components/races/UpcomingRaceItem.tsx b/apps/website/components/races/UpcomingRaceItem.tsx
index cc5eb7747..dd6ce410b 100644
--- a/apps/website/components/races/UpcomingRaceItem.tsx
+++ b/apps/website/components/races/UpcomingRaceItem.tsx
@@ -1,8 +1,8 @@
 
 
 import { Badge } from '@/ui/Badge';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 
 interface UpcomingRaceItemProps {
diff --git a/apps/website/components/races/UpcomingRaces.tsx b/apps/website/components/races/UpcomingRaces.tsx
index 20aaa5315..c9ddcba92 100644
--- a/apps/website/components/races/UpcomingRaces.tsx
+++ b/apps/website/components/races/UpcomingRaces.tsx
@@ -2,13 +2,13 @@
 
 import { UpcomingRaceItem } from '@/components/races/UpcomingRaceItem';
 import { UpcomingRacesList } from '@/components/races/UpcomingRacesList';
-import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
+import { MinimalEmptyState } from '@/ui/EmptyState';
 import { routes } from '@/lib/routing/RouteConfig';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar } from 'lucide-react';
 
diff --git a/apps/website/components/races/UpcomingRacesList.tsx b/apps/website/components/races/UpcomingRacesList.tsx
index 90e19bcd7..29f19bfe5 100644
--- a/apps/website/components/races/UpcomingRacesList.tsx
+++ b/apps/website/components/races/UpcomingRacesList.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { ReactNode } from 'react';
 
 interface UpcomingRacesListProps {
diff --git a/apps/website/components/races/UpcomingRacesSidebar.tsx b/apps/website/components/races/UpcomingRacesSidebar.tsx
index abd81e27b..75e3c4df4 100644
--- a/apps/website/components/races/UpcomingRacesSidebar.tsx
+++ b/apps/website/components/races/UpcomingRacesSidebar.tsx
@@ -2,7 +2,7 @@ import { RaceSummaryItem } from '@/components/races/RaceSummaryItem';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 type UpcomingRace = {
   id: string;
diff --git a/apps/website/components/shared/state/StateContainer.tsx b/apps/website/components/shared/state/StateContainer.tsx
index af9f473b9..159705f46 100644
--- a/apps/website/components/shared/state/StateContainer.tsx
+++ b/apps/website/components/shared/state/StateContainer.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { EmptyState } from '@/components/shared/state/EmptyState';
-import { ErrorDisplay } from '@/components/shared/state/ErrorDisplay';
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { EmptyState } from '@/ui/EmptyState';
+import { ErrorDisplay } from '@/ui/ErrorDisplay';
+import { LoadingWrapper } from '@/ui/LoadingWrapper';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
 import { StateContainerConfig, StateContainerProps } from '@/ui/state-types';
 import { Text } from '@/ui/Text';
 import { AlertCircle, Grid, Inbox, List, LucideIcon } from 'lucide-react';
diff --git a/apps/website/components/shared/state/StatefulPageWrapper.tsx b/apps/website/components/shared/state/StatefulPageWrapper.tsx
index ad62a66c0..b48b27598 100644
--- a/apps/website/components/shared/state/StatefulPageWrapper.tsx
+++ b/apps/website/components/shared/state/StatefulPageWrapper.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { PageWrapper, PageWrapperProps } from '@/components/shared/state/PageWrapper';
+import { PageWrapper, PageWrapperProps } from '@/ui/PageWrapper';
 
 /**
  * Stateful Page Wrapper - CLIENT SIDE ONLY
@@ -56,4 +56,4 @@ export function StatefulPageWrapper<TData>({
 }
 
 // Re-export types for convenience
-export type { PageWrapperProps, PageWrapperLoadingConfig, PageWrapperErrorConfig, PageWrapperEmptyConfig } from '@/components/shared/state/PageWrapper';
\ No newline at end of file
+export type { PageWrapperProps, PageWrapperLoadingConfig, PageWrapperErrorConfig, PageWrapperEmptyConfig } from '@/ui/PageWrapper';
\ No newline at end of file
diff --git a/apps/website/components/social/FriendsPreview.tsx b/apps/website/components/social/FriendsPreview.tsx
index c2c765719..cbf0639e2 100644
--- a/apps/website/components/social/FriendsPreview.tsx
+++ b/apps/website/components/social/FriendsPreview.tsx
@@ -8,7 +8,7 @@ import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
 
diff --git a/apps/website/components/sponsors/BillingSummaryPanel.tsx b/apps/website/components/sponsors/BillingSummaryPanel.tsx
index db6ab169c..7f1bc1f67 100644
--- a/apps/website/components/sponsors/BillingSummaryPanel.tsx
+++ b/apps/website/components/sponsors/BillingSummaryPanel.tsx
@@ -1,6 +1,6 @@
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/components/sponsors/PendingSponsorshipRequests.tsx b/apps/website/components/sponsors/PendingSponsorshipRequests.tsx
index c9c1805c6..d530e7e59 100644
--- a/apps/website/components/sponsors/PendingSponsorshipRequests.tsx
+++ b/apps/website/components/sponsors/PendingSponsorshipRequests.tsx
@@ -4,7 +4,7 @@ import { SponsorshipRequestItem } from '@/components/sponsors/SponsorshipRequest
 import { Badge } from '@/ui/Badge';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Building } from 'lucide-react';
 import { useState } from 'react';
diff --git a/apps/website/components/sponsors/PricingTableShell.tsx b/apps/website/components/sponsors/PricingTableShell.tsx
index f23955466..fe4c57cef 100644
--- a/apps/website/components/sponsors/PricingTableShell.tsx
+++ b/apps/website/components/sponsors/PricingTableShell.tsx
@@ -1,6 +1,6 @@
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Check, Info } from 'lucide-react';
 
diff --git a/apps/website/components/sponsors/RenewalItem.tsx b/apps/website/components/sponsors/RenewalItem.tsx
index 0543a658b..a2313752a 100644
--- a/apps/website/components/sponsors/RenewalItem.tsx
+++ b/apps/website/components/sponsors/RenewalItem.tsx
@@ -2,7 +2,7 @@
 
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/components/sponsors/SponsorActivityItem.tsx b/apps/website/components/sponsors/SponsorActivityItem.tsx
index d1b4a5fd5..9e816f25c 100644
--- a/apps/website/components/sponsors/SponsorActivityItem.tsx
+++ b/apps/website/components/sponsors/SponsorActivityItem.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface SponsorActivityItemProps {
diff --git a/apps/website/components/sponsors/SponsorActivityPanel.tsx b/apps/website/components/sponsors/SponsorActivityPanel.tsx
index 76cbed14c..9564c6a2f 100644
--- a/apps/website/components/sponsors/SponsorActivityPanel.tsx
+++ b/apps/website/components/sponsors/SponsorActivityPanel.tsx
@@ -1,6 +1,6 @@
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Clock, LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/components/sponsors/SponsorBrandingPreview.tsx b/apps/website/components/sponsors/SponsorBrandingPreview.tsx
index 5b029c9e0..09c3b99a9 100644
--- a/apps/website/components/sponsors/SponsorBrandingPreview.tsx
+++ b/apps/website/components/sponsors/SponsorBrandingPreview.tsx
@@ -2,7 +2,7 @@
 
 import { SponsorLogo } from '@/components/sponsors/SponsorLogo';
 import { Card, Card as Surface } from '@/ui/Card';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface SponsorBrandingPreviewProps {
diff --git a/apps/website/components/sponsors/SponsorContractCard.tsx b/apps/website/components/sponsors/SponsorContractCard.tsx
index 11f78d75c..3e5730620 100644
--- a/apps/website/components/sponsors/SponsorContractCard.tsx
+++ b/apps/website/components/sponsors/SponsorContractCard.tsx
@@ -4,7 +4,7 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     BarChart3,
diff --git a/apps/website/components/sponsors/SponsorDashboardHeader.tsx b/apps/website/components/sponsors/SponsorDashboardHeader.tsx
index adbfb2dd1..6d8e48ca0 100644
--- a/apps/website/components/sponsors/SponsorDashboardHeader.tsx
+++ b/apps/website/components/sponsors/SponsorDashboardHeader.tsx
@@ -5,14 +5,14 @@ import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import {
-    Bell,
-    LayoutDashboard,
-    RefreshCw,
-    Settings
+  Bell,
+  LayoutDashboard,
+  RefreshCw,
+  Settings
 } from 'lucide-react';
 
 interface SponsorDashboardHeaderProps {
diff --git a/apps/website/components/sponsors/SponsorHeaderPanel.tsx b/apps/website/components/sponsors/SponsorHeaderPanel.tsx
index 82ae2d3b2..844bd1f4f 100644
--- a/apps/website/components/sponsors/SponsorHeaderPanel.tsx
+++ b/apps/website/components/sponsors/SponsorHeaderPanel.tsx
@@ -1,7 +1,7 @@
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { LucideIcon } from 'lucide-react';
 import React from 'react';
diff --git a/apps/website/components/sponsors/SponsorHero.tsx b/apps/website/components/sponsors/SponsorHero.tsx
index ef7fd8c7e..3bd3fed38 100644
--- a/apps/website/components/sponsors/SponsorHero.tsx
+++ b/apps/website/components/sponsors/SponsorHero.tsx
@@ -1,8 +1,8 @@
 
 
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { motion, useReducedMotion } from 'framer-motion';
 import { Building2 } from 'lucide-react';
diff --git a/apps/website/components/sponsors/SponsorInsightsCard.tsx b/apps/website/components/sponsors/SponsorInsightsCard.tsx
index e8632d835..158955004 100644
--- a/apps/website/components/sponsors/SponsorInsightsCard.tsx
+++ b/apps/website/components/sponsors/SponsorInsightsCard.tsx
@@ -8,7 +8,7 @@ import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { InfoBox } from '@/ui/InfoBox';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     Activity,
diff --git a/apps/website/components/sponsors/SponsorLogo.tsx b/apps/website/components/sponsors/SponsorLogo.tsx
index 35af5c7fc..fa5d6d0d5 100644
--- a/apps/website/components/sponsors/SponsorLogo.tsx
+++ b/apps/website/components/sponsors/SponsorLogo.tsx
@@ -1,6 +1,6 @@
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Box } from '@/ui/primitives/Box';
 import { Building2 } from 'lucide-react';
 
 export interface SponsorLogoProps {
diff --git a/apps/website/components/sponsors/SponsorMetricCard.tsx b/apps/website/components/sponsors/SponsorMetricCard.tsx
index e1d9ff9e4..a4d331ecb 100644
--- a/apps/website/components/sponsors/SponsorMetricCard.tsx
+++ b/apps/website/components/sponsors/SponsorMetricCard.tsx
@@ -1,5 +1,5 @@
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/components/sponsors/SponsorPayoutQueueTable.tsx b/apps/website/components/sponsors/SponsorPayoutQueueTable.tsx
index 40c446da8..4459daf43 100644
--- a/apps/website/components/sponsors/SponsorPayoutQueueTable.tsx
+++ b/apps/website/components/sponsors/SponsorPayoutQueueTable.tsx
@@ -2,7 +2,7 @@
 
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import {
diff --git a/apps/website/components/sponsors/SponsorSlotCard.tsx b/apps/website/components/sponsors/SponsorSlotCard.tsx
index 130d2a5c5..b6ea03a4a 100644
--- a/apps/website/components/sponsors/SponsorSlotCard.tsx
+++ b/apps/website/components/sponsors/SponsorSlotCard.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { ReactNode } from 'react';
 
diff --git a/apps/website/components/sponsors/SponsorStatusChip.tsx b/apps/website/components/sponsors/SponsorStatusChip.tsx
index 127d97445..3358ad986 100644
--- a/apps/website/components/sponsors/SponsorStatusChip.tsx
+++ b/apps/website/components/sponsors/SponsorStatusChip.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     AlertTriangle,
diff --git a/apps/website/components/sponsors/SponsorTierCard.tsx b/apps/website/components/sponsors/SponsorTierCard.tsx
index b3cc5c3aa..7a4e4252d 100644
--- a/apps/website/components/sponsors/SponsorTierCard.tsx
+++ b/apps/website/components/sponsors/SponsorTierCard.tsx
@@ -3,8 +3,8 @@
 import { Badge } from '@/ui/Badge';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { CheckCircle2, LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/components/sponsors/SponsorshipCategoryCard.tsx b/apps/website/components/sponsors/SponsorshipCategoryCard.tsx
index 8b61af49f..4776b61bf 100644
--- a/apps/website/components/sponsors/SponsorshipCategoryCard.tsx
+++ b/apps/website/components/sponsors/SponsorshipCategoryCard.tsx
@@ -1,7 +1,7 @@
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/components/sponsors/SponsorshipRequestItem.tsx b/apps/website/components/sponsors/SponsorshipRequestItem.tsx
index b4a7ce29c..3551e3e5d 100644
--- a/apps/website/components/sponsors/SponsorshipRequestItem.tsx
+++ b/apps/website/components/sponsors/SponsorshipRequestItem.tsx
@@ -1,11 +1,11 @@
 
 
 import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Building, Check, Clock, DollarSign, MessageCircle, X } from 'lucide-react';
 import React from 'react';
diff --git a/apps/website/components/sponsors/TransactionTable.tsx b/apps/website/components/sponsors/TransactionTable.tsx
index abd71be41..d69824d33 100644
--- a/apps/website/components/sponsors/TransactionTable.tsx
+++ b/apps/website/components/sponsors/TransactionTable.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@/ui/Button';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertTriangle, Check, Clock, Download, Receipt } from 'lucide-react';
 
diff --git a/apps/website/components/teams/CreateTeamForm.tsx b/apps/website/components/teams/CreateTeamForm.tsx
index f1ac8731b..c326f6d2b 100644
--- a/apps/website/components/teams/CreateTeamForm.tsx
+++ b/apps/website/components/teams/CreateTeamForm.tsx
@@ -4,7 +4,7 @@ import { useCreateTeam } from "@/hooks/team/useCreateTeam";
 import { Button } from '@/ui/Button';
 import { InfoBanner } from '@/ui/InfoBanner';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
 import React, { useState } from 'react';
diff --git a/apps/website/components/teams/FeaturedRecruiting.tsx b/apps/website/components/teams/FeaturedRecruiting.tsx
index 6ec705a3b..459beaa9c 100644
--- a/apps/website/components/teams/FeaturedRecruiting.tsx
+++ b/apps/website/components/teams/FeaturedRecruiting.tsx
@@ -5,7 +5,7 @@ import { RecruitingTeamGrid } from '@/components/teams/RecruitingTeamGrid';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { UserPlus } from 'lucide-react';
 
diff --git a/apps/website/components/teams/RecruitingTeamCard.tsx b/apps/website/components/teams/RecruitingTeamCard.tsx
index b31388006..a7ef92566 100644
--- a/apps/website/components/teams/RecruitingTeamCard.tsx
+++ b/apps/website/components/teams/RecruitingTeamCard.tsx
@@ -1,7 +1,7 @@
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Trophy, Users } from 'lucide-react';
 
diff --git a/apps/website/components/teams/RecruitingTeamGrid.tsx b/apps/website/components/teams/RecruitingTeamGrid.tsx
index 8a2e31f09..ca2f91a2b 100644
--- a/apps/website/components/teams/RecruitingTeamGrid.tsx
+++ b/apps/website/components/teams/RecruitingTeamGrid.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { ReactNode } from 'react';
 
 interface RecruitingTeamGridProps {
diff --git a/apps/website/components/teams/SkillLevelSection.tsx b/apps/website/components/teams/SkillLevelSection.tsx
index cbc8851ef..6546d7284 100644
--- a/apps/website/components/teams/SkillLevelSection.tsx
+++ b/apps/website/components/teams/SkillLevelSection.tsx
@@ -3,7 +3,7 @@
 import { SkillLevelHeader } from '@/components/drivers/SkillLevelHeader';
 import { TeamCard } from '@/components/teams/TeamCardWrapper';
 import { TeamGrid } from '@/components/teams/TeamGrid';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { LucideIcon } from 'lucide-react';
 import { useState } from 'react';
 
diff --git a/apps/website/components/teams/TeamCard.tsx b/apps/website/components/teams/TeamCard.tsx
index 94c323fd2..cc6a92347 100644
--- a/apps/website/components/teams/TeamCard.tsx
+++ b/apps/website/components/teams/TeamCard.tsx
@@ -46,21 +46,21 @@ export function TeamCard({
           <Image
             src={logo}
             alt={name}
-            width={64}
-            height={64}
+            fullWidth
+            fullHeight
             objectFit="cover"
           />
         ) : (
-          <PlaceholderImage size={64} />
+          <PlaceholderImage />
         )
       }
       badges={
-        <React.Fragment>
+        <>
           {performanceBadge}
           {specializationContent}
           {categoryBadge}
           {languagesContent}
-        </React.Fragment>
+        </>
       }
     />
   );
diff --git a/apps/website/components/teams/TeamCardWrapper.tsx b/apps/website/components/teams/TeamCardWrapper.tsx
index ef308e024..c3c9f9188 100644
--- a/apps/website/components/teams/TeamCardWrapper.tsx
+++ b/apps/website/components/teams/TeamCardWrapper.tsx
@@ -2,7 +2,7 @@ import { TeamCard as UiTeamCard } from '@/components/teams/TeamCard';
 import { TeamStatItem } from '@/components/teams/TeamStatItem';
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     Clock,
diff --git a/apps/website/components/teams/TeamDetailsHeader.tsx b/apps/website/components/teams/TeamDetailsHeader.tsx
index f9488edfc..19174a024 100644
--- a/apps/website/components/teams/TeamDetailsHeader.tsx
+++ b/apps/website/components/teams/TeamDetailsHeader.tsx
@@ -3,7 +3,7 @@
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface TeamDetailsHeaderProps {
diff --git a/apps/website/components/teams/TeamFilter.tsx b/apps/website/components/teams/TeamFilter.tsx
index 3d65f286a..03edeaad3 100644
--- a/apps/website/components/teams/TeamFilter.tsx
+++ b/apps/website/components/teams/TeamFilter.tsx
@@ -7,6 +7,8 @@ import { Input } from '@/ui/Input';
 import { Text } from '@/ui/Text';
 import { ControlBar } from '@/ui/ControlBar';
 import { SegmentedControl } from '@/ui/SegmentedControl';
+import { Stack } from '@/ui/Stack';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { Hash, LucideIcon, Percent, Search, Star, Trophy } from 'lucide-react';
 import React from 'react';
 
@@ -49,22 +51,20 @@ export function TeamFilter({
   onSortChange,
 }: TeamFilterProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '1.5rem' }}>
+    <Stack gap={4} marginBottom={6}>
       <ControlBar
         leftContent={
-          <div style={{ maxWidth: '448px', width: '100%' }}>
-            <Input
-              type="text"
-              placeholder="Search teams..."
-              value={searchQuery}
-              onChange={(e) => onSearchChange(e.target.value)}
-              icon={<Icon icon={Search} size={5} intent="low" />}
-              fullWidth
-            />
-          </div>
+          <Input
+            type="text"
+            placeholder="Search teams..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            icon={<Icon icon={Search} size={5} intent="low" />}
+            fullWidth
+          />
         }
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+        <ButtonGroup gap={2}>
           <Button
             variant={filterLevel === 'all' ? 'primary' : 'secondary'}
             size="sm"
@@ -89,10 +89,10 @@ export function TeamFilter({
               </Button>
             );
           })}
-        </div>
+        </ButtonGroup>
       </ControlBar>
 
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+      <Stack align="center" gap={2}>
         <Text size="sm" variant="low">Sort by:</Text>
         <SegmentedControl
           options={SORT_OPTIONS.map(opt => ({
@@ -103,7 +103,7 @@ export function TeamFilter({
           activeId={sortBy}
           onChange={(id) => onSortChange(id as SortBy)}
         />
-      </div>
-    </div>
+      </Stack>
+    </Stack>
   );
 }
diff --git a/apps/website/components/teams/TeamGrid.tsx b/apps/website/components/teams/TeamGrid.tsx
index 358119463..1021a543d 100644
--- a/apps/website/components/teams/TeamGrid.tsx
+++ b/apps/website/components/teams/TeamGrid.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Grid } from '@/ui/Grid';
 import { ReactNode } from 'react';
 
 interface TeamGridProps {
@@ -7,8 +7,8 @@ interface TeamGridProps {
 
 export function TeamGrid({ children }: TeamGridProps) {
   return (
-    <Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={4}>
+    <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={4}>
       {children}
-    </Box>
+    </Grid>
   );
 }
diff --git a/apps/website/components/teams/TeamHeaderPanel.tsx b/apps/website/components/teams/TeamHeaderPanel.tsx
index 4cbf2eeab..0880b3daa 100644
--- a/apps/website/components/teams/TeamHeaderPanel.tsx
+++ b/apps/website/components/teams/TeamHeaderPanel.tsx
@@ -1,5 +1,5 @@
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ReactNode } from 'react';
 import { TeamLogo } from './TeamLogo';
diff --git a/apps/website/components/teams/TeamHero.tsx b/apps/website/components/teams/TeamHero.tsx
index 0878da0ba..4f94024a5 100644
--- a/apps/website/components/teams/TeamHero.tsx
+++ b/apps/website/components/teams/TeamHero.tsx
@@ -5,7 +5,7 @@ import { TeamLogo } from '@/components/teams/TeamLogo';
 import { TeamTag } from '@/components/teams/TeamTag';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface TeamHeroProps {
diff --git a/apps/website/components/teams/TeamHeroSection.tsx b/apps/website/components/teams/TeamHeroSection.tsx
index 29a881cd1..a177ed4da 100644
--- a/apps/website/components/teams/TeamHeroSection.tsx
+++ b/apps/website/components/teams/TeamHeroSection.tsx
@@ -2,7 +2,7 @@
 
 import { Badge } from '@/ui/Badge';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
 import { ReactNode } from 'react';
diff --git a/apps/website/components/teams/TeamHeroStats.tsx b/apps/website/components/teams/TeamHeroStats.tsx
index c9ebba826..d3b256f4f 100644
--- a/apps/website/components/teams/TeamHeroStats.tsx
+++ b/apps/website/components/teams/TeamHeroStats.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { UserPlus, Users } from 'lucide-react';
 
diff --git a/apps/website/components/teams/TeamIdentity.tsx b/apps/website/components/teams/TeamIdentity.tsx
index 3de594a9a..dd716a06a 100644
--- a/apps/website/components/teams/TeamIdentity.tsx
+++ b/apps/website/components/teams/TeamIdentity.tsx
@@ -1,5 +1,5 @@
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface TeamIdentityProps {
diff --git a/apps/website/components/teams/TeamLadderRow.tsx b/apps/website/components/teams/TeamLadderRow.tsx
index 937f84170..af9ccbead 100644
--- a/apps/website/components/teams/TeamLadderRow.tsx
+++ b/apps/website/components/teams/TeamLadderRow.tsx
@@ -1,5 +1,5 @@
+import { Box } from '@/ui/Box';
 import { Image } from '@/ui/Image';
-import { Box } from '@/ui/primitives/Box';
 import { TableCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 
diff --git a/apps/website/components/teams/TeamLeaderboardItem.tsx b/apps/website/components/teams/TeamLeaderboardItem.tsx
index fb9890800..6b62b3130 100644
--- a/apps/website/components/teams/TeamLeaderboardItem.tsx
+++ b/apps/website/components/teams/TeamLeaderboardItem.tsx
@@ -2,7 +2,7 @@
 
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Crown, Trophy, Users } from 'lucide-react';
 
diff --git a/apps/website/components/teams/TeamLeaderboardPanel.tsx b/apps/website/components/teams/TeamLeaderboardPanel.tsx
index 8dfe294d6..637663d84 100644
--- a/apps/website/components/teams/TeamLeaderboardPanel.tsx
+++ b/apps/website/components/teams/TeamLeaderboardPanel.tsx
@@ -1,5 +1,5 @@
 import { RankBadge } from '@/components/leaderboards/RankBadge';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { TeamLogo } from './TeamLogo';
diff --git a/apps/website/components/teams/TeamLogo.tsx b/apps/website/components/teams/TeamLogo.tsx
index 3b3033b2f..ef3de189e 100644
--- a/apps/website/components/teams/TeamLogo.tsx
+++ b/apps/website/components/teams/TeamLogo.tsx
@@ -1,6 +1,6 @@
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Box } from '@/ui/primitives/Box';
 import { Users } from 'lucide-react';
 
 export interface TeamLogoProps {
diff --git a/apps/website/components/teams/TeamMembersTable.tsx b/apps/website/components/teams/TeamMembersTable.tsx
index 5eefcfaaf..3c477c070 100644
--- a/apps/website/components/teams/TeamMembersTable.tsx
+++ b/apps/website/components/teams/TeamMembersTable.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 
diff --git a/apps/website/components/teams/TeamMembershipCard.tsx b/apps/website/components/teams/TeamMembershipCard.tsx
index eaa7f7155..270736d84 100644
--- a/apps/website/components/teams/TeamMembershipCard.tsx
+++ b/apps/website/components/teams/TeamMembershipCard.tsx
@@ -3,8 +3,8 @@
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { ChevronRight, Users } from 'lucide-react';
 
diff --git a/apps/website/components/teams/TeamMembershipGrid.tsx b/apps/website/components/teams/TeamMembershipGrid.tsx
index 19e53af4e..e4054f372 100644
--- a/apps/website/components/teams/TeamMembershipGrid.tsx
+++ b/apps/website/components/teams/TeamMembershipGrid.tsx
@@ -3,7 +3,7 @@
 import { Card, Card as Surface } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ChevronRight, Shield, Users } from 'lucide-react';
 
diff --git a/apps/website/components/teams/TeamRankingsTable.tsx b/apps/website/components/teams/TeamRankingsTable.tsx
index 83bc0b1e8..fac6d181b 100644
--- a/apps/website/components/teams/TeamRankingsTable.tsx
+++ b/apps/website/components/teams/TeamRankingsTable.tsx
@@ -3,7 +3,7 @@ import { TeamIdentity } from '@/components/teams/TeamIdentity';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
diff --git a/apps/website/components/teams/TeamRoster.tsx b/apps/website/components/teams/TeamRoster.tsx
index 90152699f..d126d444d 100644
--- a/apps/website/components/teams/TeamRoster.tsx
+++ b/apps/website/components/teams/TeamRoster.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
+import { MinimalEmptyState } from '@/ui/EmptyState';
 import { TeamRosterItem } from '@/components/teams/TeamRosterItem';
 import { TeamRosterList } from '@/components/teams/TeamRosterList';
 import { useTeamRoster } from "@/hooks/team/useTeamRoster";
@@ -10,7 +10,7 @@ import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { useMemo, useState } from 'react';
diff --git a/apps/website/components/teams/TeamRosterItem.tsx b/apps/website/components/teams/TeamRosterItem.tsx
index 804eb9ec1..15274bc34 100644
--- a/apps/website/components/teams/TeamRosterItem.tsx
+++ b/apps/website/components/teams/TeamRosterItem.tsx
@@ -1,6 +1,6 @@
-import { DriverIdentity } from '@/components/drivers/DriverIdentity';
+import { DriverIdentity } from '@/ui/DriverIdentity';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ReactNode } from 'react';
 
diff --git a/apps/website/components/teams/TeamRosterList.tsx b/apps/website/components/teams/TeamRosterList.tsx
index 89bf91936..573887b77 100644
--- a/apps/website/components/teams/TeamRosterList.tsx
+++ b/apps/website/components/teams/TeamRosterList.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { ReactNode } from 'react';
 
 interface TeamRosterListProps {
diff --git a/apps/website/components/teams/TeamSearchBar.tsx b/apps/website/components/teams/TeamSearchBar.tsx
index e783239ae..8b3bb0d52 100644
--- a/apps/website/components/teams/TeamSearchBar.tsx
+++ b/apps/website/components/teams/TeamSearchBar.tsx
@@ -14,15 +14,13 @@ interface TeamSearchBarProps {
 
 export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
   return (
-    <div style={{ marginBottom: '1.5rem' }}>
-      <Input
-        type="text"
-        placeholder="Search teams by name, description, region, or language..."
-        value={searchQuery}
-        onChange={(e) => onSearchChange(e.target.value)}
-        icon={<Icon icon={Search} size={5} intent="low" />}
-        fullWidth
-      />
-    </div>
+    <Input
+      type="text"
+      placeholder="Search teams by name, description, region, or language..."
+      value={searchQuery}
+      onChange={(e) => onSearchChange(e.target.value)}
+      icon={<Icon icon={Search} size={5} intent="low" />}
+      fullWidth
+    />
   );
 }
diff --git a/apps/website/components/teams/TeamStandings.tsx b/apps/website/components/teams/TeamStandings.tsx
index 72ba59206..54c349524 100644
--- a/apps/website/components/teams/TeamStandings.tsx
+++ b/apps/website/components/teams/TeamStandings.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { StandingsList } from '@/components/races/StandingsList';
-import { EmptyState } from '@/components/shared/state/EmptyState';
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { EmptyState } from '@/ui/EmptyState';
+import { LoadingWrapper } from '@/ui/LoadingWrapper';
 import { useTeamStandings } from "@/hooks/team/useTeamStandings";
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
 import { Trophy } from 'lucide-react';
 
 interface TeamStandingsProps {
diff --git a/apps/website/components/teams/TeamStandingsPanel.tsx b/apps/website/components/teams/TeamStandingsPanel.tsx
index 21b0ccd80..8fe9e3d58 100644
--- a/apps/website/components/teams/TeamStandingsPanel.tsx
+++ b/apps/website/components/teams/TeamStandingsPanel.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 
diff --git a/apps/website/components/teams/TeamStatItem.tsx b/apps/website/components/teams/TeamStatItem.tsx
index 3f3c086fa..a9e7a43f3 100644
--- a/apps/website/components/teams/TeamStatItem.tsx
+++ b/apps/website/components/teams/TeamStatItem.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface TeamStatItemProps {
diff --git a/apps/website/components/teams/TeamTag.tsx b/apps/website/components/teams/TeamTag.tsx
index 010ed53b7..d03b966e5 100644
--- a/apps/website/components/teams/TeamTag.tsx
+++ b/apps/website/components/teams/TeamTag.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface TeamTagProps {
diff --git a/apps/website/components/teams/TeamsDirectoryHeader.tsx b/apps/website/components/teams/TeamsDirectoryHeader.tsx
index 870c6d955..9c3354d62 100644
--- a/apps/website/components/teams/TeamsDirectoryHeader.tsx
+++ b/apps/website/components/teams/TeamsDirectoryHeader.tsx
@@ -3,7 +3,7 @@
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Plus } from 'lucide-react';
 
diff --git a/apps/website/components/teams/WhyJoinTeamSection.tsx b/apps/website/components/teams/WhyJoinTeamSection.tsx
index 3251433b0..02cb0a539 100644
--- a/apps/website/components/teams/WhyJoinTeamSection.tsx
+++ b/apps/website/components/teams/WhyJoinTeamSection.tsx
@@ -1,14 +1,14 @@
 import { BenefitCard } from '@/components/landing/BenefitCard';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Text } from '@/ui/Text';
 import {
-    Calendar,
-    Handshake,
-    LucideIcon,
-    MessageCircle,
-    Trophy,
+  Calendar,
+  Handshake,
+  LucideIcon,
+  MessageCircle,
+  Trophy,
 } from 'lucide-react';
 
 interface Benefit {
diff --git a/apps/website/docs/STREAMLINED_STATE_HANDLING_SUMMARY.md b/apps/website/docs/STREAMLINED_STATE_HANDLING_SUMMARY.md
index a9e8d2e68..b249b1f9c 100644
--- a/apps/website/docs/STREAMLINED_STATE_HANDLING_SUMMARY.md
+++ b/apps/website/docs/STREAMLINED_STATE_HANDLING_SUMMARY.md
@@ -24,9 +24,9 @@ apps/website/components/shared/
 
 ```typescript
 import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
-import { ErrorDisplay } from '@/components/shared/state/ErrorDisplay';
-import { EmptyState } from '@/components/shared/state/EmptyState';
+import { LoadingWrapper } from '@/ui/LoadingWrapper';
+import { ErrorDisplay } from '@/ui/ErrorDisplay';
+import { EmptyState } from '@/ui/EmptyState';
 
 function MyPage() {
   const { data, isLoading, error, retry } = useDataFetching({
@@ -45,7 +45,7 @@ function MyPage() {
 ### 2. Using StateContainer (Recommended)
 
 ```typescript
-import { StateContainer } from '@/components/shared/state/StateContainer';
+import { StateContainer } from '@/ui/StateContainer';
 
 function MyPage() {
   const { data, isLoading, error, retry } = useDataFetching({
diff --git a/apps/website/eslint-rules/index.js b/apps/website/eslint-rules/index.js
index 387f5b319..44d5d3612 100644
--- a/apps/website/eslint-rules/index.js
+++ b/apps/website/eslint-rules/index.js
@@ -45,7 +45,6 @@ const cleanErrorHandling = require('./clean-error-handling');
 const servicesImplementContract = require('./services-implement-contract');
 const serverActionsReturnResult = require('./server-actions-return-result');
 const serverActionsInterface = require('./server-actions-interface');
-const noGenericUiPrimitivesInComponents = require('./no-generic-ui-primitives-in-components');
 
 module.exports = {
   rules: {
@@ -154,7 +153,6 @@ module.exports = {
     'ui-element-purity': require('./ui-element-purity'),
     'no-nextjs-imports-in-ui': require('./no-nextjs-imports-in-ui'),
     'component-classification': require('./component-classification'),
-    'no-generic-ui-primitives-in-components': noGenericUiPrimitivesInComponents,
     
     // Route Configuration Rules
     'no-hardcoded-routes': require('./no-hardcoded-routes'),
@@ -271,7 +269,6 @@ module.exports = {
         'gridpilot-rules/ui-element-purity': 'error',
         'gridpilot-rules/no-nextjs-imports-in-ui': 'error',
         'gridpilot-rules/component-classification': 'error',
-        'gridpilot-rules/no-generic-ui-primitives-in-components': 'error',
         
         // Route Configuration Rules
         'gridpilot-rules/no-hardcoded-routes': 'error',
diff --git a/apps/website/eslint-rules/no-generic-ui-primitives-in-components.js b/apps/website/eslint-rules/no-generic-ui-primitives-in-components.js
deleted file mode 100644
index 19eb2b7bf..000000000
--- a/apps/website/eslint-rules/no-generic-ui-primitives-in-components.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * ESLint rule to ban usage of generic UI primitives in components
- * 
- * Generic primitives like Box and Surface should only be used in the ui/ layer
- * to build semantic UI elements. Components should use those semantic elements.
- * 
- * Rationale:
- * - Encourages use of semantic UI components
- * - Maintains architectural boundaries
- * - Improves consistency across the application
- */
-
-module.exports = {
-  meta: {
-    type: 'problem',
-    docs: {
-      description: 'Ban usage of generic UI primitives in components',
-      category: 'Architecture',
-      recommended: true,
-    },
-    fixable: null,
-    schema: [],
-    messages: {
-      noGenericPrimitive: 'Generic UI primitive or wrapper "{{name}}" is not allowed in components. Primitives (Box, Surface) and generic wrappers (Layout, Container) are internal to the UI layer. Use semantic UI elements from @/ui instead (e.g., Card, Section, Table, Stack, Grid). If a semantic element is missing, create one in apps/website/ui/ using primitives.',
-      noPrimitiveExport: 'Do not re-export primitives from the UI layer. Primitives should remain internal to apps/website/ui/primitives/.',
-      noClassName: 'The "className" prop is not allowed in components. Styling must be encapsulated within UI elements in apps/website/ui/. Use semantic UI elements or create a new one if you need custom styling.',
-    },
-  },
-
-  create(context) {
-    const filename = context.getFilename();
-    
-    // Only run for files under /components/ (and *.ts/*.tsx)
-    const isComponent = filename.includes('/components/') && (filename.endsWith('.ts') || filename.endsWith('.tsx'));
-    
-    // Check for re-exports in the UI layer (excluding primitives themselves)
-    const isUiLayer = filename.includes('/ui/') && !filename.includes('/ui/primitives/');
-
-    return {
-      ImportDeclaration(node) {
-        if (!isComponent) return;
-
-        const importPath = node.source.value;
-        
-        // Check if it's an import from the UI primitives layer
-        const isPrimitiveImport = 
-          importPath.includes('/ui/primitives') || 
-          importPath.startsWith('@/ui/primitives') ||
-          // Legacy direct paths
-          importPath.endsWith('/ui/Box') ||
-          importPath.endsWith('/ui/Surface') ||
-          importPath.endsWith('/ui/Layout') ||
-          importPath.endsWith('/ui/Container') ||
-          importPath === '@/ui/Box' ||
-          importPath === '@/ui/Surface' ||
-          importPath === '@/ui/Layout' ||
-          importPath === '@/ui/Container';
-
-        if (isPrimitiveImport) {
-          node.specifiers.forEach(specifier => {
-            let importedName = '';
-            
-            if (specifier.type === 'ImportSpecifier') {
-              importedName = specifier.imported.name;
-            } else if (specifier.type === 'ImportDefaultSpecifier') {
-              importedName = specifier.local.name;
-            }
-
-            context.report({
-              node: specifier,
-              messageId: 'noGenericPrimitive',
-              data: { name: importedName },
-            });
-          });
-        }
-      },
-
-      JSXAttribute(node) {
-        if (!isComponent) return;
-        
-        if (node.name.name === 'className') {
-          context.report({
-            node,
-            messageId: 'noClassName',
-          });
-        }
-      },
-
-      ExportNamedDeclaration(node) {
-        if (!isUiLayer) return;
-        if (!node.source) return;
-
-        const exportPath = node.source.value;
-        if (exportPath.includes('/primitives/') || exportPath.startsWith('./primitives/')) {
-          context.report({
-            node,
-            messageId: 'noPrimitiveExport',
-          });
-        }
-      },
-
-      ExportAllDeclaration(node) {
-        if (!isUiLayer) return;
-        
-        const exportPath = node.source.value;
-        if (exportPath.includes('/primitives/') || exportPath.startsWith('./primitives/')) {
-          context.report({
-            node,
-            messageId: 'noPrimitiveExport',
-          });
-        }
-      }
-    };
-  },
-};
diff --git a/apps/website/templates/AdminDashboardTemplate.tsx b/apps/website/templates/AdminDashboardTemplate.tsx
index 9bb5727f0..caf981632 100644
--- a/apps/website/templates/AdminDashboardTemplate.tsx
+++ b/apps/website/templates/AdminDashboardTemplate.tsx
@@ -6,23 +6,23 @@ import { AdminSectionHeader } from '@/components/admin/AdminSectionHeader';
 import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
 import { routes } from '@/lib/routing/RouteConfig';
 import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/primitives/Grid';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { QuickActionLink } from '@/ui/QuickActionLink';
-import { Stack } from '@/ui/primitives/Stack';
 import { StatusBadge } from '@/ui/StatusBadge';
 import { Text } from '@/ui/Text';
 import {
-    Activity,
-    ArrowRight,
-    Clock,
-    RefreshCw,
-    Shield,
-    Users
+  Activity,
+  ArrowRight,
+  Clock,
+  RefreshCw,
+  Shield,
+  Users
 } from 'lucide-react';
 
 /**
diff --git a/apps/website/templates/AdminUsersTemplate.tsx b/apps/website/templates/AdminUsersTemplate.tsx
index 6e221d83a..aefb4cd44 100644
--- a/apps/website/templates/AdminUsersTemplate.tsx
+++ b/apps/website/templates/AdminUsersTemplate.tsx
@@ -7,12 +7,12 @@ import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
 import { AdminUsersTable } from '@/components/admin/AdminUsersTable';
 import { BulkActionBar } from '@/components/admin/BulkActionBar';
 import { UserFilters } from '@/components/admin/UserFilters';
-import { InlineNotice } from '@/components/shared/ux/InlineNotice';
+import { InlineNotice } from '@/ui/InlineNotice';
 import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { RefreshCw, ShieldAlert, Users } from 'lucide-react';
 
 interface AdminUsersTemplateProps {
diff --git a/apps/website/templates/DashboardTemplate.tsx b/apps/website/templates/DashboardTemplate.tsx
index a0a565f3f..345fe44f9 100644
--- a/apps/website/templates/DashboardTemplate.tsx
+++ b/apps/website/templates/DashboardTemplate.tsx
@@ -9,11 +9,11 @@ import { TelemetryPanel } from '@/components/dashboard/TelemetryPanel';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { DashboardViewData } from '@/lib/view-data/DashboardViewData';
 import { Avatar } from '@/ui/Avatar';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
-import { Grid } from '@/ui/primitives/Grid';
 import { IconButton } from '@/ui/IconButton';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Bell, Calendar, LayoutDashboard, Search, Settings, Trophy, Users } from 'lucide-react';
 import { useRouter } from 'next/navigation';
diff --git a/apps/website/templates/DriverProfileTemplate.tsx b/apps/website/templates/DriverProfileTemplate.tsx
index 2f5128b37..383d46ea3 100644
--- a/apps/website/templates/DriverProfileTemplate.tsx
+++ b/apps/website/templates/DriverProfileTemplate.tsx
@@ -4,12 +4,12 @@ import { AchievementGrid } from '@/components/achievements/AchievementGrid';
 import { RatingBreakdown } from '@/components/drivers/RatingBreakdown';
 import { FriendsPreview } from '@/components/social/FriendsPreview';
 import { TeamMembershipGrid } from '@/components/teams/TeamMembershipGrid';
+import { Box } from '@/ui/Box';
 import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ArrowLeft } from 'lucide-react';
 import React from 'react';
diff --git a/apps/website/templates/DriversTemplate.tsx b/apps/website/templates/DriversTemplate.tsx
index cc21a334c..842976486 100644
--- a/apps/website/templates/DriversTemplate.tsx
+++ b/apps/website/templates/DriversTemplate.tsx
@@ -4,10 +4,10 @@ import { DriversDirectoryHeader } from '@/components/drivers/DriversDirectoryHea
 import { DriverSearchBar } from '@/components/drivers/DriverSearchBar';
 import { DriverTable } from '@/components/drivers/DriverTable';
 import { DriverTableRow } from '@/components/drivers/DriverTableRow';
-import { EmptyState } from '@/components/shared/state/EmptyState';
+import { EmptyState } from '@/ui/EmptyState';
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Search } from 'lucide-react';
 
 interface DriversTemplateProps {
diff --git a/apps/website/templates/HomeTemplate.tsx b/apps/website/templates/HomeTemplate.tsx
index bc67c5fb5..a3240ab48 100644
--- a/apps/website/templates/HomeTemplate.tsx
+++ b/apps/website/templates/HomeTemplate.tsx
@@ -15,10 +15,10 @@ import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomat
 import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
 import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
 import { ModeGuard } from '@/components/shared/ModeGuard';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Section } from '@/ui/Section';
 import { Text } from '@/ui/Text';
 
diff --git a/apps/website/templates/LeaderboardsTemplate.tsx b/apps/website/templates/LeaderboardsTemplate.tsx
index fc69624ca..e9a2a4003 100644
--- a/apps/website/templates/LeaderboardsTemplate.tsx
+++ b/apps/website/templates/LeaderboardsTemplate.tsx
@@ -4,9 +4,9 @@ import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeader
 import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
 import { Container } from '@/ui/Container';
-import { GridItem } from '@/ui/primitives/GridItem';
+import { GridItem } from '@/ui/GridItem';
 import { PageHero } from '@/ui/PageHero';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Trophy, Users } from 'lucide-react';
 
 interface LeaderboardsTemplateProps {
diff --git a/apps/website/templates/LeagueAdminScheduleTemplate.tsx b/apps/website/templates/LeagueAdminScheduleTemplate.tsx
index 6693561d5..ec6271f9a 100644
--- a/apps/website/templates/LeagueAdminScheduleTemplate.tsx
+++ b/apps/website/templates/LeagueAdminScheduleTemplate.tsx
@@ -1,16 +1,16 @@
 'use client';
 
-import { InlineNotice } from '@/components/shared/ux/InlineNotice';
+import { InlineNotice } from '@/ui/InlineNotice';
 import type { LeagueAdminScheduleViewData } from '@/lib/view-data/LeagueAdminScheduleViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 
 interface LeagueAdminScheduleTemplateProps {
diff --git a/apps/website/templates/LeagueDetailTemplate.tsx b/apps/website/templates/LeagueDetailTemplate.tsx
index 3d84fb50b..bc15f9b0c 100644
--- a/apps/website/templates/LeagueDetailTemplate.tsx
+++ b/apps/website/templates/LeagueDetailTemplate.tsx
@@ -3,8 +3,8 @@
 import { LeagueHeaderPanel } from '@/components/leagues/LeagueHeaderPanel';
 import { LeagueNavTabs } from '@/components/leagues/LeagueNavTabs';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
+import { Box } from '@/ui/Box';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { ChevronRight } from 'lucide-react';
 import { usePathname } from 'next/navigation';
diff --git a/apps/website/templates/LeagueOverviewTemplate.tsx b/apps/website/templates/LeagueOverviewTemplate.tsx
index a2d01c6a0..4373e731c 100644
--- a/apps/website/templates/LeagueOverviewTemplate.tsx
+++ b/apps/website/templates/LeagueOverviewTemplate.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar, Shield, Trophy, Users, type LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/templates/LeagueRulebookTemplate.tsx b/apps/website/templates/LeagueRulebookTemplate.tsx
index abfa7a5f9..ff5486323 100644
--- a/apps/website/templates/LeagueRulebookTemplate.tsx
+++ b/apps/website/templates/LeagueRulebookTemplate.tsx
@@ -3,12 +3,12 @@
 import { RulebookTabs, type RulebookSection } from '@/components/leagues/RulebookTabs';
 import { PointsTable } from '@/components/races/PointsTable';
 import type { LeagueRulebookViewData } from '@/lib/view-data/LeagueRulebookViewData';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { AlertTriangle, Book, Clock, Info, Scale, Shield, type LucideIcon } from 'lucide-react';
diff --git a/apps/website/templates/LeagueScheduleTemplate.tsx b/apps/website/templates/LeagueScheduleTemplate.tsx
index 19d7b4313..ebd155612 100644
--- a/apps/website/templates/LeagueScheduleTemplate.tsx
+++ b/apps/website/templates/LeagueScheduleTemplate.tsx
@@ -2,7 +2,7 @@
 
 import { LeagueSchedulePanel } from '@/components/leagues/LeagueSchedulePanel';
 import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface LeagueScheduleTemplateProps {
diff --git a/apps/website/templates/LeagueSettingsTemplate.tsx b/apps/website/templates/LeagueSettingsTemplate.tsx
index 45fb9b3a1..5d24220bb 100644
--- a/apps/website/templates/LeagueSettingsTemplate.tsx
+++ b/apps/website/templates/LeagueSettingsTemplate.tsx
@@ -1,13 +1,13 @@
 'use client';
 
 import type { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Clock, Settings, Shield, Trophy, Users, type LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/templates/LeagueSponsorshipsTemplate.tsx b/apps/website/templates/LeagueSponsorshipsTemplate.tsx
index a3e753684..ca09a7ec4 100644
--- a/apps/website/templates/LeagueSponsorshipsTemplate.tsx
+++ b/apps/website/templates/LeagueSponsorshipsTemplate.tsx
@@ -4,13 +4,13 @@ import { LeagueDecalPlacementEditor } from '@/components/leagues/LeagueDecalPlac
 import { SponsorshipRequestCard } from '@/components/leagues/SponsorshipRequestCard';
 import { SponsorshipSlotCard } from '@/components/leagues/SponsorshipSlotCard';
 import type { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Building, Clock, Palette } from 'lucide-react';
 
diff --git a/apps/website/templates/LeagueStandingsTemplate.tsx b/apps/website/templates/LeagueStandingsTemplate.tsx
index 05be3a798..2e5fbd82a 100644
--- a/apps/website/templates/LeagueStandingsTemplate.tsx
+++ b/apps/website/templates/LeagueStandingsTemplate.tsx
@@ -2,7 +2,7 @@
 
 import { LeagueStandingsTable } from '@/components/leagues/LeagueStandingsTable';
 import type { LeagueStandingsViewData } from '@/lib/view-data/LeagueStandingsViewData';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface LeagueStandingsTemplateProps {
diff --git a/apps/website/templates/MediaTemplate.tsx b/apps/website/templates/MediaTemplate.tsx
index 03ea79d17..b8b09df34 100644
--- a/apps/website/templates/MediaTemplate.tsx
+++ b/apps/website/templates/MediaTemplate.tsx
@@ -2,8 +2,8 @@
 
 import { MediaGallery } from '@/components/media/MediaGallery';
 import { MediaViewData } from '@/lib/view-data/MediaViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Box } from '@/ui/primitives/Box';
 
 export function MediaTemplate(viewData: MediaViewData) {
   const { assets, categories, title, description } = viewData;
diff --git a/apps/website/templates/ProfileLayoutShellTemplate.tsx b/apps/website/templates/ProfileLayoutShellTemplate.tsx
index 01c93ac7d..faba9017d 100644
--- a/apps/website/templates/ProfileLayoutShellTemplate.tsx
+++ b/apps/website/templates/ProfileLayoutShellTemplate.tsx
@@ -1,8 +1,8 @@
 import { ProfileLayoutViewData } from '@/lib/view-data/ProfileLayoutViewData';
 import { ProfileSidebarTemplate } from '@/templates/ProfileSidebarTemplate';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import type { ReactNode } from 'react';
 
 interface ProfileLayoutShellTemplateProps {
diff --git a/apps/website/templates/ProfileLeaguesTemplate.tsx b/apps/website/templates/ProfileLeaguesTemplate.tsx
index c9dc44294..08f7c420d 100644
--- a/apps/website/templates/ProfileLeaguesTemplate.tsx
+++ b/apps/website/templates/ProfileLeaguesTemplate.tsx
@@ -2,9 +2,9 @@
 
 import { MembershipPanel } from '@/components/profile/MembershipPanel';
 import type { ProfileLeaguesViewData } from '@/lib/view-data/ProfileLeaguesViewData';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface ProfileLeaguesTemplateProps {
   viewData: ProfileLeaguesViewData;
diff --git a/apps/website/templates/ProfileLiveriesTemplate.tsx b/apps/website/templates/ProfileLiveriesTemplate.tsx
index d5155cbe1..92052c398 100644
--- a/apps/website/templates/ProfileLiveriesTemplate.tsx
+++ b/apps/website/templates/ProfileLiveriesTemplate.tsx
@@ -3,10 +3,10 @@
 import { LiveryGallery } from '@/components/profile/LiveryGallery';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { ProfileLiveriesViewData } from '@/lib/view-data/ProfileLiveriesViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
 
diff --git a/apps/website/templates/ProfileSettingsTemplate.tsx b/apps/website/templates/ProfileSettingsTemplate.tsx
index 569cd3451..a48ab210f 100644
--- a/apps/website/templates/ProfileSettingsTemplate.tsx
+++ b/apps/website/templates/ProfileSettingsTemplate.tsx
@@ -4,10 +4,10 @@ import { ConnectedAccountsPanel } from '@/components/profile/ConnectedAccountsPa
 import { PreferencesPanel } from '@/components/profile/PreferencesPanel';
 import { ProfileDetailsPanel } from '@/components/profile/ProfileDetailsPanel';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface ProfileSettingsTemplateProps {
   viewData: ProfileViewData;
diff --git a/apps/website/templates/ProfileSidebarTemplate.tsx b/apps/website/templates/ProfileSidebarTemplate.tsx
index 2047874f9..34eccf554 100644
--- a/apps/website/templates/ProfileSidebarTemplate.tsx
+++ b/apps/website/templates/ProfileSidebarTemplate.tsx
@@ -1,16 +1,16 @@
 'use client';
 
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
-    Handshake,
-    Palette,
-    Settings,
-    Trophy,
-    User
+  Handshake,
+  Palette,
+  Settings,
+  Trophy,
+  User
 } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
diff --git a/apps/website/templates/ProfileTemplate.tsx b/apps/website/templates/ProfileTemplate.tsx
index 0f5727f70..430d4428e 100644
--- a/apps/website/templates/ProfileTemplate.tsx
+++ b/apps/website/templates/ProfileTemplate.tsx
@@ -9,12 +9,12 @@ import { ProfileStatGrid } from '@/components/profile/ProfileStatGrid';
 import { SessionHistoryTable } from '@/components/profile/SessionHistoryTable';
 import { TeamMembershipGrid } from '@/components/teams/TeamMembershipGrid';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { User } from 'lucide-react';
 
diff --git a/apps/website/templates/RaceDetailTemplate.tsx b/apps/website/templates/RaceDetailTemplate.tsx
index 3ef4cf0a8..fae1effa4 100644
--- a/apps/website/templates/RaceDetailTemplate.tsx
+++ b/apps/website/templates/RaceDetailTemplate.tsx
@@ -7,11 +7,11 @@ import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
 import { RaceUserResult } from '@/components/races/RaceUserResultWrapper';
 import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 import { TrackConditionsPanel } from '@/components/races/TrackConditionsPanel';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Skeleton } from '@/ui/Skeleton';
 import { Text } from '@/ui/Text';
 
diff --git a/apps/website/templates/RaceResultsTemplate.tsx b/apps/website/templates/RaceResultsTemplate.tsx
index ded581300..dcd8d3f2c 100644
--- a/apps/website/templates/RaceResultsTemplate.tsx
+++ b/apps/website/templates/RaceResultsTemplate.tsx
@@ -3,12 +3,12 @@
 import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
 import { RaceResultsTable } from '@/components/races/RaceResultsTable';
 import type { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertTriangle, Trophy, Zap, type LucideIcon } from 'lucide-react';
 
diff --git a/apps/website/templates/RaceStewardingTemplate.tsx b/apps/website/templates/RaceStewardingTemplate.tsx
index 9fd73da96..7154e3965 100644
--- a/apps/website/templates/RaceStewardingTemplate.tsx
+++ b/apps/website/templates/RaceStewardingTemplate.tsx
@@ -6,12 +6,12 @@ import { RaceDetailsHeader } from '@/components/races/RaceDetailsHeader';
 import { RacePenaltyRow } from '@/components/races/RacePenaltyRowWrapper';
 import { RaceStewardingStats } from '@/components/races/RaceStewardingStats';
 import type { RaceStewardingViewData } from '@/lib/view-data/races/RaceStewardingViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { CheckCircle, Flag, Gavel, Info } from 'lucide-react';
 
diff --git a/apps/website/templates/RacesAllTemplate.tsx b/apps/website/templates/RacesAllTemplate.tsx
index 4ac747798..2f9ac9306 100644
--- a/apps/website/templates/RacesAllTemplate.tsx
+++ b/apps/website/templates/RacesAllTemplate.tsx
@@ -5,12 +5,12 @@ import { RacePageHeader } from '@/components/races/RacePageHeader';
 import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
 import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Pagination } from '@/ui/Pagination';
+import { Stack } from '@/ui/Stack';
 import { Skeleton } from '@/ui/Skeleton';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
 
 export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
 
diff --git a/apps/website/templates/RacesTemplate.tsx b/apps/website/templates/RacesTemplate.tsx
index 114dcd3ea..df1886171 100644
--- a/apps/website/templates/RacesTemplate.tsx
+++ b/apps/website/templates/RacesTemplate.tsx
@@ -8,11 +8,11 @@ import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
 import { RaceSidebar } from '@/components/races/RaceSidebar';
 import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
diff --git a/apps/website/templates/RosterAdminTemplate.tsx b/apps/website/templates/RosterAdminTemplate.tsx
index fe787c524..f1bf8e84e 100644
--- a/apps/website/templates/RosterAdminTemplate.tsx
+++ b/apps/website/templates/RosterAdminTemplate.tsx
@@ -2,12 +2,12 @@
 
 import type { MembershipRole } from '@/lib/types/MembershipRole';
 import type { LeagueRosterAdminViewData } from '@/lib/view-data/LeagueRosterAdminViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { Shield, UserMinus, UserPlus } from 'lucide-react';
diff --git a/apps/website/templates/RulebookTemplate.tsx b/apps/website/templates/RulebookTemplate.tsx
index 79d277638..fe247ae9f 100644
--- a/apps/website/templates/RulebookTemplate.tsx
+++ b/apps/website/templates/RulebookTemplate.tsx
@@ -2,7 +2,7 @@
 
 import { LeagueRulesPanel } from '@/components/leagues/LeagueRulesPanel';
 import type { RulebookViewData } from '@/lib/view-data/leagues/RulebookViewData';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface RulebookTemplateProps {
diff --git a/apps/website/templates/ServerErrorTemplate.tsx b/apps/website/templates/ServerErrorTemplate.tsx
index 4afff8919..5aee57b6e 100644
--- a/apps/website/templates/ServerErrorTemplate.tsx
+++ b/apps/website/templates/ServerErrorTemplate.tsx
@@ -3,10 +3,10 @@
 import { ErrorDetails } from '@/components/errors/ErrorDetails';
 import { RecoveryActions } from '@/components/errors/RecoveryActions';
 import { ServerErrorPanel } from '@/components/errors/ServerErrorPanel';
+import { Box } from '@/ui/Box';
 import { Glow } from '@/ui/Glow';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 
 export interface ServerErrorViewData {
   error: Error & { digest?: string };
diff --git a/apps/website/templates/SponsorBillingTemplate.tsx b/apps/website/templates/SponsorBillingTemplate.tsx
index 799a97e2f..cc0a84e95 100644
--- a/apps/website/templates/SponsorBillingTemplate.tsx
+++ b/apps/website/templates/SponsorBillingTemplate.tsx
@@ -5,23 +5,23 @@ import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHe
 import { PayoutItem, SponsorPayoutQueueTable } from '@/components/sponsors/SponsorPayoutQueueTable';
 import { siteConfig } from '@/lib/siteConfig';
 import type { InvoiceDTO, PaymentMethodDTO } from '@/lib/types/tbd/SponsorBillingDTO';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { InfoBanner } from '@/ui/InfoBanner';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
-    Building2,
-    CreditCard,
-    Download,
-    ExternalLink,
-    LucideIcon,
-    Percent,
-    Receipt
+  Building2,
+  CreditCard,
+  Download,
+  ExternalLink,
+  LucideIcon,
+  Percent,
+  Receipt
 } from 'lucide-react';
 
 export interface SponsorBillingViewData {
diff --git a/apps/website/templates/SponsorCampaignsTemplate.tsx b/apps/website/templates/SponsorCampaignsTemplate.tsx
index 717059096..881ce5b5d 100644
--- a/apps/website/templates/SponsorCampaignsTemplate.tsx
+++ b/apps/website/templates/SponsorCampaignsTemplate.tsx
@@ -1,18 +1,18 @@
 import { BillingSummaryPanel } from '@/components/sponsors/BillingSummaryPanel';
 import { SponsorContractCard } from '@/components/sponsors/SponsorContractCard';
 import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import {
-    BarChart3,
-    Check,
-    Clock,
-    Eye,
-    LucideIcon,
-    Search
+  BarChart3,
+  Check,
+  Clock,
+  Eye,
+  LucideIcon,
+  Search
 } from 'lucide-react';
 import React from 'react';
 
diff --git a/apps/website/templates/SponsorDashboardTemplate.tsx b/apps/website/templates/SponsorDashboardTemplate.tsx
index e9dc17782..cbcc6d2d3 100644
--- a/apps/website/templates/SponsorDashboardTemplate.tsx
+++ b/apps/website/templates/SponsorDashboardTemplate.tsx
@@ -9,30 +9,30 @@ import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHe
 import { SponsorshipCategoryCard } from '@/components/sponsors/SponsorshipCategoryCard';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { SponsorDashboardViewData } from '@/lib/view-data/SponsorDashboardViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import {
-    Bell,
-    Car,
-    ChevronRight,
-    Clock,
-    DollarSign,
-    Eye,
-    Flag,
-    LucideIcon,
-    Megaphone,
-    Plus,
-    TrendingUp,
-    Trophy,
-    Users
+  Bell,
+  Car,
+  ChevronRight,
+  Clock,
+  DollarSign,
+  Eye,
+  Flag,
+  LucideIcon,
+  Megaphone,
+  Plus,
+  TrendingUp,
+  Trophy,
+  Users
 } from 'lucide-react';
 
 interface SponsorDashboardTemplateProps {
diff --git a/apps/website/templates/SponsorLeagueDetailTemplate.tsx b/apps/website/templates/SponsorLeagueDetailTemplate.tsx
index f0dd7773b..1564c6876 100644
--- a/apps/website/templates/SponsorLeagueDetailTemplate.tsx
+++ b/apps/website/templates/SponsorLeagueDetailTemplate.tsx
@@ -7,29 +7,29 @@ import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHe
 import { SponsorStatusChip } from '@/components/sponsors/SponsorStatusChip';
 import { routes } from '@/lib/routing/RouteConfig';
 import { siteConfig } from '@/lib/siteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import {
-    BarChart3,
-    Calendar,
-    CreditCard,
-    Eye,
-    FileText,
-    Flag,
-    Megaphone,
-    TrendingUp,
-    Trophy,
-    type LucideIcon
+  BarChart3,
+  Calendar,
+  CreditCard,
+  Eye,
+  FileText,
+  Flag,
+  Megaphone,
+  TrendingUp,
+  Trophy,
+  type LucideIcon
 } from 'lucide-react';
 
 interface SponsorLeagueDetailViewData {
diff --git a/apps/website/templates/SponsorLeaguesTemplate.tsx b/apps/website/templates/SponsorLeaguesTemplate.tsx
index 5c9ebb5c1..9d9c65bb1 100644
--- a/apps/website/templates/SponsorLeaguesTemplate.tsx
+++ b/apps/website/templates/SponsorLeaguesTemplate.tsx
@@ -4,6 +4,7 @@ import { AvailableLeagueCard } from '@/components/sponsors/AvailableLeagueCard';
 import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
 import { routes } from '@/lib/routing/RouteConfig';
 import { siteConfig } from '@/lib/siteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
@@ -11,18 +12,17 @@ import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import {
-    Car,
-    Megaphone,
-    Search,
-    Trophy,
-    Users,
+  Car,
+  Megaphone,
+  Search,
+  Trophy,
+  Users,
 } from 'lucide-react';
 
 interface AvailableLeague {
diff --git a/apps/website/templates/SponsorSettingsTemplate.tsx b/apps/website/templates/SponsorSettingsTemplate.tsx
index f772675d2..61092baa7 100644
--- a/apps/website/templates/SponsorSettingsTemplate.tsx
+++ b/apps/website/templates/SponsorSettingsTemplate.tsx
@@ -1,4 +1,5 @@
 import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
@@ -6,16 +7,15 @@ import { FormField } from '@/ui/FormField';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Toggle } from '@/ui/Toggle';
 import {
-    AlertCircle,
-    Bell,
-    Building2,
-    RefreshCw,
-    Save
+  AlertCircle,
+  Bell,
+  Building2,
+  RefreshCw,
+  Save
 } from 'lucide-react';
 import React from 'react';
 
diff --git a/apps/website/templates/SponsorshipRequestsTemplate.tsx b/apps/website/templates/SponsorshipRequestsTemplate.tsx
index 58294ca5e..2e11d4264 100644
--- a/apps/website/templates/SponsorshipRequestsTemplate.tsx
+++ b/apps/website/templates/SponsorshipRequestsTemplate.tsx
@@ -2,9 +2,9 @@
 
 import { SponsorshipRequestsPanel } from '@/components/profile/SponsorshipRequestsPanel';
 import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 export interface SponsorshipRequestsTemplateProps {
   viewData: SponsorshipRequestsViewData;
diff --git a/apps/website/templates/TeamDetailTemplate.tsx b/apps/website/templates/TeamDetailTemplate.tsx
index 6a90fdbdb..87fbeae19 100644
--- a/apps/website/templates/TeamDetailTemplate.tsx
+++ b/apps/website/templates/TeamDetailTemplate.tsx
@@ -3,15 +3,15 @@
 import { SlotTemplates } from '@/components/sponsors/SlotTemplates';
 import { SponsorInsightsCard } from '@/components/sponsors/SponsorInsightsCard';
 import { useSponsorMode } from '@/hooks/sponsor/useSponsorMode';
+import { Box } from '@/ui/Box';
 import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { HorizontalStatItem } from '@/ui/HorizontalStatItem';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { GridItem } from '@/ui/primitives/GridItem';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 import { TeamAdmin } from '@/components/teams/TeamAdmin';
diff --git a/apps/website/templates/TeamLeaderboardTemplate.tsx b/apps/website/templates/TeamLeaderboardTemplate.tsx
index 011a92784..be72a787e 100644
--- a/apps/website/templates/TeamLeaderboardTemplate.tsx
+++ b/apps/website/templates/TeamLeaderboardTemplate.tsx
@@ -2,12 +2,12 @@
 
 import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
 import type { SkillLevel, SortBy, TeamLeaderboardViewData } from '@/lib/view-data/TeamLeaderboardViewData';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { Award, ChevronLeft } from 'lucide-react';
diff --git a/apps/website/templates/TeamsTemplate.tsx b/apps/website/templates/TeamsTemplate.tsx
index 59c608ca4..b731ee000 100644
--- a/apps/website/templates/TeamsTemplate.tsx
+++ b/apps/website/templates/TeamsTemplate.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import { EmptyState } from '@/components/shared/state/EmptyState';
+import { EmptyState } from '@/ui/EmptyState';
 import { TeamCard } from '@/components/teams/TeamCardWrapper';
 import { TeamGrid } from '@/components/teams/TeamGrid';
 import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
 import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
 import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
 
diff --git a/apps/website/templates/actions/ActionsTemplate.tsx b/apps/website/templates/actions/ActionsTemplate.tsx
index 50463388d..a0af0013f 100644
--- a/apps/website/templates/actions/ActionsTemplate.tsx
+++ b/apps/website/templates/actions/ActionsTemplate.tsx
@@ -4,7 +4,7 @@ import { ActionFiltersBar } from '@/components/actions/ActionFiltersBar';
 import { ActionList } from '@/components/actions/ActionList';
 import { ActionsHeader } from '@/components/actions/ActionsHeader';
 import { ActionsViewData } from '@/lib/view-data/ActionsViewData';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 
 export function ActionsTemplate({ actions }: ActionsViewData) {
   return (
diff --git a/apps/website/templates/auth/ForgotPasswordTemplate.tsx b/apps/website/templates/auth/ForgotPasswordTemplate.tsx
index cf5d07e10..d82c542cf 100644
--- a/apps/website/templates/auth/ForgotPasswordTemplate.tsx
+++ b/apps/website/templates/auth/ForgotPasswordTemplate.tsx
@@ -5,13 +5,13 @@ import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { AuthForm } from '@/components/auth/AuthForm';
 import { ForgotPasswordViewData } from '@/lib/builders/view-data/types/ForgotPasswordViewData';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Link } from '@/ui/Link';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, ArrowLeft, CheckCircle2, Mail, Shield } from 'lucide-react';
 import React from 'react';
diff --git a/apps/website/templates/auth/LoginTemplate.tsx b/apps/website/templates/auth/LoginTemplate.tsx
index 8b710b0ab..58e10c7da 100644
--- a/apps/website/templates/auth/LoginTemplate.tsx
+++ b/apps/website/templates/auth/LoginTemplate.tsx
@@ -7,14 +7,14 @@ import { EnhancedFormError } from '@/components/errors/EnhancedFormError';
 import { FormState } from '@/lib/builders/view-data/types/FormState';
 import { LoginViewData } from '@/lib/builders/view-data/types/LoginViewData';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Link } from '@/ui/Link';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
 import { PasswordField } from '@/ui/PasswordField';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, LogIn, Mail } from 'lucide-react';
 import React from 'react';
diff --git a/apps/website/templates/auth/ResetPasswordTemplate.tsx b/apps/website/templates/auth/ResetPasswordTemplate.tsx
index 6548fcc56..d47692116 100644
--- a/apps/website/templates/auth/ResetPasswordTemplate.tsx
+++ b/apps/website/templates/auth/ResetPasswordTemplate.tsx
@@ -5,13 +5,13 @@ import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { AuthForm } from '@/components/auth/AuthForm';
 import { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPasswordViewData';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
 import { PasswordField } from '@/ui/PasswordField';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, ArrowLeft, CheckCircle2, Shield } from 'lucide-react';
 import React from 'react';
diff --git a/apps/website/templates/auth/SignupTemplate.tsx b/apps/website/templates/auth/SignupTemplate.tsx
index 352a24a6f..dc65614ad 100644
--- a/apps/website/templates/auth/SignupTemplate.tsx
+++ b/apps/website/templates/auth/SignupTemplate.tsx
@@ -5,14 +5,14 @@ import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { AuthForm } from '@/components/auth/AuthForm';
 import { SignupViewData } from '@/lib/builders/view-data/types/SignupViewData';
 import { checkPasswordStrength } from '@/lib/utils/validation';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Link } from '@/ui/Link';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
 import { PasswordField } from '@/ui/PasswordField';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { AlertCircle, Check, Mail, User, UserPlus, X } from 'lucide-react';
 import React from 'react';
diff --git a/apps/website/templates/layout/GlobalFooterTemplate.tsx b/apps/website/templates/layout/GlobalFooterTemplate.tsx
index 775746b45..52b150ed7 100644
--- a/apps/website/templates/layout/GlobalFooterTemplate.tsx
+++ b/apps/website/templates/layout/GlobalFooterTemplate.tsx
@@ -1,6 +1,6 @@
 import { AppFooter } from '@/components/app/AppFooter';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import Image from 'next/image';
 import Link from 'next/link';
diff --git a/apps/website/templates/layout/GlobalSidebarTemplate.tsx b/apps/website/templates/layout/GlobalSidebarTemplate.tsx
index 12b0bfd99..1dd073689 100644
--- a/apps/website/templates/layout/GlobalSidebarTemplate.tsx
+++ b/apps/website/templates/layout/GlobalSidebarTemplate.tsx
@@ -3,8 +3,8 @@
 import { AuthedNav } from '@/components/layout/AuthedNav';
 import { PublicNav } from '@/components/layout/PublicNav';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { Box } from '@/ui/Box';
 import { DashboardRail } from '@/ui/DashboardRail';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { usePathname } from 'next/navigation';
 
diff --git a/apps/website/templates/layout/HeaderContentTemplate.tsx b/apps/website/templates/layout/HeaderContentTemplate.tsx
index 63eccb93b..32dad1aa8 100644
--- a/apps/website/templates/layout/HeaderContentTemplate.tsx
+++ b/apps/website/templates/layout/HeaderContentTemplate.tsx
@@ -3,8 +3,8 @@ import { HeaderActions } from '@/components/layout/HeaderActions';
 import { PublicNav } from '@/components/layout/PublicNav';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { usePathname } from 'next/navigation';
 
diff --git a/apps/website/templates/layout/RootAppShellTemplate.tsx b/apps/website/templates/layout/RootAppShellTemplate.tsx
index de0eb48ff..f28b534a9 100644
--- a/apps/website/templates/layout/RootAppShellTemplate.tsx
+++ b/apps/website/templates/layout/RootAppShellTemplate.tsx
@@ -3,9 +3,9 @@
 import { AppShell } from '@/components/app/AppShell';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
 import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
 import { ContentViewport } from '@/ui/ContentViewport';
 import { ControlBar } from '@/ui/ControlBar';
-import { Box } from '@/ui/primitives/Box';
 import { TopNav } from '@/ui/TopNav';
 import { usePathname } from 'next/navigation';
 import React from 'react';
diff --git a/apps/website/templates/onboarding/OnboardingTemplate.tsx b/apps/website/templates/onboarding/OnboardingTemplate.tsx
index d0109c4e0..f57398990 100644
--- a/apps/website/templates/onboarding/OnboardingTemplate.tsx
+++ b/apps/website/templates/onboarding/OnboardingTemplate.tsx
@@ -8,8 +8,8 @@ import { OnboardingShell } from '@/components/onboarding/OnboardingShell';
 import { OnboardingStepPanel } from '@/components/onboarding/OnboardingStepPanel';
 import { OnboardingStepper } from '@/components/onboarding/OnboardingStepper';
 import { PersonalInfo, PersonalInfoStep } from '@/components/onboarding/PersonalInfoStep';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { FormEvent } from 'react';
 
diff --git a/apps/website/ui/Accordion.tsx b/apps/website/ui/Accordion.tsx
index 9ec550db7..75142e122 100644
--- a/apps/website/ui/Accordion.tsx
+++ b/apps/website/ui/Accordion.tsx
@@ -1,9 +1,9 @@
-import React, { ReactNode, useState } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
 import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ReactNode, useState } from 'react';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { Surface } from './primitives/Surface';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface AccordionProps {
   title: string;
diff --git a/apps/website/ui/AccountItem.tsx b/apps/website/ui/AccountItem.tsx
index ee1584350..4009062a8 100644
--- a/apps/website/ui/AccountItem.tsx
+++ b/apps/website/ui/AccountItem.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface AccountItemProps {
   icon: LucideIcon;
diff --git a/apps/website/ui/ActiveDriverCard.tsx b/apps/website/ui/ActiveDriverCard.tsx
index d40842a64..589d28f79 100644
--- a/apps/website/ui/ActiveDriverCard.tsx
+++ b/apps/website/ui/ActiveDriverCard.tsx
@@ -1,8 +1,7 @@
+import { Box } from '@/ui/Box';
 import { Image } from '@/ui/Image';
-import { Box } from '@/ui/primitives/Box';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
-import { Surface } from '@/ui/primitives/Surface';
-import React from 'react';
 
 export interface ActiveDriverCardProps {
   name: string;
diff --git a/apps/website/ui/ActivityItem.tsx b/apps/website/ui/ActivityItem.tsx
index c89a3552b..877c7c2ef 100644
--- a/apps/website/ui/ActivityItem.tsx
+++ b/apps/website/ui/ActivityItem.tsx
@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 
 export interface ActivityItemProps {
   title: string;
diff --git a/apps/website/ui/AuthLayout.tsx b/apps/website/ui/AuthLayout.tsx
index 6ef1e0c8a..0b286e30b 100644
--- a/apps/website/ui/AuthLayout.tsx
+++ b/apps/website/ui/AuthLayout.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Glow } from './Glow';
 
 export interface AuthLayoutProps {
diff --git a/apps/website/ui/AuthLoading.tsx b/apps/website/ui/AuthLoading.tsx
new file mode 100644
index 000000000..05dd6ab75
--- /dev/null
+++ b/apps/website/ui/AuthLoading.tsx
@@ -0,0 +1,27 @@
+import { Box } from './Box';
+import { LoadingSpinner } from './LoadingSpinner';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface AuthLoadingProps {
+  message?: string;
+}
+
+export function AuthLoading({ message = 'Authenticating...' }: AuthLoadingProps) {
+  return (
+    <Box 
+      fullWidth 
+      minHeight="100vh" 
+      display="flex" 
+      center 
+      bg="bg-[#0f1115]"
+    >
+      <Stack align="center" gap={4}>
+        <LoadingSpinner size={10} />
+        <Text color="text-gray-400" weight="medium">
+          {message}
+        </Text>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/apps/website/ui/Avatar.tsx b/apps/website/ui/Avatar.tsx
index 31cd5833e..617c4532e 100644
--- a/apps/website/ui/Avatar.tsx
+++ b/apps/website/ui/Avatar.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Surface } from './primitives/Surface';
-import { Box } from './primitives/Box';
 import { User } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
+import { Surface } from './Surface';
 
 export interface AvatarProps {
   src?: string;
diff --git a/apps/website/ui/Badge.tsx b/apps/website/ui/Badge.tsx
index 1860bc33c..b6b8595c5 100644
--- a/apps/website/ui/Badge.tsx
+++ b/apps/website/ui/Badge.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
-import { Stack } from './primitives/Stack';
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Stack } from './Stack';
 
 export interface BadgeProps {
   children: ReactNode;
diff --git a/apps/website/ui/BadgeGroup.tsx b/apps/website/ui/BadgeGroup.tsx
index 48f88970b..d1fd112d8 100644
--- a/apps/website/ui/BadgeGroup.tsx
+++ b/apps/website/ui/BadgeGroup.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface BadgeGroupProps {
   children: ReactNode;
diff --git a/apps/website/ui/BorderTabs.tsx b/apps/website/ui/BorderTabs.tsx
index 26a137812..8517d0ae7 100644
--- a/apps/website/ui/BorderTabs.tsx
+++ b/apps/website/ui/BorderTabs.tsx
@@ -1,12 +1,5 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { Box } from './Box';
 
-export interface TabOption {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-}
 
 export interface BorderTabsProps {
   tabs: TabOption[];
diff --git a/apps/website/ui/primitives/Box.tsx b/apps/website/ui/Box.tsx
similarity index 100%
rename from apps/website/ui/primitives/Box.tsx
rename to apps/website/ui/Box.tsx
diff --git a/apps/website/ui/BrandMark.tsx b/apps/website/ui/BrandMark.tsx
index 08384b804..e4f67b254 100644
--- a/apps/website/ui/BrandMark.tsx
+++ b/apps/website/ui/BrandMark.tsx
@@ -1,7 +1,6 @@
-import { Box } from '@/ui/primitives/Box';
-import Image from 'next/image';
+import { Box } from '@/ui/Box';
 import { Link } from '@/ui/Link';
-import React from 'react';
+import Image from 'next/image';
 
 interface BrandMarkProps {
   href?: string;
diff --git a/apps/website/ui/BreadcrumbBar.tsx b/apps/website/ui/BreadcrumbBar.tsx
index f20343df6..7329eb466 100644
--- a/apps/website/ui/BreadcrumbBar.tsx
+++ b/apps/website/ui/BreadcrumbBar.tsx
@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { BreadcrumbItem, Breadcrumbs } from './Breadcrumbs';
 
 export interface BreadcrumbBarProps {
   items: BreadcrumbItem[];
diff --git a/apps/website/ui/Breadcrumbs.tsx b/apps/website/ui/Breadcrumbs.tsx
index 69abf229b..e61acf51d 100644
--- a/apps/website/ui/Breadcrumbs.tsx
+++ b/apps/website/ui/Breadcrumbs.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
 import { ChevronRight } from 'lucide-react';
+import React from 'react';
+import { Box } from './Box';
 import { Icon } from './Icon';
 import { Link } from './Link';
+import { Text } from './Text';
 
 export interface BreadcrumbItem {
   label: string;
diff --git a/apps/website/ui/BulkActions.tsx b/apps/website/ui/BulkActions.tsx
index 1b0a75a2f..e35b7d0aa 100644
--- a/apps/website/ui/BulkActions.tsx
+++ b/apps/website/ui/BulkActions.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
-import { Text } from './Text';
+import { ReactNode } from 'react';
 import { Badge } from './Badge';
+import { Box } from './Box';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface BulkActionsProps {
   children: ReactNode;
diff --git a/apps/website/ui/Button.tsx b/apps/website/ui/Button.tsx
index 1917be38e..5a447d7fe 100644
--- a/apps/website/ui/Button.tsx
+++ b/apps/website/ui/Button.tsx
@@ -1,7 +1,7 @@
-import React, { ReactNode, MouseEventHandler, forwardRef } from 'react';
-import { Box } from './primitives/Box';
-import { Icon } from './Icon';
 import { Loader2 } from 'lucide-react';
+import React, { MouseEventHandler, ReactNode, forwardRef } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
 
 export interface ButtonProps {
   children: ReactNode;
diff --git a/apps/website/ui/ButtonGroup.tsx b/apps/website/ui/ButtonGroup.tsx
new file mode 100644
index 000000000..50f725ed2
--- /dev/null
+++ b/apps/website/ui/ButtonGroup.tsx
@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { Box, Spacing } from './Box';
+
+export interface ButtonGroupProps {
+  children: ReactNode;
+  alignment?: 'start' | 'center' | 'end' | 'between';
+  gap?: Spacing;
+  marginTop?: Spacing;
+}
+
+export const ButtonGroup = ({ 
+  children, 
+  alignment = 'start',
+  gap = 4,
+  marginTop = 0
+}: ButtonGroupProps) => {
+  const justifyContentMap = {
+    start: 'start',
+    center: 'center',
+    end: 'end',
+    between: 'between'
+  };
+
+  return (
+    <Box 
+      display="flex" 
+      alignItems="center" 
+      justifyContent={justifyContentMap[alignment] as any} 
+      gap={gap as any}
+      marginTop={marginTop}
+    >
+      {children}
+    </Box>
+  );
+};
diff --git a/apps/website/ui/Card.tsx b/apps/website/ui/Card.tsx
index 95b5ce4ef..4bf16b20b 100644
--- a/apps/website/ui/Card.tsx
+++ b/apps/website/ui/Card.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, forwardRef } from 'react';
-import { Surface, SurfaceProps } from './primitives/Surface';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
+import { Surface, SurfaceProps } from './Surface';
 
 export interface CardProps extends Omit<SurfaceProps<'div'>, 'children' | 'title' | 'variant'> {
   children: ReactNode;
diff --git a/apps/website/ui/CategoryDistribution.tsx b/apps/website/ui/CategoryDistribution.tsx
index dd6968dd5..924b1412b 100644
--- a/apps/website/ui/CategoryDistribution.tsx
+++ b/apps/website/ui/CategoryDistribution.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { CategoryDistributionCard } from './CategoryDistributionCard';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { CategoryDistributionCard } from './CategoryDistributionCard';
 
 export interface CategoryData {
   id: string;
diff --git a/apps/website/ui/CategoryDistributionCard.tsx b/apps/website/ui/CategoryDistributionCard.tsx
index fda083760..d8c26dd62 100644
--- a/apps/website/ui/CategoryDistributionCard.tsx
+++ b/apps/website/ui/CategoryDistributionCard.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
-import { Surface } from './primitives/Surface';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface CategoryDistributionCardProps {
   label: string;
diff --git a/apps/website/ui/CategoryIcon.tsx b/apps/website/ui/CategoryIcon.tsx
index 6327a6c87..1157fc539 100644
--- a/apps/website/ui/CategoryIcon.tsx
+++ b/apps/website/ui/CategoryIcon.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Icon } from './Icon';
 import { Tag } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
 
 export interface CategoryIconProps {
   category: string;
@@ -9,9 +8,7 @@ export interface CategoryIconProps {
 }
 
 export const CategoryIcon = ({ 
-  category, 
-  size = 24 
-}: CategoryIconProps) => {
+  category}: CategoryIconProps) => {
   // Map categories to icons if needed, for now just use Tag
   return (
     <Box 
diff --git a/apps/website/ui/Checkbox.tsx b/apps/website/ui/Checkbox.tsx
index 227d32d90..985662e87 100644
--- a/apps/website/ui/Checkbox.tsx
+++ b/apps/website/ui/Checkbox.tsx
@@ -1,5 +1,5 @@
-import React, { forwardRef, ChangeEvent } from 'react';
-import { Box } from './primitives/Box';
+import { ChangeEvent, forwardRef } from 'react';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface CheckboxProps {
diff --git a/apps/website/ui/CircularProgress.tsx b/apps/website/ui/CircularProgress.tsx
index 5c303d7e6..254dff689 100644
--- a/apps/website/ui/CircularProgress.tsx
+++ b/apps/website/ui/CircularProgress.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface CircularProgressProps {
diff --git a/apps/website/ui/Container.tsx b/apps/website/ui/Container.tsx
index c99baca6e..a97711231 100644
--- a/apps/website/ui/Container.tsx
+++ b/apps/website/ui/Container.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface ContainerProps {
   children: ReactNode;
diff --git a/apps/website/ui/ContentShell.tsx b/apps/website/ui/ContentShell.tsx
index 28c949e48..2a555f579 100644
--- a/apps/website/ui/ContentShell.tsx
+++ b/apps/website/ui/ContentShell.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface ContentShellProps {
   children: ReactNode;
diff --git a/apps/website/ui/ContentViewport.tsx b/apps/website/ui/ContentViewport.tsx
index 47df522a2..f61eaaf41 100644
--- a/apps/website/ui/ContentViewport.tsx
+++ b/apps/website/ui/ContentViewport.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Container } from './Container';
 
 export interface ContentViewportProps {
diff --git a/apps/website/ui/ControlBar.tsx b/apps/website/ui/ControlBar.tsx
index 12a95c7e1..5fcfd5986 100644
--- a/apps/website/ui/ControlBar.tsx
+++ b/apps/website/ui/ControlBar.tsx
@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 
 export interface ControlBarProps {
   children: ReactNode;
diff --git a/apps/website/ui/CountryFlag.tsx b/apps/website/ui/CountryFlag.tsx
index b8382b58a..f5592c6d1 100644
--- a/apps/website/ui/CountryFlag.tsx
+++ b/apps/website/ui/CountryFlag.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 export interface CountryFlagProps {
   countryCode: string;
diff --git a/apps/website/ui/DangerZone.tsx b/apps/website/ui/DangerZone.tsx
index ba017e47f..f6fb9d2d9 100644
--- a/apps/website/ui/DangerZone.tsx
+++ b/apps/website/ui/DangerZone.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Heading } from './Heading';
+import { Surface } from './Surface';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 
 export interface DangerZoneProps {
   title: string;
diff --git a/apps/website/ui/DashboardHero.tsx b/apps/website/ui/DashboardHero.tsx
new file mode 100644
index 000000000..13c6aa690
--- /dev/null
+++ b/apps/website/ui/DashboardHero.tsx
@@ -0,0 +1,146 @@
+import { Flag, Star, Trophy, Users } from 'lucide-react';
+import { Avatar } from './Avatar';
+import { Badge } from './Badge';
+import { Box } from './Box';
+import { Heading } from './Heading';
+import { Icon } from './Icon';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface DashboardHeroProps {
+  driverName: string;
+  avatarUrl?: string | null;
+  rating: number;
+  rank: number;
+  totalRaces: number;
+  winRate: number;
+  className?: string;
+}
+
+export function DashboardHero({
+  driverName,
+  avatarUrl,
+  rating,
+  rank,
+  totalRaces,
+  winRate,
+  className = '',
+}: DashboardHeroProps) {
+  return (
+    <Box
+      position="relative"
+      bg="bg-[#0C0D0F]"
+      borderBottom
+      borderColor="border-[#23272B]"
+      overflow="hidden"
+      className={className}
+    >
+      {/* Background Glow */}
+      <Box
+        position="absolute"
+        top={-100}
+        right={-100}
+        w="500px"
+        h="500px"
+        bg="bg-primary-blue/10"
+        rounded="full"
+        blur="3xl"
+      />
+
+      <Box p={{ base: 6, md: 10 }} position="relative" zIndex={10}>
+        <Stack direction={{ base: 'col', md: 'row' }} align="center" gap={8}>
+          {/* Avatar Section */}
+          <Box position="relative">
+            <Box
+              p={1}
+              rounded="2xl"
+              bg="bg-[#141619]"
+              border
+              borderColor="border-[#23272B]"
+            >
+              <Avatar
+                src={avatarUrl}
+                alt={driverName}
+                size={120}
+                className="rounded-xl"
+              />
+            </Box>
+            <Box
+              position="absolute"
+              bottom={-2}
+              right={-2}
+              w="10"
+              h="10"
+              rounded="xl"
+              bg="bg-[#4ED4E0]"
+              borderWidth="2px"
+              borderStyle="solid"
+              borderColor="border-[#0C0D0F]"
+              display="flex"
+              center
+            >
+              <Icon icon={Star} size={5} color="#0C0D0F" />
+            </Box>
+          </Box>
+
+          {/* Info Section */}
+          <Stack flex={1} align={{ base: 'center', md: 'start' }} gap={4}>
+            <Box>
+              <Heading level={1} uppercase letterSpacing="tighter" mb={2}>
+                {driverName}
+              </Heading>
+              <Stack direction="row" gap={4}>
+                <Stack gap={0.5}>
+                  <Text size="xs" color="text-gray-500" uppercase>Rating</Text>
+                  <Text size="sm" weight="bold" color="text-[#4ED4E0]" font="mono">{rating}</Text>
+                </Stack>
+                <Stack gap={0.5}>
+                  <Text size="xs" color="text-gray-500" uppercase>Rank</Text>
+                  <Text size="sm" weight="bold" color="text-[#FFBE4D]" font="mono">#{rank}</Text>
+                </Stack>
+                <Stack gap={0.5}>
+                  <Text size="xs" color="text-gray-500" uppercase>Starts</Text>
+                  <Text size="sm" weight="bold" color="text-gray-300" font="mono">{totalRaces}</Text>
+                </Stack>
+              </Stack>
+            </Box>
+
+            <Stack direction="row" gap={3} wrap>
+              <Badge variant="primary" rounded="lg" icon={Trophy}>
+                {winRate}% Win Rate
+              </Badge>
+              <Badge variant="info" rounded="lg" icon={Flag}>
+                Pro License
+              </Badge>
+              <Badge variant="default" rounded="lg" icon={Users}>
+                Team Redline
+              </Badge>
+            </Stack>
+          </Stack>
+
+          {/* Quick Stats */}
+          <Stack 
+            direction="row" 
+            gap={4} 
+            p={6} 
+            bg="bg-white/5" 
+            rounded="2xl" 
+            border 
+            borderColor="border-white/10"
+            className="backdrop-blur-md"
+          >
+            <Stack align="center" px={4}>
+              <Text size="2xl" weight="bold" color="text-white">12</Text>
+              <Text size="xs" color="text-gray-500" uppercase>Podiums</Text>
+            </Stack>
+            <Box w="1px" h="10" bg="bg-white/10" />
+            <Stack align="center" px={4}>
+              <Text size="2xl" weight="bold" color="text-white">4</Text>
+              <Text size="xs" color="text-gray-500" uppercase>Wins</Text>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
diff --git a/apps/website/ui/DateHeader.tsx b/apps/website/ui/DateHeader.tsx
index b267b9929..f476a0eb4 100644
--- a/apps/website/ui/DateHeader.tsx
+++ b/apps/website/ui/DateHeader.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Stack } from './primitives/Stack';
 import { Calendar } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
+import { Text } from './Text';
+import { Stack } from './Stack';
 
 export interface DateHeaderProps {
   date: string;
diff --git a/apps/website/ui/DebugPanel.tsx b/apps/website/ui/DebugPanel.tsx
index e1b4d1fbe..19341f263 100644
--- a/apps/website/ui/DebugPanel.tsx
+++ b/apps/website/ui/DebugPanel.tsx
@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
+import { X } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Card } from './Card';
-import { Box } from './primitives/Box';
 import { Heading } from './Heading';
 import { IconButton } from './IconButton';
-import { X } from 'lucide-react';
 
 export interface DebugPanelProps {
   title: string;
diff --git a/apps/website/ui/DecorativeBlur.tsx b/apps/website/ui/DecorativeBlur.tsx
index ce7541e46..bd68c8b9b 100644
--- a/apps/website/ui/DecorativeBlur.tsx
+++ b/apps/website/ui/DecorativeBlur.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 interface DecorativeBlurProps {
   color?: 'blue' | 'green' | 'purple' | 'yellow' | 'red';
diff --git a/apps/website/ui/DevErrorPanel.tsx b/apps/website/ui/DevErrorPanel.tsx
index 24f18f240..90cda418c 100644
--- a/apps/website/ui/DevErrorPanel.tsx
+++ b/apps/website/ui/DevErrorPanel.tsx
@@ -2,15 +2,13 @@ import { connectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
 import { ApiError } from '@/lib/api/base/ApiError';
 import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
 import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
-import { StatGrid } from '@/ui/StatGrid';
-import { Activity, AlertTriangle, Copy, RefreshCw, Terminal, X } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 interface DevErrorPanelProps {
   error: ApiError;
diff --git a/apps/website/ui/DriverIdentity.tsx b/apps/website/ui/DriverIdentity.tsx
index a46bbec86..a20bdf517 100644
--- a/apps/website/ui/DriverIdentity.tsx
+++ b/apps/website/ui/DriverIdentity.tsx
@@ -1,10 +1,7 @@
-import { Badge } from '@/ui/Badge';
-import { Image } from '@/ui/Image';
-import { Link } from '@/ui/Link';
-import { PlaceholderImage } from '@/ui/PlaceholderImage';
-import { Box } from '@/ui/primitives/Box';
-import { Text } from '@/ui/Text';
 import { Avatar } from '@/ui/Avatar';
+import { Box } from '@/ui/Box';
+import { Link } from '@/ui/Link';
+import { Text } from '@/ui/Text';
 import React from 'react';
 
 export interface DriverIdentityProps {
diff --git a/apps/website/ui/DurationField.tsx b/apps/website/ui/DurationField.tsx
index 31027f4c4..f01725012 100644
--- a/apps/website/ui/DurationField.tsx
+++ b/apps/website/ui/DurationField.tsx
@@ -1,7 +1,7 @@
-import React, { ChangeEvent } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { ChangeEvent } from 'react';
+import { Box } from './Box';
 import { Input } from './Input';
+import { Text } from './Text';
 
 export interface DurationFieldProps {
   label: string;
diff --git a/apps/website/ui/EmptyState.tsx b/apps/website/ui/EmptyState.tsx
index 01abed5d8..7353e494c 100644
--- a/apps/website/ui/EmptyState.tsx
+++ b/apps/website/ui/EmptyState.tsx
@@ -1,10 +1,9 @@
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
 import { EmptyStateProps } from '@/ui/state-types';
 import { Text } from '@/ui/Text';
-import { Activity, Lock, Search } from 'lucide-react';
 import React from 'react';
 
 // Illustration components (simple SVG representations)
diff --git a/apps/website/ui/ErrorActionButtons.tsx b/apps/website/ui/ErrorActionButtons.tsx
index f1a2f75dc..b60e89b67 100644
--- a/apps/website/ui/ErrorActionButtons.tsx
+++ b/apps/website/ui/ErrorActionButtons.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Home, RefreshCw } from 'lucide-react';
+import { Box } from './Box';
 import { Button } from './Button';
-import { RefreshCw, Home } from 'lucide-react';
 
 export interface ErrorActionButtonsProps {
   onRetry?: () => void;
diff --git a/apps/website/ui/ErrorBanner.tsx b/apps/website/ui/ErrorBanner.tsx
index 7c8c369cd..f0fab9ba9 100644
--- a/apps/website/ui/ErrorBanner.tsx
+++ b/apps/website/ui/ErrorBanner.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { AlertTriangle } from 'lucide-react';
-import { Surface } from './primitives/Surface';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface ErrorBannerProps {
   title?: string;
diff --git a/apps/website/ui/ErrorDisplay.tsx b/apps/website/ui/ErrorDisplay.tsx
index 1d1b5883c..eae4bbc72 100644
--- a/apps/website/ui/ErrorDisplay.tsx
+++ b/apps/website/ui/ErrorDisplay.tsx
@@ -1,13 +1,12 @@
 import { ApiError } from '@/lib/api/base/ApiError';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Surface } from '@/ui/primitives/Surface';
 import { ErrorDisplayAction, ErrorDisplayProps } from '@/ui/state-types';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { AlertCircle, ArrowLeft, Home, RefreshCw } from 'lucide-react';
-import React from 'react';
 
 export function ErrorDisplay({
   error,
diff --git a/apps/website/ui/ErrorPageContainer.tsx b/apps/website/ui/ErrorPageContainer.tsx
index 5bba3f06c..d224a7a49 100644
--- a/apps/website/ui/ErrorPageContainer.tsx
+++ b/apps/website/ui/ErrorPageContainer.tsx
@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 
 export interface ErrorPageContainerProps {
   children: ReactNode;
diff --git a/apps/website/ui/FeedEmptyState.tsx b/apps/website/ui/FeedEmptyState.tsx
index d1856b24e..6d0e4d641 100644
--- a/apps/website/ui/FeedEmptyState.tsx
+++ b/apps/website/ui/FeedEmptyState.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { MessageSquare } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface FeedEmptyStateProps {
   message?: string;
diff --git a/apps/website/ui/FeedItem.tsx b/apps/website/ui/FeedItem.tsx
index 3252f9089..425361df0 100644
--- a/apps/website/ui/FeedItem.tsx
+++ b/apps/website/ui/FeedItem.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
 import { Avatar } from './Avatar';
+import { Box } from './Box';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface FeedItemProps {
   user: {
diff --git a/apps/website/ui/FilePicker.tsx b/apps/website/ui/FilePicker.tsx
index 3c5a8156b..fa596b2d3 100644
--- a/apps/website/ui/FilePicker.tsx
+++ b/apps/website/ui/FilePicker.tsx
@@ -1,8 +1,8 @@
 
 
 import React from 'react';
-import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
+import { Box } from './Box';
+import { Stack } from './Stack';
 import { Text } from './Text';
 
 interface FilePickerProps {
diff --git a/apps/website/ui/FilterGroup.tsx b/apps/website/ui/FilterGroup.tsx
index 97a3ca55b..7c3bdaaa3 100644
--- a/apps/website/ui/FilterGroup.tsx
+++ b/apps/website/ui/FilterGroup.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Button } from './Button';
+import { Surface } from './Surface';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 
 export interface FilterOption {
   id: string;
diff --git a/apps/website/ui/FloatingAction.tsx b/apps/website/ui/FloatingAction.tsx
index 922794758..15e87f22f 100644
--- a/apps/website/ui/FloatingAction.tsx
+++ b/apps/website/ui/FloatingAction.tsx
@@ -1,5 +1,3 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
 import { Button, ButtonProps } from './Button';
 
 export interface FloatingActionProps extends ButtonProps {
diff --git a/apps/website/ui/Footer.tsx b/apps/website/ui/Footer.tsx
index 656316583..75f788ada 100644
--- a/apps/website/ui/Footer.tsx
+++ b/apps/website/ui/Footer.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Container } from './Container';
-import { Text } from './Text';
 import { Link } from './Link';
+import { Text } from './Text';
 
 export const Footer = () => {
   return (
diff --git a/apps/website/ui/FooterSection.tsx b/apps/website/ui/FooterSection.tsx
index cfacc0aed..3fde314c2 100644
--- a/apps/website/ui/FooterSection.tsx
+++ b/apps/website/ui/FooterSection.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface FooterSectionProps {
   children: ReactNode;
diff --git a/apps/website/ui/FormField.tsx b/apps/website/ui/FormField.tsx
index 881571111..7d2ef69ef 100644
--- a/apps/website/ui/FormField.tsx
+++ b/apps/website/ui/FormField.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface FormFieldProps {
   label?: string;
diff --git a/apps/website/ui/FormSection.tsx b/apps/website/ui/FormSection.tsx
index 1565770f9..ed3de19f3 100644
--- a/apps/website/ui/FormSection.tsx
+++ b/apps/website/ui/FormSection.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface FormSectionProps {
diff --git a/apps/website/ui/Glow.tsx b/apps/website/ui/Glow.tsx
index bafda8ca2..cce1a246b 100644
--- a/apps/website/ui/Glow.tsx
+++ b/apps/website/ui/Glow.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 interface GlowProps {
   color?: 'primary' | 'aqua' | 'purple' | 'amber';
diff --git a/apps/website/ui/GoalCard.tsx b/apps/website/ui/GoalCard.tsx
index e3f42cbb9..2cf1cef25 100644
--- a/apps/website/ui/GoalCard.tsx
+++ b/apps/website/ui/GoalCard.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import { Box } from './Box';
 import { Card } from './Card';
-import { Box } from './primitives/Box';
 import { Text } from './Text';
 
 export interface GoalCardProps {
diff --git a/apps/website/ui/Grid.tsx b/apps/website/ui/Grid.tsx
index bbc8b78d0..edb355906 100644
--- a/apps/website/ui/Grid.tsx
+++ b/apps/website/ui/Grid.tsx
@@ -1,38 +1,46 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
+import { Box, BoxProps, ResponsiveValue } from './Box';
 
-export interface GridProps {
-  children: ReactNode;
-  cols?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
-  gap?: number;
-  fullWidth?: boolean;
+/**
+ * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
+ * 
+ * Grid is for grid-based layouts.
+ * 
+ * - DO NOT add positioning props (absolute, top, zIndex).
+ * - DO NOT add background/border props unless it's a specific styled grid.
+ * 
+ * If you need a more specific layout, create a new component in apps/website/components.
+ */
+
+export interface GridProps<T extends ElementType> extends BoxProps<T> {
+  as?: T;
+  children?: ReactNode;
+  cols?: number | ResponsiveValue<number>;
+  gap?: number | string | ResponsiveValue<number | string>;
 }
 
-export const Grid = ({ 
-  children, 
-  cols = 1, 
-  gap = 0,
-  fullWidth = false
-}: GridProps) => {
-  const getGridColsClass = (value: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number }) => {
-    if (typeof value === 'number') return `grid-cols-${value}`;
-    const classes = [];
-    if (value.base) classes.push(`grid-cols-${value.base}`);
-    if (value.sm) classes.push(`sm:grid-cols-${value.sm}`);
-    if (value.md) classes.push(`md:grid-cols-${value.md}`);
-    if (value.lg) classes.push(`lg:grid-cols-${value.lg}`);
-    if (value.xl) classes.push(`xl:grid-cols-${value.xl}`);
-    return classes.join(' ');
-  };
-
+export const Grid = forwardRef(<T extends ElementType = 'div'>(
+  { 
+    children, 
+    cols = 1, 
+    gap = 4,
+    as,
+    ...props
+  }: GridProps<T>,
+  ref: ForwardedRef<HTMLElement>
+) => {
   return (
     <Box 
-      display="grid" 
-      className={getGridColsClass(cols)}
-      gap={gap} 
-      fullWidth={fullWidth}
+      as={as} 
+      ref={ref}
+      display="grid"
+      gridCols={cols}
+      gap={gap}
+      {...props}
     >
       {children}
     </Box>
   );
-};
+});
+
+Grid.displayName = 'Grid';
diff --git a/apps/website/ui/Header.tsx b/apps/website/ui/Header.tsx
index 5d4c3e680..0932d61ac 100644
--- a/apps/website/ui/Header.tsx
+++ b/apps/website/ui/Header.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Container } from './Container';
 
 export interface HeaderProps {
diff --git a/apps/website/ui/Heading.tsx b/apps/website/ui/Heading.tsx
index 0457251a9..3e5cb3460 100644
--- a/apps/website/ui/Heading.tsx
+++ b/apps/website/ui/Heading.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode, forwardRef } from 'react';
-import { Box, BoxProps, ResponsiveValue } from './primitives/Box';
+import { ReactNode, forwardRef } from 'react';
+import { Box, BoxProps, ResponsiveValue } from './Box';
 
 export interface HeadingProps extends BoxProps<any> {
   children: ReactNode;
diff --git a/apps/website/ui/Hero.tsx b/apps/website/ui/Hero.tsx
index e229043d8..759822cac 100644
--- a/apps/website/ui/Hero.tsx
+++ b/apps/website/ui/Hero.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 interface HeroProps {
   children: ReactNode;
diff --git a/apps/website/ui/HorizontalBarChart.tsx b/apps/website/ui/HorizontalBarChart.tsx
index 8f64e800a..a9a55a892 100644
--- a/apps/website/ui/HorizontalBarChart.tsx
+++ b/apps/website/ui/HorizontalBarChart.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
-import { Stack } from './primitives/Stack';
+import { Stack } from './Stack';
 
 export interface HorizontalBarChartItem {
   label: string;
diff --git a/apps/website/ui/HorizontalStatCard.tsx b/apps/website/ui/HorizontalStatCard.tsx
index b32fd68ca..ef531e732 100644
--- a/apps/website/ui/HorizontalStatCard.tsx
+++ b/apps/website/ui/HorizontalStatCard.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Card } from './Card';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Card } from './Card';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface HorizontalStatCardProps {
   label: string;
diff --git a/apps/website/ui/HorizontalStatItem.tsx b/apps/website/ui/HorizontalStatItem.tsx
index 72b3d0fba..3ef433ac0 100644
--- a/apps/website/ui/HorizontalStatItem.tsx
+++ b/apps/website/ui/HorizontalStatItem.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface HorizontalStatItemProps {
diff --git a/apps/website/ui/Icon.tsx b/apps/website/ui/Icon.tsx
index 74e20bfe8..69b204837 100644
--- a/apps/website/ui/Icon.tsx
+++ b/apps/website/ui/Icon.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import { LucideIcon } from 'lucide-react';
-import { Box, BoxProps } from './primitives/Box';
+import React from 'react';
+import { Box, BoxProps } from './Box';
 
 export interface IconProps extends Omit<BoxProps<'div'>, 'children'> {
   icon: LucideIcon | React.ReactNode;
diff --git a/apps/website/ui/Image.tsx b/apps/website/ui/Image.tsx
index 880c4447f..f888255e2 100644
--- a/apps/website/ui/Image.tsx
+++ b/apps/website/ui/Image.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Box, BoxProps } from './primitives/Box';
+import { Box, BoxProps } from './Box';
 import { ImagePlaceholder } from './ImagePlaceholder';
 
 export interface ImageProps extends Omit<BoxProps<'img'>, 'children'> {
diff --git a/apps/website/ui/ImagePlaceholder.tsx b/apps/website/ui/ImagePlaceholder.tsx
index 117b2d6bf..3d621dfc3 100644
--- a/apps/website/ui/ImagePlaceholder.tsx
+++ b/apps/website/ui/ImagePlaceholder.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { AlertCircle, Image as ImageIcon, Loader2 } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { Image as ImageIcon, AlertCircle, Loader2 } from 'lucide-react';
 import { Text } from './Text';
 
 export interface ImagePlaceholderProps {
diff --git a/apps/website/ui/InfoBanner.tsx b/apps/website/ui/InfoBanner.tsx
index 7b08bf959..2bf93c67c 100644
--- a/apps/website/ui/InfoBanner.tsx
+++ b/apps/website/ui/InfoBanner.tsx
@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { AlertTriangle, CheckCircle, Info, XCircle } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { Info, AlertTriangle, CheckCircle, XCircle } from 'lucide-react';
-import { Surface } from './primitives/Surface';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface InfoBannerProps {
   children?: ReactNode;
diff --git a/apps/website/ui/InfoBox.tsx b/apps/website/ui/InfoBox.tsx
index 1dfc7b82f..6c000cbc6 100644
--- a/apps/website/ui/InfoBox.tsx
+++ b/apps/website/ui/InfoBox.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
-import { Surface } from './primitives/Surface';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface InfoBoxProps {
   title: string;
diff --git a/apps/website/ui/InfoFlyout.tsx b/apps/website/ui/InfoFlyout.tsx
index d84b9fea2..05b95dacf 100644
--- a/apps/website/ui/InfoFlyout.tsx
+++ b/apps/website/ui/InfoFlyout.tsx
@@ -1,12 +1,10 @@
+import { HelpCircle, X } from 'lucide-react';
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
-import { Text } from './Text';
+import { Box } from './Box';
 import { Icon } from './Icon';
 import { IconButton } from './IconButton';
-import { HelpCircle, X } from 'lucide-react';
-import { Heading } from './Heading';
+import { Surface } from './Surface';
 
 export interface InfoFlyoutProps {
   isOpen: boolean;
diff --git a/apps/website/ui/InfoItem.tsx b/apps/website/ui/InfoItem.tsx
index a7c3a565d..5135d9b14 100644
--- a/apps/website/ui/InfoItem.tsx
+++ b/apps/website/ui/InfoItem.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface InfoItemProps {
   label: string;
diff --git a/apps/website/ui/InlineNotice.tsx b/apps/website/ui/InlineNotice.tsx
index 3895620bc..a3adf0e8c 100644
--- a/apps/website/ui/InlineNotice.tsx
+++ b/apps/website/ui/InlineNotice.tsx
@@ -1,8 +1,7 @@
-import { Box } from '@/ui/primitives/Box';
-import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
+import { Text } from '@/ui/Text';
 import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';
-import React from 'react';
 
 interface InlineNoticeProps {
   variant?: 'info' | 'success' | 'warning' | 'error';
diff --git a/apps/website/ui/Input.tsx b/apps/website/ui/Input.tsx
index f81eed776..0abef6af4 100644
--- a/apps/website/ui/Input.tsx
+++ b/apps/website/ui/Input.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, InputHTMLAttributes } from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
diff --git a/apps/website/ui/LandingItems.tsx b/apps/website/ui/LandingItems.tsx
index 300632874..2d218f4f4 100644
--- a/apps/website/ui/LandingItems.tsx
+++ b/apps/website/ui/LandingItems.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface LandingItemProps {
   title: string;
diff --git a/apps/website/ui/Layout.tsx b/apps/website/ui/Layout.tsx
index 2a593f341..f125ee5a5 100644
--- a/apps/website/ui/Layout.tsx
+++ b/apps/website/ui/Layout.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface LayoutProps {
   children: ReactNode;
diff --git a/apps/website/ui/LeaderboardList.tsx b/apps/website/ui/LeaderboardList.tsx
index 778aba920..8a2529f0c 100644
--- a/apps/website/ui/LeaderboardList.tsx
+++ b/apps/website/ui/LeaderboardList.tsx
@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 
 export interface LeaderboardListProps {
   children: ReactNode;
diff --git a/apps/website/ui/LeaderboardPreviewShell.tsx b/apps/website/ui/LeaderboardPreviewShell.tsx
index 1b8836ca7..73f83d4cc 100644
--- a/apps/website/ui/LeaderboardPreviewShell.tsx
+++ b/apps/website/ui/LeaderboardPreviewShell.tsx
@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface LeaderboardPreviewShellProps {
   title: string;
diff --git a/apps/website/ui/LeaderboardTableShell.tsx b/apps/website/ui/LeaderboardTableShell.tsx
index 069be7d82..cb21ed8ba 100644
--- a/apps/website/ui/LeaderboardTableShell.tsx
+++ b/apps/website/ui/LeaderboardTableShell.tsx
@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 
 export interface LeaderboardTableShellProps {
   children: ReactNode;
diff --git a/apps/website/ui/LeagueCard.tsx b/apps/website/ui/LeagueCard.tsx
index fef94be72..bf2707dda 100644
--- a/apps/website/ui/LeagueCard.tsx
+++ b/apps/website/ui/LeagueCard.tsx
@@ -1,11 +1,9 @@
-import React, { ReactNode } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Card } from './Card';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Heading } from './Heading';
-import { Icon } from './Icon';
-import { LucideIcon, ChevronRight } from 'lucide-react';
 import { Image } from './Image';
+import { Text } from './Text';
 
 export interface LeagueCardProps {
   children: ReactNode;
diff --git a/apps/website/ui/ListItem.tsx b/apps/website/ui/ListItem.tsx
index 8145b52ff..3e7c9b315 100644
--- a/apps/website/ui/ListItem.tsx
+++ b/apps/website/ui/ListItem.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Card } from './Card';
 import { Text } from './Text';
 
diff --git a/apps/website/ui/LoadingSpinner.tsx b/apps/website/ui/LoadingSpinner.tsx
index fd62d4349..edc4b227f 100644
--- a/apps/website/ui/LoadingSpinner.tsx
+++ b/apps/website/ui/LoadingSpinner.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 export interface LoadingSpinnerProps {
   size?: 'sm' | 'md' | 'lg' | number;
diff --git a/apps/website/ui/LoadingWrapper.tsx b/apps/website/ui/LoadingWrapper.tsx
index 664fbe912..6e4495eef 100644
--- a/apps/website/ui/LoadingWrapper.tsx
+++ b/apps/website/ui/LoadingWrapper.tsx
@@ -1,7 +1,6 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { LoadingWrapperProps } from '@/ui/state-types';
 import { Text } from '@/ui/Text';
-import React from 'react';
 
 export function LoadingWrapper({
   variant = 'spinner',
diff --git a/apps/website/ui/MainContent.tsx b/apps/website/ui/MainContent.tsx
index b26affded..b4f15dc00 100644
--- a/apps/website/ui/MainContent.tsx
+++ b/apps/website/ui/MainContent.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Container } from './Container';
 
 export interface MainContentProps {
diff --git a/apps/website/ui/MediaCard.tsx b/apps/website/ui/MediaCard.tsx
index 5ebd80668..9d508e4da 100644
--- a/apps/website/ui/MediaCard.tsx
+++ b/apps/website/ui/MediaCard.tsx
@@ -1,7 +1,7 @@
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Image } from '@/ui/Image';
 import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { motion } from 'framer-motion';
 import React from 'react';
diff --git a/apps/website/ui/MediaMetaPanel.tsx b/apps/website/ui/MediaMetaPanel.tsx
index cabee1802..b49481033 100644
--- a/apps/website/ui/MediaMetaPanel.tsx
+++ b/apps/website/ui/MediaMetaPanel.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Info, FileText, Maximize2, Type, Calendar, LucideIcon } from 'lucide-react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { Calendar, FileText, Info, LucideIcon, Maximize2, Type } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface MediaMetaItem {
   label: string;
diff --git a/apps/website/ui/MediaPreviewCard.tsx b/apps/website/ui/MediaPreviewCard.tsx
index 488aa618c..a450922ef 100644
--- a/apps/website/ui/MediaPreviewCard.tsx
+++ b/apps/website/ui/MediaPreviewCard.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Image } from './Image';
-import { Surface } from './primitives/Surface';
-import { Text } from './Text';
-import { Play, Image as ImageIcon } from 'lucide-react';
+import { Image as ImageIcon, Play } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
+import { Image } from './Image';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 interface MediaPreviewCardProps {
   type: 'image' | 'video';
diff --git a/apps/website/ui/MetricCard.tsx b/apps/website/ui/MetricCard.tsx
index 253cd4302..790ef66b8 100644
--- a/apps/website/ui/MetricCard.tsx
+++ b/apps/website/ui/MetricCard.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Card } from './Card';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Card } from './Card';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface MetricCardProps {
   label: string;
diff --git a/apps/website/ui/MiniStat.tsx b/apps/website/ui/MiniStat.tsx
index 6483a04e8..5caba32b2 100644
--- a/apps/website/ui/MiniStat.tsx
+++ b/apps/website/ui/MiniStat.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface MiniStatProps {
diff --git a/apps/website/ui/Modal.tsx b/apps/website/ui/Modal.tsx
index 22428638c..a31180e67 100644
--- a/apps/website/ui/Modal.tsx
+++ b/apps/website/ui/Modal.tsx
@@ -1,11 +1,11 @@
-import React, { ReactNode, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
-import { IconButton } from './IconButton';
-import { Button } from './Button';
 import { X } from 'lucide-react';
+import { ReactNode, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Box } from './Box';
+import { Button } from './Button';
 import { Heading } from './Heading';
+import { IconButton } from './IconButton';
+import { Surface } from './Surface';
 import { Text } from './Text';
 
 export interface ModalProps {
diff --git a/apps/website/ui/ModalIcon.tsx b/apps/website/ui/ModalIcon.tsx
index 3fecc6611..21d21872c 100644
--- a/apps/website/ui/ModalIcon.tsx
+++ b/apps/website/ui/ModalIcon.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import { LucideIcon } from 'lucide-react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Icon } from './Icon';
 
 interface ModalIconProps {
diff --git a/apps/website/ui/NavGroup.tsx b/apps/website/ui/NavGroup.tsx
index d089a865c..abc548a72 100644
--- a/apps/website/ui/NavGroup.tsx
+++ b/apps/website/ui/NavGroup.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface NavGroupProps {
   children: ReactNode;
diff --git a/apps/website/ui/NavLink.tsx b/apps/website/ui/NavLink.tsx
index 66bcb996e..6b884237a 100644
--- a/apps/website/ui/NavLink.tsx
+++ b/apps/website/ui/NavLink.tsx
@@ -1,9 +1,8 @@
-import { Text } from '@/ui/Text';
-import { Box } from '@/ui/primitives/Box';
-import { LucideIcon } from 'lucide-react';
-import { Link } from '@/ui/Link';
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import React from 'react';
+import { Link } from '@/ui/Link';
+import { Text } from '@/ui/Text';
+import { LucideIcon } from 'lucide-react';
 
 interface NavLinkProps {
   href: string;
diff --git a/apps/website/ui/NotificationContent.tsx b/apps/website/ui/NotificationContent.tsx
index 792306e40..d9c11b933 100644
--- a/apps/website/ui/NotificationContent.tsx
+++ b/apps/website/ui/NotificationContent.tsx
@@ -1,8 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { LucideIcon } from 'lucide-react';
+import { Text } from './Text';
 
 export interface NotificationStatProps {
   label: string;
diff --git a/apps/website/ui/PageHeader.tsx b/apps/website/ui/PageHeader.tsx
index fc113c1d6..48b8d7b7c 100644
--- a/apps/website/ui/PageHeader.tsx
+++ b/apps/website/ui/PageHeader.tsx
@@ -2,11 +2,11 @@
 
 import { LucideIcon } from 'lucide-react';
 import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Heading } from './Heading';
 import { Icon } from './Icon';
-import { Stack } from './primitives/Stack';
-import { Surface } from './primitives/Surface';
+import { Stack } from './Stack';
+import { Surface } from './Surface';
 import { Text } from './Text';
 
 interface PageHeaderProps {
diff --git a/apps/website/ui/PageHero.tsx b/apps/website/ui/PageHero.tsx
index ae641de0c..aa09df1b5 100644
--- a/apps/website/ui/PageHero.tsx
+++ b/apps/website/ui/PageHero.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Heading } from './Heading';
+import { Surface } from './Surface';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 
 export interface PageHeroProps {
   title: string;
diff --git a/apps/website/ui/Pagination.tsx b/apps/website/ui/Pagination.tsx
index a6356b3c1..550fa59de 100644
--- a/apps/website/ui/Pagination.tsx
+++ b/apps/website/ui/Pagination.tsx
@@ -1,8 +1,8 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Button } from './Button';
 import { Text } from './Text';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 export interface PaginationProps {
   currentPage: number;
diff --git a/apps/website/ui/Panel.tsx b/apps/website/ui/Panel.tsx
index 80f202841..d7568a386 100644
--- a/apps/website/ui/Panel.tsx
+++ b/apps/website/ui/Panel.tsx
@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
-import { Surface } from './primitives/Surface';
-import { Box, Spacing } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box, Spacing } from './Box';
 import { Heading } from './Heading';
+import { Surface } from './Surface';
 import { Text } from './Text';
 
 export interface PanelProps {
diff --git a/apps/website/ui/PasswordField.tsx b/apps/website/ui/PasswordField.tsx
index 77b822411..b770d2ae9 100644
--- a/apps/website/ui/PasswordField.tsx
+++ b/apps/website/ui/PasswordField.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import { Input, InputProps } from './Input';
 import { Eye, EyeOff } from 'lucide-react';
+import { useState } from 'react';
+import { Box } from './Box';
 import { IconButton } from './IconButton';
-import { Box } from './primitives/Box';
+import { Input, InputProps } from './Input';
 
 export interface PasswordFieldProps extends InputProps {}
 
diff --git a/apps/website/ui/PlaceholderImage.tsx b/apps/website/ui/PlaceholderImage.tsx
index 9a5bd4ddd..80070d98f 100644
--- a/apps/website/ui/PlaceholderImage.tsx
+++ b/apps/website/ui/PlaceholderImage.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Icon } from './Icon';
 import { User } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
 
 export interface PlaceholderImageProps {
   width?: string | number;
diff --git a/apps/website/ui/Podium.tsx b/apps/website/ui/Podium.tsx
index 5221286ef..d6952379c 100644
--- a/apps/website/ui/Podium.tsx
+++ b/apps/website/ui/Podium.tsx
@@ -1,10 +1,10 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Avatar } from './Avatar';
 import { Trophy } from 'lucide-react';
-import { Icon } from './Icon';
+import { ReactNode } from 'react';
+import { Avatar } from './Avatar';
+import { Box } from './Box';
 import { Heading } from './Heading';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface PodiumEntry {
   name: string;
diff --git a/apps/website/ui/PresetCard.tsx b/apps/website/ui/PresetCard.tsx
index 92d9841ef..ea528babe 100644
--- a/apps/website/ui/PresetCard.tsx
+++ b/apps/website/ui/PresetCard.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface PresetCardProps {
   title: string;
diff --git a/apps/website/ui/ProfileHero.tsx b/apps/website/ui/ProfileHero.tsx
index f2836fd56..8ae95c127 100644
--- a/apps/website/ui/ProfileHero.tsx
+++ b/apps/website/ui/ProfileHero.tsx
@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Glow } from './Glow';
+import { Surface } from './Surface';
 
 export interface ProfileHeroProps {
   children: ReactNode;
diff --git a/apps/website/ui/ProgressBar.tsx b/apps/website/ui/ProgressBar.tsx
index f201a207e..9a282375d 100644
--- a/apps/website/ui/ProgressBar.tsx
+++ b/apps/website/ui/ProgressBar.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 export interface ProgressBarProps {
   value: number;
diff --git a/apps/website/ui/ProgressLine.tsx b/apps/website/ui/ProgressLine.tsx
index b33d0f05d..7f7222bc4 100644
--- a/apps/website/ui/ProgressLine.tsx
+++ b/apps/website/ui/ProgressLine.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { motion } from 'framer-motion';
-import React from 'react';
 
 interface ProgressLineProps {
   isLoading: boolean;
diff --git a/apps/website/ui/QuickActionItem.tsx b/apps/website/ui/QuickActionItem.tsx
index b581f6eea..4fdd72536 100644
--- a/apps/website/ui/QuickActionItem.tsx
+++ b/apps/website/ui/QuickActionItem.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { ChevronRight, LucideIcon } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { LucideIcon, ChevronRight } from 'lucide-react';
 import { Link } from './Link';
+import { Text } from './Text';
 
 export interface QuickActionItemProps {
   label: string;
diff --git a/apps/website/ui/QuickActionLink.tsx b/apps/website/ui/QuickActionLink.tsx
index e112af46d..620c7acc4 100644
--- a/apps/website/ui/QuickActionLink.tsx
+++ b/apps/website/ui/QuickActionLink.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { ArrowRight, LucideIcon } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { LucideIcon, ArrowRight } from 'lucide-react';
 import { Link } from './Link';
+import { Text } from './Text';
 
 export interface QuickActionLinkProps {
   label: string;
diff --git a/apps/website/ui/QuickActionsPanel.tsx b/apps/website/ui/QuickActionsPanel.tsx
index 8a0ebff42..039a37d3d 100644
--- a/apps/website/ui/QuickActionsPanel.tsx
+++ b/apps/website/ui/QuickActionsPanel.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Panel } from './Panel';
-import { Box } from './primitives/Box';
+import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
 import { Button } from './Button';
 import { Icon } from './Icon';
-import { LucideIcon } from 'lucide-react';
+import { Panel } from './Panel';
 
 export interface QuickAction {
   label: string;
diff --git a/apps/website/ui/QuickStatCard.tsx b/apps/website/ui/QuickStatCard.tsx
index ac4204c75..b73852038 100644
--- a/apps/website/ui/QuickStatCard.tsx
+++ b/apps/website/ui/QuickStatCard.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
+import { Box } from './Box';
 import { Card } from './Card';
-import { Box } from './primitives/Box';
 import { Text } from './Text';
 
 export interface QuickStatItemProps {
diff --git a/apps/website/ui/RaceCard.tsx b/apps/website/ui/RaceCard.tsx
index 9eb17a378..caaf988c9 100644
--- a/apps/website/ui/RaceCard.tsx
+++ b/apps/website/ui/RaceCard.tsx
@@ -1,10 +1,9 @@
-import React, { ReactNode } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Card } from './Card';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
 import { Heading } from './Heading';
 import { Icon } from './Icon';
-import { LucideIcon, ChevronRight } from 'lucide-react';
 
 export interface RaceCardProps {
   children: ReactNode;
diff --git a/apps/website/ui/RaceSummary.tsx b/apps/website/ui/RaceSummary.tsx
index c864b949d..156a91063 100644
--- a/apps/website/ui/RaceSummary.tsx
+++ b/apps/website/ui/RaceSummary.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface RaceSummaryProps {
diff --git a/apps/website/ui/ResultRow.tsx b/apps/website/ui/ResultRow.tsx
index 833c79770..6397fec2c 100644
--- a/apps/website/ui/ResultRow.tsx
+++ b/apps/website/ui/ResultRow.tsx
@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 import { Text } from './Text';
 
 export interface ResultRowProps {
diff --git a/apps/website/ui/Section.tsx b/apps/website/ui/Section.tsx
index 5a52356b5..20c0fd765 100644
--- a/apps/website/ui/Section.tsx
+++ b/apps/website/ui/Section.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface SectionProps {
   children: ReactNode;
diff --git a/apps/website/ui/SectionHeader.tsx b/apps/website/ui/SectionHeader.tsx
index c0c8b6e1f..3f91091a7 100644
--- a/apps/website/ui/SectionHeader.tsx
+++ b/apps/website/ui/SectionHeader.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Heading } from './Heading';
 import { Text } from './Text';
 
diff --git a/apps/website/ui/SegmentedControl.tsx b/apps/website/ui/SegmentedControl.tsx
index e7068de6b..2386c93d5 100644
--- a/apps/website/ui/SegmentedControl.tsx
+++ b/apps/website/ui/SegmentedControl.tsx
@@ -1,7 +1,4 @@
 import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 
 export interface SegmentedControlOption {
   id: string;
diff --git a/apps/website/ui/Select.tsx b/apps/website/ui/Select.tsx
index 1e9a7cda2..9a80b46c0 100644
--- a/apps/website/ui/Select.tsx
+++ b/apps/website/ui/Select.tsx
@@ -1,5 +1,5 @@
-import React, { forwardRef, SelectHTMLAttributes } from 'react';
-import { Box } from './primitives/Box';
+import { forwardRef, SelectHTMLAttributes } from 'react';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface SelectOption {
diff --git a/apps/website/ui/Sidebar.tsx b/apps/website/ui/Sidebar.tsx
index 2586270f2..683be26bd 100644
--- a/apps/website/ui/Sidebar.tsx
+++ b/apps/website/ui/Sidebar.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface SidebarProps {
   children: ReactNode;
diff --git a/apps/website/ui/SidebarActionLink.tsx b/apps/website/ui/SidebarActionLink.tsx
index f9f4f033d..f06ce7083 100644
--- a/apps/website/ui/SidebarActionLink.tsx
+++ b/apps/website/ui/SidebarActionLink.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { ChevronRight, LucideIcon } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { LucideIcon, ChevronRight } from 'lucide-react';
 import { Link } from './Link';
+import { Text } from './Text';
 
 export interface SidebarActionLinkProps {
   label: string;
diff --git a/apps/website/ui/SidebarItem.tsx b/apps/website/ui/SidebarItem.tsx
index 866f0d56c..c8840c811 100644
--- a/apps/website/ui/SidebarItem.tsx
+++ b/apps/website/ui/SidebarItem.tsx
@@ -1,8 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { ChevronRight } from 'lucide-react';
+import { ReactNode } from 'react';
 import { Icon } from './Icon';
-import { LucideIcon, ChevronRight } from 'lucide-react';
 
 export interface SidebarItemProps {
   children: ReactNode;
diff --git a/apps/website/ui/SimpleCheckbox.tsx b/apps/website/ui/SimpleCheckbox.tsx
index d70ecee81..a0361251f 100644
--- a/apps/website/ui/SimpleCheckbox.tsx
+++ b/apps/website/ui/SimpleCheckbox.tsx
@@ -1,11 +1,5 @@
-import React, { forwardRef, ChangeEvent } from 'react';
-import { Box } from './primitives/Box';
+import { ChangeEvent, forwardRef } from 'react';
 
-export interface SimpleCheckboxProps {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  disabled?: boolean;
-}
 
 export const SimpleCheckbox = forwardRef<HTMLInputElement, SimpleCheckboxProps>(({ 
   checked, 
diff --git a/apps/website/ui/Skeleton.tsx b/apps/website/ui/Skeleton.tsx
index 50b303ecf..d5e525e93 100644
--- a/apps/website/ui/Skeleton.tsx
+++ b/apps/website/ui/Skeleton.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 export interface SkeletonProps {
   width?: string | number;
diff --git a/apps/website/ui/SponsorshipCard.tsx b/apps/website/ui/SponsorshipCard.tsx
index 41d6fc15a..0fa71637f 100644
--- a/apps/website/ui/SponsorshipCard.tsx
+++ b/apps/website/ui/SponsorshipCard.tsx
@@ -1,11 +1,9 @@
-import React, { ReactNode } from 'react';
-import { Card } from './Card';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Heading } from './Heading';
 import { Badge } from './Badge';
+import { Box } from './Box';
+import { Card } from './Card';
+import { Heading } from './Heading';
 import { Icon } from './Icon';
-import { DollarSign } from 'lucide-react';
+import { Text } from './Text';
 
 export interface SponsorshipCardProps {
   name: string;
diff --git a/apps/website/ui/primitives/Stack.tsx b/apps/website/ui/Stack.tsx
similarity index 100%
rename from apps/website/ui/primitives/Stack.tsx
rename to apps/website/ui/Stack.tsx
diff --git a/apps/website/ui/StatBox.tsx b/apps/website/ui/StatBox.tsx
index 2b08975d6..4cb2c762c 100644
--- a/apps/website/ui/StatBox.tsx
+++ b/apps/website/ui/StatBox.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { Surface } from './primitives/Surface';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface StatBoxProps {
   label: string;
diff --git a/apps/website/ui/StatCard.tsx b/apps/website/ui/StatCard.tsx
index 013e4ac53..faebf1cd5 100644
--- a/apps/website/ui/StatCard.tsx
+++ b/apps/website/ui/StatCard.tsx
@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
-import { Card } from './Card';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Card } from './Card';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface StatCardProps {
   label: string;
diff --git a/apps/website/ui/StatGrid.tsx b/apps/website/ui/StatGrid.tsx
index 6460975ee..2bec09957 100644
--- a/apps/website/ui/StatGrid.tsx
+++ b/apps/website/ui/StatGrid.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid } from './primitives/Grid';
+import { Grid } from './Grid';
 import { StatBox, StatBoxProps } from './StatBox';
 import { StatCard, StatCardProps } from './StatCard';
 
@@ -15,7 +15,7 @@ export const StatGrid = ({
   variant = 'box'
 }: StatGridProps) => {
   return (
-    <Grid columns={columns} gap={4}>
+    <Grid cols={columns} gap={4}>
       {stats.map((stat, index) => (
         variant === 'box' ? (
           <StatBox key={index} {...(stat as StatBoxProps)} />
diff --git a/apps/website/ui/StatGridItem.tsx b/apps/website/ui/StatGridItem.tsx
index d2de63773..28a2b69b8 100644
--- a/apps/website/ui/StatGridItem.tsx
+++ b/apps/website/ui/StatGridItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
-import { Stack } from './primitives/Stack';
+import { Stack } from './Stack';
 
 export interface StatGridItemProps {
   label: string;
diff --git a/apps/website/ui/StatItem.tsx b/apps/website/ui/StatItem.tsx
index 104c7f4e2..a4cab7615 100644
--- a/apps/website/ui/StatItem.tsx
+++ b/apps/website/ui/StatItem.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface StatItemProps {
diff --git a/apps/website/ui/StatusBadge.tsx b/apps/website/ui/StatusBadge.tsx
index afac8e206..8bac4cc1d 100644
--- a/apps/website/ui/StatusBadge.tsx
+++ b/apps/website/ui/StatusBadge.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
-import { Stack } from './primitives/Stack';
+import { Stack } from './Stack';
 
 export interface StatusBadgeProps {
   children: React.ReactNode;
diff --git a/apps/website/ui/StatusDot.tsx b/apps/website/ui/StatusDot.tsx
index cfae964b7..a70200ed0 100644
--- a/apps/website/ui/StatusDot.tsx
+++ b/apps/website/ui/StatusDot.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 export interface StatusDotProps {
   intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
diff --git a/apps/website/ui/StatusIndicator.tsx b/apps/website/ui/StatusIndicator.tsx
index c212c0a57..95283e56c 100644
--- a/apps/website/ui/StatusIndicator.tsx
+++ b/apps/website/ui/StatusIndicator.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { StatusDot } from './StatusDot';
 import { Badge } from './Badge';
+import { Box } from './Box';
+import { StatusDot } from './StatusDot';
+import { Text } from './Text';
 
 export { Badge };
 
@@ -22,7 +21,7 @@ export const StatusIndicator = ({
   subLabel,
   size = 'md',
   icon
-}: StatusIndicatorProps) => {
+}:) => {
   const activeStatus = (status || variant || 'pending') as any;
   
   const configMap: any = {
diff --git a/apps/website/ui/StepIndicator.tsx b/apps/website/ui/StepIndicator.tsx
index 69e24f6fb..3231a37af 100644
--- a/apps/website/ui/StepIndicator.tsx
+++ b/apps/website/ui/StepIndicator.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
 import { Check } from 'lucide-react';
+import React from 'react';
+import { Box } from './Box';
 import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface Step {
   id: string;
diff --git a/apps/website/ui/StepProgressRail.tsx b/apps/website/ui/StepProgressRail.tsx
index f27ccf5ef..c45127c66 100644
--- a/apps/website/ui/StepProgressRail.tsx
+++ b/apps/website/ui/StepProgressRail.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { motion } from 'framer-motion';
 
 interface StepProgressRailProps {
diff --git a/apps/website/ui/Stepper.tsx b/apps/website/ui/Stepper.tsx
index 77609b4dd..7e5f65f05 100644
--- a/apps/website/ui/Stepper.tsx
+++ b/apps/website/ui/Stepper.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { Box } from './Box';
 import { Button } from './Button';
+import { Text } from './Text';
 
 export interface StepperProps {
   value: number;
diff --git a/apps/website/ui/SummaryItem.tsx b/apps/website/ui/SummaryItem.tsx
index 010117e0b..858143cb5 100644
--- a/apps/website/ui/SummaryItem.tsx
+++ b/apps/website/ui/SummaryItem.tsx
@@ -1,9 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 import { Icon } from './Icon';
-import { LucideIcon } from 'lucide-react';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface SummaryItemProps {
   label: string;
diff --git a/apps/website/ui/primitives/Surface.tsx b/apps/website/ui/Surface.tsx
similarity index 96%
rename from apps/website/ui/primitives/Surface.tsx
rename to apps/website/ui/Surface.tsx
index cd92e5f1e..e65eccc13 100644
--- a/apps/website/ui/primitives/Surface.tsx
+++ b/apps/website/ui/Surface.tsx
@@ -1,6 +1,6 @@
-import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
+import React, { ElementType, ForwardedRef, forwardRef, ReactNode } from 'react';
 import { Box, BoxProps } from './Box';
-import { ThemeRadii, ThemeShadows } from '../theme/Theme';
+import { ThemeRadii, ThemeShadows } from './theme/Theme';
 
 /**
  * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
diff --git a/apps/website/ui/TabNavigation.tsx b/apps/website/ui/TabNavigation.tsx
index 312fdb244..668350c0b 100644
--- a/apps/website/ui/TabNavigation.tsx
+++ b/apps/website/ui/TabNavigation.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
+import { Box } from './Box';
 
 export interface TabNavigationOption {
   id: string;
diff --git a/apps/website/ui/Table.tsx b/apps/website/ui/Table.tsx
index 4bba9720c..fca5ea78a 100644
--- a/apps/website/ui/Table.tsx
+++ b/apps/website/ui/Table.tsx
@@ -1,6 +1,4 @@
 import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
 
 export interface TableProps {
   children: ReactNode;
diff --git a/apps/website/ui/TeamCard.tsx b/apps/website/ui/TeamCard.tsx
index 2e5c7189b..011fa82d4 100644
--- a/apps/website/ui/TeamCard.tsx
+++ b/apps/website/ui/TeamCard.tsx
@@ -1,12 +1,10 @@
-import React, { ReactNode } from 'react';
-import { Card } from './Card';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Heading } from './Heading';
-import { Icon } from './Icon';
-import { LucideIcon, ChevronRight, Users, Globe } from 'lucide-react';
-import { Image } from './Image';
+import { ChevronRight, Globe, Users } from 'lucide-react';
+import { ReactNode } from 'react';
 import { Badge } from './Badge';
+import { Box } from './Box';
+import { Card } from './Card';
+import { Heading } from './Heading';
+import { Text } from './Text';
 
 export interface TeamCardProps {
   name: string;
diff --git a/apps/website/ui/TeamHero.tsx b/apps/website/ui/TeamHero.tsx
index 5295c290f..0ec078fff 100644
--- a/apps/website/ui/TeamHero.tsx
+++ b/apps/website/ui/TeamHero.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Heading } from './Heading';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Glow } from './Glow';
+import { Heading } from './Heading';
+import { Text } from './Text';
 
 export interface TeamHeroProps {
   title: ReactNode;
diff --git a/apps/website/ui/Text.tsx b/apps/website/ui/Text.tsx
index eadd9bdd8..a38461a8f 100644
--- a/apps/website/ui/Text.tsx
+++ b/apps/website/ui/Text.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode, forwardRef, ElementType } from 'react';
-import { Box, BoxProps, ResponsiveValue } from './primitives/Box';
+import React, { ElementType, ReactNode, forwardRef } from 'react';
+import { Box, BoxProps, ResponsiveValue } from './Box';
 
 export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'base';
 
diff --git a/apps/website/ui/TextArea.tsx b/apps/website/ui/TextArea.tsx
index d6ff70534..8d2d38c23 100644
--- a/apps/website/ui/TextArea.tsx
+++ b/apps/website/ui/TextArea.tsx
@@ -1,5 +1,5 @@
-import React, { forwardRef, TextareaHTMLAttributes } from 'react';
-import { Box } from './primitives/Box';
+import { forwardRef, TextareaHTMLAttributes } from 'react';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
diff --git a/apps/website/ui/Toast.tsx b/apps/website/ui/Toast.tsx
index c0ae6d39a..0ba19faa1 100644
--- a/apps/website/ui/Toast.tsx
+++ b/apps/website/ui/Toast.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
-import { IconButton } from './IconButton';
 import { X } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { IconButton } from './IconButton';
+import { Surface } from './Surface';
 import { Text } from './Text';
 
 export interface ToastProps {
diff --git a/apps/website/ui/Toggle.tsx b/apps/website/ui/Toggle.tsx
index fe18e5877..800d9aeb0 100644
--- a/apps/website/ui/Toggle.tsx
+++ b/apps/website/ui/Toggle.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface ToggleProps {
diff --git a/apps/website/ui/UploadDropzone.tsx b/apps/website/ui/UploadDropzone.tsx
index e4f098fe4..6c2b1743e 100644
--- a/apps/website/ui/UploadDropzone.tsx
+++ b/apps/website/ui/UploadDropzone.tsx
@@ -1,11 +1,9 @@
-import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Text } from '@/ui/Text';
-import { Surface } from '@/ui/primitives/Surface';
 import { IconButton } from '@/ui/IconButton';
-import { ListItem, ListItemInfo, ListItemActions } from '@/ui/ListItem';
-import { AlertCircle, CheckCircle2, File, Upload, X } from 'lucide-react';
+import { ListItem, ListItemActions, ListItemInfo } from '@/ui/ListItem';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+import { AlertCircle, CheckCircle2, Upload, X } from 'lucide-react';
 import React, { useRef, useState } from 'react';
 
 export interface UploadDropzoneProps {
diff --git a/apps/website/ui/UserDropdown.tsx b/apps/website/ui/UserDropdown.tsx
index f4470cac7..dfc66d530 100644
--- a/apps/website/ui/UserDropdown.tsx
+++ b/apps/website/ui/UserDropdown.tsx
@@ -1,10 +1,10 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
 import { Link } from './Link';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface UserDropdownProps {
   children: ReactNode;
diff --git a/apps/website/ui/WorkflowMockup.tsx b/apps/website/ui/WorkflowMockup.tsx
index 0c1c04189..b57aa71a9 100644
--- a/apps/website/ui/WorkflowMockup.tsx
+++ b/apps/website/ui/WorkflowMockup.tsx
@@ -1,12 +1,12 @@
 'use client';
 
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Surface } from '@/ui/primitives/Surface';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
 import { CheckCircle2, LucideIcon } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export interface WorkflowStep {
   id: number;
diff --git a/apps/website/ui/primitives/Grid.tsx b/apps/website/ui/primitives/Grid.tsx
deleted file mode 100644
index 2e63ea901..000000000
--- a/apps/website/ui/primitives/Grid.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { ReactNode, ElementType } from 'react';
-import { Box, BoxProps, ResponsiveValue } from './Box';
-
-/**
- * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
- * 
- * Grid is for CSS Grid-based layouts.
- * 
- * - DO NOT add positioning props (absolute, top, zIndex).
- * - DO NOT add flex props.
- * - DO NOT add background/border props unless it's a specific styled grid.
- * 
- * If you need a more specific layout, create a new component in apps/website/components.
- */
-
-export interface GridProps<T extends ElementType = 'div'> extends BoxProps<T> {
-  children?: ReactNode;
-  columns?: number | ResponsiveValue<number>;
-  gap?: number | string | ResponsiveValue<number | string>;
-}
-
-export function Grid<T extends ElementType = 'div'>({ 
-  children, 
-  columns = 1, 
-  gap = 4,
-  ...props 
-}: GridProps<T>) {
-  return (
-    <Box 
-      display="grid" 
-      gridCols={columns} 
-      gap={gap} 
-      {...props}
-    >
-      {children}
-    </Box>
-  );
-}
diff --git a/apps/website/ui/primitives/GridItem.tsx b/apps/website/ui/primitives/GridItem.tsx
deleted file mode 100644
index 7e55ce9f5..000000000
--- a/apps/website/ui/primitives/GridItem.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { ReactNode, ElementType } from 'react';
-import { Box, BoxProps, ResponsiveValue } from './Box';
-
-export interface GridItemProps<T extends ElementType = 'div'> extends BoxProps<T> {
-  children?: ReactNode;
-  colSpan?: number | ResponsiveValue<number>;
-  rowSpan?: number | ResponsiveValue<number>;
-  lgSpan?: number; // Alias for colSpan.lg
-}
-
-export function GridItem<T extends ElementType = 'div'>({ 
-  children, 
-  colSpan, 
-  rowSpan,
-  lgSpan,
-  ...props 
-}: GridItemProps<T>) {
-  const actualColSpan = lgSpan ? { base: colSpan as any, lg: lgSpan } : colSpan;
-
-  return (
-    <Box 
-      colSpan={actualColSpan as any} 
-      {...props}
-    >
-      {children}
-    </Box>
-  );
-}