diff --git a/.cursorrules b/.cursorrules
index 382fabb9e..28262014c 100644
--- a/.cursorrules
+++ b/.cursorrules
@@ -55,6 +55,30 @@ This is a React + TypeScript application for building and running Machine Learni
   - Common spacing/layout patterns → Suggest utility classes or component abstractions
   - Similar form field styling → Create form field components
 
+### UI Primitives (Prefer Over Raw HTML)
+
+**Always prefer our UI primitives over raw HTML elements:**
+
+- **Layout**: Use `BlockStack` and `InlineStack` from `@/components/ui/layout` instead of `<div className="flex ...">`
+  - `BlockStack` = vertical flex (`flex-col`)
+  - `InlineStack` = horizontal flex (`flex-row`)
+  - Both support `gap`, `align`, `blockAlign` props
+  - Use `as` prop for semantic elements: `<BlockStack as="ul">`, `<InlineStack as="li">`
+
+- **Typography**: Use `Text` from `@/components/ui/typography` instead of raw `<h1-h6>`, `<p>`, `<span>`, `<dt>`, `<dd>`
+  - `<Text as="h3" size="md" weight="semibold">` instead of `<h3 className="text-md font-semibold">`
+  - `<Text as="dt" weight="semibold">` instead of `<dt className="font-semibold">`
+  - `<Text as="p" size="sm">` instead of `<p className="text-sm">`
+  - Supports: `as`, `size`, `weight`, `tone`, `font` props
+
+- **Buttons**: Use `Button` from `@/components/ui/button`
+- **Icons**: Use `Icon` from `@/components/ui/icon`
+
+**When raw HTML is acceptable:**
+- Semantic elements not supported by primitives (e.g., `<dl>`, `<ul>`, `<ol>`, `<table>`)
+- Complex layouts where primitives don't fit
+- Performance-critical sections where abstraction overhead matters
+
 ### State Management
 
 - Use Tanstack Query for server state
@@ -202,6 +226,7 @@ export const useContext = () => {
 - Don't create side effects in render functions
 - Don't use barrel exports
 - Don't modify componentSpec structure without express permission
+- Don't use raw HTML elements when UI primitives exist (use `Text`, `BlockStack`, `InlineStack`, etc.)
 
 ## Other rules
 
diff --git a/src/components/Editor/PipelineDetails.tsx b/src/components/Editor/PipelineDetails.tsx
index e26529a56..e344af60b 100644
--- a/src/components/Editor/PipelineDetails.tsx
+++ b/src/components/Editor/PipelineDetails.tsx
@@ -7,6 +7,7 @@ import { CopyText } from "@/components/shared/CopyText/CopyText";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
 import useToastNotification from "@/hooks/useToastNotification";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useContextPanel } from "@/providers/ContextPanelProvider";
