From c18929735a129311f38c42b1a9afe8195249b64f Mon Sep 17 00:00:00 2001
From: bntvllnt <bntvllnt@users.noreply.github.com>
Date: Sun, 10 May 2026 21:28:47 +0200
Subject: [PATCH 1/3] =?UTF-8?q?fix(design):=20space-x/y=20=E2=86=92=20gap-?=
 =?UTF-8?q?x/y=20on=20flex=20parents=20(10=20sites)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

react-doctor \`design-no-space-on-flex-children\`: 13 → ~3.

Rule rationale: per-sibling margins (space-x/y) phantom-gap on
conditional render and don't mirror in RTL. Tailwind \`gap-x/y\` works
on flex/grid parents and degrades correctly.

Targeted line-by-line edit on the rule's flagged lines only — does
not touch \`space-x/y\` outside flex/grid contexts.

Files:
- apps/registry/components/component-preview/component-preview.tsx (×7)
- packages/ui/src/components/live-feed/live-feed.tsx (×1)
- packages/ui/src/components/stat-card/stat-card.tsx (×1)
- packages/ui/src/components/tutorial-complete/tutorial-complete.tsx (×1)

Part of #267.
Refs #279.
---
 .../component-preview/component-preview.tsx        | 14 +++++++-------
 apps/registry/registry.json                        |  2 +-
 .../registry/default/live-feed/live-feed.tsx       |  2 +-
 .../registry/default/stat-card/stat-card.tsx       |  2 +-
 .../tutorial-complete/tutorial-complete.tsx        |  2 +-
 packages/ui/src/components/live-feed/live-feed.tsx |  2 +-
 packages/ui/src/components/stat-card/stat-card.tsx |  2 +-
 .../tutorial-complete/tutorial-complete.tsx        |  2 +-
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/registry/components/component-preview/component-preview.tsx b/apps/registry/components/component-preview/component-preview.tsx
index d3bf3011..ed31a591 100644
--- a/apps/registry/components/component-preview/component-preview.tsx
+++ b/apps/registry/components/component-preview/component-preview.tsx
@@ -537,13 +537,13 @@ function CalloutPreview() {
 function CheckboxPreview() {
   return (
     <div className="space-y-2">
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center gap-x-2">
         <Checkbox id="terms" />
         <label className="text-sm" htmlFor="terms">
           Accept terms
         </label>
       </div>
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center gap-x-2">
         <Checkbox defaultChecked id="marketing" />
         <label className="text-sm" htmlFor="marketing">
           Receive emails
@@ -1231,13 +1231,13 @@ function SelectPreview() {
 function RadioGroupPreview() {
   return (
     <RadioGroup defaultValue="option-one">
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center gap-x-2">
         <RadioGroupItem id="option-one" value="option-one" />
         <label className="text-sm" htmlFor="option-one">
           Option One
         </label>
       </div>
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center gap-x-2">
         <RadioGroupItem id="option-two" value="option-two" />
         <label className="text-sm" htmlFor="option-two">
           Option Two
@@ -1697,7 +1697,7 @@ function DataTablePreview() {
 
 function SkeletonPreview() {
   return (
-    <div className="flex items-center space-x-4">
+    <div className="flex items-center gap-x-4">
       <Skeleton className="h-12 w-12 rounded-full" />
       <div className="space-y-2">
         <Skeleton className="h-4 w-[200px]" />
@@ -1715,7 +1715,7 @@ function SeparatorPreview() {
         <p className="text-sm text-muted-foreground">A component library.</p>
       </div>
       <Separator />
-      <div className="flex h-5 items-center space-x-4 text-sm">
+      <div className="flex h-5 items-center gap-x-4 text-sm">
         <div>Docs</div>
         <Separator orientation="vertical" />
         <div>Source</div>
@@ -1799,7 +1799,7 @@ function CollapsiblePreview() {
       onOpenChange={setIsOpen}
       open={isOpen}
     >
-      <div className="flex items-center justify-between space-x-4">
+      <div className="flex items-center justify-between gap-x-4">
         <h4 className="text-sm font-semibold">Collapsible Section</h4>
         <CollapsibleTrigger asChild>
           <Button size="sm" variant="ghost">
diff --git a/apps/registry/registry.json b/apps/registry/registry.json
index 029360c6..fa9129b5 100644
--- a/apps/registry/registry.json
+++ b/apps/registry/registry.json
@@ -4492,5 +4492,5 @@
     }
   ],
   "version": "0.2.1",
-  "generatedAt": "2026-05-10T19:14:31.709Z"
+  "generatedAt": "2026-05-10T19:24:44.361Z"
 }
diff --git a/apps/registry/registry/default/live-feed/live-feed.tsx b/apps/registry/registry/default/live-feed/live-feed.tsx
index 8f93fd7a..2d568196 100644
--- a/apps/registry/registry/default/live-feed/live-feed.tsx
+++ b/apps/registry/registry/default/live-feed/live-feed.tsx
@@ -192,7 +192,7 @@ export const LiveFeed = React.forwardRef<HTMLDivElement, LiveFeedProps>(
 
     return (
       <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
-        <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0 pb-3">
+        <CardHeader className="flex flex-row items-start justify-between gap-3 gap-y-0 pb-3">
           <div className="space-y-1">
             <CardTitle className="text-base">{title}</CardTitle>
             {description ? (
diff --git a/apps/registry/registry/default/stat-card/stat-card.tsx b/apps/registry/registry/default/stat-card/stat-card.tsx
index b7c8c6cb..5cb0d5ce 100644
--- a/apps/registry/registry/default/stat-card/stat-card.tsx
+++ b/apps/registry/registry/default/stat-card/stat-card.tsx
@@ -97,7 +97,7 @@ const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
       {...props}
     >
       <div className={accentVariants({ tone })} />
-      <CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0 pb-3">
+      <CardHeader className="flex flex-row items-start justify-between gap-4 gap-y-0 pb-3">
         <div className="space-y-1">
           <CardDescription className="text-xs font-medium uppercase tracking-[0.14em]">
             {label}
diff --git a/apps/registry/registry/default/tutorial-complete/tutorial-complete.tsx b/apps/registry/registry/default/tutorial-complete/tutorial-complete.tsx
index 61a6d362..8a60a9bf 100644
--- a/apps/registry/registry/default/tutorial-complete/tutorial-complete.tsx
+++ b/apps/registry/registry/default/tutorial-complete/tutorial-complete.tsx
@@ -211,7 +211,7 @@ function TutorialCompleteImpl({
       {/* Back Link */}
       <div className="text-center pt-8">
         <LinkComponent
-          className="inline-flex items-center space-x-2 text-muted-foreground hover:text-foreground transition-colors"
+          className="inline-flex items-center gap-x-2 text-muted-foreground hover:text-foreground transition-colors"
           href={backHref}
         >
           <span>← {labels.backToTutorials}</span>
diff --git a/packages/ui/src/components/live-feed/live-feed.tsx b/packages/ui/src/components/live-feed/live-feed.tsx
index 5cd8db3b..6799f3fe 100644
--- a/packages/ui/src/components/live-feed/live-feed.tsx
+++ b/packages/ui/src/components/live-feed/live-feed.tsx
@@ -192,7 +192,7 @@ export const LiveFeed = React.forwardRef<HTMLDivElement, LiveFeedProps>(
 
     return (
       <Card className={cn("shadow-sm", className)} ref={ref} {...props}>
-        <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0 pb-3">
+        <CardHeader className="flex flex-row items-start justify-between gap-3 gap-y-0 pb-3">
           <div className="space-y-1">
             <CardTitle className="text-base">{title}</CardTitle>
             {description ? (
diff --git a/packages/ui/src/components/stat-card/stat-card.tsx b/packages/ui/src/components/stat-card/stat-card.tsx
index 6a5be573..5a4a2c16 100644
--- a/packages/ui/src/components/stat-card/stat-card.tsx
+++ b/packages/ui/src/components/stat-card/stat-card.tsx
@@ -97,7 +97,7 @@ const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
       {...props}
     >
       <div className={accentVariants({ tone })} />
-      <CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0 pb-3">
+      <CardHeader className="flex flex-row items-start justify-between gap-4 gap-y-0 pb-3">
         <div className="space-y-1">
           <CardDescription className="text-xs font-medium uppercase tracking-[0.14em]">
             {label}
diff --git a/packages/ui/src/components/tutorial-complete/tutorial-complete.tsx b/packages/ui/src/components/tutorial-complete/tutorial-complete.tsx
index aacbfb09..be3d54fa 100644
--- a/packages/ui/src/components/tutorial-complete/tutorial-complete.tsx
+++ b/packages/ui/src/components/tutorial-complete/tutorial-complete.tsx
@@ -211,7 +211,7 @@ function TutorialCompleteImpl({
       {/* Back Link */}
       <div className="text-center pt-8">
         <LinkComponent
-          className="inline-flex items-center space-x-2 text-muted-foreground hover:text-foreground transition-colors"
+          className="inline-flex items-center gap-x-2 text-muted-foreground hover:text-foreground transition-colors"
           href={backHref}
         >
           <span>← {labels.backToTutorials}</span>

From aedf3b457de634addab6b3f1753103e14e0dcc49 Mon Sep 17 00:00:00 2001
From: bntvllnt <bntvllnt@users.noreply.github.com>
Date: Wed, 13 May 2026 06:59:34 +0200
Subject: [PATCH 2/3] fix(design): collapse remaining registry size axes

---
 apps/registry/app/components/[slug]/page.tsx  | 13 ++-----
 .../component-preview/component-preview.tsx   | 20 +++++-----
 apps/registry/components/github-mark.tsx      | 18 +++++++++
 apps/registry/components/header/header.tsx    |  6 +--
 apps/registry/components/landing/landing.tsx  | 38 +++++++++----------
 .../components/quick-add/quick-add.tsx        |  6 +--
 6 files changed, 56 insertions(+), 45 deletions(-)
 create mode 100644 apps/registry/components/github-mark.tsx

diff --git a/apps/registry/app/components/[slug]/page.tsx b/apps/registry/app/components/[slug]/page.tsx
index 827ecfa4..15ca6c31 100644
--- a/apps/registry/app/components/[slug]/page.tsx
+++ b/apps/registry/app/components/[slug]/page.tsx
@@ -10,11 +10,7 @@ import { notFound } from "next/navigation";
 import { QuickAdd } from "@/components/quick-add";
 import { StorybookEmbed } from "@/components/storybook-embed";
 import componentMetadata from "@/lib/component-metadata.json";
-import {
-  breadcrumbLd,
-  jsonLdScript,
-  softwareSourceCodeLd,
-} from "@/lib/jsonld";
+import { breadcrumbLd, jsonLdScript, softwareSourceCodeLd } from "@/lib/jsonld";
 import { generateOGMetadata, generateTwitterMetadata } from "@/lib/og";
 import { canonical } from "@/lib/seo";
 import {
@@ -166,8 +162,7 @@ export default async function ComponentPage(props: Props) {
       : []),
   ] as { id: string; title: string }[];
 
-  const SITE_URL =
-    process.env.NEXT_PUBLIC_SITE_URL ?? "https://ui.vllnt.ai";
+  const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://ui.vllnt.ai";
 
   return (
     <>
@@ -256,7 +251,7 @@ export default async function ComponentPage(props: Props) {
                     target="_blank"
                   >
                     View in Storybook
-                    <ExternalLink className="h-4 w-4" />
+                    <ExternalLink className="size-4" />
                   </Link>
                   {meta.stories.length > 1 ? (
                     <div className="mt-4">
@@ -310,7 +305,7 @@ export default async function ComponentPage(props: Props) {
                               rel="noopener noreferrer"
                               target="_blank"
                             >
-                              <ExternalLink className="h-3 w-3" />
+                              <ExternalLink className="size-3" />
                             </Link>
                           </li>
                         );
diff --git a/apps/registry/components/component-preview/component-preview.tsx b/apps/registry/components/component-preview/component-preview.tsx
index ed31a591..8b23f518 100644
--- a/apps/registry/components/component-preview/component-preview.tsx
+++ b/apps/registry/components/component-preview/component-preview.tsx
@@ -994,7 +994,7 @@ function FloatingActionButtonPreview() {
         }}
         position="bottom-right"
       >
-        <Plus className="h-5 w-5" />
+        <Plus className="size-5" />
       </FloatingActionButton>
     </div>
   );
@@ -1259,13 +1259,13 @@ function TogglePreview() {
   return (
     <div className="flex gap-2">
       <Toggle aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
+        <Bold className="size-4" />
       </Toggle>
       <Toggle aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
+        <Italic className="size-4" />
       </Toggle>
       <Toggle aria-label="Toggle underline">
-        <Underline className="h-4 w-4" />
+        <Underline className="size-4" />
       </Toggle>
     </div>
   );
@@ -1275,13 +1275,13 @@ function ToggleGroupPreview() {
   return (
     <ToggleGroup type="multiple">
       <ToggleGroupItem aria-label="Toggle bold" value="bold">
-        <Bold className="h-4 w-4" />
+        <Bold className="size-4" />
       </ToggleGroupItem>
       <ToggleGroupItem aria-label="Toggle italic" value="italic">
-        <Italic className="h-4 w-4" />
+        <Italic className="size-4" />
       </ToggleGroupItem>
       <ToggleGroupItem aria-label="Toggle underline" value="underline">
-        <Underline className="h-4 w-4" />
+        <Underline className="size-4" />
       </ToggleGroupItem>
     </ToggleGroup>
   );
@@ -1698,7 +1698,7 @@ function DataTablePreview() {
 function SkeletonPreview() {
   return (
     <div className="flex items-center gap-x-4">
-      <Skeleton className="h-12 w-12 rounded-full" />
+      <Skeleton className="size-12 rounded-full" />
       <div className="space-y-2">
         <Skeleton className="h-4 w-[200px]" />
         <Skeleton className="h-4 w-[150px]" />
@@ -1730,7 +1730,7 @@ function AlertPreview() {
   return (
     <div className="space-y-4 w-full max-w-md">
       <Alert>
-        <TerminalIcon className="h-4 w-4" />
+        <TerminalIcon className="size-4" />
         <AlertTitle>Heads up!</AlertTitle>
         <AlertDescription>
           You can add components using the CLI.
@@ -1803,7 +1803,7 @@ function CollapsiblePreview() {
         <h4 className="text-sm font-semibold">Collapsible Section</h4>
         <CollapsibleTrigger asChild>
           <Button size="sm" variant="ghost">
-            <ChevronsUpDown className="h-4 w-4" />
+            <ChevronsUpDown className="size-4" />
           </Button>
         </CollapsibleTrigger>
       </div>
diff --git a/apps/registry/components/github-mark.tsx b/apps/registry/components/github-mark.tsx
new file mode 100644
index 00000000..a8e1b28d
--- /dev/null
+++ b/apps/registry/components/github-mark.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export function GitHubMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      role="img"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        d="M12 .3c-6.6 0-12 5.4-12 12 0 5.3 3.4 9.8 8.2 11.4.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2 1-.3 2-.4 3-.4s2 .1 3 .4c2.3-1.6 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.8-1.6 8.2-6.1 8.2-11.4C24 5.7 18.6.3 12 .3Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/apps/registry/components/header/header.tsx b/apps/registry/components/header/header.tsx
index 54842b4b..f5f550d2 100644
--- a/apps/registry/components/header/header.tsx
+++ b/apps/registry/components/header/header.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { NavbarSaas, SearchDialog } from "@vllnt/ui";
-import { Github } from "lucide-react";
 import { useRouter } from "next/navigation";
 
+import { GitHubMark } from "@/components/github-mark";
 import registryData from "@/registry.json";
 
 const GITHUB_URL = "https://github.com/vllnt/ui";
@@ -48,12 +48,12 @@ export function Header() {
           />
           <a
             aria-label="VLLNT UI on GitHub"
-            className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+            className="inline-flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
             href={GITHUB_URL}
             rel="noreferrer"
             target="_blank"
           >
-            <Github className="h-4 w-4" />
+            <GitHubMark className="size-4" />
           </a>
         </div>
       }
diff --git a/apps/registry/components/landing/landing.tsx b/apps/registry/components/landing/landing.tsx
index 14aa6d5c..adcfb220 100644
--- a/apps/registry/components/landing/landing.tsx
+++ b/apps/registry/components/landing/landing.tsx
@@ -1,13 +1,9 @@
 import { CodeBlock } from "@vllnt/ui";
-import {
-  ArrowRight,
-  Github,
-  Sparkles,
-  Terminal,
-} from "lucide-react";
+import { ArrowRight, Sparkles, Terminal } from "lucide-react";
 import Link from "next/link";
 
 import { Footer } from "@/components/footer/footer";
+import { GitHubMark } from "@/components/github-mark";
 import {
   getCategoryCount,
   getComponentCount,
@@ -20,6 +16,8 @@ const GITHUB_URL = "https://github.com/vllnt/ui";
 const STORYBOOK_URL = "https://storybook.vllnt.ai";
 const REQUEST_URL =
   "https://github.com/vllnt/ui/issues/new?template=feature_request.yml&labels=enhancement,component";
+const INSTALL_COMMAND =
+  "pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/button.json";
 
 const TRUST_BADGES = [
   { label: "MIT" },
@@ -53,9 +51,7 @@ function Hero({
         </p>
 
         <div className="mt-8">
-          <CodeBlock language="bash">
-            {`pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/button.json`}
-          </CodeBlock>
+          <CodeBlock language="bash">{INSTALL_COMMAND}</CodeBlock>
         </div>
 
         <div className="mt-6 flex flex-wrap gap-3">
@@ -64,7 +60,7 @@ function Hero({
             href="/components"
           >
             Browse {componentCount} components
-            <ArrowRight className="h-4 w-4" />
+            <ArrowRight className="size-4" />
           </Link>
           <Link
             className="inline-flex h-11 items-center gap-2 rounded-md border border-border px-5 text-sm font-medium hover:bg-muted"
@@ -78,7 +74,7 @@ function Hero({
             rel="noreferrer"
             target="_blank"
           >
-            <Github className="h-4 w-4" />
+            <GitHubMark className="size-4" />
             GitHub
           </a>
         </div>
@@ -140,17 +136,16 @@ function AgentCallout() {
     <section className="border-b border-border">
       <div className="mx-auto max-w-7xl px-4 py-16 lg:px-8">
         <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-          <Sparkles className="h-4 w-4" />
+          <Sparkles className="size-4" />
           Agent-first
         </div>
         <h2 className="mt-2 text-3xl font-semibold">
           Built so AI coding agents can use it directly.
         </h2>
         <p className="mt-4 max-w-2xl text-lg text-muted-foreground">
-          Every component ships as a machine-readable JSON descriptor with
-          name, version, stability, accessibility schema, usage examples,
-          and prop definitions. Agents discover the registry through three
-          surfaces.
+          Every component ships as a machine-readable JSON descriptor with name,
+          version, stability, accessibility schema, usage examples, and prop
+          definitions. Agents discover the registry through three surfaces.
         </p>
 
         <div className="mt-8 grid gap-4 md:grid-cols-3">
@@ -192,13 +187,13 @@ function AgentCard({
       target="_blank"
     >
       <div className="flex items-center gap-2 text-sm font-mono">
-        <Terminal className="h-4 w-4 text-muted-foreground" />
+        <Terminal className="size-4 text-muted-foreground" />
         <span>{title}</span>
       </div>
       <p className="mt-3 text-sm text-muted-foreground">{description}</p>
       <p className="mt-4 inline-flex items-center gap-1 text-xs font-medium text-foreground">
         Open
-        <ArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
+        <ArrowRight className="size-3 transition-transform group-hover:translate-x-0.5" />
       </p>
     </a>
   );
@@ -213,7 +208,10 @@ function FeaturedComponents() {
         <h2 className="text-2xl font-semibold">Featured components</h2>
         <p className="mt-2 text-muted-foreground">
           A few favourites. Browse all {getComponentCount()} from{" "}
-          <Link className="font-medium text-foreground underline" href="/components">
+          <Link
+            className="font-medium text-foreground underline"
+            href="/components"
+          >
             /components
           </Link>
           .
@@ -255,7 +253,7 @@ function CommunityCTA() {
             rel="noreferrer"
             target="_blank"
           >
-            <Github className="h-4 w-4" />
+            <GitHubMark className="size-4" />
             Star on GitHub
           </a>
           <a
diff --git a/apps/registry/components/quick-add/quick-add.tsx b/apps/registry/components/quick-add/quick-add.tsx
index 907f127e..61f22905 100644
--- a/apps/registry/components/quick-add/quick-add.tsx
+++ b/apps/registry/components/quick-add/quick-add.tsx
@@ -33,12 +33,12 @@ export function QuickAdd({ componentName }: QuickAddProps) {
       >
         {copied ? (
           <>
-            <Check className="h-3 w-3" />
+            <Check className="size-3" />
             Copied!
           </>
         ) : (
           <>
-            <Copy className="h-3 w-3" />
+            <Copy className="size-3" />
             Copy install command
           </>
         )}
@@ -50,7 +50,7 @@ export function QuickAdd({ componentName }: QuickAddProps) {
         variant="outline"
       >
         Add to v0.dev
-        <ExternalLink className="h-3 w-3" />
+        <ExternalLink className="size-3" />
       </Button>
     </div>
   );

From 39761b66dd4a79c416a6fa4ef0e27083f84f1617 Mon Sep 17 00:00:00 2001
From: bntvllnt <bntvllnt@users.noreply.github.com>
Date: Wed, 13 May 2026 09:15:28 +0200
Subject: [PATCH 3/3] fix(design): clear remaining design doctor warnings

---
 apps/registry/app/docs/page.tsx                           | 7 ++-----
 apps/registry/app/philosophy/page.tsx                     | 2 +-
 .../components/storybook-embed/storybook-embed.tsx        | 4 +++-
 .../registry/registry/default/mdx-content/mdx-content.tsx | 6 +++---
 apps/registry/registry/default/spinner/spinner.tsx        | 2 +-
 .../registry/default/theme-toggle/theme-toggle.tsx        | 4 ++--
 .../registry/default/thinking-block/thinking-block.tsx    | 6 ++++--
 .../tutorial-intro-content/tutorial-intro-content.tsx     | 2 +-
 .../registry/default/tutorial-mdx/tutorial-mdx.tsx        | 2 +-
 .../conversation-thread/conversation-thread.tsx           | 6 +++---
 packages/ui/src/components/mdx-content/mdx-content.tsx    | 6 +++---
 .../primary-source-viewer/primary-source-viewer.mdx       | 2 +-
 .../primary-source-viewer.stories.tsx                     | 2 +-
 .../primary-source-viewer.visual.tsx                      | 2 +-
 packages/ui/src/components/social-fab/social-fab.tsx      | 8 ++++----
 packages/ui/src/components/spinner/spinner.tsx            | 2 +-
 packages/ui/src/components/theme-toggle/theme-toggle.tsx  | 4 ++--
 .../ui/src/components/thinking-block/thinking-block.tsx   | 6 ++++--
 .../tutorial-intro-content/tutorial-intro-content.tsx     | 2 +-
 packages/ui/src/components/tutorial-mdx/tutorial-mdx.tsx  | 2 +-
 20 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/apps/registry/app/docs/page.tsx b/apps/registry/app/docs/page.tsx
index af33081d..7a4e3307 100644
--- a/apps/registry/app/docs/page.tsx
+++ b/apps/registry/app/docs/page.tsx
@@ -52,10 +52,7 @@ export default async function DocumentationPage() {
           <div className="mb-8">
             <Breadcrumb
               className="mb-4 text-muted-foreground"
-              items={[
-                { href: "/", label: "Home" },
-                { label: "Docs" },
-              ]}
+              items={[{ href: "/", label: "Home" }, { label: "Docs" }]}
             />
             <h1 className="text-4xl font-semibold mb-4">Documentation</h1>
             <p className="text-muted-foreground text-lg">
@@ -64,7 +61,7 @@ export default async function DocumentationPage() {
           </div>
 
           <div className="prose prose-lg dark:prose-invert max-w-none">
-            <div className="prose prose-lg dark:prose-invert max-w-none prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white prose-p:leading-7 prose-blockquote:mt-6 prose-blockquote:border-l-2 prose-blockquote:pl-6 prose-blockquote:italic prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ol:my-6 prose-ol:ml-6 prose-ol:list-decimal prose-code:relative prose-code:rounded prose-code:bg-muted prose-code:px-[0.3rem] prose-code:py-[0.3rem] prose-code:text-sm  prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-black prose-pre:py-4  prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900 prose-hr:my-8 prose-hr:border-border prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium prose-td:border prose-td:border-border prose-td:p-2 prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:shadow-lg prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80 prose-strong:font-semibold prose-em:italic prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground">
+            <div className="prose prose-lg dark:prose-invert max-w-none prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white prose-p:leading-7 prose-blockquote:mt-6 prose-blockquote:border-l prose-blockquote:pl-6 prose-blockquote:italic prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ol:my-6 prose-ol:ml-6 prose-ol:list-decimal prose-code:relative prose-code:rounded prose-code:bg-muted prose-code:px-[0.3rem] prose-code:py-[0.3rem] prose-code:text-sm  prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:py-4  prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900 prose-hr:my-8 prose-hr:border-border prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium prose-td:border prose-td:border-border prose-td:p-2 prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:shadow-lg prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80 prose-strong:font-semibold prose-em:italic prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground">
               <MDXContent content={content} />
             </div>
           </div>
diff --git a/apps/registry/app/philosophy/page.tsx b/apps/registry/app/philosophy/page.tsx
index 80330f9a..5c7bbfb4 100644
--- a/apps/registry/app/philosophy/page.tsx
+++ b/apps/registry/app/philosophy/page.tsx
@@ -43,7 +43,7 @@ export default async function PhilosophyPage() {
           </div>
 
           <div className="prose prose-lg dark:prose-invert max-w-none">
-            <div className="prose prose-lg dark:prose-invert max-w-none prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white prose-p:leading-7 prose-blockquote:mt-6 prose-blockquote:border-l-2 prose-blockquote:pl-6 prose-blockquote:italic prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ol:my-6 prose-ol:ml-6 prose-ol:list-decimal prose-code:relative prose-code:rounded prose-code:bg-muted prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:text-sm  prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-black prose-pre:py-4  prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900 prose-hr:my-8 prose-hr:border-border prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium prose-td:border prose-td:border-border prose-td:p-2 prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:shadow-lg prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80 prose-strong:font-semibold prose-em:italic prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground">
+            <div className="prose prose-lg dark:prose-invert max-w-none prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white prose-p:leading-7 prose-blockquote:mt-6 prose-blockquote:border-l prose-blockquote:pl-6 prose-blockquote:italic prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ol:my-6 prose-ol:ml-6 prose-ol:list-decimal prose-code:relative prose-code:rounded prose-code:bg-muted prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:text-sm  prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:py-4  prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900 prose-hr:my-8 prose-hr:border-border prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium prose-td:border prose-td:border-border prose-td:p-2 prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:shadow-lg prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80 prose-strong:font-semibold prose-em:italic prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground">
               <MDXContent content={content} />
             </div>
           </div>
diff --git a/apps/registry/components/storybook-embed/storybook-embed.tsx b/apps/registry/components/storybook-embed/storybook-embed.tsx
index 31e02861..3fa78440 100644
--- a/apps/registry/components/storybook-embed/storybook-embed.tsx
+++ b/apps/registry/components/storybook-embed/storybook-embed.tsx
@@ -120,7 +120,9 @@ function StorybookIframe({
           className="flex animate-pulse items-center justify-center rounded-b-lg bg-muted"
           style={{ height, inset: 0, position: "absolute", zIndex: 1 }}
         >
-          <p className="text-sm text-muted-foreground">Loading preview...</p>
+          <p className="text-sm text-muted-foreground">
+            Loading preview&hellip;
+          </p>
         </div>
       )}
       <iframe
diff --git a/apps/registry/registry/default/mdx-content/mdx-content.tsx b/apps/registry/registry/default/mdx-content/mdx-content.tsx
index fe098d1a..b45575dc 100644
--- a/apps/registry/registry/default/mdx-content/mdx-content.tsx
+++ b/apps/registry/registry/default/mdx-content/mdx-content.tsx
@@ -24,7 +24,7 @@ const MDXComponents: Components = {
   ),
   blockquote: ({ children, ...props }: React.ComponentProps<"blockquote">) => (
     <blockquote
-      className="border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
+      className="border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
       {...props}
     >
       {children}
@@ -126,8 +126,8 @@ const proseClasses = [
   "prose-strong:font-semibold prose-em:italic",
   "prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80",
   "prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono",
-  "prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-black prose-pre:py-4 prose-pre:font-mono prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900",
-  "prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-muted-foreground prose-blockquote:my-6 prose-blockquote:py-2",
+  "prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:py-4 prose-pre:font-mono prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900",
+  "prose-blockquote:border-l prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-muted-foreground prose-blockquote:my-6 prose-blockquote:py-2",
   "prose-hr:my-8 prose-hr:border-border",
   "prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border",
   "prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium",
diff --git a/apps/registry/registry/default/spinner/spinner.tsx b/apps/registry/registry/default/spinner/spinner.tsx
index b174efdf..5b3b5a5d 100644
--- a/apps/registry/registry/default/spinner/spinner.tsx
+++ b/apps/registry/registry/default/spinner/spinner.tsx
@@ -18,7 +18,7 @@ function Spinner({ className, size = "md", ...props }: SpinnerProps) {
       )}
       {...props}
     >
-      <span className="sr-only">Loading...</span>
+      <span className="sr-only">Loading&hellip;</span>
     </div>
   );
 }
diff --git a/apps/registry/registry/default/theme-toggle/theme-toggle.tsx b/apps/registry/registry/default/theme-toggle/theme-toggle.tsx
index d8cf9801..88d9f124 100644
--- a/apps/registry/registry/default/theme-toggle/theme-toggle.tsx
+++ b/apps/registry/registry/default/theme-toggle/theme-toggle.tsx
@@ -39,7 +39,7 @@ function ThemeButton({
   return (
     <Button
       aria-label={ariaLabel}
-      className="bg-background text-foreground border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors"
+      className="bg-background text-foreground border border-zinc-300 dark:border-zinc-600 hover:border-zinc-400 dark:hover:border-zinc-500 transition-colors"
       size="icon"
       variant="outline"
       {...props}
@@ -148,7 +148,7 @@ export function ThemeToggle({ dict }: ThemeToggleProps) {
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align="end"
-        className="bg-background border border-gray-300 dark:border-gray-600"
+        className="bg-background border border-zinc-300 dark:border-zinc-600"
         onMouseEnter={() => {
           isHoveringOverMenuAreaReference.current = true;
           clearCloseTimer();
diff --git a/apps/registry/registry/default/thinking-block/thinking-block.tsx b/apps/registry/registry/default/thinking-block/thinking-block.tsx
index e1c38149..36de0f39 100644
--- a/apps/registry/registry/default/thinking-block/thinking-block.tsx
+++ b/apps/registry/registry/default/thinking-block/thinking-block.tsx
@@ -52,12 +52,14 @@ export function ThinkingBlock({
         )}
         <span>
           Thinking
-          {isStreaming ? <span className="ml-1 animate-pulse">...</span> : null}
+          {isStreaming ? (
+            <span className="ml-1 animate-pulse">&hellip;</span>
+          ) : null}
         </span>
       </button>
       {isExpanded ? (
         <div
-          className="mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l-2 border-muted-foreground/30 max-h-48 overflow-y-auto"
+          className="mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l border-muted-foreground/30 max-h-48 overflow-y-auto"
           id={contentId}
         >
           {thinking}
diff --git a/apps/registry/registry/default/tutorial-intro-content/tutorial-intro-content.tsx b/apps/registry/registry/default/tutorial-intro-content/tutorial-intro-content.tsx
index ac4167ed..b3733093 100644
--- a/apps/registry/registry/default/tutorial-intro-content/tutorial-intro-content.tsx
+++ b/apps/registry/registry/default/tutorial-intro-content/tutorial-intro-content.tsx
@@ -32,7 +32,7 @@ const serverMarkdownComponents = {
     children?: React.ReactNode;
   }) => (
     <blockquote
-      className="border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
+      className="border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
       {...props}
     >
       {children}
diff --git a/apps/registry/registry/default/tutorial-mdx/tutorial-mdx.tsx b/apps/registry/registry/default/tutorial-mdx/tutorial-mdx.tsx
index 0e2f2b9f..d3ddde74 100644
--- a/apps/registry/registry/default/tutorial-mdx/tutorial-mdx.tsx
+++ b/apps/registry/registry/default/tutorial-mdx/tutorial-mdx.tsx
@@ -105,7 +105,7 @@ const markdownComponents: Components = {
   ),
   blockquote: ({ children, ...props }) => (
     <blockquote
-      className="border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
+      className="border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
       {...props}
     >
       {children}
diff --git a/packages/ui/src/components/conversation-thread/conversation-thread.tsx b/packages/ui/src/components/conversation-thread/conversation-thread.tsx
index 95b14a85..db44c197 100644
--- a/packages/ui/src/components/conversation-thread/conversation-thread.tsx
+++ b/packages/ui/src/components/conversation-thread/conversation-thread.tsx
@@ -521,14 +521,14 @@ export const ConversationLoading = forwardRef<
       role="status"
     >
       <span
-        className="size-2 animate-bounce rounded-full bg-muted-foreground"
+        className="size-2 animate-pulse rounded-full bg-muted-foreground"
         style={{ animationDelay: "-0.3s" }}
       />
       <span
-        className="size-2 animate-bounce rounded-full bg-muted-foreground"
+        className="size-2 animate-pulse rounded-full bg-muted-foreground"
         style={{ animationDelay: "-0.15s" }}
       />
-      <span className="size-2 animate-bounce rounded-full bg-muted-foreground" />
+      <span className="size-2 animate-pulse rounded-full bg-muted-foreground" />
     </div>
   );
 });
diff --git a/packages/ui/src/components/mdx-content/mdx-content.tsx b/packages/ui/src/components/mdx-content/mdx-content.tsx
index bda9a461..482afa45 100644
--- a/packages/ui/src/components/mdx-content/mdx-content.tsx
+++ b/packages/ui/src/components/mdx-content/mdx-content.tsx
@@ -24,7 +24,7 @@ const MDXComponents: Components = {
   ),
   blockquote: ({ children, ...props }: React.ComponentProps<"blockquote">) => (
     <blockquote
-      className="border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
+      className="border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
       {...props}
     >
       {children}
@@ -126,8 +126,8 @@ const proseClasses = [
   "prose-strong:font-semibold prose-em:italic",
   "prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80",
   "prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono",
-  "prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-black prose-pre:py-4 prose-pre:font-mono prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900",
-  "prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-muted-foreground prose-blockquote:my-6 prose-blockquote:py-2",
+  "prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:py-4 prose-pre:font-mono prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900",
+  "prose-blockquote:border-l prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-muted-foreground prose-blockquote:my-6 prose-blockquote:py-2",
   "prose-hr:my-8 prose-hr:border-border",
   "prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border",
   "prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium",
diff --git a/packages/ui/src/components/primary-source-viewer/primary-source-viewer.mdx b/packages/ui/src/components/primary-source-viewer/primary-source-viewer.mdx
index c8956e85..0b98d55a 100644
--- a/packages/ui/src/components/primary-source-viewer/primary-source-viewer.mdx
+++ b/packages/ui/src/components/primary-source-viewer/primary-source-viewer.mdx
@@ -57,7 +57,7 @@ import {
   </PrimarySourceAnnotations>
 
   <PrimarySourceTranscription>
-    <p>John, by the grace of God, King of England...</p>
+    <p>John, by the grace of God, King of England&hellip;</p>
   </PrimarySourceTranscription>
 
   <PrimarySourceContext>
diff --git a/packages/ui/src/components/primary-source-viewer/primary-source-viewer.stories.tsx b/packages/ui/src/components/primary-source-viewer/primary-source-viewer.stories.tsx
index 31743e01..88b681af 100644
--- a/packages/ui/src/components/primary-source-viewer/primary-source-viewer.stories.tsx
+++ b/packages/ui/src/components/primary-source-viewer/primary-source-viewer.stories.tsx
@@ -59,7 +59,7 @@ export const Default: Story = {
         />
       </PrimarySourceAnnotations>
       <PrimarySourceTranscription>
-        <p>John, by the grace of God, King of England, Lord of Ireland...</p>
+        <p>John, by the grace of God, King of England, Lord of Ireland&hellip;</p>
         <p>
           No free man shall be seized, imprisoned, dispossessed, outlawed,
           exiled, or destroyed, except by the lawful judgment of his peers.
diff --git a/packages/ui/src/components/primary-source-viewer/primary-source-viewer.visual.tsx b/packages/ui/src/components/primary-source-viewer/primary-source-viewer.visual.tsx
index 93f08e1a..d5820d76 100644
--- a/packages/ui/src/components/primary-source-viewer/primary-source-viewer.visual.tsx
+++ b/packages/ui/src/components/primary-source-viewer/primary-source-viewer.visual.tsx
@@ -49,7 +49,7 @@ test.describe("PrimarySourceViewer Visual", () => {
           />
         </PrimarySourceAnnotations>
         <PrimarySourceTranscription>
-          <p>John, by the grace of God, King of England...</p>
+          <p>John, by the grace of God, King of England&hellip;</p>
         </PrimarySourceTranscription>
         <PrimarySourceContext>
           <PrimarySourceMetadata>
diff --git a/packages/ui/src/components/social-fab/social-fab.tsx b/packages/ui/src/components/social-fab/social-fab.tsx
index a75382a4..88d43667 100644
--- a/packages/ui/src/components/social-fab/social-fab.tsx
+++ b/packages/ui/src/components/social-fab/social-fab.tsx
@@ -48,7 +48,7 @@ function ShareMenu({
   platforms: SharePlatformConfig[];
 }) {
   return (
-    <div className="flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600">
+    <div className="flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600">
       {platforms.map((p) => {
         const handleClick = () => {
           onPlatformSelect(p.key);
@@ -101,7 +101,7 @@ function ActionPanel({
   const handleShareMouseLeave = isMobile ? undefined : onShareLeave;
 
   return (
-    <div className="flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600">
+    <div className="flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600">
       {shareAction ? (
         <button
           className="rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent"
@@ -140,9 +140,9 @@ function MainFabButton({
       aria-label={isExpanded ? labels.close : labels.share}
       className={cn(
         "flex size-10 items-center justify-center rounded-md",
-        "border border-gray-300 bg-background dark:border-gray-600",
+        "border border-zinc-300 bg-background dark:border-zinc-600",
         "transition-all duration-200 ease-out",
-        "hover:-translate-y-0.5 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-500",
+        "hover:-translate-y-0.5 hover:border-zinc-400 hover:shadow-md dark:hover:border-zinc-500",
       )}
       onClick={handleClick}
       type="button"
diff --git a/packages/ui/src/components/spinner/spinner.tsx b/packages/ui/src/components/spinner/spinner.tsx
index 789a677f..adbddcd5 100644
--- a/packages/ui/src/components/spinner/spinner.tsx
+++ b/packages/ui/src/components/spinner/spinner.tsx
@@ -18,7 +18,7 @@ function Spinner({ className, size = "md", ...props }: SpinnerProps) {
       )}
       {...props}
     >
-      <span className="sr-only">Loading...</span>
+      <span className="sr-only">Loading&hellip;</span>
     </div>
   );
 }
diff --git a/packages/ui/src/components/theme-toggle/theme-toggle.tsx b/packages/ui/src/components/theme-toggle/theme-toggle.tsx
index 42f1b546..b519ab99 100644
--- a/packages/ui/src/components/theme-toggle/theme-toggle.tsx
+++ b/packages/ui/src/components/theme-toggle/theme-toggle.tsx
@@ -39,7 +39,7 @@ function ThemeButton({
   return (
     <Button
       aria-label={ariaLabel}
-      className="bg-background text-foreground border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors"
+      className="bg-background text-foreground border border-zinc-300 dark:border-zinc-600 hover:border-zinc-400 dark:hover:border-zinc-500 transition-colors"
       size="icon"
       variant="outline"
       {...props}
@@ -148,7 +148,7 @@ export function ThemeToggle({ dict }: ThemeToggleProps) {
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align="end"
-        className="bg-background border border-gray-300 dark:border-gray-600"
+        className="bg-background border border-zinc-300 dark:border-zinc-600"
         onMouseEnter={() => {
           isHoveringOverMenuAreaReference.current = true;
           clearCloseTimer();
diff --git a/packages/ui/src/components/thinking-block/thinking-block.tsx b/packages/ui/src/components/thinking-block/thinking-block.tsx
index 5fe16c59..b11e3574 100644
--- a/packages/ui/src/components/thinking-block/thinking-block.tsx
+++ b/packages/ui/src/components/thinking-block/thinking-block.tsx
@@ -52,12 +52,14 @@ export function ThinkingBlock({
         )}
         <span>
           Thinking
-          {isStreaming ? <span className="ml-1 animate-pulse">...</span> : null}
+          {isStreaming ? (
+            <span className="ml-1 animate-pulse">&hellip;</span>
+          ) : null}
         </span>
       </button>
       {isExpanded ? (
         <div
-          className="mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l-2 border-muted-foreground/30 max-h-48 overflow-y-auto"
+          className="mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l border-muted-foreground/30 max-h-48 overflow-y-auto"
           id={contentId}
         >
           {thinking}
diff --git a/packages/ui/src/components/tutorial-intro-content/tutorial-intro-content.tsx b/packages/ui/src/components/tutorial-intro-content/tutorial-intro-content.tsx
index 30fdd42b..2d8207de 100644
--- a/packages/ui/src/components/tutorial-intro-content/tutorial-intro-content.tsx
+++ b/packages/ui/src/components/tutorial-intro-content/tutorial-intro-content.tsx
@@ -32,7 +32,7 @@ const serverMarkdownComponents = {
     children?: React.ReactNode;
   }) => (
     <blockquote
-      className="border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
+      className="border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
       {...props}
     >
       {children}
diff --git a/packages/ui/src/components/tutorial-mdx/tutorial-mdx.tsx b/packages/ui/src/components/tutorial-mdx/tutorial-mdx.tsx
index 32d1b7e7..c7f0f316 100644
--- a/packages/ui/src/components/tutorial-mdx/tutorial-mdx.tsx
+++ b/packages/ui/src/components/tutorial-mdx/tutorial-mdx.tsx
@@ -105,7 +105,7 @@ const markdownComponents: Components = {
   ),
   blockquote: ({ children, ...props }) => (
     <blockquote
-      className="border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
+      className="border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
       {...props}
     >
       {children}