From cde463d2e20667d1964ffc24bbb77e6be2dd39db Mon Sep 17 00:00:00 2001
From: najlaskr <30641730+najlaskr@users.noreply.github.com>
Date: Fri, 10 Apr 2026 13:13:33 -0700
Subject: [PATCH] fix(tokens): kumo-hairline dark mode

---
 .changeset/hairline-token-update.md           | 10 ++++++
 .../src/components/Header.astro               |  4 +--
 .../src/components/SearchDialog.tsx           | 10 +++---
 .../src/components/SidebarNav.tsx             | 18 +++++-----
 .../components/demos/Chart/ChartCard.astro    |  6 ++--
 .../src/components/demos/Chart/ChartDemo.tsx  |  6 ++--
 .../components/demos/CloudflareLogoDemo.tsx   |  2 +-
 .../components/demos/CodeHighlightedDemo.tsx  |  2 +-
 .../components/demos/CommandPaletteDemo.tsx   |  8 ++---
 .../src/components/demos/DatePickerDemo.tsx   |  2 +-
 .../src/components/demos/FlowDemo.tsx         | 18 +++++-----
 .../src/components/demos/HomeGrid.tsx         |  2 +-
 .../src/components/demos/KumoPressDemo.tsx    |  6 ++--
 .../src/components/demos/PopoverDemo.tsx      |  2 +-
 .../src/components/demos/RegistryDemo.tsx     | 10 +++---
 .../src/components/demos/SidebarDemo.tsx      |  4 +--
 .../src/components/demos/SkeletonLineDemo.tsx |  2 +-
 .../src/components/demos/TextDemo.tsx         | 30 ++++++++--------
 .../components/docs/ComponentPreview.astro    |  2 +-
 .../components/docs/KeyboardShortcuts.astro   |  2 +-
 .../src/components/docs/PropsTable.astro      |  4 +--
 .../src/components/docs/StickyDocHeader.tsx   |  4 +--
 .../src/components/docs/TableOfContents.tsx   |  4 +--
 .../kumo/page-header/page-header.tsx          |  4 +--
 .../src/layouts/DocLayout.astro               |  8 ++---
 .../src/pages/blocks/page-header.mdx          |  6 ++--
 .../src/pages/blocks/resource-list.mdx        | 16 ++++-----
 .../src/pages/changelog/[...page].astro       |  2 +-
 packages/kumo-docs-astro/src/pages/colors.mdx |  4 +--
 .../src/pages/components/cloudflare-logo.mdx  | 10 +++---
 .../src/pages/components/code-highlighted.mdx | 36 +++++++++----------
 .../src/pages/components/dialog.mdx           |  8 ++---
 .../src/pages/components/flow.mdx             | 34 +++++++++---------
 .../src/pages/components/grid.mdx             | 20 +++++------
 .../src/pages/components/input.mdx            | 18 +++++-----
 .../src/pages/components/label.mdx            | 18 +++++-----
 .../src/pages/components/link.mdx             | 20 +++++------
 .../src/pages/components/popover.mdx          |  4 +--
 .../src/pages/components/skeleton-line.mdx    | 18 +++++-----
 .../src/pages/components/tabs.mdx             |  8 ++---
 .../src/pages/components/toast.mdx            | 14 ++++----
 .../kumo-docs-astro/src/pages/index.astro     |  2 +-
 .../src/pages/tests/flow.astro                | 24 ++++++-------
 .../kumo-docs-astro/src/styles/global.css     | 24 ++++++-------
 .../kumo/scripts/theme-generator/config.ts    |  4 +--
 .../kumo/src/components/button/button.tsx     |  2 +-
 .../kumo/src/components/checkbox/checkbox.tsx |  4 +--
 .../clipboard-text/clipboard-text.tsx         |  2 +-
 .../cloudflare-logo/cloudflare-logo.tsx       |  2 +-
 .../kumo/src/components/combobox/combobox.tsx |  4 +--
 .../command-palette/command-palette.tsx       |  2 +-
 .../kumo/src/components/dialog/dialog.tsx     |  2 +-
 .../kumo/src/components/dropdown/dropdown.tsx |  2 +-
 packages/kumo/src/components/flow/diagram.tsx |  4 +--
 .../src/components/flow/flow.browser.test.tsx |  4 +--
 packages/kumo/src/components/grid/grid.tsx    |  2 +-
 .../kumo/src/components/input/input-group.tsx |  6 ++--
 packages/kumo/src/components/input/input.tsx  |  2 +-
 .../src/components/layer-card/layer-card.tsx  |  2 +-
 .../kumo/src/components/menubar/menubar.tsx   |  6 ++--
 .../src/components/pagination/pagination.tsx  |  4 +--
 packages/kumo/src/components/radio/radio.tsx  |  6 ++--
 .../src/components/select/select.test.tsx     |  2 +-
 .../kumo/src/components/select/select.tsx     |  4 +--
 .../kumo/src/components/sidebar/sidebar.tsx   | 24 ++++++-------
 .../kumo/src/components/switch/switch.tsx     |  6 ++--
 packages/kumo/src/components/tabs/tabs.tsx    |  4 +--
 packages/kumo/src/components/toast/toast.tsx  |  2 +-
 packages/kumo/src/styles/kumo-binding.css     |  1 +
 packages/kumo/src/styles/theme-kumo.css       |  8 ++---
 70 files changed, 289 insertions(+), 278 deletions(-)
 create mode 100644 .changeset/hairline-token-update.md

diff --git a/.changeset/hairline-token-update.md b/.changeset/hairline-token-update.md
new file mode 100644
index 0000000000..9bd2006f8f
--- /dev/null
+++ b/.changeset/hairline-token-update.md
@@ -0,0 +1,10 @@
+---
+"@cloudflare/kumo": patch
+"@cloudflare/kumo-docs-astro": patch
+---
+
+Updated the token value for `kumo-line` and `kumo-hairline` in dark mode so they are more visible.
+
+- replace `kumo-line` usages with `kumo-hairline` across Kumo components and docs UI/content styles
+- use `ring-kumo-line` for shadowed surfaces (for example combobox, dialog, select, dropdown, toast, and related surface wrappers)
+- adjust theme token configuration and generated styles to support updated neutral/hairline appearance
\ No newline at end of file
diff --git a/packages/kumo-docs-astro/src/components/Header.astro b/packages/kumo-docs-astro/src/components/Header.astro
index bf369fc5bd..f27c0ff367 100644
--- a/packages/kumo-docs-astro/src/components/Header.astro
+++ b/packages/kumo-docs-astro/src/components/Header.astro
@@ -8,10 +8,10 @@ const kumoVersion =
 ---
 
 <header
-  class="sticky top-0 z-10 h-12 border-b border-kumo-line bg-kumo-canvas hidden md:flex"
+  class="sticky top-0 z-10 h-12 border-b border-kumo-hairline bg-kumo-canvas hidden md:flex"
 >
   <div
-    class="flex min-w-0 flex-1 items-center justify-end border-r border-kumo-line px-4"
+    class="flex min-w-0 flex-1 items-center justify-end border-r border-kumo-hairline px-4"
   >
     <a
       href="https://github.com/cloudflare/kumo"
diff --git a/packages/kumo-docs-astro/src/components/SearchDialog.tsx b/packages/kumo-docs-astro/src/components/SearchDialog.tsx
index c23c758b1d..529535e1ce 100644
--- a/packages/kumo-docs-astro/src/components/SearchDialog.tsx
+++ b/packages/kumo-docs-astro/src/components/SearchDialog.tsx
@@ -514,28 +514,28 @@ export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
         </span>
         <div className="flex items-center gap-4">
           <span className="flex items-center gap-1">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
               ↑
             </kbd>
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
               ↓
             </kbd>
             <span>navigate</span>
           </span>
           <span className="flex items-center gap-1">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
               ↵
             </kbd>
             <span>open</span>
           </span>
           <span className="flex items-center gap-1">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
               ⌘↵
             </kbd>
             <span>new tab</span>
           </span>
           <span className="flex items-center gap-1">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
               esc
             </kbd>
             <span>close</span>
diff --git a/packages/kumo-docs-astro/src/components/SidebarNav.tsx b/packages/kumo-docs-astro/src/components/SidebarNav.tsx
index a16bcf6a9f..17b6b4659e 100644
--- a/packages/kumo-docs-astro/src/components/SidebarNav.tsx
+++ b/packages/kumo-docs-astro/src/components/SidebarNav.tsx
@@ -192,7 +192,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
     <>
       <button
         onClick={() => setSearchOpen(true)}
-        className="mb-3 flex w-full items-center gap-2 rounded-lg bg-kumo-control px-3 py-2 text-sm text-kumo-subtle ring-1 ring-kumo-line transition-all hover:ring-kumo-hairline"
+        className="mb-3 flex w-full items-center gap-2 rounded-lg bg-kumo-control px-3 py-2 text-sm text-kumo-subtle ring-1 ring-kumo-hairline transition-all hover:ring-kumo-hairline"
       >
         <MagnifyingGlassIcon size={16} className="shrink-0" />
         <span>Search...</span>
@@ -214,7 +214,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
         ))}
       </ul>
 
-      <div className="my-4 border-b border-kumo-line" />
+      <div className="my-4 border-b border-kumo-hairline" />
 
       <div className="mb-4">
         {/* Components Section */}
@@ -341,7 +341,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
       {/* Mobile header bar with hamburger */}
       <div
         className={cn(
-          "fixed inset-x-0 top-0 z-50 flex h-12 items-center justify-between border-b border-kumo-line bg-kumo-canvas px-3 md:hidden",
+          "fixed inset-x-0 top-0 z-50 flex h-12 items-center justify-between border-b border-kumo-hairline bg-kumo-canvas px-3 md:hidden",
         )}
       >
         <Button
@@ -359,12 +359,12 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
       {/* Mobile slide-out drawer */}
       <aside
         className={cn(
-          "fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-kumo-line bg-kumo-canvas md:hidden",
+          "fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-kumo-hairline bg-kumo-canvas md:hidden",
           "transition-transform duration-300 will-change-transform",
           mobileMenuOpen ? "translate-x-0" : "-translate-x-full",
         )}
       >
-        <div className="flex h-12 flex-none items-center justify-between border-b border-kumo-line px-3">
+        <div className="flex h-12 flex-none items-center justify-between border-b border-kumo-hairline px-3">
           <h1 className="text-base font-medium">Kumo</h1>
           <Button
             variant="ghost"
@@ -389,10 +389,10 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
       <div
         className={cn(
           "fixed inset-y-0 left-0 z-50 hidden w-12 bg-kumo-canvas ated md:block",
-          "border-r border-kumo-line",
+          "border-r border-kumo-hairline",
         )}
       >
-        <div className="relative h-12 border-b border-kumo-line">
+        <div className="relative h-12 border-b border-kumo-hairline">
           <div className="absolute inset-0 grid place-items-center">
             <Button
               variant="ghost"
@@ -419,11 +419,11 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
           "fixed inset-y-0 left-12 z-40 hidden w-64 flex-col bg-kumo-canvas md:flex",
           "transition-transform duration-300 ease-out will-change-transform",
           sidebarOpen
-            ? "translate-x-0 border-r border-kumo-line"
+            ? "translate-x-0 border-r border-kumo-hairline"
             : "-translate-x-full",
         )}
       >
-        <div className="h-12 flex-none border-b border-kumo-line" />
+        <div className="h-12 flex-none border-b border-kumo-hairline" />
 
         <div
           ref={desktopScrollRef}
