website refactor

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>
   );

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>
   );

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 {