@@ -145,85 +146,108 @@ const PipelineDetails = () => {
         />
       </InlineStack>
 
-      {/* General Metadata */}
-      <div className="flex flex-col gap-2 text-xs text-secondary-foreground mb-2">
-        <div className="flex flex-wrap gap-6">
-          {fileMeta.createdBy && (
-            <div>
-              <span className="font-semibold">Created by:</span>{" "}
-              {fileMeta.createdBy}
-            </div>
-          )}
-        </div>
-        <div className="flex flex-wrap gap-x-6">
-          {fileMeta.creationTime && (
-            <div>
-              <span className="font-semibold">Created at:</span>{" "}
-              {new Date(fileMeta.creationTime).toLocaleString()}
-            </div>
-          )}
-          {fileMeta.modificationTime && (
-            <div>
-              <span className="font-semibold">Last updated:</span>{" "}
-              {new Date(fileMeta.modificationTime).toLocaleString()}
-            </div>
-          )}
-        </div>
-      </div>
+      {(fileMeta.createdBy ||
+        fileMeta.creationTime ||
+        fileMeta.modificationTime) && (
+        <BlockStack>
+          <Text as="h3" size="md" weight="semibold" className="mb-1">
+            Pipeline Info
+          </Text>
+          <dl className="flex flex-col gap-1 text-xs text-secondary-foreground">
+            {fileMeta.createdBy && (
+              <InlineStack as="div" gap="1" blockAlign="center">
+                <Text as="dt" weight="semibold">
+                  Created by:
+                </Text>
+                <dd>{fileMeta.createdBy}</dd>
+              </InlineStack>
+            )}
+            {fileMeta.creationTime && (
+              <InlineStack as="div" gap="1" blockAlign="center">
+                <Text as="dt" weight="semibold">
+                  Created at:
+                </Text>
+                <dd>{new Date(fileMeta.creationTime).toLocaleString()}</dd>
+              </InlineStack>
+            )}
+            {fileMeta.modificationTime && (
+              <InlineStack as="div" gap="1" blockAlign="center">
+                <Text as="dt" weight="semibold">
+                  Last updated:
+                </Text>
+                <dd>{new Date(fileMeta.modificationTime).toLocaleString()}</dd>
+              </InlineStack>
+            )}
+          </dl>
+        </BlockStack>
+      )}
 
-      {/* Description */}
       {componentSpec.description && (
-        <div>
-          <h3 className="text-md font-medium mb-1">Description</h3>
-          <div className="text-sm whitespace-pre-line">
+        <BlockStack>
+          <Text as="h3" size="md" weight="semibold" className="mb-1">
+            Description
+          </Text>
+          <Text as="p" size="sm" className="whitespace-pre-line">
             {componentSpec.description}
-          </div>
-        </div>
+          </Text>
+        </BlockStack>
       )}
 
       {/* Component Digest */}
       {digest && (
-        <div className="mb-2">
-          <h3 className="text-md font-medium mb-1">Digest</h3>
+        <BlockStack>
+          <Text as="h3" size="md" weight="semibold" className="mb-1">
+            Digest
+          </Text>
           <Button
             className="bg-gray-100 border border-gray-300 rounded p-2 h-fit text-xs w-full text-left hover:bg-gray-200 active:bg-gray-300 transition cursor-pointer"
             onClick={handleDigestCopy}
             variant="ghost"
           >
-            <span className="font-mono break-all w-full text-wrap">
+            <Text as="span" font="mono" className="break-all w-full text-wrap">
               {digest}
-            </span>
+            </Text>
           </Button>
-        </div>
+        </BlockStack>
       )}
 
       {/* Annotations */}
       {Object.keys(annotations).length > 0 && (
-        <div>
-          <h3 className="text-md font-medium mb-1">Annotations</h3>
+        <BlockStack>
+          <Text as="h3" size="md" weight="semibold" className="mb-1">
+            Annotations
+          </Text>
           <ul className="text-xs text-secondary-foreground">
             {Object.entries(annotations).map(([key, value]) => (
               <li key={key}>
-                <span className="font-semibold">{key}:</span>{" "}
-                <span className="break-all">{String(value)}</span>
+                <Text as="span" weight="semibold">
+                  {key}:
+                </Text>{" "}
+                <Text as="span" className="break-all">
+                  {String(value)}
+                </Text>
               </li>
             ))}
           </ul>
-        </div>
+        </BlockStack>
       )}
 
       {/* Artifacts (Inputs & Outputs) */}
-      <div>
-        <h3 className="text-md font-medium mb-1">Artifacts</h3>
-        <div className="flex gap-4 flex-col">
-          <div className="flex-1">
-            <h4 className="text-sm font-semibold mb-1">Inputs</h4>
+      <BlockStack>
+        <Text as="h3" size="md" weight="semibold" className="mb-1">
+          Artifacts
+        </Text>
+        <BlockStack gap="4">
+          <BlockStack>
+            <Text as="h4" size="sm" weight="semibold" className="mb-1">
+              Inputs
+            </Text>
             {componentSpec.inputs && componentSpec.inputs.length > 0 ? (
               <div className="flex flex-col">
                 {componentSpec.inputs.map((input) => {
                   return (
                     <div
-                      className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-0 rounded-xs items-center"
+                      className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-1 rounded-xs items-center"
                       key={input.name}
                     >
                       <div className="text-xs flex-1 truncate max-w-[200px]">
@@ -267,14 +291,16 @@ const PipelineDetails = () => {
             ) : (
               <div className="text-xs text-muted-foreground">No inputs</div>
             )}
-          </div>
-          <div className="flex-1">
-            <h4 className="text-sm font-semibold mb-1">Outputs</h4>
+          </BlockStack>
+          <BlockStack>
+            <Text as="h4" size="sm" weight="semibold" className="mb-1">
+              Outputs
+            </Text>
             {componentSpec.outputs && componentSpec.outputs.length > 0 ? (
               <div className="flex flex-col">
                 {componentSpec.outputs.map((output) => (
                   <div
-                    className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-0 rounded-xs items-center"
+                    className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-1 rounded-xs items-center"
                     key={output.name}
                   >
                     <div className="text-xs flex-1 truncate max-w-[200px]">
@@ -309,20 +335,22 @@ const PipelineDetails = () => {
             ) : (
               <div className="text-xs text-muted-foreground">No outputs</div>
             )}
-          </div>
-        </div>
-      </div>
+          </BlockStack>
+        </BlockStack>
+      </BlockStack>
 
       {/* Validations */}
-      <div className="mt-2">
-        <h3 className="text-md font-medium mb-1">Validations</h3>
+      <BlockStack>
+        <Text as="h3" size="md" weight="semibold" className="mb-1">
+          Validations
+        </Text>
         <PipelineValidationList
           isComponentTreeValid={isComponentTreeValid}
           groupedIssues={groupedIssues}
           totalIssueCount={globalValidationIssues.length}
           onIssueSelect={handleIssueClick}
         />
-      </div>
+      </BlockStack>
     </BlockStack>
   );
 };
diff --git a/src/components/PipelineRun/RunDetails.tsx b/src/components/PipelineRun/RunDetails.tsx
index c92c5ae8f..292424b6b 100644
--- a/src/components/PipelineRun/RunDetails.tsx
+++ b/src/components/PipelineRun/RunDetails.tsx
@@ -52,8 +52,10 @@ export const RunDetails = () => {
   if (error || !details || !state || !componentSpec) {
     return (
       <div className="flex flex-col gap-8 items-center justify-center h-full">
-        <Frown className="w-12 h-12 text-gray-500" />
-        <div className="text-gray-500">Error loading run details.</div>
+        <Frown className="w-12 h-12 text-secondary-foreground" />
+        <div className="text-secondary-foreground">
+          Error loading run details.
+        </div>
       </div>
     );
   }
@@ -62,7 +64,7 @@ export const RunDetails = () => {
     return (
       <div className="flex items-center justify-center h-full">
         <Spinner className="mr-2" />
-        <p className="text-gray-500">Loading run details...</p>
+        <p className="text-secondary-foreground">Loading run details...</p>
       </div>
     );
   }
@@ -106,52 +108,73 @@ export const RunDetails = () => {
       </InlineStack>
 
       {metadata && (
-        <div className="flex flex-col gap-2 text-xs text-secondary-foreground mb-2">
-          <div className="flex flex-wrap gap-x-6">
+        <BlockStack>
+          <Text as="h3" size="md" weight="semibold" className="mb-1">
+            Run Info
+          </Text>
+          <dl className="flex flex-col gap-1 text-xs text-secondary-foreground">
             {metadata.id && (
-              <div>
-                <span className="font-semibold">Run Id:</span> {metadata.id}
-              </div>
+              <InlineStack as="div" gap="1" blockAlign="center">
+                <Text as="dt" weight="semibold" className="shrink-0">
+                  Run Id:
+                </Text>
+                <dd>
+                  <CopyText className="font-mono truncate max-w-[180px]">
+                    {metadata.id}
+                  </CopyText>
+                </dd>
+              </InlineStack>
             )}
             {metadata.root_execution_id && (
-              <div>
-                <span className="font-semibold">Execution Id:</span>{" "}
-                {metadata.root_execution_id}
-              </div>
+              <InlineStack as="div" gap="1" blockAlign="center">
+                <Text as="dt" weight="semibold" className="shrink-0">
+                  Execution Id:
+                </Text>
+                <dd>
+                  <CopyText className="font-mono truncate max-w-[180px]">
+                    {metadata.root_execution_id}
+                  </CopyText>
+                </dd>
+              </InlineStack>
             )}
-          </div>
-          <div className="flex flex-wrap gap-6">
             {metadata.created_by && (
-              <div>
-                <span className="font-semibold">Created by:</span>{" "}
-                {metadata.created_by}
-              </div>
+              <InlineStack as="div" gap="1" blockAlign="center">
+                <Text as="dt" weight="semibold">
+                  Created by:
+                </Text>
+                <dd>{metadata.created_by}</dd>
+              </InlineStack>
             )}
-          </div>
-          <div className="flex flex-wrap gap-x-6">
             {metadata.created_at && (
-              <div>
-                <span className="font-semibold">Created at:</span>{" "}
-                {new Date(metadata.created_at).toLocaleString()}
-              </div>
+              <InlineStack as="div" gap="1" blockAlign="center">
+                <Text as="dt" weight="semibold">
+                  Created at:
+                </Text>
+                <dd>{new Date(metadata.created_at).toLocaleString()}</dd>
+              </InlineStack>
             )}
-          </div>
-        </div>
+          </dl>
+        </BlockStack>
       )}
 
       {componentSpec.description && (
-        <div>
-          <h3 className="text-md font-medium mb-1">Description</h3>
-          <div className="text-sm text-gray-700 whitespace-pre-line">
+        <BlockStack>
+          <Text as="h3" size="md" weight="semibold" className="mb-1">
+            Description
+          </Text>
+          <Text as="p" size="sm" className="whitespace-pre-line">
             {componentSpec.description}
-          </div>
-        </div>
+          </Text>
+        </BlockStack>
       )}
 
       <BlockStack>
-        <InlineStack gap="1" blockAlign="center">
-          <Text size="md" weight="semibold">
-            Status: {runStatus}
+        <Text as="h3" size="md" weight="semibold" className="mb-1">
+          Status
+        </Text>
+        <InlineStack gap="2" blockAlign="center" className="mb-1">
+          <Text size="sm" weight="semibold">
+            {runStatus}
           </Text>
           <StatusText statusCounts={statusCounts} />
         </InlineStack>
@@ -159,24 +182,34 @@ export const RunDetails = () => {
       </BlockStack>
 
       {Object.keys(annotations).length > 0 && (
-        <div>
-          <h3 className="text-md font-medium mb-1">Annotations</h3>
+        <BlockStack>
+          <Text as="h3" size="md" weight="semibold" className="mb-1">
+            Annotations
+          </Text>
           <ul className="text-xs text-secondary-foreground">
             {Object.entries(annotations).map(([key, value]) => (
               <li key={key}>
-                <span className="font-semibold">{key}:</span>{" "}
-                <span className="break-all">{String(value)}</span>
+                <Text as="span" weight="semibold">
+                  {key}:
+                </Text>{" "}
+                <Text as="span" className="break-all">
+                  {String(value)}
+                </Text>
               </li>
             ))}
           </ul>
-        </div>
+        </BlockStack>
       )}
 
-      <div className="w-full">
-        <h3 className="text-md font-medium mb-1">Artifacts</h3>
-        <div className="flex gap-4 flex-col w-full">
-          <div className="w-full">
-            <h4 className="text-sm font-semibold mb-1">Inputs</h4>
+      <BlockStack className="w-full">
+        <Text as="h3" size="md" weight="semibold" className="mb-1">
+          Artifacts
+        </Text>
+        <BlockStack gap="4" className="w-full">
+          <BlockStack className="w-full">
+            <Text as="h4" size="sm" weight="semibold" className="mb-1">
+              Inputs
+            </Text>
             {componentSpec.inputs && componentSpec.inputs.length > 0 ? (
               <div className="flex flex-col w-full">
                 {componentSpec.inputs.map((input) => (
@@ -196,9 +229,11 @@ export const RunDetails = () => {
             ) : (
               <div className="text-xs text-muted-foreground">No inputs</div>
             )}
-          </div>
-          <div className="w-full">
-            <h4 className="text-sm font-semibold mb-1">Outputs</h4>
+          </BlockStack>
+          <BlockStack className="w-full">
+            <Text as="h4" size="sm" weight="semibold" className="mb-1">
+              Outputs
+            </Text>
             {componentSpec.outputs && componentSpec.outputs.length > 0 ? (
               <div className="flex flex-col w-full">
                 {componentSpec.outputs.map((output) => (
@@ -218,9 +253,9 @@ export const RunDetails = () => {
             ) : (
               <div className="text-xs text-muted-foreground">No outputs</div>
             )}
-          </div>
-        </div>
-      </div>
+          </BlockStack>
+        </BlockStack>
+      </BlockStack>
     </BlockStack>
   );
 };
diff --git a/src/components/shared/CopyText/CopyText.tsx b/src/components/shared/CopyText/CopyText.tsx
index 74f843e69..405601db0 100644
--- a/src/components/shared/CopyText/CopyText.tsx
+++ b/src/components/shared/CopyText/CopyText.tsx
@@ -1,4 +1,4 @@
-import { type MouseEvent, useCallback, useState } from "react";
+import { type MouseEvent, useCallback, useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
@@ -26,6 +26,15 @@ export const CopyText = ({
     setIsCopied(true);
   }, [children]);
 
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setTimeout(() => {
+        setIsCopied(false);
+      }, 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [isCopied]);
+
   const handleButtonClick = useCallback(
     (e: MouseEvent) => {
       e.stopPropagation();
@@ -34,10 +43,6 @@ export const CopyText = ({
     [handleCopy],
   );
 
-  const handleAnimationEnd = useCallback(() => {
-    setIsCopied(false);
-  }, []);
-
   return (
     <div
       className="group cursor-pointer"
@@ -71,7 +76,6 @@ export const CopyText = ({
           <CopyIcon
             isCopied={isCopied}
             alwaysShow={alwaysShowButton || isHovered}
-            onAnimationEnd={handleAnimationEnd}
           />
         </Button>
       </InlineStack>
@@ -82,29 +86,29 @@ export const CopyText = ({
 interface CopyIconProps {
   isCopied: boolean;
   alwaysShow: boolean;
-  onAnimationEnd: () => void;
 }
-//
-const CopyIcon = ({ isCopied, alwaysShow, onAnimationEnd }: CopyIconProps) => (
-  <span className="relative h-3.5 w-3.5">
-    {isCopied ? (
-      <span
-        className="absolute inset-0 animate-revert-copied"
-        onAnimationEnd={onAnimationEnd}
-      >
-        <Icon name="Check" size="sm" className="text-emerald-400" />
-      </span>
-    ) : (
-      <Icon
-        name="Copy"
-        size="sm"
-        className={cn(
-          "absolute inset-0 text-muted-foreground transition-all duration-200",
-          alwaysShow
-            ? "rotate-0 scale-100 opacity-100"
-            : "rotate-90 scale-0 opacity-0",
-        )}
-      />
-    )}
+
+const CopyIcon = ({ isCopied, alwaysShow }: CopyIconProps) => (
+  <span className="relative h-3 w-3">
+    <Icon
+      name="Check"
+      size="sm"
+      className={cn(
+        "absolute inset-0 text-emerald-400 transition-all duration-200",
+        isCopied
+          ? "rotate-0 scale-100 opacity-100"
+          : "-rotate-90 scale-0 opacity-0",
+      )}
+    />
+    <Icon
+      name="Copy"
+      size="sm"
+      className={cn(
+        "absolute inset-0 text-muted-foreground transition-all duration-200",
+        alwaysShow && !isCopied
+          ? "rotate-0 scale-100 opacity-100"
+          : "rotate-90 scale-0 opacity-0",
+      )}
+    />
   </span>
 );