diff --git a/packages/kumo-docs-astro/src/components/demos/Chart/ChartCard.astro b/packages/kumo-docs-astro/src/components/demos/Chart/ChartCard.astro
index 36ac8adf69..54dcfa593b 100644
--- a/packages/kumo-docs-astro/src/components/demos/Chart/ChartCard.astro
+++ b/packages/kumo-docs-astro/src/components/demos/Chart/ChartCard.astro
@@ -8,7 +8,7 @@ interface Props {
 const { title, description, href } = Astro.props;
 ---
 
-<div class="rounded-lg border border-kumo-line bg-kumo-elevated">
+<div class="rounded-lg border border-kumo-hairline bg-kumo-elevated">
   <div class="p-4">
     <div class="text-kumo-default">{title}</div>
     <div class="mt-1 text-sm text-kumo-secondary">{description}</div>
@@ -16,14 +16,14 @@ const { title, description, href } = Astro.props;
     <div class="mt-4">
       <a
         href={href}
-        class="inline-flex items-center justify-center rounded-md border border-kumo-line bg-kumo-control px-3 py-1.5 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-recessed"
+        class="inline-flex items-center justify-center rounded-md border border-kumo-hairline bg-kumo-control px-3 py-1.5 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-recessed"
       >
         Learn more
       </a>
     </div>
   </div>
 
-  <div class="border-kumo-line border-t bg-kumo-base p-2">
+  <div class="border-kumo-hairline border-t bg-kumo-base p-2">
     <slot />
   </div>
 </div>
diff --git a/packages/kumo-docs-astro/src/components/demos/Chart/ChartDemo.tsx b/packages/kumo-docs-astro/src/components/demos/Chart/ChartDemo.tsx
index 02a79827f7..357b3f0ffc 100644
--- a/packages/kumo-docs-astro/src/components/demos/Chart/ChartDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/Chart/ChartDemo.tsx
@@ -311,7 +311,7 @@ export function LegendDefaultDemo() {
     <div className="space-y-4">
       <h3 className="text-sm font-medium">Active State</h3>
 
-      <div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
+      <div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
         <ChartLegend.LargeItem
           name="Requests"
           color={ChartPalette.semantic("Neutral", isDarkMode)}
@@ -333,7 +333,7 @@ export function LegendDefaultDemo() {
 
       <h3 className="text-sm font-medium mt-12">Inactive State</h3>
 
-      <div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
+      <div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
         <ChartLegend.LargeItem
           name="Requests"
           color={ChartPalette.semantic("Neutral", isDarkMode)}
@@ -502,7 +502,7 @@ export function ChartExampleDemo() {
     <LayerCard>
       <LayerCard.Secondary>Read latency</LayerCard.Secondary>
       <LayerCard.Primary>
-        <div className="flex divide-x divide-kumo-line gap-4 px-2 mb-2">
+        <div className="flex divide-x divide-kumo-hairline gap-4 px-2 mb-2">
           <ChartLegend.LargeItem
             name="P99"
             color={ChartPalette.semantic("Attention", isDarkMode)}
diff --git a/packages/kumo-docs-astro/src/components/demos/CloudflareLogoDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CloudflareLogoDemo.tsx
index c977ee8241..df5cce5b0d 100644
--- a/packages/kumo-docs-astro/src/components/demos/CloudflareLogoDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/CloudflareLogoDemo.tsx
@@ -159,7 +159,7 @@ export function PoweredByCloudflareVariantsDemo() {
 
 export function PoweredByCloudflareFooterDemo() {
   return (
-    <footer className="flex w-full items-center justify-between rounded-lg border border-kumo-line bg-kumo-elevated px-6 py-4">
+    <footer className="flex w-full items-center justify-between rounded-lg border border-kumo-hairline bg-kumo-elevated px-6 py-4">
       <span className="text-sm text-kumo-subtle">
         &copy; 2026 Your Company. All rights reserved.
       </span>
diff --git a/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx
index dab0b3ec52..867b2cd689 100644
--- a/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx
@@ -286,7 +286,7 @@ export function CodeHighlightedCustomHighlightDemo() {
           />
         </div>
 
-        <div className="flex flex-wrap gap-6 rounded-md border border-kumo-line bg-kumo-elevated p-4">
+        <div className="flex flex-wrap gap-6 rounded-md border border-kumo-hairline bg-kumo-elevated p-4">
           <label className="flex flex-col gap-2">
             <span className="text-sm text-kumo-subtle">Hue: {hue}°</span>
             <input
diff --git a/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx
index 701f18a819..f1ce1ada19 100644
--- a/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx
@@ -146,13 +146,13 @@ export function CommandPaletteBasicDemo() {
         </CommandPalette.List>
         <CommandPalette.Footer>
           <span className="flex items-center gap-2">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
               ↑↓
             </kbd>
             <span>Navigate</span>
           </span>
           <span className="flex items-center gap-2">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
               ↵
             </kbd>
             <span>Select</span>
@@ -359,13 +359,13 @@ export function CommandPaletteResultItemDemo() {
         </CommandPalette.List>
         <CommandPalette.Footer>
           <span className="flex items-center gap-2">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
               ↑↓
             </kbd>
             <span>Navigate</span>
           </span>
           <span className="flex items-center gap-2">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
               ⌘↵
             </kbd>
             <span>Open in new tab</span>
diff --git a/packages/kumo-docs-astro/src/components/demos/DatePickerDemo.tsx b/packages/kumo-docs-astro/src/components/demos/DatePickerDemo.tsx
index dda4e214f4..2c6446e821 100644
--- a/packages/kumo-docs-astro/src/components/demos/DatePickerDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/DatePickerDemo.tsx
@@ -226,7 +226,7 @@ export function DatePickerRangeWithPresetsDemo() {
       </Popover.Trigger>
       <Popover.Content className="p-0">
         <div className="flex">
-          <div className="flex flex-col gap-1 border-r border-kumo-line p-2 text-sm">
+          <div className="flex flex-col gap-1 border-r border-kumo-hairline p-2 text-sm">
             {presets.map((preset) => {
               const isActive = isPresetActive(preset);
               return (
diff --git a/packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx b/packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx
index a73019ba4c..0b0cee0761 100644
--- a/packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx
@@ -11,7 +11,7 @@ const ExpandableNode = forwardRef<
     <li
       ref={ref}
       {...props}
-      className="rounded-lg shadow bg-kumo-base ring ring-kumo-line overflow-hidden"
+      className="rounded-lg shadow bg-kumo-base ring ring-kumo-hairline overflow-hidden"
     >
       <button
         type="button"
@@ -24,7 +24,7 @@ const ExpandableNode = forwardRef<
         />
       </button>
       {open && (
-        <div className="border-t border-kumo-line px-3 py-2 text-sm text-kumo-subtle">
+        <div className="border-t border-kumo-hairline px-3 py-2 text-sm text-kumo-subtle">
           {children}
         </div>
       )}
@@ -100,7 +100,7 @@ export function FlowAnchorDemo() {
       <Flow.Node>Load balancer</Flow.Node>
       <Flow.Node
         render={
-          <li className="shadow-none rounded-lg ring ring-kumo-line bg-kumo-overlay">
+          <li className="shadow-none rounded-lg ring ring-kumo-hairline bg-kumo-overlay">
             <Flow.Anchor
               type="end"
               render={
@@ -112,7 +112,7 @@ export function FlowAnchorDemo() {
             <Flow.Anchor
               type="start"
               render={
-                <div className="bg-kumo-base rounded ring ring-kumo-line shadow px-2 py-1.5 m-1.5 mt-0">
+                <div className="bg-kumo-base rounded ring ring-kumo-hairline shadow px-2 py-1.5 m-1.5 mt-0">
                   Bindings
                   <span className="text-kumo-subtle w-5 ml-3">2</span>
                 </div>
@@ -137,7 +137,7 @@ export function FlowCenteredDemo() {
       <Flow.Node>my-worker</Flow.Node>
       <Flow.Node
         render={
-          <li className="py-6 px-3 rounded-md shadow bg-kumo-base ring ring-kumo-line">
+          <li className="py-6 px-3 rounded-md shadow bg-kumo-base ring ring-kumo-hairline">
             Taller node
           </li>
         }
@@ -149,7 +149,7 @@ export function FlowCenteredDemo() {
 /** Large flow diagram demonstrating panning */
 export function FlowPanningDemo() {
   return (
-    <Flow className="rounded-lg border border-kumo-line">
+    <Flow className="rounded-lg border border-kumo-hairline">
       <Flow.Node>Start</Flow.Node>
       <Flow.Node>Authenticate</Flow.Node>
       <Flow.Node>Validate</Flow.Node>
@@ -226,9 +226,9 @@ export function FlowSidebarBugDemo() {
   const [sidebarOpen, setSidebarOpen] = useState(true);
 
   return (
-    <div className="relative overflow-hidden rounded-lg ring ring-kumo-line bg-kumo-base min-h-64 flex flex-col">
+    <div className="relative overflow-hidden rounded-lg ring ring-kumo-hairline bg-kumo-base min-h-64 flex flex-col">
       {/* Toolbar */}
-      <div className="flex items-center gap-2 border-b border-kumo-line px-3 py-2 shrink-0">
+      <div className="flex items-center gap-2 border-b border-kumo-hairline px-3 py-2 shrink-0">
         <button
           type="button"
           onClick={() => setSidebarOpen((v) => !v)}
@@ -246,7 +246,7 @@ export function FlowSidebarBugDemo() {
       <div className="flex flex-1 min-h-0">
         {/* Sidebar */}
         <div
-          className="shrink-0 overflow-hidden transition-[width] duration-300 border-r border-kumo-line bg-kumo-elevated"
+          className="shrink-0 overflow-hidden transition-[width] duration-300 border-r border-kumo-hairline bg-kumo-elevated"
           style={{ width: sidebarOpen ? 160 : 0 }}
         >
           <div className="w-40 p-3 space-y-1">
diff --git a/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx b/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
index efc048c349..0853cc1ef8 100644
--- a/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
@@ -624,7 +624,7 @@ export function HomeGrid() {
   ];
 
   return (
-    <ul className="grid auto-rows-min grid-cols-1 gap-px bg-kumo-line md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+    <ul className="grid auto-rows-min grid-cols-1 gap-px bg-kumo-hairline md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
       {components.map((c) => {
         const route = componentRoutes[c.id] || null;
         return (
diff --git a/packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx b/packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx
index e15767a5c0..983c06b6d8 100644
--- a/packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx
@@ -56,7 +56,7 @@ const wpThemeStyles = `
   --color-kumo-interact: #c3c4c7;
 
   /* WP borders — very subtle gray */
-  --color-kumo-line: #c3c4c7;
+  --color-kumo-hairline: #c3c4c7;
   --color-kumo-hairline: #2271b1;
 
   /* WP text hierarchy */
@@ -300,7 +300,7 @@ function WPTopBar({
   onToggleDarkMode: () => void;
 }) {
   return (
-    <div className="flex h-[48px] items-center justify-between border-b border-kumo-line bg-kumo-elevated px-4">
+    <div className="flex h-[48px] items-center justify-between border-b border-kumo-hairline bg-kumo-elevated px-4">
       <div className="flex items-center gap-4">
         <h1 className="text-lg font-semibold text-kumo-default">Posts</h1>
         <Button variant="primary" size="sm">
@@ -418,7 +418,7 @@ export function KumoPressDemo() {
       <div
         data-theme="wordpress"
         data-mode={darkMode ? "dark" : undefined}
-        className="flex h-[720px] overflow-hidden rounded-xl border border-kumo-line bg-kumo-elevated font-sans shadow-lg"
+        className="flex h-[720px] overflow-hidden rounded-xl border border-kumo-hairline bg-kumo-elevated font-sans shadow-lg"
       >
         {/* Sidebar */}
         <div
diff --git a/packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx b/packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx
index f1b34192d1..81e77467ed 100644
--- a/packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx
@@ -118,7 +118,7 @@ export function PopoverCustomContentDemo() {
             <p className="text-sm text-kumo-subtle">jane@example.com</p>
           </div>
         </div>
-        <div className="mt-3 flex gap-2 border-t border-kumo-line pt-3">
+        <div className="mt-3 flex gap-2 border-t border-kumo-hairline pt-3">
           <Button variant="secondary" size="sm" className="flex-1">
             Profile
           </Button>
diff --git a/packages/kumo-docs-astro/src/components/demos/RegistryDemo.tsx b/packages/kumo-docs-astro/src/components/demos/RegistryDemo.tsx
index af6ad57a3e..e21684b761 100644
--- a/packages/kumo-docs-astro/src/components/demos/RegistryDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/RegistryDemo.tsx
@@ -51,7 +51,7 @@ const ComponentCard: FC<{
   );
 
   return (
-    <div className="rounded-lg border border-kumo-line bg-kumo-base">
+    <div className="rounded-lg border border-kumo-hairline bg-kumo-base">
       <button
         type="button"
         onClick={onToggle}
@@ -65,7 +65,7 @@ const ComponentCard: FC<{
       </button>
 
       {isExpanded && (
-        <div className="border-t border-kumo-line p-4">
+        <div className="border-t border-kumo-hairline p-4">
           {/* Import */}
           <div className="mb-4">
             <h4 className="mb-2 text-xs font-medium text-kumo-subtle uppercase">
@@ -180,19 +180,19 @@ export const ComponentRegistryView: FC = () => {
     <div className="flex flex-col gap-6">
       {/* Stats */}
       <div className="flex flex-wrap gap-4 text-sm">
-        <div className="rounded-lg border border-kumo-line bg-kumo-base px-4 py-2">
+        <div className="rounded-lg border border-kumo-hairline bg-kumo-base px-4 py-2">
           <span className="font-semibold text-kumo-default">
             {Object.keys(registry.components).length}
           </span>
           <span className="ml-1 text-kumo-subtle">components</span>
         </div>
-        <div className="rounded-lg border border-kumo-line bg-kumo-base px-4 py-2">
+        <div className="rounded-lg border border-kumo-hairline bg-kumo-base px-4 py-2">
           <span className="font-semibold text-kumo-default">
             {categories.length}
           </span>
           <span className="ml-1 text-kumo-subtle">categories</span>
         </div>
-        <div className="rounded-lg border border-kumo-line bg-kumo-base px-4 py-2">
+        <div className="rounded-lg border border-kumo-hairline bg-kumo-base px-4 py-2">
           <span className="text-kumo-subtle">v</span>
           <span className="font-semibold text-kumo-default">{registry.version}</span>
         </div>
diff --git a/packages/kumo-docs-astro/src/components/demos/SidebarDemo.tsx b/packages/kumo-docs-astro/src/components/demos/SidebarDemo.tsx
index 2cc5bef8c3..52c8ed4ba5 100644
--- a/packages/kumo-docs-astro/src/components/demos/SidebarDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/SidebarDemo.tsx
@@ -23,7 +23,7 @@ import { useState } from "react";
 
 function DemoContainer({ children }: { children: React.ReactNode }) {
   return (
-    <div className="relative h-[540px] w-full overflow-hidden rounded-lg border border-kumo-line bg-kumo-base">
+    <div className="relative h-[540px] w-full overflow-hidden rounded-lg border border-kumo-hairline bg-kumo-base">
       {children}
     </div>
   );
@@ -233,7 +233,7 @@ function ToggleButton() {
     <button
       type="button"
       onClick={toggleSidebar}
-      className="rounded-lg border border-kumo-line bg-kumo-base px-3 py-1.5 text-sm text-kumo-default transition-colors hover:bg-kumo-tint"
+      className="rounded-lg border border-kumo-hairline bg-kumo-base px-3 py-1.5 text-sm text-kumo-default transition-colors hover:bg-kumo-tint"
     >
       {state === "expanded" ? "Collapse" : "Expand"}
     </button>
diff --git a/packages/kumo-docs-astro/src/components/demos/SkeletonLineDemo.tsx b/packages/kumo-docs-astro/src/components/demos/SkeletonLineDemo.tsx
index 3a8e3f00ba..8776a49a21 100644
--- a/packages/kumo-docs-astro/src/components/demos/SkeletonLineDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/SkeletonLineDemo.tsx
@@ -67,7 +67,7 @@ export function SkeletonLineBlockHeightDemo() {
 
 export function SkeletonLineCardDemo() {
   return (
-    <div className="w-64 rounded-lg p-4 ring ring-kumo-line">
+    <div className="w-64 rounded-lg p-4 ring ring-kumo-hairline">
       <div className="mb-4 h-4">
         <SkeletonLine minWidth={40} maxWidth={60} />
       </div>
diff --git a/packages/kumo-docs-astro/src/components/demos/TextDemo.tsx b/packages/kumo-docs-astro/src/components/demos/TextDemo.tsx
index 3036eaea87..5abd04f901 100644
--- a/packages/kumo-docs-astro/src/components/demos/TextDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/TextDemo.tsx
@@ -3,61 +3,61 @@ import { Text } from "@cloudflare/kumo";
 export function TextVariantsDemo() {
   return (
     <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text variant="heading1">Heading 1</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-3xl (30px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text variant="heading2">Heading 2</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-2xl (24px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text variant="heading3">Heading 3</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-lg (16px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text>Body</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-base (14px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text bold>Body bold</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-base (14px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text size="lg">Body lg</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-lg (16px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text size="sm">Body sm</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-sm (13px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text size="xs">Body xs</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-xs (12px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text variant="secondary">Body secondary</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-base (14px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text variant="mono">Monospace</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-sm (13px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text variant="mono" size="lg">
           Monospace lg
         </Text>
         <p className="font-mono text-xs text-kumo-subtle">text-base (14px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text variant="mono-secondary">Monospace secondary</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-sm (13px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text variant="success">Success</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-base (14px)</p>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
         <Text variant="error">Error</Text>
         <p className="font-mono text-xs text-kumo-subtle">text-base (14px)</p>
       </div>
@@ -67,7 +67,7 @@ export function TextVariantsDemo() {
 
 export function TextTruncateDemo() {
   return (
-    <div className="w-64 rounded-lg border border-kumo-line bg-kumo-base p-4">
+    <div className="w-64 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
       <Text truncate>
         This is a long piece of text that will be truncated with an ellipsis
         when it overflows its container.
diff --git a/packages/kumo-docs-astro/src/components/docs/ComponentPreview.astro b/packages/kumo-docs-astro/src/components/docs/ComponentPreview.astro
index b01b9c4535..a002ab8d6f 100644
--- a/packages/kumo-docs-astro/src/components/docs/ComponentPreview.astro
+++ b/packages/kumo-docs-astro/src/components/docs/ComponentPreview.astro
@@ -5,7 +5,7 @@ const { class: className, ...rest } = Astro.props;
 
 <div
   class:list={[
-    "flex min-h-[120px] items-center justify-center rounded-t-lg border border-kumo-line bg-kumo-canvas p-6",
+    "flex min-h-[120px] items-center justify-center rounded-t-lg border border-kumo-hairline bg-kumo-canvas p-6",
     className,
   ]}
   {...rest}
diff --git a/packages/kumo-docs-astro/src/components/docs/KeyboardShortcuts.astro b/packages/kumo-docs-astro/src/components/docs/KeyboardShortcuts.astro
index f5f1b578f3..f69143a121 100644
--- a/packages/kumo-docs-astro/src/components/docs/KeyboardShortcuts.astro
+++ b/packages/kumo-docs-astro/src/components/docs/KeyboardShortcuts.astro
@@ -17,7 +17,7 @@ const { shortcuts } = Astro.props;
       <span class="flex items-center gap-1">
         {keys.map((key, i) => (
           <>
-            <kbd class="inline-flex items-center justify-center rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-xs font-medium min-w-[1.5rem]">
+            <kbd class="inline-flex items-center justify-center rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-xs font-medium min-w-[1.5rem]">
               {key}
             </kbd>
             {i < keys.length - 1 && <span class="text-kumo-subtle text-xs">+</span>}
diff --git a/packages/kumo-docs-astro/src/components/docs/PropsTable.astro b/packages/kumo-docs-astro/src/components/docs/PropsTable.astro
index 4f8558d9db..ee6ebea120 100644
--- a/packages/kumo-docs-astro/src/components/docs/PropsTable.astro
+++ b/packages/kumo-docs-astro/src/components/docs/PropsTable.astro
@@ -44,7 +44,7 @@ const hasDescriptions =
     <div class="not-prose overflow-x-auto">
       <table class="w-full text-sm">
         <thead>
-          <tr class="border-b border-kumo-line">
+          <tr class="border-b border-kumo-hairline">
             <th class="px-4 py-3 text-left font-semibold">Prop</th>
             <th class="px-4 py-3 text-left font-semibold">Type</th>
             <th class="px-4 py-3 text-left font-semibold">Default</th>
@@ -63,7 +63,7 @@ const hasDescriptions =
             let description = prop.description || "";
 
             return (
-              <tr class="border-b border-kumo-line">
+              <tr class="border-b border-kumo-hairline">
                 <td class="px-4 py-3 font-mono text-xs">
                   {propName}
                   {isRequired && <span class="text-kumo-danger ml-0.5">*</span>}
diff --git a/packages/kumo-docs-astro/src/components/docs/StickyDocHeader.tsx b/packages/kumo-docs-astro/src/components/docs/StickyDocHeader.tsx
index a8118b9473..3d33ef6d13 100644
--- a/packages/kumo-docs-astro/src/components/docs/StickyDocHeader.tsx
+++ b/packages/kumo-docs-astro/src/components/docs/StickyDocHeader.tsx
@@ -111,9 +111,9 @@ export function StickyDocHeader({
       {/* Sticky header bar */}
       <header
         ref={headerRef}
-        className="sticky flex h-12 top-12 md:top-0 z-10 border-b border-kumo-line bg-kumo-elevated"
+        className="sticky flex h-12 top-12 md:top-0 z-10 border-b border-kumo-hairline bg-kumo-elevated"
       >
-        <div className="flex min-w-0 flex-1 items-center justify-between px-4 md:border-r md:border-kumo-line">
+        <div className="flex min-w-0 flex-1 items-center justify-between px-4 md:border-r md:border-kumo-hairline">
           <div
             className={cn(
               "flex items-center gap-2 transition-opacity duration-200",
diff --git a/packages/kumo-docs-astro/src/components/docs/TableOfContents.tsx b/packages/kumo-docs-astro/src/components/docs/TableOfContents.tsx
index 995f928a19..699bdd56bb 100644
--- a/packages/kumo-docs-astro/src/components/docs/TableOfContents.tsx
+++ b/packages/kumo-docs-astro/src/components/docs/TableOfContents.tsx
@@ -132,7 +132,7 @@ export function TableOfContents({
               .getElementById(slug)
               ?.scrollIntoView({ behavior: "smooth" });
           }}
-          className="w-full appearance-none rounded-lg border border-kumo-line bg-kumo-base px-4 py-2.5 pr-10 text-sm text-kumo-default"
+          className="w-full appearance-none rounded-lg border border-kumo-hairline bg-kumo-base px-4 py-2.5 pr-10 text-sm text-kumo-default"
         >
           {headings.map((heading) => (
             <option key={heading.slug} value={heading.slug}>
@@ -157,7 +157,7 @@ export function TableOfContents({
       </p>
       <nav
         aria-label="Table of contents"
-        className="relative space-y-1.5 before:absolute before:inset-y-0 before:left-0.5 before:w-px before:bg-kumo-line"
+        className="relative space-y-1.5 before:absolute before:inset-y-0 before:left-0.5 before:w-px before:bg-kumo-hairline"
         ref={navRef}
       >
         {headings.map((heading) => {
diff --git a/packages/kumo-docs-astro/src/components/kumo/page-header/page-header.tsx b/packages/kumo-docs-astro/src/components/kumo/page-header/page-header.tsx
index 560f3ae1e5..7e460fc40d 100644
--- a/packages/kumo-docs-astro/src/components/kumo/page-header/page-header.tsx
+++ b/packages/kumo-docs-astro/src/components/kumo/page-header/page-header.tsx
@@ -64,7 +64,7 @@ export function PageHeader({
 }: PageHeaderProps) {
   return (
     <div className={cn(pageHeaderVariants({ spacing }), className)}>
-      <div className="border-b border-kumo-line">{breadcrumbs}</div>
+      <div className="border-b border-kumo-hairline">{breadcrumbs}</div>
 
       {(title || description) && (
         <div className="flex flex-col gap-2 py-3 pl-3">
@@ -82,7 +82,7 @@ export function PageHeader({
       )}
 
       {tabs && (
-        <div className="flex w-full items-center justify-between border-b border-kumo-line pt-1 pb-3 pl-3">
+        <div className="flex w-full items-center justify-between border-b border-kumo-hairline pt-1 pb-3 pl-3">
           <Tabs
             tabs={tabs}
             selectedValue={defaultTab}
diff --git a/packages/kumo-docs-astro/src/layouts/DocLayout.astro b/packages/kumo-docs-astro/src/layouts/DocLayout.astro
index 0a554d24ee..2ce6c13f3c 100644
--- a/packages/kumo-docs-astro/src/layouts/DocLayout.astro
+++ b/packages/kumo-docs-astro/src/layouts/DocLayout.astro
@@ -56,8 +56,8 @@ const githubSourceUrl = sourceFile
     />
 
     <!-- Page Header -->
-    <div id="page-header" class="border-b border-kumo-line md:pr-12">
-      <div class="mx-auto md:border-r md:border-kumo-line">
+    <div id="page-header" class="border-b border-kumo-hairline md:pr-12">
+      <div class="mx-auto md:border-r md:border-kumo-hairline">
         <div class="mx-auto max-w-7xl p-12">
           <!-- Mobile: Copy page button above title -->
           <div class="mb-3 md:hidden">
@@ -107,9 +107,9 @@ const githubSourceUrl = sourceFile
 
     <!-- Content -->
     <main class="flex grow flex-col md:pr-12">
-      <div class="mx-auto w-full grow md:border-r md:border-kumo-line">
+      <div class="mx-auto w-full grow md:border-r md:border-kumo-hairline">
         <!-- Select TOC: visible below xl, hidden at xl+ where sidebar takes over -->
-        <div class="xl:hidden sticky top-24 md:top-12 z-1 border-b border-kumo-line bg-kumo-canvas">
+        <div class="xl:hidden sticky top-24 md:top-12 z-1 border-b border-kumo-hairline bg-kumo-canvas">
           <div class="mx-auto max-w-7xl px-2 md:px-3 py-3">
             <TableOfContents layout="select" headings={headings.length > 0 ? headings : undefined} client:load />
           </div>
diff --git a/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx b/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx
index 67e8c5fc08..78fc9d18b4 100644
--- a/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx
+++ b/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx
@@ -156,17 +156,17 @@ export default function Example() {
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <th class="px-4 py-3 text-left font-semibold">Property</th>
           <th class="px-4 py-3 text-left font-semibold">Type</th>
         </tr>
       </thead>
       <tbody class="text-kumo-strong">
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">label</td>
           <td class="px-4 py-3 font-mono text-xs">string</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">value</td>
           <td class="px-4 py-3 font-mono text-xs">string</td>
         </tr>
diff --git a/packages/kumo-docs-astro/src/pages/blocks/resource-list.mdx b/packages/kumo-docs-astro/src/pages/blocks/resource-list.mdx
index 535a3fc14a..69507f14a0 100644
--- a/packages/kumo-docs-astro/src/pages/blocks/resource-list.mdx
+++ b/packages/kumo-docs-astro/src/pages/blocks/resource-list.mdx
@@ -118,48 +118,48 @@ export default function DatabasesPage() {
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <th class="px-4 py-3 text-left font-semibold">Property</th>
           <th class="px-4 py-3 text-left font-semibold">Type</th>
           <th class="px-4 py-3 text-left font-semibold">Description</th>
         </tr>
       </thead>
       <tbody class="text-kumo-strong">
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">title</td>
           <td class="px-4 py-3 font-mono text-xs">string</td>
           <td class="px-4 py-3">Page title displayed at the top</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">description</td>
           <td class="px-4 py-3 font-mono text-xs">string</td>
           <td class="px-4 py-3">Page description below the title</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">icon</td>
           <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
           <td class="px-4 py-3">Icon displayed next to the title</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">usage</td>
           <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
           <td class="px-4 py-3">
             Sidebar content for usage examples or quick start guides
           </td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">additionalContent</td>
           <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
           <td class="px-4 py-3">
             Additional sidebar content (e.g., resources, links)
           </td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">children</td>
           <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
           <td class="px-4 py-3">Main content area for the resource list</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">className</td>
           <td class="px-4 py-3 font-mono text-xs">string</td>
           <td class="px-4 py-3">Additional CSS classes</td>
diff --git a/packages/kumo-docs-astro/src/pages/changelog/[...page].astro b/packages/kumo-docs-astro/src/pages/changelog/[...page].astro
index 72aa698d16..befd7271bf 100644
--- a/packages/kumo-docs-astro/src/pages/changelog/[...page].astro
+++ b/packages/kumo-docs-astro/src/pages/changelog/[...page].astro
@@ -192,7 +192,7 @@ const GITHUB_RELEASE_URL = "https://github.com/cloudflare/kumo/releases/tag/%40c
         </div>
 
         {i < versions.length - 1 && (
-          <div class="mt-6 border-b border-kumo-line" />
+          <div class="mt-6 border-b border-kumo-hairline" />
         )}
       </article>
     ))}
diff --git a/packages/kumo-docs-astro/src/pages/colors.mdx b/packages/kumo-docs-astro/src/pages/colors.mdx
index 5c65836b20..18d96d7618 100644
--- a/packages/kumo-docs-astro/src/pages/colors.mdx
+++ b/packages/kumo-docs-astro/src/pages/colors.mdx
@@ -14,7 +14,7 @@ Always use semantic tokens instead of raw Tailwind colors. This ensures your UI
 **Correct**
 
 ```tsx
-<div className="bg-kumo-base text-kumo-default border-kumo-line">
+<div className="bg-kumo-base text-kumo-default border-kumo-hairline">
   <button className="bg-kumo-brand text-white">Primary</button>
   <button className="bg-kumo-control text-kumo-default">Secondary</button>
 </div>
@@ -328,7 +328,7 @@ Use the solid token on icons, status dots, borders and rings. Banners and badges
         <td>A border/ring color to distinguish between flat surfaces where no shadow is present (i.e. <code>LayerCard</code>).</td>
       </tr>
       <tr>
-        <td><code>kumo-line</code></td>
+        <td><code>kumo-hairline</code></td>
         <td>A thicker border/ring color that defines the edge of an elevated surface alongside a shadow.</td>
       </tr>
     </tbody>
diff --git a/packages/kumo-docs-astro/src/pages/components/cloudflare-logo.mdx b/packages/kumo-docs-astro/src/pages/components/cloudflare-logo.mdx
index e9ed9d20de..75d61a0eaa 100644
--- a/packages/kumo-docs-astro/src/pages/components/cloudflare-logo.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/cloudflare-logo.mdx
@@ -175,7 +175,7 @@ await navigator.clipboard.writeText(
   <div class="overflow-x-auto">
     <table class="w-full text-left text-sm">
       <thead>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <th class="py-3 pr-4 font-medium">Prop</th>
           <th class="py-3 pr-4 font-medium">Type</th>
           <th class="py-3 pr-4 font-medium">Default</th>
@@ -183,13 +183,13 @@ await navigator.clipboard.writeText(
         </tr>
       </thead>
       <tbody class="text-kumo-subtle">
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4 font-mono text-kumo-default">variant</td>
           <td class="py-3 pr-4 font-mono">"glyph" | "full"</td>
           <td class="py-3 pr-4 font-mono">"full"</td>
           <td class="py-3">Logo variant. <code>glyph</code> shows just the cloud icon, <code>full</code> includes the wordmark.</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4 font-mono text-kumo-default">color</td>
           <td class="py-3 pr-4 font-mono">"color" | "black" | "white"</td>
           <td class="py-3 pr-4 font-mono">"color"</td>
@@ -212,7 +212,7 @@ await navigator.clipboard.writeText(
   <div class="overflow-x-auto">
     <table class="w-full text-left text-sm">
       <thead>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <th class="py-3 pr-4 font-medium">Prop</th>
           <th class="py-3 pr-4 font-medium">Type</th>
           <th class="py-3 pr-4 font-medium">Default</th>
@@ -220,7 +220,7 @@ await navigator.clipboard.writeText(
         </tr>
       </thead>
       <tbody class="text-kumo-subtle">
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4 font-mono text-kumo-default">color</td>
           <td class="py-3 pr-4 font-mono">"color" | "black" | "white"</td>
           <td class="py-3 pr-4 font-mono">"color"</td>
diff --git a/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx b/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx
index dab5b67f68..d6d4a5fb5f 100644
--- a/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx
@@ -374,7 +374,7 @@ const html = await highlightCode(code, lang);
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <th class="py-2 pr-4 text-left font-medium">Scenario</th>
           <th class="py-2 pr-4 text-left font-medium">Languages</th>
           <th class="py-2 pr-4 text-left font-medium">Engine</th>
@@ -382,13 +382,13 @@ const html = await highlightCode(code, lang);
         </tr>
       </thead>
       <tbody>
-        <tr class="border-b border-kumo-line/50">
+        <tr class="border-b border-kumo-hairline/50">
           <td class="py-2 pr-4">Minimal</td>
           <td class="py-2 pr-4">tsx, json</td>
           <td class="py-2 pr-4">JS</td>
           <td class="py-2">~75 KB</td>
         </tr>
-        <tr class="border-b border-kumo-line/50">
+        <tr class="border-b border-kumo-hairline/50">
           <td class="py-2 pr-4">Standard</td>
           <td class="py-2 pr-4">tsx, ts, bash, json, css, yaml</td>
           <td class="py-2 pr-4">JS</td>
@@ -445,7 +445,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="py-2 pr-4 text-left font-medium">Prop</th>
         <th class="py-2 pr-4 text-left font-medium">Type</th>
         <th class="py-2 pr-4 text-left font-medium">Required</th>
@@ -453,7 +453,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
       </tr>
     </thead>
     <tbody>
-      <tr class="border-b border-kumo-line/50">
+      <tr class="border-b border-kumo-hairline/50">
         <td class="py-2 pr-4">
           <code>engine</code>
         </td>
@@ -465,7 +465,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
           JS is smaller (~50KB), WASM is more accurate (~180KB)
         </td>
       </tr>
-      <tr class="border-b border-kumo-line/50">
+      <tr class="border-b border-kumo-hairline/50">
         <td class="py-2 pr-4">
           <code>languages</code>
         </td>
@@ -475,7 +475,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
         <td class="py-2 pr-4">Yes</td>
         <td class="py-2">Languages to support (e.g., ["tsx", "bash"])</td>
       </tr>
-      <tr class="border-b border-kumo-line/50">
+      <tr class="border-b border-kumo-hairline/50">
         <td class="py-2 pr-4">
           <code>labels</code>
         </td>
@@ -503,7 +503,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="py-2 pr-4 text-left font-medium">Prop</th>
         <th class="py-2 pr-4 text-left font-medium">Type</th>
         <th class="py-2 pr-4 text-left font-medium">Required</th>
@@ -511,7 +511,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
       </tr>
     </thead>
     <tbody>
-      <tr class="border-b border-kumo-line/50">
+      <tr class="border-b border-kumo-hairline/50">
         <td class="py-2 pr-4">
           <code>code</code>
         </td>
@@ -521,7 +521,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
         <td class="py-2 pr-4">Yes</td>
         <td class="py-2">Source code to display</td>
       </tr>
-      <tr class="border-b border-kumo-line/50">
+      <tr class="border-b border-kumo-hairline/50">
         <td class="py-2 pr-4">
           <code>lang</code>
         </td>
@@ -533,7 +533,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
           Language identifier (must be in provider's languages)
         </td>
       </tr>
-      <tr class="border-b border-kumo-line/50">
+      <tr class="border-b border-kumo-hairline/50">
         <td class="py-2 pr-4">
           <code>showLineNumbers</code>
         </td>
@@ -543,7 +543,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
         <td class="py-2 pr-4">No</td>
         <td class="py-2">Display line numbers</td>
       </tr>
-      <tr class="border-b border-kumo-line/50">
+      <tr class="border-b border-kumo-hairline/50">
         <td class="py-2 pr-4">
           <code>highlightLines</code>
         </td>
@@ -553,7 +553,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
         <td class="py-2 pr-4">No</td>
         <td class="py-2">Lines to emphasize (1-indexed)</td>
       </tr>
-      <tr class="border-b border-kumo-line/50">
+      <tr class="border-b border-kumo-hairline/50">
         <td class="py-2 pr-4">
           <code>showCopyButton</code>
         </td>
@@ -563,7 +563,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
         <td class="py-2 pr-4">No</td>
         <td class="py-2">Show copy-to-clipboard button</td>
       </tr>
-      <tr class="border-b border-kumo-line/50">
+      <tr class="border-b border-kumo-hairline/50">
         <td class="py-2 pr-4">
           <code>labels</code>
         </td>
@@ -591,24 +591,24 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <th class="py-2 pr-4 text-left font-medium">Property</th>
           <th class="py-2 pr-4 text-left font-medium">Type</th>
           <th class="py-2 text-left font-medium">Description</th>
         </tr>
       </thead>
       <tbody>
-        <tr class="border-b border-kumo-line/50">
+        <tr class="border-b border-kumo-hairline/50">
           <td class="py-2 pr-4"><code>highlight</code></td>
           <td class="py-2 pr-4"><code>(code, lang, options?) =&gt; string | null</code></td>
           <td class="py-2">Returns highlighted HTML, or null if not ready</td>
         </tr>
-        <tr class="border-b border-kumo-line/50">
+        <tr class="border-b border-kumo-hairline/50">
           <td class="py-2 pr-4"><code>isLoading</code></td>
           <td class="py-2 pr-4"><code>boolean</code></td>
           <td class="py-2">True while Shiki is loading</td>
         </tr>
-        <tr class="border-b border-kumo-line/50">
+        <tr class="border-b border-kumo-hairline/50">
           <td class="py-2 pr-4"><code>isReady</code></td>
           <td class="py-2 pr-4"><code>boolean</code></td>
           <td class="py-2">True when highlight() is safe to call</td>
diff --git a/packages/kumo-docs-astro/src/pages/components/dialog.mdx b/packages/kumo-docs-astro/src/pages/components/dialog.mdx
index 263a058886..5b66f5dea5 100644
--- a/packages/kumo-docs-astro/src/pages/components/dialog.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/dialog.mdx
@@ -83,7 +83,7 @@ export default function Example() {
     meaning to assistive technologies:
   </p>
 
-  <div class="overflow-hidden rounded-lg border border-kumo-line">
+  <div class="overflow-hidden rounded-lg border border-kumo-hairline">
     <table class="w-full text-sm">
       <thead class="bg-kumo-elevated">
         <tr>
@@ -92,7 +92,7 @@ export default function Example() {
           <th class="px-4 py-3 text-left font-medium">Behavior</th>
         </tr>
       </thead>
-      <tbody class="divide-y divide-kumo-line">
+      <tbody class="divide-y divide-kumo-hairline">
         <tr>
           <td class="px-4 py-3">
             `role="dialog"`
@@ -199,7 +199,7 @@ export default function Example() {
 <p>
   Controls the open state of the dialog. Doesn't render its own HTML element.
 </p>
-<div class="mb-4 overflow-hidden rounded-lg border border-kumo-line">
+<div class="mb-4 overflow-hidden rounded-lg border border-kumo-hairline">
   <table class="w-full text-sm">
     <thead class="bg-kumo-elevated">
       <tr>
@@ -209,7 +209,7 @@ export default function Example() {
         <th class="px-4 py-2 text-left font-medium">Description</th>
       </tr>
     </thead>
-    <tbody class="divide-y divide-kumo-line">
+    <tbody class="divide-y divide-kumo-hairline">
       <tr>
         <td class="px-4 py-2 font-mono text-xs">role</td>
         <td class="px-4 py-2 font-mono text-xs">"dialog" | "alertdialog"</td>
diff --git a/packages/kumo-docs-astro/src/pages/components/flow.mdx b/packages/kumo-docs-astro/src/pages/components/flow.mdx
index 13741b61df..6fac0fcda1 100644
--- a/packages/kumo-docs-astro/src/pages/components/flow.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/flow.mdx
@@ -212,14 +212,14 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="px-4 py-3 text-left font-semibold">Prop</th>
         <th class="px-4 py-3 text-left font-semibold">Type</th>
         <th class="px-4 py-3 text-left font-semibold">Description</th>
       </tr>
     </thead>
     <tbody class="text-kumo-strong">
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">align</td>
         <td class="px-4 py-3 font-mono">"start" | "center"</td>
         <td class="px-4 py-3">
@@ -227,12 +227,12 @@ export default function Example() {
           `"center"` vertically centers nodes.
         </td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">className</td>
         <td class="px-4 py-3 font-mono">string</td>
         <td class="px-4 py-3">Additional CSS classes for the container</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">children</td>
         <td class="px-4 py-3 font-mono">ReactNode</td>
         <td class="px-4 py-3">Flow.Node and Flow.Parallel components</td>
@@ -249,21 +249,21 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="px-4 py-3 text-left font-semibold">Prop</th>
         <th class="px-4 py-3 text-left font-semibold">Type</th>
         <th class="px-4 py-3 text-left font-semibold">Description</th>
       </tr>
     </thead>
     <tbody class="text-kumo-strong">
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">render</td>
         <td class="px-4 py-3 font-mono">ReactElement</td>
         <td class="px-4 py-3">
           Custom element to render instead of the default styled node
         </td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">disabled</td>
         <td class="px-4 py-3 font-mono">boolean</td>
         <td class="px-4 py-3">
@@ -271,7 +271,7 @@ export default function Example() {
           opacity
         </td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">children</td>
         <td class="px-4 py-3 font-mono">ReactNode</td>
         <td class="px-4 py-3">Content to display inside the node</td>
@@ -289,14 +289,14 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="px-4 py-3 text-left font-semibold">Prop</th>
         <th class="px-4 py-3 text-left font-semibold">Type</th>
         <th class="px-4 py-3 text-left font-semibold">Description</th>
       </tr>
     </thead>
     <tbody class="text-kumo-strong">
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">type</td>
         <td class="px-4 py-3 font-mono">"start" | "end"</td>
         <td class="px-4 py-3">
@@ -304,12 +304,12 @@ export default function Example() {
           "end" point (incoming connectors). When omitted, serves as both.
         </td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">render</td>
         <td class="px-4 py-3 font-mono">ReactElement</td>
         <td class="px-4 py-3">Custom element to render for the anchor point</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">children</td>
         <td class="px-4 py-3 font-mono">ReactNode</td>
         <td class="px-4 py-3">Content to render at the anchor point</td>
@@ -326,14 +326,14 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="px-4 py-3 text-left font-semibold">Prop</th>
         <th class="px-4 py-3 text-left font-semibold">Type</th>
         <th class="px-4 py-3 text-left font-semibold">Description</th>
       </tr>
     </thead>
     <tbody class="text-kumo-strong">
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">align</td>
         <td class="px-4 py-3 font-mono">"start" | "end"</td>
         <td class="px-4 py-3">
@@ -341,7 +341,7 @@ export default function Example() {
           `"start"` (default) aligns left, `"end"` aligns right.
         </td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono">children</td>
         <td class="px-4 py-3 font-mono">ReactNode</td>
         <td class="px-4 py-3">
@@ -361,14 +361,14 @@ export default function Example() {
   <div class="overflow-x-auto">
     <table class="w-full">
       <thead>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <th class="px-4 py-3 text-left font-semibold">Prop</th>
           <th class="px-4 py-3 text-left font-semibold">Type</th>
           <th class="px-4 py-3 text-left font-semibold">Description</th>
         </tr>
       </thead>
       <tbody class="text-kumo-strong">
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono">children</td>
           <td class="px-4 py-3 font-mono">ReactNode</td>
           <td class="px-4 py-3">Flow.Node components to display in sequence</td>
diff --git a/packages/kumo-docs-astro/src/pages/components/grid.mdx b/packages/kumo-docs-astro/src/pages/components/grid.mdx
index fd969d0818..ac259cff04 100644
--- a/packages/kumo-docs-astro/src/pages/components/grid.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/grid.mdx
@@ -90,45 +90,45 @@ import { Grid, GridItem } from "@cloudflare/kumo";
   <div class="overflow-x-auto">
     <table class="w-full text-left text-sm">
       <thead>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <th class="py-3 pr-4 font-medium">Variant</th>
           <th class="py-3 pr-4 font-medium">Description</th>
         </tr>
       </thead>
       <tbody class="text-kumo-strong">
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4">`2up`</td>
           <td class="py-3 pr-4">1 column mobile, 2 columns medium+</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4">`side-by-side`</td>
           <td class="py-3 pr-4">Always 2 columns</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4">`2-1`</td>
           <td class="py-3 pr-4">66%/33% split on medium+</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4">`1-2`</td>
           <td class="py-3 pr-4">33%/66% split on medium+</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4">`1-3up`</td>
           <td class="py-3 pr-4">1 column mobile, 3 columns large+</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4">`3up`</td>
           <td class="py-3 pr-4">1 mobile, 2 medium, 3 large</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4">`4up`</td>
           <td class="py-3 pr-4">Progressive: 1 → 2 → 3 → 4 columns</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4">`6up`</td>
           <td class="py-3 pr-4">2 mobile, up to 6 on XL</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="py-3 pr-4">`1-2-4up`</td>
           <td class="py-3 pr-4">1 mobile, 2 medium, 4 large</td>
         </tr>
diff --git a/packages/kumo-docs-astro/src/pages/components/input.mdx b/packages/kumo-docs-astro/src/pages/components/input.mdx
index 7a15c8c257..9fe35c5bb8 100644
--- a/packages/kumo-docs-astro/src/pages/components/input.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/input.mdx
@@ -180,41 +180,41 @@ export default function Example() {
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <th class="px-4 py-3 text-left font-semibold">Match</th>
           <th class="px-4 py-3 text-left font-semibold">Description</th>
         </tr>
       </thead>
       <tbody class="text-kumo-strong">
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">valueMissing</td>
           <td class="px-4 py-3 text-xs">Required field is empty</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">typeMismatch</td>
           <td class="px-4 py-3 text-xs">Value doesn't match type (e.g., invalid email)</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">patternMismatch</td>
           <td class="px-4 py-3 text-xs">Value doesn't match pattern attribute</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">tooShort</td>
           <td class="px-4 py-3 text-xs">Value shorter than minLength</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">tooLong</td>
           <td class="px-4 py-3 text-xs">Value longer than maxLength</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">rangeUnderflow</td>
           <td class="px-4 py-3 text-xs">Value less than min</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">rangeOverflow</td>
           <td class="px-4 py-3 text-xs">Value greater than max</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">true</td>
           <td class="px-4 py-3 text-xs">Always show error (for server-side validation)</td>
         </tr>
diff --git a/packages/kumo-docs-astro/src/pages/components/label.mdx b/packages/kumo-docs-astro/src/pages/components/label.mdx
index 2fb6c19a92..4ea41126f6 100644
--- a/packages/kumo-docs-astro/src/pages/components/label.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/label.mdx
@@ -131,7 +131,7 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="px-4 py-3 text-left font-semibold">Prop</th>
         <th class="px-4 py-3 text-left font-semibold">Type</th>
         <th class="px-4 py-3 text-left font-semibold">Default</th>
@@ -139,13 +139,13 @@ export default function Example() {
       </tr>
     </thead>
     <tbody class="text-kumo-strong">
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">children</td>
         <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
         <td class="px-4 py-3 text-xs">Label content (required)</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">showOptional</td>
         <td class="px-4 py-3 font-mono text-xs">boolean</td>
         <td class="px-4 py-3 font-mono text-xs">false</td>
@@ -153,13 +153,13 @@ export default function Example() {
           Shows gray "(optional)" text (only when required is false)
         </td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">tooltip</td>
         <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
         <td class="px-4 py-3 text-xs">Tooltip content shown via info icon</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">className</td>
         <td class="px-4 py-3 font-mono text-xs">string</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
@@ -177,7 +177,7 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="px-4 py-3 text-left font-semibold">Prop</th>
         <th class="px-4 py-3 text-left font-semibold">Type</th>
         <th class="px-4 py-3 text-left font-semibold">Default</th>
@@ -185,13 +185,13 @@ export default function Example() {
       </tr>
     </thead>
     <tbody class="text-kumo-strong">
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">label</td>
         <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
         <td class="px-4 py-3 text-xs">Label content (enables Field wrapper)</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">required</td>
         <td class="px-4 py-3 font-mono text-xs">boolean</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
@@ -200,7 +200,7 @@ export default function Example() {
           attribute.
         </td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">labelTooltip</td>
         <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
diff --git a/packages/kumo-docs-astro/src/pages/components/link.mdx b/packages/kumo-docs-astro/src/pages/components/link.mdx
index 9cd901aeb2..095c076d0d 100644
--- a/packages/kumo-docs-astro/src/pages/components/link.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/link.mdx
@@ -156,7 +156,7 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="px-4 py-3 text-left font-semibold">Prop</th>
         <th class="px-4 py-3 text-left font-semibold">Type</th>
         <th class="px-4 py-3 text-left font-semibold">Default</th>
@@ -164,7 +164,7 @@ export default function Example() {
       </tr>
     </thead>
     <tbody class="text-kumo-strong">
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">variant</td>
         <td class="px-4 py-3 font-mono text-xs">
           "inline" | "current" | "plain"
@@ -172,7 +172,7 @@ export default function Example() {
         <td class="px-4 py-3 font-mono text-xs">"inline"</td>
         <td class="px-4 py-3 text-xs">Visual style variant</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">render</td>
         <td class="px-4 py-3 font-mono text-xs">ReactElement</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
@@ -180,19 +180,19 @@ export default function Example() {
           Element to render with Link props merged onto it
         </td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">href</td>
         <td class="px-4 py-3 font-mono text-xs">string</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
         <td class="px-4 py-3 text-xs">Link destination URL</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">className</td>
         <td class="px-4 py-3 font-mono text-xs">string</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
         <td class="px-4 py-3 text-xs">Additional CSS classes</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">children</td>
         <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
@@ -206,19 +206,19 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="px-4 py-3 text-left font-semibold">Variant</th>
         <th class="px-4 py-3 text-left font-semibold">Description</th>
         <th class="px-4 py-3 text-left font-semibold">Use Case</th>
       </tr>
     </thead>
     <tbody class="text-kumo-strong">
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">inline</td>
         <td class="px-4 py-3 text-xs">Primary color with underline</td>
         <td class="px-4 py-3 text-xs">Default for inline text links</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">current</td>
         <td class="px-4 py-3 text-xs">
           Inherits parent text color with underline
@@ -227,7 +227,7 @@ export default function Example() {
           Links within colored contexts (alerts, errors)
         </td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">plain</td>
         <td class="px-4 py-3 text-xs">Primary color without underline</td>
         <td class="px-4 py-3 text-xs">Navigation links, menus, footers</td>
diff --git a/packages/kumo-docs-astro/src/pages/components/popover.mdx b/packages/kumo-docs-astro/src/pages/components/popover.mdx
index 6fe2503272..b3d0e2a1aa 100644
--- a/packages/kumo-docs-astro/src/pages/components/popover.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/popover.mdx
@@ -79,7 +79,7 @@ export default function Example() {
     different purpose than tooltips. Understanding when to use each is important
     for accessibility and user experience.
   </p>
-  <div class="overflow-hidden rounded-lg border border-kumo-line">
+  <div class="overflow-hidden rounded-lg border border-kumo-hairline">
     <table class="w-full text-sm">
       <thead class="bg-kumo-elevated">
         <tr>
@@ -88,7 +88,7 @@ export default function Example() {
           <th class="px-4 py-3 text-left font-semibold">Popover</th>
         </tr>
       </thead>
-      <tbody class="divide-y divide-kumo-line">
+      <tbody class="divide-y divide-kumo-hairline">
         <tr>
           <td class="px-4 py-3 font-medium">Purpose</td>
           <td class="px-4 py-3 text-kumo-subtle">
diff --git a/packages/kumo-docs-astro/src/pages/components/skeleton-line.mdx b/packages/kumo-docs-astro/src/pages/components/skeleton-line.mdx
index 0b8ae5186b..eac1de176e 100644
--- a/packages/kumo-docs-astro/src/pages/components/skeleton-line.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/skeleton-line.mdx
@@ -94,49 +94,49 @@ import { SkeletonLine } from "@cloudflare/kumo";
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <th class="px-4 py-3 text-left font-semibold">Prop</th>
           <th class="px-4 py-3 text-left font-semibold">Type</th>
           <th class="px-4 py-3 text-left font-semibold">Default</th>
         </tr>
       </thead>
       <tbody class="text-kumo-strong">
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">minWidth</td>
           <td class="px-4 py-3 font-mono text-xs">number</td>
           <td class="px-4 py-3 font-mono text-xs">30</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">maxWidth</td>
           <td class="px-4 py-3 font-mono text-xs">number</td>
           <td class="px-4 py-3 font-mono text-xs">100</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">minDuration</td>
           <td class="px-4 py-3 font-mono text-xs">number</td>
           <td class="px-4 py-3 font-mono text-xs">1.3</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">maxDuration</td>
           <td class="px-4 py-3 font-mono text-xs">number</td>
           <td class="px-4 py-3 font-mono text-xs">1.7</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">minDelay</td>
           <td class="px-4 py-3 font-mono text-xs">number</td>
           <td class="px-4 py-3 font-mono text-xs">0</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">maxDelay</td>
           <td class="px-4 py-3 font-mono text-xs">number</td>
           <td class="px-4 py-3 font-mono text-xs">0.5</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">blockHeight</td>
           <td class="px-4 py-3 font-mono text-xs">string | number</td>
           <td class="px-4 py-3 font-mono text-xs">-</td>
         </tr>
-        <tr class="border-b border-kumo-line">
+        <tr class="border-b border-kumo-hairline">
           <td class="px-4 py-3 font-mono text-xs">className</td>
           <td class="px-4 py-3 font-mono text-xs">string</td>
           <td class="px-4 py-3 font-mono text-xs">-</td>
diff --git a/packages/kumo-docs-astro/src/pages/components/tabs.mdx b/packages/kumo-docs-astro/src/pages/components/tabs.mdx
index 5db9cef132..d071ccb24f 100644
--- a/packages/kumo-docs-astro/src/pages/components/tabs.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/tabs.mdx
@@ -112,24 +112,24 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="px-4 py-3 text-left font-semibold">Property</th>
         <th class="px-4 py-3 text-left font-semibold">Type</th>
         <th class="px-4 py-3 text-left font-semibold">Required</th>
       </tr>
     </thead>
     <tbody class="text-kumo-subtle">
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">value</td>
         <td class="px-4 py-3 font-mono text-xs">string</td>
         <td class="px-4 py-3 font-mono text-xs">Yes</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">label</td>
         <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
         <td class="px-4 py-3 font-mono text-xs">Yes</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="px-4 py-3 font-mono text-xs">className</td>
         <td class="px-4 py-3 font-mono text-xs">string</td>
         <td class="px-4 py-3 font-mono text-xs">No</td>
diff --git a/packages/kumo-docs-astro/src/pages/components/toast.mdx b/packages/kumo-docs-astro/src/pages/components/toast.mdx
index 86d75d4eef..6ee5837b79 100644
--- a/packages/kumo-docs-astro/src/pages/components/toast.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/toast.mdx
@@ -218,7 +218,7 @@ toastManager.promise(asyncFn(), {
 <div class="overflow-x-auto">
   <table class="w-full text-left text-sm">
     <thead>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <th class="py-3 pr-4 font-semibold text-kumo-default">Prop</th>
         <th class="py-3 pr-4 font-semibold text-kumo-default">Type</th>
         <th class="py-3 pr-4 font-semibold text-kumo-default">Default</th>
@@ -226,19 +226,19 @@ toastManager.promise(asyncFn(), {
       </tr>
     </thead>
     <tbody class="text-kumo-subtle">
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="py-3 pr-4 font-mono text-kumo-default">title</td>
         <td class="py-3 pr-4 font-mono">string</td>
         <td class="py-3 pr-4">—</td>
         <td class="py-3">The toast title displayed prominently.</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="py-3 pr-4 font-mono text-kumo-default">description</td>
         <td class="py-3 pr-4 font-mono">string</td>
         <td class="py-3 pr-4">—</td>
         <td class="py-3">Secondary text displayed below the title.</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="py-3 pr-4 font-mono text-kumo-default">variant</td>
         <td class="py-3 pr-4 font-mono">
           "default" | "success" | "error" | "warning" | "info"
@@ -246,7 +246,7 @@ toastManager.promise(asyncFn(), {
         <td class="py-3 pr-4 font-mono">"default"</td>
         <td class="py-3">Visual style of the toast.</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="py-3 pr-4 font-mono text-kumo-default">content</td>
         <td class="py-3 pr-4 font-mono">ReactNode</td>
         <td class="py-3 pr-4">—</td>
@@ -255,13 +255,13 @@ toastManager.promise(asyncFn(), {
           description.
         </td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="py-3 pr-4 font-mono text-kumo-default">actions</td>
         <td class="py-3 pr-4 font-mono">ButtonProps[]</td>
         <td class="py-3 pr-4">—</td>
         <td class="py-3">Array of button props to render as action buttons.</td>
       </tr>
-      <tr class="border-b border-kumo-line">
+      <tr class="border-b border-kumo-hairline">
         <td class="py-3 pr-4 font-mono text-kumo-default">timeout</td>
         <td class="py-3 pr-4 font-mono">number</td>
         <td class="py-3 pr-4 font-mono">5000</td>
diff --git a/packages/kumo-docs-astro/src/pages/index.astro b/packages/kumo-docs-astro/src/pages/index.astro
index a7293f2bad..2a1a4c24ed 100644
--- a/packages/kumo-docs-astro/src/pages/index.astro
+++ b/packages/kumo-docs-astro/src/pages/index.astro
@@ -9,7 +9,7 @@ import { HomeGrid } from "../components/demos/HomeGrid";
     <Header />
     <main class="flex grow flex-col md:pr-12">
       <div
-        class="mx-auto w-full grow md:border-r md:border-kumo-line"
+        class="mx-auto w-full grow md:border-r md:border-kumo-hairline"
       >
         <HomeGrid client:only="react" />
       </div>
diff --git a/packages/kumo-docs-astro/src/pages/tests/flow.astro b/packages/kumo-docs-astro/src/pages/tests/flow.astro
index 8f55e11005..5165aaf14d 100644
--- a/packages/kumo-docs-astro/src/pages/tests/flow.astro
+++ b/packages/kumo-docs-astro/src/pages/tests/flow.astro
@@ -23,7 +23,7 @@ import {
     <section class="space-y-4">
       <h2 class="text-xl font-semibold text-kumo-default">FlowBasicDemo</h2>
       <p class="text-kumo-subtle">Basic flow diagram with sequential nodes</p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowBasicDemo client:visible />
       </div>
     </section>
@@ -31,7 +31,7 @@ import {
     <section class="space-y-4">
       <h2 class="text-xl font-semibold text-kumo-default">FlowParallelDemo</h2>
       <p class="text-kumo-subtle">Flow diagram with parallel branching</p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowParallelDemo client:visible />
       </div>
     </section>
@@ -43,7 +43,7 @@ import {
       <p class="text-kumo-subtle">
         Flow diagram with custom node styling using render prop
       </p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowCustomContentDemo client:visible />
       </div>
     </section>
@@ -51,7 +51,7 @@ import {
     <section class="space-y-4">
       <h2 class="text-xl font-semibold text-kumo-default">FlowComplexDemo</h2>
       <p class="text-kumo-subtle">Complex flow diagram example</p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowComplexDemo client:visible />
       </div>
     </section>
@@ -59,7 +59,7 @@ import {
     <section class="space-y-4">
       <h2 class="text-xl font-semibold text-kumo-default">FlowAnchorDemo</h2>
       <p class="text-kumo-subtle">Flow diagram with custom anchor points</p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowAnchorDemo client:visible />
       </div>
     </section>
@@ -69,7 +69,7 @@ import {
       <p class="text-kumo-subtle">
         Flow diagram with vertically centered nodes
       </p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowCenteredDemo client:visible />
       </div>
     </section>
@@ -77,7 +77,7 @@ import {
     <section class="space-y-4">
       <h2 class="text-xl font-semibold text-kumo-default">FlowPanningDemo</h2>
       <p class="text-kumo-subtle">Large flow diagram demonstrating panning</p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowPanningDemo client:visible />
       </div>
     </section>
@@ -85,7 +85,7 @@ import {
     <section class="space-y-4">
       <h2 class="text-xl font-semibold text-kumo-default">FlowDisabledDemo</h2>
       <p class="text-kumo-subtle">Flow diagram with disabled nodes</p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowDisabledDemo client:visible />
       </div>
     </section>
@@ -97,7 +97,7 @@ import {
       <p class="text-kumo-subtle">
         Flow diagram with right-aligned parallel nodes
       </p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowParallelAlignEndDemo client:visible />
       </div>
     </section>
@@ -109,7 +109,7 @@ import {
       <p class="text-kumo-subtle">
         Flow diagram with parallel branches containing nested node sequences
       </p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowParallelNestedListDemo client:visible />
       </div>
     </section>
@@ -121,7 +121,7 @@ import {
       <p class="text-kumo-subtle">
         Flow diagram with two parallel groups in sequence, back-to-back
       </p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowSequentialParallelDemo client:visible />
       </div>
     </section>
@@ -134,7 +134,7 @@ import {
         Flow diagram with expandable nodes in a parallel group — click a node to
         reveal more content
       </p>
-      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <FlowExpandableDemo client:visible />
       </div>
     </section>
diff --git a/packages/kumo-docs-astro/src/styles/global.css b/packages/kumo-docs-astro/src/styles/global.css
index 3336cb6e3d..1a87ad5563 100644
--- a/packages/kumo-docs-astro/src/styles/global.css
+++ b/packages/kumo-docs-astro/src/styles/global.css
@@ -44,17 +44,17 @@ html {
   --tw-prose-bold: var(--color-kumo-default);
   --tw-prose-counters: var(--color-kumo-subtle);
   --tw-prose-bullets: var(--color-kumo-strong);
-  --tw-prose-hr: var(--color-kumo-line);
+  --tw-prose-hr: var(--color-kumo-hairline);
   --tw-prose-quotes: var(--color-kumo-default);
-  --tw-prose-quote-borders: var(--color-kumo-line);
+  --tw-prose-quote-borders: var(--color-kumo-hairline);
   --tw-prose-captions: var(--color-kumo-subtle);
   --tw-prose-kbd: var(--color-kumo-default);
   --tw-prose-kbd-shadows: transparent;
   --tw-prose-code: var(--color-kumo-default);
   --tw-prose-pre-code: var(--color-kumo-default);
   --tw-prose-pre-bg: var(--color-kumo-canvas);
-  --tw-prose-th-borders: var(--color-kumo-line);
-  --tw-prose-td-borders: var(--color-kumo-line);
+  --tw-prose-th-borders: var(--color-kumo-hairline);
+  --tw-prose-td-borders: var(--color-kumo-hairline);
 
   /* Dark mode — same tokens, they auto-adapt via light-dark() */
   --tw-prose-invert-body: var(--color-kumo-strong);
@@ -64,17 +64,17 @@ html {
   --tw-prose-invert-bold: var(--color-kumo-default);
   --tw-prose-invert-counters: var(--color-kumo-subtle);
   --tw-prose-invert-bullets: var(--color-kumo-strong);
-  --tw-prose-invert-hr: var(--color-kumo-line);
+  --tw-prose-invert-hr: var(--color-kumo-hairline);
   --tw-prose-invert-quotes: var(--color-kumo-default);
-  --tw-prose-invert-quote-borders: var(--color-kumo-line);
+  --tw-prose-invert-quote-borders: var(--color-kumo-hairline);
   --tw-prose-invert-captions: var(--color-kumo-subtle);
   --tw-prose-invert-kbd: var(--color-kumo-default);
   --tw-prose-invert-kbd-shadows: transparent;
   --tw-prose-invert-code: var(--color-kumo-default);
   --tw-prose-invert-pre-code: var(--color-kumo-default);
   --tw-prose-invert-pre-bg: var(--color-kumo-canvas);
-  --tw-prose-invert-th-borders: var(--color-kumo-line);
-  --tw-prose-invert-td-borders: var(--color-kumo-line);
+  --tw-prose-invert-th-borders: var(--color-kumo-hairline);
+  --tw-prose-invert-td-borders: var(--color-kumo-hairline);
 }
 
 /* Inline code styling — match existing site style */
@@ -82,7 +82,7 @@ html {
   font-weight: 500;
   font-size: 0.875em;
   background-color: var(--color-kumo-base);
-  border: 1px solid var(--color-kumo-line);
+  border: 1px solid var(--color-kumo-hairline);
   border-radius: 0.25rem;
   padding: 0.125rem 0.375rem;
   font-family:
@@ -141,7 +141,7 @@ html {
 /* kbd styling */
 .kumo-prose :where(kbd) {
   background-color: var(--color-kumo-control);
-  border: 1px solid var(--color-kumo-line);
+  border: 1px solid var(--color-kumo-hairline);
   border-radius: 0.25rem;
   padding: 0.125rem 0.375rem;
   font-size: 0.875em;
@@ -158,7 +158,7 @@ html {
   width: 100%;
 }
 .kumo-prose :where(thead) {
-  border-bottom-color: var(--color-kumo-line);
+  border-bottom-color: var(--color-kumo-hairline);
 }
 .kumo-prose :where(thead th) {
   color: var(--color-kumo-default);
@@ -189,7 +189,7 @@ html {
 pre.astro-code {
   overflow: hidden;
   border-radius: 0.5rem;
-  border: 1px solid var(--color-kumo-line);
+  border: 1px solid var(--color-kumo-hairline);
   margin: 1rem 0;
 }
 
diff --git a/packages/kumo/scripts/theme-generator/config.ts b/packages/kumo/scripts/theme-generator/config.ts
index 845e07fd88..da91b4d389 100644
--- a/packages/kumo/scripts/theme-generator/config.ts
+++ b/packages/kumo/scripts/theme-generator/config.ts
@@ -313,7 +313,7 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         kumo: {
           light: "oklch(14.5% 0 0 / 0.1)",
-          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+          dark: "var(--color-kumo-neutral-750, oklch(32% 0 0))",
         },
       },
     },
@@ -322,7 +322,7 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         kumo: {
           light: "var(--color-kumo-neutral-150, oklch(93.5% 0 0))",
-          dark: "var(--color-neutral-700, oklch(37.1% 0 0))",
+          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
         },
         fedramp: {
           light: "#c8d4e5",
diff --git a/packages/kumo/src/components/button/button.tsx b/packages/kumo/src/components/button/button.tsx
index 191f96539d..2cb0d3a3eb 100644
--- a/packages/kumo/src/components/button/button.tsx
+++ b/packages/kumo/src/components/button/button.tsx
@@ -66,7 +66,7 @@ export const KUMO_BUTTON_VARIANTS = {
     },
     "secondary-destructive": {
       classes:
-        "bg-kumo-base !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base",
+        "bg-kumo-base !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base",
       description:
         "Secondary button with destructive text for less prominent dangerous actions",
     },
diff --git a/packages/kumo/src/components/checkbox/checkbox.tsx b/packages/kumo/src/components/checkbox/checkbox.tsx
index dc7bead55d..27838c08c7 100644
--- a/packages/kumo/src/components/checkbox/checkbox.tsx
+++ b/packages/kumo/src/components/checkbox/checkbox.tsx
@@ -262,7 +262,7 @@ const CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(
         onCheckedChange={handleCheckedChange}
         className={cn(
           "relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
-          variant === "error" ? "ring-kumo-danger" : "ring-kumo-line",
+          variant === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
           !disabled && "hover:ring-kumo-hairline focus-visible:ring-kumo-hairline",
           "data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast",
           disabled && "cursor-not-allowed opacity-50",
@@ -364,7 +364,7 @@ const CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(
           onCheckedChange={handleCheckedChange}
           className={cn(
             "peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
-            variant === "error" ? "ring-kumo-danger" : "ring-kumo-line",
+            variant === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
             !disabled &&
               "group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus-visible:ring-kumo-hairline",
             "data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast",
diff --git a/packages/kumo/src/components/clipboard-text/clipboard-text.tsx b/packages/kumo/src/components/clipboard-text/clipboard-text.tsx
index a2a34cf372..085958c02b 100644
--- a/packages/kumo/src/components/clipboard-text/clipboard-text.tsx
+++ b/packages/kumo/src/components/clipboard-text/clipboard-text.tsx
@@ -249,7 +249,7 @@ export const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(
         ref={buttonRef}
         size={sizeConfig.buttonSize}
         variant="ghost"
-        className="rounded-none border-l! border-kumo-line! px-3 relative overflow-hidden transition-all duration-200"
+        className="rounded-none border-l! border-kumo-hairline! px-3 relative overflow-hidden transition-all duration-200"
         onClick={copyToClipboard}
         aria-label={copyAction}
       >
diff --git a/packages/kumo/src/components/cloudflare-logo/cloudflare-logo.tsx b/packages/kumo/src/components/cloudflare-logo/cloudflare-logo.tsx
index c4f476d9b7..0e36f645b8 100644
--- a/packages/kumo/src/components/cloudflare-logo/cloudflare-logo.tsx
+++ b/packages/kumo/src/components/cloudflare-logo/cloudflare-logo.tsx
@@ -253,7 +253,7 @@ export const PoweredByCloudflare = forwardRef<
           "inline-flex items-center gap-2 rounded-lg py-2 pl-2.5 pr-3 text-sm font-medium",
           "ring-1 ring-inset transition-all hover:shadow-sm",
           // Color variants using semantic tokens
-          color === "color" && "bg-kumo-base text-kumo-default ring-kumo-line",
+          color === "color" && "bg-kumo-base text-kumo-default ring-kumo-hairline",
           color === "black" && "bg-white text-black ring-black/20",
           color === "white" && "bg-black text-white ring-white/20",
           className,
diff --git a/packages/kumo/src/components/combobox/combobox.tsx b/packages/kumo/src/components/combobox/combobox.tsx
index 31e10cdb94..8825766957 100644
--- a/packages/kumo/src/components/combobox/combobox.tsx
+++ b/packages/kumo/src/components/combobox/combobox.tsx
@@ -425,7 +425,7 @@ function Group(props: ComboboxBase.Group.Props) {
   return (
     <ComboboxBase.Group
       {...props}
-      className="border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0"
+      className="border-t border-kumo-hairline mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0"
     />
   );
 }
@@ -437,7 +437,7 @@ function Chip(props: ComboboxBase.Chip.Props) {
       className={cn(
         "flex items-center gap-2.5", // Layout
         "h-6 pl-2 pr-[3px]", // Dimensions
-        "rounded-sm ring-1 ring-kumo-line", // Border
+        "rounded-sm ring-1 ring-kumo-hairline", // Border
         "bg-kumo-overlay", // Background
         "text-sm", // Typography
       )}
diff --git a/packages/kumo/src/components/command-palette/command-palette.tsx b/packages/kumo/src/components/command-palette/command-palette.tsx
index 9ecae53675..ef5dfbd73b 100644
--- a/packages/kumo/src/components/command-palette/command-palette.tsx
+++ b/packages/kumo/src/components/command-palette/command-palette.tsx
@@ -278,7 +278,7 @@ const List = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "min-h-0 flex-1 overflow-y-auto rounded-b-lg bg-kumo-base px-2 py-2 ring-1 ring-kumo-line",
+        "min-h-0 flex-1 overflow-y-auto rounded-b-lg bg-kumo-base px-2 py-2 ring-1 ring-kumo-hairline",
         className,
       )}
     >
diff --git a/packages/kumo/src/components/dialog/dialog.tsx b/packages/kumo/src/components/dialog/dialog.tsx
index 17074134f5..2095398e04 100644
--- a/packages/kumo/src/components/dialog/dialog.tsx
+++ b/packages/kumo/src/components/dialog/dialog.tsx
@@ -142,7 +142,7 @@ export function dialogVariants({
 }: KumoDialogVariantsProps = {}) {
   return cn(
     // Base styles
-    "shadow-m fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
+    "shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
     // Apply size from KUMO_DIALOG_VARIANTS
     KUMO_DIALOG_VARIANTS.size[size].classes,
   );
diff --git a/packages/kumo/src/components/dropdown/dropdown.tsx b/packages/kumo/src/components/dropdown/dropdown.tsx
index f7ea7c394c..be65f9f012 100644
--- a/packages/kumo/src/components/dropdown/dropdown.tsx
+++ b/packages/kumo/src/components/dropdown/dropdown.tsx
@@ -364,7 +364,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-kumo-line", className)}
+    className={cn("-mx-1 my-1 h-px bg-kumo-hairline", className)}
     {...props}
   />
 ));
diff --git a/packages/kumo/src/components/flow/diagram.tsx b/packages/kumo/src/components/flow/diagram.tsx
index baf34de0bd..ae519d6b20 100644
--- a/packages/kumo/src/components/flow/diagram.tsx
+++ b/packages/kumo/src/components/flow/diagram.tsx
@@ -305,7 +305,7 @@ export function FlowDiagram({
 
         {/* Vertical scrollbar */}
         {canScrollY && (
-          <div className="absolute right-1 top-1 bottom-1 w-1.5 rounded-full bg-kumo-line/50 opacity-0 group-hover:opacity-100">
+          <div className="absolute right-1 top-1 bottom-1 w-1.5 rounded-full bg-kumo-hairline/50 opacity-0 group-hover:opacity-100">
             <motion.div
               className="absolute w-full rounded-full bg-kumo-fill"
               style={{
@@ -318,7 +318,7 @@ export function FlowDiagram({
 
         {/* Horizontal scrollbar */}
         {canScrollX && (
-          <div className="absolute bottom-1 left-1 right-1 h-1.5 rounded-full bg-kumo-line/50 opacity-0 group-hover:opacity-100">
+          <div className="absolute bottom-1 left-1 right-1 h-1.5 rounded-full bg-kumo-hairline/50 opacity-0 group-hover:opacity-100">
             <motion.div
               className="absolute h-full rounded-full bg-kumo-fill"
               style={{
diff --git a/packages/kumo/src/components/flow/flow.browser.test.tsx b/packages/kumo/src/components/flow/flow.browser.test.tsx
index 4d5d83a2fa..77b2937beb 100644
--- a/packages/kumo/src/components/flow/flow.browser.test.tsx
+++ b/packages/kumo/src/components/flow/flow.browser.test.tsx
@@ -309,7 +309,7 @@ const ExpandableNode = forwardRef<
     <li
       ref={ref}
       {...props}
-      className="rounded-lg bg-kumo-base ring ring-kumo-line overflow-hidden"
+      className="rounded-lg bg-kumo-base ring ring-kumo-hairline overflow-hidden"
     >
       <button
         type="button"
@@ -319,7 +319,7 @@ const ExpandableNode = forwardRef<
         {title}
       </button>
       {open && (
-        <div className="border-t border-kumo-line px-3 py-2 text-sm">
+        <div className="border-t border-kumo-hairline px-3 py-2 text-sm">
           {children}
         </div>
       )}
diff --git a/packages/kumo/src/components/grid/grid.tsx b/packages/kumo/src/components/grid/grid.tsx
index 83f0a6ac06..ca3700303d 100644
--- a/packages/kumo/src/components/grid/grid.tsx
+++ b/packages/kumo/src/components/grid/grid.tsx
@@ -159,7 +159,7 @@ export function gridItemVariants({
   return cn(
     mobileDivider &&
       variant === "4up" &&
-      "border-b border-kumo-line pb-8 md:border-b-0 md:pb-0",
+      "border-b border-kumo-hairline pb-8 md:border-b-0 md:pb-0",
   );
 }
 
diff --git a/packages/kumo/src/components/input/input-group.tsx b/packages/kumo/src/components/input/input-group.tsx
index e5fc3d7654..a620a8cfd1 100644
--- a/packages/kumo/src/components/input/input-group.tsx
+++ b/packages/kumo/src/components/input/input-group.tsx
@@ -69,7 +69,7 @@ function Root({
           "flex w-full gap-0 border-0 px-0",
           isIndividualFocus
             ? "isolate overflow-visible"
-            : "overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-hairline",
+            : "overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-line",
           className,
         )}
       >
@@ -111,7 +111,7 @@ function Input(props: InputProps) {
         "flex h-full items-center rounded-none border-0 bg-kumo-base font-sans",
         "grow px-2",
         isIndividualFocus
-          ? "relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline"
+          ? "relative ring ring-kumo-hairline first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline"
           : "focus:border-kumo-fill",
         props.className,
       )}
@@ -152,7 +152,7 @@ function Button({
       className={cn(
         "h-full! rounded-none disabled:bg-kumo-overlay disabled:text-kumo-inactive!",
         isIndividualFocus &&
-          "relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline",
+          "relative ring ring-kumo-hairline first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline",
         className,
       )}
     >
diff --git a/packages/kumo/src/components/input/input.tsx b/packages/kumo/src/components/input/input.tsx
index b810ee6c5b..c6c6f55ce3 100644
--- a/packages/kumo/src/components/input/input.tsx
+++ b/packages/kumo/src/components/input/input.tsx
@@ -106,7 +106,7 @@ export function inputVariants({
 }: KumoInputVariantsProps = {}) {
   return cn(
     // Base styles
-    "border-0 bg-kumo-control text-kumo-default ring ring-kumo-line",
+    "border-0 bg-kumo-control text-kumo-default ring ring-kumo-hairline",
     // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)
     "kumo-input-placeholder disabled:text-kumo-subtle",
     // Apply size styles from KUMO_INPUT_VARIANTS
diff --git a/packages/kumo/src/components/layer-card/layer-card.tsx b/packages/kumo/src/components/layer-card/layer-card.tsx
index 60b6f9d913..7e401cdcf9 100644
--- a/packages/kumo/src/components/layer-card/layer-card.tsx
+++ b/packages/kumo/src/components/layer-card/layer-card.tsx
@@ -14,7 +14,7 @@ export interface KumoLayerCardVariantsProps {}
 export function layerCardVariants(_props: KumoLayerCardVariantsProps = {}) {
   return cn(
     // Base styles
-    "flex w-full flex-col overflow-hidden rounded-lg bg-kumo-elevated text-base ring ring-kumo-line",
+    "flex w-full flex-col overflow-hidden rounded-lg bg-kumo-elevated text-base ring ring-kumo-hairline",
   );
 }
 
diff --git a/packages/kumo/src/components/menubar/menubar.tsx b/packages/kumo/src/components/menubar/menubar.tsx
index 7c25cf8c40..d8bb71e3ba 100644
--- a/packages/kumo/src/components/menubar/menubar.tsx
+++ b/packages/kumo/src/components/menubar/menubar.tsx
@@ -46,9 +46,9 @@ const MenuOption = ({
     <Tooltip content={tooltip} asChild>
       <button
         className={cn(
-          "focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-recessed first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-1 focus:outline-none focus-visible:z-1 focus-visible:inset-ring-[0.5]",
+          "focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-elevated first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-1 focus:outline-none focus-visible:z-1 focus-visible:inset-ring-[0.5]",
           {
-            "z-2 bg-kumo-base shadow-xs transition-colors": isActive === id,
+            "z-2 bg-kumo-base shadow-xs transition-colors ring ring-kumo-line/40": isActive === id,
           },
         )}
         onClick={onClick}
@@ -118,7 +118,7 @@ export const MenuBar = ({
   return (
     <nav
       className={cn(
-        "isolate flex rounded-lg border border-kumo-fill bg-kumo-recessed pl-px shadow-xs transition-colors",
+        "isolate flex rounded-lg ring ring-kumo-line bg-kumo-recessed pl-px shadow-xs transition-colors",
         className,
       )}
       ref={menuRef}
diff --git a/packages/kumo/src/components/pagination/pagination.tsx b/packages/kumo/src/components/pagination/pagination.tsx
index bf0c80be8e..ddab2e82c9 100644
--- a/packages/kumo/src/components/pagination/pagination.tsx
+++ b/packages/kumo/src/components/pagination/pagination.tsx
@@ -236,7 +236,7 @@ function PaginationControls({
             (pageSelector === "dropdown" ? (
               <Select
                 aria-label="Page number"
-                className="rounded-none ring-kumo-line"
+                className="rounded-none ring-kumo-hairline"
                 value={page}
                 onValueChange={(value) => {
                   const num = value as number;
@@ -324,7 +324,7 @@ function PaginationSeparator({ className }: PaginationSeparatorProps) {
   return (
     <div
       data-slot="pagination-separator"
-      className={cn("mx-2 h-6 border-l border-kumo-line", className)}
+      className={cn("mx-2 h-6 border-l border-kumo-hairline", className)}
     />
   );
 }
diff --git a/packages/kumo/src/components/radio/radio.tsx b/packages/kumo/src/components/radio/radio.tsx
index 70f8c9eb0f..9e3b79e92a 100644
--- a/packages/kumo/src/components/radio/radio.tsx
+++ b/packages/kumo/src/components/radio/radio.tsx
@@ -8,7 +8,7 @@ import { Radio as BaseRadio } from "@base-ui/react/radio";
 export const KUMO_RADIO_VARIANTS = {
   variant: {
     default: {
-      classes: "ring-kumo-line",
+      classes: "ring-kumo-hairline",
       description: "Default radio appearance",
     },
     error: {
@@ -263,7 +263,7 @@ const RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(
             disabled={disabled}
             className={cn(
               "relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring",
-              variant === "error" ? "ring-kumo-danger" : "ring-kumo-line",
+              variant === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
               !disabled &&
                 variant !== "error" &&
                 "group-hover:ring-kumo-hairline focus-visible:ring-kumo-hairline focus-visible:outline-offset-3",
@@ -301,7 +301,7 @@ const RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(
           disabled={disabled}
           className={cn(
             "relative flex h-4 w-4 items-center justify-center rounded-full border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
-            variant === "error" ? "ring-kumo-danger" : "ring-kumo-line",
+            variant === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
             !disabled &&
               variant !== "error" &&
               "group-hover:ring-kumo-hairline focus-visible:ring-kumo-hairline focus-visible:outline-offset-3",
diff --git a/packages/kumo/src/components/select/select.test.tsx b/packages/kumo/src/components/select/select.test.tsx
index 6612503ef0..085b201c9c 100644
--- a/packages/kumo/src/components/select/select.test.tsx
+++ b/packages/kumo/src/components/select/select.test.tsx
@@ -470,7 +470,7 @@ describe("Select", () => {
       // Separator is inside the portaled popup — query from document
       const separator = document.querySelector('[role="separator"]');
       expect(separator).toBeTruthy();
-      expect(separator?.className).toContain("bg-kumo-line");
+      expect(separator?.className).toContain("bg-kumo-hairline");
     });
 
     it("renders multiple groups with separators", async () => {
diff --git a/packages/kumo/src/components/select/select.tsx b/packages/kumo/src/components/select/select.tsx
index 515e9a6de5..b0033e641e 100644
--- a/packages/kumo/src/components/select/select.tsx
+++ b/packages/kumo/src/components/select/select.tsx
@@ -394,7 +394,7 @@ export function Select<T, Multiple extends boolean | undefined = false>({
             className={cn(
               "flex flex-col",
               "max-h-[var(--available-height)] bg-kumo-base text-kumo-default",
-              "rounded-lg shadow-lg ring ring-kumo-hairline",
+              "rounded-lg shadow-lg ring ring-kumo-line",
               "min-w-[calc(var(--anchor-width)+3px)] py-1.5",
             )}
           >
@@ -576,7 +576,7 @@ const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
   ({ className }, ref) => (
     <SelectBase.Separator
       ref={ref}
-      className={cn("-mx-1 my-1 h-px bg-kumo-line", className)}
+      className={cn("-mx-1 my-1 h-px bg-kumo-hairline", className)}
     />
   ),
 );
diff --git a/packages/kumo/src/components/sidebar/sidebar.tsx b/packages/kumo/src/components/sidebar/sidebar.tsx
index 8e8b298146..5af14ffd02 100644
--- a/packages/kumo/src/components/sidebar/sidebar.tsx
+++ b/packages/kumo/src/components/sidebar/sidebar.tsx
@@ -389,10 +389,10 @@ const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(
             "relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-kumo-base text-kumo-default",
             variant === "sidebar" &&
               (side === "left"
-                ? "border-r border-kumo-line"
-                : "border-l border-kumo-line"),
+                ? "border-r border-kumo-hairline"
+                : "border-l border-kumo-hairline"),
             variant === "floating" &&
-              "m-2 rounded-lg border border-kumo-line shadow-lg",
+              "m-2 rounded-lg border border-kumo-hairline shadow-lg",
             className,
           )}
           {...props}
@@ -469,10 +469,10 @@ const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(
           isResizing && "transition-none!",
           variant === "sidebar" &&
             (side === "left"
-              ? "border-r border-kumo-line"
-              : "border-l border-kumo-line"),
+              ? "border-r border-kumo-hairline"
+              : "border-l border-kumo-hairline"),
           variant === "floating" &&
-            "m-2 rounded-lg border border-kumo-line shadow-lg",
+            "m-2 rounded-lg border border-kumo-hairline shadow-lg",
           className,
         )}
         {...props}
@@ -511,7 +511,7 @@ const SidebarHeader = forwardRef<
     ref={ref}
     data-sidebar="header"
     className={cn(
-      "flex items-center gap-2 border-b border-kumo-line px-2 py-3",
+      "flex items-center gap-2 border-b border-kumo-hairline px-2 py-3",
       "overflow-hidden",
       // Collapsed: just remove border, keep same height
       "group-data-[state=collapsed]/sidebar:border-b-0",
@@ -580,7 +580,7 @@ const SidebarFooter = forwardRef<
     ref={ref}
     data-sidebar="footer"
     className={cn(
-      "flex min-w-0 flex-col gap-2 border-t border-kumo-line px-2 py-2",
+      "flex min-w-0 flex-col gap-2 border-t border-kumo-hairline px-2 py-2",
       // Collapsed: remove border, tighten padding
       "group-data-[state=collapsed]/sidebar:border-t-0 group-data-[state=collapsed]/sidebar:py-1",
       className,
@@ -1183,7 +1183,7 @@ const SidebarMenuBadge = forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "inline-flex shrink-0 items-center rounded-full border border-dashed border-kumo-line",
+      "inline-flex shrink-0 items-center rounded-full border border-dashed border-kumo-hairline",
       "select-none px-1.5 py-0.5 text-[11px]/none font-medium text-kumo-strong",
       // Hidden when collapsed
       "group-data-[state=collapsed]/sidebar:hidden",
@@ -1221,7 +1221,7 @@ const SidebarMenuSub = forwardRef<
     ref={ref}
     data-sidebar="menu-sub"
     className={cn(
-      "m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-kumo-line p-0 pl-2.5",
+      "m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-kumo-hairline p-0 pl-2.5",
       // Hidden when collapsed
       "group-data-[state=collapsed]/sidebar:hidden",
       className,
@@ -1365,7 +1365,7 @@ const SidebarSeparator = forwardRef<
   <hr
     ref={ref}
     data-sidebar="separator"
-    className={cn("mx-2 min-h-px h-px border-0 bg-kumo-line", className)}
+    className={cn("mx-2 min-h-px h-px border-0 bg-kumo-hairline", className)}
     {...props}
   />
 ));
@@ -1402,7 +1402,7 @@ const SidebarInput = forwardRef<HTMLButtonElement, SidebarInputProps>(
       data-sidebar="input"
       className={cn(
         "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm",
-        "bg-kumo-base text-kumo-subtle ring ring-kumo-line",
+        "bg-kumo-base text-kumo-subtle ring ring-kumo-hairline",
         "transition-[color,background-color,padding,box-shadow] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]",
         "hover:bg-kumo-overlay",
         // Collapsed: icon-only, padding centers icon, ring fades via box-shadow transition
diff --git a/packages/kumo/src/components/switch/switch.tsx b/packages/kumo/src/components/switch/switch.tsx
index 61558b3193..388bc64e06 100644
--- a/packages/kumo/src/components/switch/switch.tsx
+++ b/packages/kumo/src/components/switch/switch.tsx
@@ -247,7 +247,7 @@ const SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(
           const trackColors = isNeutral
             ? state.checked
               ? "bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700"
-              : "bg-neutral-150 dark:bg-kumo-base ring-kumo-line"
+              : "bg-neutral-150 dark:bg-kumo-base ring-kumo-hairline"
             : state.checked
               ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500"
               : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600";
@@ -397,7 +397,7 @@ const SwitchItem = forwardRef<HTMLButtonElement, SwitchItemProps>(
             const trackColors = isNeutral
               ? state.checked
                 ? "bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700"
-                : "bg-neutral-150 dark:bg-kumo-base ring-kumo-line"
+                : "bg-neutral-150 dark:bg-kumo-base ring-kumo-hairline"
               : state.checked
                 ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500"
                 : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600";
@@ -474,7 +474,7 @@ function SwitchGroup({
     <SwitchGroupContext.Provider value={{ controlFirst }}>
       <Fieldset.Root
         className={cn(
-          "flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
+          "flex flex-col gap-4 rounded-lg border border-kumo-hairline p-4",
           className,
         )}
         disabled={disabled}
diff --git a/packages/kumo/src/components/tabs/tabs.tsx b/packages/kumo/src/components/tabs/tabs.tsx
index 50bfceade5..4de7baf619 100644
--- a/packages/kumo/src/components/tabs/tabs.tsx
+++ b/packages/kumo/src/components/tabs/tabs.tsx
@@ -157,7 +157,7 @@ export function Tabs({
         activateOnFocus={activateOnFocus}
         className={cn(
           "scrollbar-hide relative flex min-w-0 shrink items-stretch",
-          isSegmented && "h-9 rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-line/70",
+          isSegmented && "h-9 rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70",
           isUnderline && "h-7 gap-4 border-b border-kumo-hairline pb-2",
           listClassName,
         )}
@@ -188,7 +188,7 @@ export function Tabs({
                 "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200",
                 "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
                 isSegmented &&
-                  "top-(--active-tab-top) h-(--active-tab-height) rounded-md bg-kumo-base shadow-sm ring ring-kumo-hairline",
+                  "top-(--active-tab-top) h-(--active-tab-height) rounded-md bg-kumo-base shadow-sm ring ring-kumo-line",
                 isUnderline && "bottom-0 h-0.5 bg-kumo-brand",
                 indicatorClassName,
               )}
diff --git a/packages/kumo/src/components/toast/toast.tsx b/packages/kumo/src/components/toast/toast.tsx
index 39299fa5fc..3d69fce509 100644
--- a/packages/kumo/src/components/toast/toast.tsx
+++ b/packages/kumo/src/components/toast/toast.tsx
@@ -124,7 +124,7 @@ export function toastVariants({
 }: KumoToastVariantsProps = {}) {
   return cn(
     // Base styles for toast root
-    "rounded-xl ring ring-kumo-hairline bg-clip-padding p-4 shadow-lg",
+    "rounded-xl ring ring-kumo-line bg-clip-padding p-4 shadow-lg",
     // Apply variant styles from KUMO_TOAST_VARIANTS
     KUMO_TOAST_VARIANTS.variant[variant].classes,
   );
diff --git a/packages/kumo/src/styles/kumo-binding.css b/packages/kumo/src/styles/kumo-binding.css
index bb56b0e9fb..cdb337418b 100644
--- a/packages/kumo/src/styles/kumo-binding.css
+++ b/packages/kumo/src/styles/kumo-binding.css
@@ -16,6 +16,7 @@
   --color-kumo-neutral-75: oklch(98% 0 0);
   --color-kumo-neutral-125: oklch(96.5% 0 0);
   --color-kumo-neutral-450: oklch(89% 0 0);
+  --color-kumo-neutral-750: oklch(32% 0 0);
   --color-kumo-neutral-850: oklch(24% 0 0);
   --color-kumo-neutral-925: oklch(17% 0 0);
   --color-kumo-neutral-950: oklch(15% 0 0);
diff --git a/packages/kumo/src/styles/theme-kumo.css b/packages/kumo/src/styles/theme-kumo.css
index a63ff36fb7..0b7119fc9c 100644
--- a/packages/kumo/src/styles/theme-kumo.css
+++ b/packages/kumo/src/styles/theme-kumo.css
@@ -158,12 +158,12 @@
 
   --color-kumo-line: light-dark(
     oklch(14.5% 0 0 / 0.1),
-    var(--color-neutral-800, oklch(26.9% 0 0))
+    var(--color-kumo-neutral-750, oklch(32% 0 0))
   );
 
   --color-kumo-hairline: light-dark(
     var(--color-kumo-neutral-150, oklch(93.5% 0 0)),
-    var(--color-neutral-700, oklch(37.1% 0 0))
+    var(--color-neutral-800, oklch(26.9% 0 0))
   );
 
   --color-kumo-shadow-edge: light-dark(
@@ -377,8 +377,8 @@
     --color-kumo-fill-hover: var(--color-neutral-800, oklch(37.1% 0 0));
     --color-kumo-brand: oklch(0.5772 0.2324 260);
     --color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376));
-    --color-kumo-line: var(--color-neutral-800, oklch(26.9% 0 0));
-    --color-kumo-hairline: var(--color-neutral-700, oklch(37.1% 0 0));
+    --color-kumo-line: var(--color-kumo-neutral-750, oklch(32% 0 0));
+    --color-kumo-hairline: var(--color-neutral-800, oklch(26.9% 0 0));
     --color-kumo-shadow-edge: oklch(100% 0 0 / 0.1);
     --color-kumo-shadow-drop: oklch(0% 0 0 / 0.3);
     --color-kumo-tip-shadow: transparent;