diff --git a/.changeset/deprecate-kumo-hairline.md b/.changeset/deprecate-kumo-hairline.md
new file mode 100644
index 0000000000..1d96bbe047
--- /dev/null
+++ b/.changeset/deprecate-kumo-hairline.md
@@ -0,0 +1,9 @@
+---
+"@cloudflare/kumo": minor
+---
+
+Deprecate `kumo-hairline` token in favor of `kumo-line`.
+
+The `kumo-line` token has been redefined to use 10% black in light mode and 10% white in dark mode, unifying the two former border/ring tokens into a single semantic token. All internal usage has been migrated from `kumo-hairline` to `kumo-line`.
+
+For backwards compatibility, `--color-kumo-hairline` is kept as a CSS alias for `--color-kumo-line`. Existing consumers using `bg-kumo-hairline`, `border-kumo-hairline`, `ring-kumo-hairline`, etc. will continue to work but should migrate to the `kumo-line` equivalents. The alias will be removed in the next major release.
diff --git a/AGENTS.md b/AGENTS.md
index 9d0b5529ad..fd9a04a040 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -39,7 +39,7 @@ kumo/
 
 ### Styling (CRITICAL)
 
-- **ONLY semantic tokens**: `bg-kumo-base`, `text-kumo-default`, `border-kumo-line`, `ring-kumo-hairline`
+- **ONLY semantic tokens**: `bg-kumo-base`, `text-kumo-default`, `border-kumo-line`, `ring-kumo-line`
 - **NEVER raw Tailwind colors**: `bg-blue-500`, `text-gray-900` → fails lint
 - **NEVER `dark:` variant**: dark mode automatic via `light-dark()` in CSS custom properties
 - **Exceptions**: `bg-white`, `bg-black`, `text-white`, `text-black`, `transparent`
diff --git a/lint/no-primitive-colors.js b/lint/no-primitive-colors.js
index 1bb1a180c6..372417c841 100644
--- a/lint/no-primitive-colors.js
+++ b/lint/no-primitive-colors.js
@@ -11,7 +11,7 @@ const INVALID_TOKEN_RULE = "invalid-color-token";
 
 // We want to enforce use of Kumo semantic color tokens `--color-kumo-*`.
 // Any Tailwind color utility (e.g. `bg-blue-500`) or legacy semantic
-// utility (e.g. `bg-kumo-hairline`, `text-kumo-default`) in class strings should be
+// utility (e.g. `bg-kumo-line`, `text-kumo-default`) in class strings should be
 // replaced by semantic tokens / component APIs.
 
 // Matches Tailwind-like color utilities in class strings.
diff --git a/packages/kumo-docs-astro/src/components/Header.astro b/packages/kumo-docs-astro/src/components/Header.astro
index 8da1ec2971..07cbd05460 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-hairline bg-kumo-canvas hidden lg:flex"
+  class="sticky top-0 z-10 h-12 border-b border-kumo-line bg-kumo-canvas hidden lg:flex"
 >
   <div
-    class="flex min-w-0 flex-1 items-center justify-end border-r border-kumo-hairline px-4"
+    class="flex min-w-0 flex-1 items-center justify-end border-r border-kumo-line 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 a61334f79c..ae53bdee00 100644
--- a/packages/kumo-docs-astro/src/components/SearchDialog.tsx
+++ b/packages/kumo-docs-astro/src/components/SearchDialog.tsx
@@ -574,28 +574,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-hairline bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
               ↑
             </kbd>
-            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-line 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-hairline bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-line 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-hairline bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-line 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-hairline bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-line 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 8536742e8c..f967ee5236 100644
--- a/packages/kumo-docs-astro/src/components/SidebarNav.tsx
+++ b/packages/kumo-docs-astro/src/components/SidebarNav.tsx
@@ -213,7 +213,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 focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:ring-inset"
+        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-line focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:ring-inset"
       >
         <MagnifyingGlassIcon size={16} className="shrink-0" />
         <span>Search...</span>
@@ -236,7 +236,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
         ))}
       </ul>
 
-      <div className="my-4 border-b border-kumo-hairline" />
+      <div className="my-4 border-b border-kumo-line" />
 
       <div className="mb-4">
         {/* Components Section */}
@@ -366,7 +366,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-hairline bg-kumo-canvas px-3 md:px-6 lg:hidden",
+          "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:px-6 lg:hidden",
         )}
       >
         <Button
@@ -384,12 +384,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-hairline bg-kumo-canvas lg:hidden",
+          "fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-kumo-line bg-kumo-canvas lg: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-hairline px-3">
+        <div className="flex h-12 flex-none items-center justify-between border-b border-kumo-line px-3">
           <h1 className="text-base font-medium">Kumo</h1>
           <Button
             variant="ghost"
@@ -414,10 +414,10 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
       <div
         className={cn(
           "fixed inset-y-0 left-0 z-50 hidden w-12 bg-kumo-canvas lg:block",
-          "border-r border-kumo-hairline",
+          "border-r border-kumo-line",
         )}
       >
-        <div className="relative h-12 border-b border-kumo-hairline">
+        <div className="relative h-12 border-b border-kumo-line">
           <div className="absolute inset-0 grid place-items-center">
             <Button
               variant="ghost"
@@ -444,11 +444,11 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
           "fixed inset-y-0 left-12 z-40 hidden w-64 flex-col bg-kumo-canvas lg:flex",
           "transition-transform duration-300 ease-out will-change-transform",
           sidebarOpen
-            ? "translate-x-0 border-r border-kumo-hairline"
+            ? "translate-x-0 border-r border-kumo-line"
             : "-translate-x-full",
         )}
       >
-        <div className="h-12 flex-none border-b border-kumo-hairline" />
+        <div className="h-12 flex-none border-b border-kumo-line" />
 
         <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 54dcfa593b..36ac8adf69 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-hairline bg-kumo-elevated">
+<div class="rounded-lg border border-kumo-line 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-hairline 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-line 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-hairline border-t bg-kumo-base p-2">
+  <div class="border-kumo-line 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 6af9c3033d..564a0b0fa7 100644
--- a/packages/kumo-docs-astro/src/components/demos/Chart/ChartDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/Chart/ChartDemo.tsx
@@ -408,7 +408,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-hairline">
+      <div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
         <ChartLegend.LargeItem
           name="Requests"
           color={ChartPalette.semantic("Neutral", isDarkMode)}
@@ -430,7 +430,7 @@ export function LegendDefaultDemo() {
 
       <h3 className="mt-12 text-sm font-medium">Inactive State</h3>
 
-      <div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
+      <div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
         <ChartLegend.LargeItem
           name="Requests"
           color={ChartPalette.semantic("Neutral", isDarkMode)}
@@ -455,7 +455,7 @@ export function LegendDefaultDemo() {
 
       <h3 className="mt-12 text-sm font-medium">Loading state</h3>
 
-      <div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
+      <div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
         <ChartLegend.LargeItem loading />
       </div>
     </div>
@@ -688,7 +688,7 @@ export function ChartExampleDemo() {
     <LayerCard>
       <LayerCard.Secondary>Read latency</LayerCard.Secondary>
       <LayerCard.Primary>
-        <div className="mb-2 flex gap-4 divide-x divide-kumo-hairline px-2">
+        <div className="mb-2 flex gap-4 divide-x divide-kumo-line px-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 37dccc08fd..79ecf73d74 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-hairline bg-kumo-elevated px-6 py-4">
+    <footer className="flex w-full items-center justify-between rounded-lg border border-kumo-line 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 867b2cd689..dab0b3ec52 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-hairline bg-kumo-elevated p-4">
+        <div className="flex flex-wrap gap-6 rounded-md border border-kumo-line 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 ecd44d256a..2267908d5c 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-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-line 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-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
               ↵
             </kbd>
             <span>Select</span>
@@ -431,13 +431,13 @@ export function CommandPaletteResultItemDemo() {
         </CommandPalette.List>
         <CommandPalette.Footer>
           <span className="flex items-center gap-2">
-            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-line 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-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-line 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 bbbf1cf55c..6d62ffed71 100644
--- a/packages/kumo-docs-astro/src/components/demos/DatePickerDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/DatePickerDemo.tsx
@@ -230,7 +230,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-hairline p-2 text-sm">
+          <div className="flex flex-col gap-1 border-r border-kumo-line p-2 text-sm">
             {presets.map((preset) => {
               const isActive = isPresetActive(preset);
               return (
diff --git a/packages/kumo-docs-astro/src/components/demos/DialogDemo.tsx b/packages/kumo-docs-astro/src/components/demos/DialogDemo.tsx
index 105830716f..91eea74dda 100644
--- a/packages/kumo-docs-astro/src/components/demos/DialogDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/DialogDemo.tsx
@@ -447,7 +447,7 @@ export function DialogSizesDemo() {
                     <th className="px-3 py-2">Last Deployed</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-kumo-hairline">
+                <tbody className="divide-y divide-kumo-line">
                   <tr>
                     <td className="px-3 py-2">api-gateway-prod</td>
                     <td className="px-3 py-2">us-east-1</td>
diff --git a/packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx b/packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx
index fe24f31177..234f4e361d 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="overflow-hidden rounded-lg bg-kumo-base shadow ring ring-kumo-hairline"
+      className="overflow-hidden rounded-lg bg-kumo-base shadow ring ring-kumo-line"
     >
       <button
         type="button"
@@ -24,7 +24,7 @@ const ExpandableNode = forwardRef<
         />
       </button>
       {open && (
-        <div className="border-t border-kumo-hairline px-3 py-2 text-sm text-kumo-subtle">
+        <div className="border-t border-kumo-line px-3 py-2 text-sm text-kumo-subtle">
           {children}
         </div>
       )}
@@ -92,7 +92,7 @@ export function FlowCustomContentDemo() {
   return (
     <Flow>
       <Flow.Node
-        render={<li className="size-4 rounded-full bg-kumo-hairline" />}
+        render={<li className="size-4 rounded-full bg-kumo-line" />}
       />
       <Flow.Node
         render={
@@ -131,7 +131,7 @@ export function FlowAnchorDemo() {
       <Flow.Node>Load balancer</Flow.Node>
       <Flow.Node
         render={
-          <li className="rounded-lg bg-kumo-overlay shadow-none ring ring-kumo-hairline">
+          <li className="rounded-lg bg-kumo-overlay shadow-none ring ring-kumo-line">
             <Flow.Anchor
               type="end"
               render={
@@ -143,7 +143,7 @@ export function FlowAnchorDemo() {
             <Flow.Anchor
               type="start"
               render={
-                <div className="m-1.5 mt-0 rounded bg-kumo-base px-2 py-1.5 shadow ring ring-kumo-hairline">
+                <div className="m-1.5 mt-0 rounded bg-kumo-base px-2 py-1.5 shadow ring ring-kumo-line">
                   Bindings
                   <span className="ml-3 w-5 text-kumo-subtle">2</span>
                 </div>
@@ -165,12 +165,12 @@ export function FlowCenteredDemo() {
   return (
     <Flow align="center">
       <Flow.Node
-        render={<li className="size-4 rounded-full bg-kumo-hairline" />}
+        render={<li className="size-4 rounded-full bg-kumo-line" />}
       />
       <Flow.Node>my-worker</Flow.Node>
       <Flow.Node
         render={
-          <li className="rounded-md bg-kumo-base px-3 py-6 shadow ring ring-kumo-hairline">
+          <li className="rounded-md bg-kumo-base px-3 py-6 shadow ring ring-kumo-line">
             Taller node
           </li>
         }
@@ -182,7 +182,7 @@ export function FlowCenteredDemo() {
 /** Large flow diagram demonstrating panning */
 export function FlowPanningDemo() {
   return (
-    <Flow className="rounded-lg border border-kumo-hairline">
+    <Flow className="rounded-lg border border-kumo-line">
       <Flow.Node>Start</Flow.Node>
       <Flow.Node>Authenticate</Flow.Node>
       <Flow.Node>Validate</Flow.Node>
diff --git a/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx b/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
index d1d099dbac..9ec78caa9a 100644
--- a/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
@@ -719,7 +719,7 @@ export function HomeGrid() {
   ];
 
   return (
-    <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">
+    <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">
       {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 c3f3d4fce0..ad5edf1937 100644
--- a/packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx
@@ -56,8 +56,7 @@ const wpThemeStyles = `
   --color-kumo-interact: #c3c4c7;
 
   /* WP borders — very subtle gray */
-  --color-kumo-hairline: #c3c4c7;
-  --color-kumo-hairline: #2271b1;
+  --color-kumo-line: #2271b1;
 
   /* WP text hierarchy */
   --text-color-kumo-default: #1d2327;
@@ -300,7 +299,7 @@ function WPTopBar({
   onToggleDarkMode: () => void;
 }) {
   return (
-    <div className="flex h-[48px] items-center justify-between border-b border-kumo-hairline bg-kumo-elevated px-4">
+    <div className="flex h-[48px] items-center justify-between border-b border-kumo-line 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 +417,7 @@ export function KumoPressDemo() {
       <div
         data-theme="wordpress"
         data-mode={darkMode ? "dark" : undefined}
-        className="flex h-[720px] overflow-hidden rounded-xl border border-kumo-hairline bg-kumo-elevated font-sans shadow-lg"
+        className="flex h-[720px] overflow-hidden rounded-xl border border-kumo-line bg-kumo-elevated font-sans shadow-lg"
       >
         {/* Sidebar */}
         <div
diff --git a/packages/kumo-docs-astro/src/components/demos/LayerCardFilterMockupDemo.tsx b/packages/kumo-docs-astro/src/components/demos/LayerCardFilterMockupDemo.tsx
index 8fa904eeac..f6aa6c406b 100644
--- a/packages/kumo-docs-astro/src/components/demos/LayerCardFilterMockupDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/LayerCardFilterMockupDemo.tsx
@@ -70,7 +70,7 @@ export function LayerCardFilterSubrequestsDemo() {
           {filtered.map((row, i) => (
             <div
               key={row.origin}
-              className={`grid grid-cols-[1fr_auto_auto] items-center gap-x-4 px-1 py-2.5 ${i < filtered.length - 1 ? "border-b border-kumo-hairline" : ""}`}
+              className={`grid grid-cols-[1fr_auto_auto] items-center gap-x-4 px-1 py-2.5 ${i < filtered.length - 1 ? "border-b border-kumo-line" : ""}`}
             >
               <span className="truncate font-medium text-kumo-default">
                 {row.origin}
diff --git a/packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx b/packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx
index b33afd6e6a..586ca4620f 100644
--- a/packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx
@@ -113,7 +113,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-hairline pt-3">
+        <div className="mt-3 flex gap-2 border-t border-kumo-line pt-3">
           <Button variant="secondary" size="sm" className="flex-1">
             Profile
           </Button>
@@ -176,7 +176,7 @@ export function PopoverVirtualAnchorDemo() {
 
   return (
     <div className="w-full">
-      <div className="overflow-hidden rounded-lg border border-kumo-hairline">
+      <div className="overflow-hidden rounded-lg border border-kumo-line">
         <table className="w-full text-sm">
           <thead className="bg-kumo-elevated">
             <tr>
@@ -185,7 +185,7 @@ export function PopoverVirtualAnchorDemo() {
               <th className="w-12 px-4 py-2"></th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-kumo-hairline">
+          <tbody className="divide-y divide-kumo-line">
             {rows.map((row) => (
               <tr
                 key={row.id}
diff --git a/packages/kumo-docs-astro/src/components/demos/RegistryDemo.tsx b/packages/kumo-docs-astro/src/components/demos/RegistryDemo.tsx
index 1571642912..cbb2ef86f4 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-hairline bg-kumo-base">
+    <div className="rounded-lg border border-kumo-line bg-kumo-base">
       <button
         type="button"
         onClick={onToggle}
@@ -67,7 +67,7 @@ const ComponentCard: FC<{
       </button>
 
       {isExpanded && (
-        <div className="border-t border-kumo-hairline p-4">
+        <div className="border-t border-kumo-line p-4">
           {/* Import */}
           <div className="mb-4">
             <h4 className="mb-2 text-xs font-medium text-kumo-subtle uppercase">
@@ -182,19 +182,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-hairline bg-kumo-base px-4 py-2">
+        <div className="rounded-lg border border-kumo-line 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-hairline bg-kumo-base px-4 py-2">
+        <div className="rounded-lg border border-kumo-line 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-hairline bg-kumo-base px-4 py-2">
+        <div className="rounded-lg border border-kumo-line bg-kumo-base px-4 py-2">
           <span className="text-kumo-subtle">v</span>
           <span className="font-semibold text-kumo-default">
             {registry.version}
diff --git a/packages/kumo-docs-astro/src/components/demos/SidebarDemo.tsx b/packages/kumo-docs-astro/src/components/demos/SidebarDemo.tsx
index 0a6fc9e55a..3f09c9d345 100644
--- a/packages/kumo-docs-astro/src/components/demos/SidebarDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/SidebarDemo.tsx
@@ -119,7 +119,7 @@ function initialsFor(name: string) {
 }
 
 /**
- * Squircle avatar with a hairline ring, so it sits on the surface rather than
+ * Squircle avatar with a thin ring, so it sits on the surface rather than
  * floating. Muted neutral fill. Reads as an identity
  * affordance rather than decoration. Sized to the header row rather than to
  * iOS touch-target minimums — the whole row is generous, and an oversized mark
diff --git a/packages/kumo-docs-astro/src/components/demos/SkeletonLineDemo.tsx b/packages/kumo-docs-astro/src/components/demos/SkeletonLineDemo.tsx
index 471b9439c9..2289fb1826 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-hairline">
+    <div className="w-64 rounded-lg p-4 ring ring-kumo-line">
       <div className="mb-4 h-4">
         <SkeletonLine minWidth={40} maxWidth={60} />
       </div>
diff --git a/packages/kumo-docs-astro/src/components/demos/TableOfContentsDemo.tsx b/packages/kumo-docs-astro/src/components/demos/TableOfContentsDemo.tsx
index 538906fb61..c773d8c3ee 100644
--- a/packages/kumo-docs-astro/src/components/demos/TableOfContentsDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/TableOfContentsDemo.tsx
@@ -182,7 +182,7 @@ export function TableOfContentsScrollspyDemo() {
       </div>
       <div
         ref={setRoot}
-        className="h-64 flex-1 overflow-y-auto rounded-lg border border-kumo-hairline p-4"
+        className="h-64 flex-1 overflow-y-auto rounded-lg border border-kumo-line p-4"
       >
         {scrollspySections.map((section) => (
           <section key={section.id}>
diff --git a/packages/kumo-docs-astro/src/components/demos/TextDemo.tsx b/packages/kumo-docs-astro/src/components/demos/TextDemo.tsx
index 16ec180b71..08e23ffe16 100644
--- a/packages/kumo-docs-astro/src/components/demos/TextDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/TextDemo.tsx
@@ -3,67 +3,67 @@ 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-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text variant="heading1" as="h1">
           Heading 1
         </Text>
         <Text variant="mono-secondary">text-3xl (30px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text variant="heading2" as="h2">
           Heading 2
         </Text>
         <Text variant="mono-secondary">text-2xl (24px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text variant="heading3" as="h3">
           Heading 3
         </Text>
         <Text variant="mono-secondary">text-lg (16px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text>Body</Text>
         <Text variant="mono-secondary">text-base (14px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text bold>Body bold</Text>
         <Text variant="mono-secondary">text-base (14px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text size="lg">Body lg</Text>
         <Text variant="mono-secondary">text-lg (16px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text size="sm">Body sm</Text>
         <Text variant="mono-secondary">text-sm (13px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text size="xs">Body xs</Text>
         <Text variant="mono-secondary">text-xs (12px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text variant="secondary">Body secondary</Text>
         <Text variant="mono-secondary">text-base (14px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text variant="mono">Monospace</Text>
         <Text variant="mono-secondary">text-sm (13px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text variant="mono" size="lg">
           Monospace lg
         </Text>
         <Text variant="mono-secondary">text-base (14px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text variant="mono-secondary">Monospace secondary</Text>
         <Text variant="mono-secondary">text-sm (13px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text variant="success">Success</Text>
         <Text variant="mono-secondary">text-base (14px)</Text>
       </div>
-      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4">
         <Text variant="error">Error</Text>
         <Text variant="mono-secondary">text-base (14px)</Text>
       </div>
@@ -73,7 +73,7 @@ export function TextVariantsDemo() {
 
 export function TextTruncateDemo() {
   return (
-    <div className="w-64 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+    <div className="w-64 rounded-lg border border-kumo-line 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 a002ab8d6f..b01b9c4535 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-hairline bg-kumo-canvas p-6",
+    "flex min-h-[120px] items-center justify-center rounded-t-lg border border-kumo-line 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 f69143a121..f5f1b578f3 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-hairline 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-line 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 08b0a23d96..ae1fd3345e 100644
--- a/packages/kumo-docs-astro/src/components/docs/PropsTable.astro
+++ b/packages/kumo-docs-astro/src/components/docs/PropsTable.astro
@@ -46,7 +46,7 @@ const hasDescriptions =
     <div class="not-prose overflow-x-auto">
       <table class="w-full text-sm">
         <thead>
-          <tr class="border-b border-kumo-hairline">
+          <tr class="border-b border-kumo-line">
             <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>
@@ -65,7 +65,7 @@ const hasDescriptions =
             let description = prop.description || "";
 
             return (
-              <tr class="border-b border-kumo-hairline">
+              <tr class="border-b border-kumo-line">
                 <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 64a366ada2..892acce1c1 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 top-12 z-10 flex h-12 border-b border-kumo-hairline bg-kumo-canvas lg:top-0"
+        className="sticky top-12 z-10 flex h-12 border-b border-kumo-line bg-kumo-canvas lg:top-0"
       >
-        <div className="flex min-w-0 flex-1 items-center justify-between px-4 md:px-6 lg:border-r lg:border-kumo-hairline lg:px-4">
+        <div className="flex min-w-0 flex-1 items-center justify-between px-4 md:px-6 lg:border-r lg:border-kumo-line lg:px-4">
           <div
             className={cn(
               "flex items-center gap-2 transition-opacity duration-200",
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 1a0adf5687..7f1e5ac22a 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-hairline">{breadcrumbs}</div>
+      <div className="border-b border-kumo-line">{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-hairline pt-1 pb-3 pl-3">
+        <div className="flex w-full items-center justify-between border-b border-kumo-line 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 f8163dda70..9aba43ba23 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-hairline lg:pr-12">
-      <div class="mx-auto lg:border-r lg:border-kumo-hairline">
+    <div id="page-header" class="border-b border-kumo-line lg:pr-12">
+      <div class="mx-auto lg:border-r lg:border-kumo-line">
         <div class="mx-auto max-w-6xl px-4 py-6 md:px-6 lg:p-12">
           <!-- Mobile: Copy page button above title -->
           <div class="mb-3 lg:hidden">
@@ -107,9 +107,9 @@ const githubSourceUrl = sourceFile
 
     <!-- Content -->
     <main class="flex grow flex-col pb-24 lg:pr-12">
-      <div class="mx-auto w-full grow lg:border-r lg:border-kumo-hairline">
+      <div class="mx-auto w-full grow lg:border-r lg:border-kumo-line">
         <!-- Select TOC: visible below xl, hidden at xl+ where sidebar takes over -->
-        <div class="xl:hidden sticky top-24 lg:top-12 z-1 border-b border-kumo-hairline bg-kumo-canvas">
+        <div class="xl:hidden sticky top-24 lg:top-12 z-1 border-b border-kumo-line bg-kumo-canvas">
           <div class="mx-auto max-w-6xl">
             <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 8f0463dc19..eca992daf8 100644
--- a/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx
+++ b/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx
@@ -169,17 +169,17 @@ export default function Example() {
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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 b556808370..2155b07800 100644
--- a/packages/kumo-docs-astro/src/pages/blocks/resource-list.mdx
+++ b/packages/kumo-docs-astro/src/pages/blocks/resource-list.mdx
@@ -125,48 +125,48 @@ export default function DatabasesPage() {
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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 befd7271bf..72aa698d16 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-hairline" />
+          <div class="mt-6 border-b border-kumo-line" />
         )}
       </article>
     ))}
diff --git a/packages/kumo-docs-astro/src/pages/colors.mdx b/packages/kumo-docs-astro/src/pages/colors.mdx
index 87f7e63115..591737dec8 100644
--- a/packages/kumo-docs-astro/src/pages/colors.mdx
+++ b/packages/kumo-docs-astro/src/pages/colors.mdx
@@ -19,7 +19,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-hairline">
+<div className="bg-kumo-base text-kumo-default border-kumo-line">
   <button className="bg-kumo-brand text-white">Primary</button>
   <button className="bg-kumo-control text-kumo-default">Secondary</button>
 </div>
@@ -328,14 +328,10 @@ Use the solid token `bg-kumo-*` for status dots, `fill-kumo-*` for icons, and `b
       <tr>
         <td>
           <span className="inline-flex items-center gap-2">
-            <code>kumo-hairline</code>
+            <code>kumo-line</code>
           </span>
         </td>
-        <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>A thicker border/ring color that defines the edge of an elevated surface alongside a shadow.</td>
+        <td>Border/ring color for all surface edges (10% black in light mode, 10% white in dark mode). Use for both flat surfaces (e.g. <code>LayerCard</code>) and elevated surfaces alongside a shadow.</td>
       </tr>
     </tbody>
   </table>
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 5e24127846..9746ca7a38 100644
--- a/packages/kumo-docs-astro/src/pages/components/cloudflare-logo.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/cloudflare-logo.mdx
@@ -192,7 +192,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-hairline">
+        <tr class="border-b border-kumo-line">
           <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>
@@ -200,13 +200,13 @@ await navigator.clipboard.writeText(
         </tr>
       </thead>
       <tbody class="text-kumo-subtle">
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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>
@@ -230,7 +230,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-hairline">
+        <tr class="border-b border-kumo-line">
           <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>
@@ -238,7 +238,7 @@ await navigator.clipboard.writeText(
         </tr>
       </thead>
       <tbody class="text-kumo-subtle">
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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 2910ecdb81..76c76b90a7 100644
--- a/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx
@@ -404,7 +404,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-hairline">
+        <tr class="border-b border-kumo-line">
           <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>
@@ -412,13 +412,13 @@ const html = await highlightCode(code, lang);
         </tr>
       </thead>
       <tbody>
-        <tr class="border-b border-kumo-hairline/50">
+        <tr class="border-b border-kumo-line/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-hairline/50">
+        <tr class="border-b border-kumo-line/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>
@@ -479,7 +479,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-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -487,7 +487,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
       </tr>
     </thead>
     <tbody>
-      <tr class="border-b border-kumo-hairline/50">
+      <tr class="border-b border-kumo-line/50">
         <td class="py-2 pr-4">
           <code>engine</code>
         </td>
@@ -499,7 +499,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-hairline/50">
+      <tr class="border-b border-kumo-line/50">
         <td class="py-2 pr-4">
           <code>languages</code>
         </td>
@@ -509,7 +509,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-hairline/50">
+      <tr class="border-b border-kumo-line/50">
         <td class="py-2 pr-4">
           <code>labels</code>
         </td>
@@ -538,7 +538,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-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -546,7 +546,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
       </tr>
     </thead>
     <tbody>
-      <tr class="border-b border-kumo-hairline/50">
+      <tr class="border-b border-kumo-line/50">
         <td class="py-2 pr-4">
           <code>code</code>
         </td>
@@ -556,7 +556,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-hairline/50">
+      <tr class="border-b border-kumo-line/50">
         <td class="py-2 pr-4">
           <code>lang</code>
         </td>
@@ -568,7 +568,7 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
           Language identifier (must be in provider's languages)
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline/50">
+      <tr class="border-b border-kumo-line/50">
         <td class="py-2 pr-4">
           <code>showLineNumbers</code>
         </td>
@@ -578,7 +578,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-hairline/50">
+      <tr class="border-b border-kumo-line/50">
         <td class="py-2 pr-4">
           <code>highlightLines</code>
         </td>
@@ -588,7 +588,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-hairline/50">
+      <tr class="border-b border-kumo-line/50">
         <td class="py-2 pr-4">
           <code>showCopyButton</code>
         </td>
@@ -598,7 +598,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-hairline/50">
+      <tr class="border-b border-kumo-line/50">
         <td class="py-2 pr-4">
           <code>labels</code>
         </td>
@@ -627,24 +627,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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline/50">
+        <tr class="border-b border-kumo-line/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-hairline/50">
+        <tr class="border-b border-kumo-line/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-hairline/50">
+        <tr class="border-b border-kumo-line/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 df2d9cd6e9..312cffc37c 100644
--- a/packages/kumo-docs-astro/src/pages/components/dialog.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/dialog.mdx
@@ -92,7 +92,7 @@ export default function Example() {
   meaning to assistive technologies:
 </p>
 
-  <div class="overflow-hidden rounded-lg border border-kumo-hairline">
+  <div class="overflow-hidden rounded-lg border border-kumo-line">
     <table class="w-full text-sm">
       <thead class="bg-kumo-elevated">
         <tr>
@@ -101,7 +101,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-hairline">
+      <tbody class="divide-y divide-kumo-line">
         <tr>
           <td class="px-4 py-3">
             `role="dialog"`
@@ -236,7 +236,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-hairline">
+<div class="mb-4 overflow-hidden rounded-lg border border-kumo-line">
   <table class="w-full text-sm">
     <thead class="bg-kumo-elevated">
       <tr>
@@ -246,7 +246,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-hairline">
+    <tbody class="divide-y divide-kumo-line">
       <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 d33cda397f..36d484414a 100644
--- a/packages/kumo-docs-astro/src/pages/components/flow.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/flow.mdx
@@ -233,14 +233,14 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full">
     <thead>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <td class="px-4 py-3 font-mono">orientation</td>
         <td class="px-4 py-3 font-mono">"horizontal" | "vertical"</td>
         <td class="px-4 py-3">
@@ -248,7 +248,7 @@ export default function Example() {
           left-to-right, `"vertical"` lays them out top-to-bottom.
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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">
@@ -258,12 +258,12 @@ export default function Example() {
           `"center"` centers nodes.
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -281,21 +281,21 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full">
     <thead>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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">
@@ -303,7 +303,7 @@ export default function Example() {
           opacity
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -322,14 +322,14 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full">
     <thead>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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">
@@ -337,12 +337,12 @@ export default function Example() {
           "end" point (incoming connectors). When omitted, serves as both.
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -360,14 +360,14 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full">
     <thead>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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">
@@ -375,7 +375,7 @@ export default function Example() {
           `"start"` (default) aligns left, `"end"` aligns right.
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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">
@@ -396,14 +396,14 @@ export default function Example() {
   <div class="overflow-x-auto">
     <table class="w-full">
       <thead>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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 c83bbbba18..ffc110412c 100644
--- a/packages/kumo-docs-astro/src/pages/components/grid.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/grid.mdx
@@ -100,45 +100,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-hairline">
+        <tr class="border-b border-kumo-line">
           <th class="py-3 pr-4 font-medium">Variant</th>
           <th class="py-3 pr-4 font-medium">Description</th>
         </tr>
       </thead>
       <tbody>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-group.mdx b/packages/kumo-docs-astro/src/pages/components/input-group.mdx
index efb591ac72..6f625727dd 100644
--- a/packages/kumo-docs-astro/src/pages/components/input-group.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/input-group.mdx
@@ -238,7 +238,7 @@ export default function Example() {
 <p>
   When using `error` as an object, the `match` property corresponds to HTML5 ValidityState values:
 </p>
-<div class="overflow-hidden rounded-lg border border-kumo-hairline">
+<div class="overflow-hidden rounded-lg border border-kumo-line">
   <table class="w-full text-sm">
     <thead class="bg-kumo-elevated">
       <tr>
@@ -246,7 +246,7 @@ export default function Example() {
         <th class="px-4 py-3 text-left font-medium">Description</th>
       </tr>
     </thead>
-    <tbody class="divide-y divide-kumo-hairline">
+    <tbody class="divide-y divide-kumo-line">
       <tr>
         <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>
diff --git a/packages/kumo-docs-astro/src/pages/components/input.mdx b/packages/kumo-docs-astro/src/pages/components/input.mdx
index 9ee34763ac..18e44543dc 100644
--- a/packages/kumo-docs-astro/src/pages/components/input.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/input.mdx
@@ -248,41 +248,41 @@ export default function Example() {
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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 63847ec776..eb79e7674e 100644
--- a/packages/kumo-docs-astro/src/pages/components/label.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/label.mdx
@@ -144,7 +144,7 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -152,13 +152,13 @@ export default function Example() {
       </tr>
     </thead>
     <tbody>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -166,13 +166,13 @@ export default function Example() {
           Shows gray "(optional)" text (only when required is false)
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -191,7 +191,7 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -199,13 +199,13 @@ export default function Example() {
       </tr>
     </thead>
     <tbody>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -214,7 +214,7 @@ export default function Example() {
           attribute.
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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 08fbc44c90..6ab2697af8 100644
--- a/packages/kumo-docs-astro/src/pages/components/link.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/link.mdx
@@ -218,7 +218,7 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -226,7 +226,7 @@ export default function Example() {
       </tr>
     </thead>
     <tbody>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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"
@@ -234,7 +234,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-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -242,7 +242,7 @@ export default function Example() {
           Element to render with Link props merged onto it
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -252,7 +252,7 @@ export default function Example() {
           router.
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <td class="px-4 py-3 font-mono text-xs">to</td>
         <td class="px-4 py-3 font-mono text-xs">string</td>
         <td class="px-4 py-3 font-mono text-xs">-</td>
@@ -261,13 +261,13 @@ export default function Example() {
           be removed in a future major version.
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -282,19 +282,19 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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
@@ -303,7 +303,7 @@ export default function Example() {
           Links within colored contexts (alerts, errors)
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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 99d445ae44..1a04b4106e 100644
--- a/packages/kumo-docs-astro/src/pages/components/popover.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/popover.mdx
@@ -82,7 +82,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-hairline">
+  <div class="overflow-hidden rounded-lg border border-kumo-line">
     <table class="w-full text-sm">
       <thead class="bg-kumo-elevated">
         <tr>
@@ -91,7 +91,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-hairline">
+      <tbody class="divide-y divide-kumo-line">
         <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 bfb38435ce..6427fc854d 100644
--- a/packages/kumo-docs-astro/src/pages/components/skeleton-line.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/skeleton-line.mdx
@@ -104,49 +104,49 @@ import { SkeletonLine } from "@cloudflare/kumo";
   <div class="overflow-x-auto">
     <table class="w-full text-sm">
       <thead>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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>
-        <tr class="border-b border-kumo-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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-hairline">
+        <tr class="border-b border-kumo-line">
           <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 5740eac9c0..8746a2bf94 100644
--- a/packages/kumo-docs-astro/src/pages/components/tabs.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/tabs.mdx
@@ -157,24 +157,24 @@ export default function Example() {
 <div class="overflow-x-auto">
   <table class="w-full text-sm">
     <thead>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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 f8ee9f0606..e4a4005910 100644
--- a/packages/kumo-docs-astro/src/pages/components/toast.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/toast.mdx
@@ -239,7 +239,7 @@ toastManager.promise(asyncFn(), {
 <div class="overflow-x-auto">
   <table class="w-full text-left text-sm">
     <thead>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <th class="py-3 pr-4 font-semibold">Prop</th>
         <th class="py-3 pr-4 font-semibold">Type</th>
         <th class="py-3 pr-4 font-semibold">Default</th>
@@ -247,19 +247,19 @@ toastManager.promise(asyncFn(), {
       </tr>
     </thead>
     <tbody class="text-kumo-subtle">
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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"
@@ -267,7 +267,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-hairline">
+      <tr class="border-b border-kumo-line">
         <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>
@@ -276,13 +276,13 @@ toastManager.promise(asyncFn(), {
           description.
         </td>
       </tr>
-      <tr class="border-b border-kumo-hairline">
+      <tr class="border-b border-kumo-line">
         <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-hairline">
+      <tr class="border-b border-kumo-line">
         <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 997fdd2d1b..cba370f912 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 lg:pr-12">
       <div
-        class="mx-auto w-full grow lg:border-r lg:border-kumo-hairline"
+        class="mx-auto w-full grow lg:border-r lg:border-kumo-line"
       >
         <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 3fa0179351..c7e1d5eba5 100644
--- a/packages/kumo-docs-astro/src/pages/tests/flow.astro
+++ b/packages/kumo-docs-astro/src/pages/tests/flow.astro
@@ -26,7 +26,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-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowBasicDemo client:visible />
       </div>
     </section>
@@ -36,7 +36,7 @@ import {
       <p class="text-kumo-subtle">
         Vertical flow diagram with sequential nodes
       </p>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowVerticalDemo client:visible />
       </div>
     </section>
@@ -48,7 +48,7 @@ import {
       <p class="text-kumo-subtle">
         Vertical flow diagram with parallel branching
       </p>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowVerticalParallelDemo client:visible />
       </div>
     </section>
@@ -56,7 +56,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-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowParallelDemo client:visible />
       </div>
     </section>
@@ -68,7 +68,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-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowCustomContentDemo client:visible />
       </div>
     </section>
@@ -76,7 +76,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-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowComplexDemo client:visible />
       </div>
     </section>
@@ -84,7 +84,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-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowAnchorDemo client:visible />
       </div>
     </section>
@@ -94,7 +94,7 @@ import {
       <p class="text-kumo-subtle">
         Flow diagram with vertically centered nodes
       </p>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowCenteredDemo client:visible />
       </div>
     </section>
@@ -102,7 +102,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-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowPanningDemo client:visible />
       </div>
     </section>
@@ -110,7 +110,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-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowDisabledDemo client:visible />
       </div>
     </section>
@@ -122,7 +122,7 @@ import {
       <p class="text-kumo-subtle">
         Flow diagram with right-aligned parallel nodes
       </p>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowParallelAlignEndDemo client:visible />
       </div>
     </section>
@@ -134,7 +134,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-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowParallelNestedListDemo client:visible />
       </div>
     </section>
@@ -146,7 +146,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-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowSequentialParallelDemo client:visible />
       </div>
     </section>
@@ -158,7 +158,7 @@ import {
       <p class="text-kumo-subtle">
         Flow diagram with a node that can be added and removed dynamically
       </p>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowDynamicNodeDemo client:load />
       </div>
     </section>
@@ -171,7 +171,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-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <FlowExpandableDemo client:visible />
       </div>
     </section>
diff --git a/packages/kumo-docs-astro/src/pages/tests/map.astro b/packages/kumo-docs-astro/src/pages/tests/map.astro
index fc6418cd13..71b54bb087 100644
--- a/packages/kumo-docs-astro/src/pages/tests/map.astro
+++ b/packages/kumo-docs-astro/src/pages/tests/map.astro
@@ -38,19 +38,19 @@ try {
     </div>
 
     <section>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <BubbleMapBasicDemo geoJson={geoJson} client:visible />
       </div>
     </section>
 
     <section>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <BubbleMapManyPointsDemo geoJson={geoJson} client:visible />
       </div>
     </section>
 
     <section >
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <ChoroplethMapBasicDemo geoJson={geoJson} client:visible />
       </div>
     </section>
diff --git a/packages/kumo-docs-astro/src/pages/tests/select.astro b/packages/kumo-docs-astro/src/pages/tests/select.astro
index e01b66e3be..9cefee82b2 100644
--- a/packages/kumo-docs-astro/src/pages/tests/select.astro
+++ b/packages/kumo-docs-astro/src/pages/tests/select.astro
@@ -38,7 +38,7 @@ const codeBlockClass = "mt-3 p-3 rounded-lg bg-kumo-recessed text-xs font-mono o
           The onValueChange callback should receive <code class="bg-kumo-tint px-1 rounded">User | null</code>.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectStrictNullChecksDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`const [selected, setSelected] = useState<User | null>(null);
@@ -67,7 +67,7 @@ const codeBlockClass = "mt-3 p-3 rounded-lg bg-kumo-recessed text-xs font-mono o
           The placeholder shows when no value is selected.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectRenderValuePlaceholderDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`<Select<Country>
@@ -96,7 +96,7 @@ const codeBlockClass = "mt-3 p-3 rounded-lg bg-kumo-recessed text-xs font-mono o
           Auto-generates Select.Option elements.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectItemsArrayDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`const priorities: Priority[] = [
@@ -129,7 +129,7 @@ const codeBlockClass = "mt-3 p-3 rounded-lg bg-kumo-recessed text-xs font-mono o
           Supports <code class="bg-kumo-tint px-1 rounded">SelectItemDescriptor</code> for disabled options.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectItemsObjectMapDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`<Select
@@ -155,7 +155,7 @@ const codeBlockClass = "mt-3 p-3 rounded-lg bg-kumo-recessed text-xs font-mono o
           <code class="bg-kumo-tint px-1 rounded">renderValue</code> receives <code class="bg-kumo-tint px-1 rounded">T[]</code> instead of <code class="bg-kumo-tint px-1 rounded">T</code>.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectMultipleDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
@@ -186,7 +186,7 @@ const codeBlockClass = "mt-3 p-3 rounded-lg bg-kumo-recessed text-xs font-mono o
           Toggle between controlled (<code class="bg-kumo-tint px-1 rounded">value</code>) and uncontrolled (<code class="bg-kumo-tint px-1 rounded">defaultValue</code>) modes.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectControlledVsUncontrolledDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`// Controlled: you manage the state
@@ -212,7 +212,7 @@ const [value, setValue] = useState<string | null>(null);
           Using compound components for structured option lists.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectGroupedOptionsDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`<Select label="Category" placeholder="Select...">
@@ -238,7 +238,7 @@ const [value, setValue] = useState<string | null>(null);
           Auto-wraps with Field component when <code class="bg-kumo-tint px-1 rounded">label</code> is provided.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectFieldIntegrationDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`<Select
@@ -262,7 +262,7 @@ const [value, setValue] = useState<string | null>(null);
           All four sizes match Input component sizing.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectSizeVariantsDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`<Select size="xs" ... />  // Extra small: h-5 (20px)
@@ -279,7 +279,7 @@ const [value, setValue] = useState<string | null>(null);
           Shows skeleton and disables interaction while loading.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectLoadingStateDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`const [loading, setLoading] = useState(true);
@@ -300,7 +300,7 @@ const [value, setValue] = useState<string | null>(null);
           Individual options can be disabled via <code class="bg-kumo-tint px-1 rounded">SelectItemDescriptor</code> or <code class="bg-kumo-tint px-1 rounded">disabled</code> prop on Option.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectDisabledOptionsDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`// Via items prop with SelectItemDescriptor
@@ -326,7 +326,7 @@ const [value, setValue] = useState<string | null>(null);
           TypeScript infers types from usage when possible.
         </p>
       </div>
-      <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
+      <div class="p-4 rounded-lg border border-kumo-line bg-kumo-base">
         <SelectInferenceDemo client:visible />
       </div>
       <pre class={codeBlockClass}>{`// No explicit <T> - inferred from items/value
diff --git a/packages/kumo-docs-astro/src/pages/tests/timeseries.astro b/packages/kumo-docs-astro/src/pages/tests/timeseries.astro
index 8679e2894f..66b0ca2460 100644
--- a/packages/kumo-docs-astro/src/pages/tests/timeseries.astro
+++ b/packages/kumo-docs-astro/src/pages/tests/timeseries.astro
@@ -24,14 +24,14 @@ import {
 
     <section class="space-y-3">
       <h2 class="text-xl font-semibold text-kumo-default">Basic line</h2>
-      <div class="rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div class="rounded-lg border border-kumo-line bg-kumo-base p-4">
         <BasicLineChartDemo client:visible />
       </div>
     </section>
 
     <section class="space-y-3">
       <h2 class="text-xl font-semibold text-kumo-default">Stacked bar</h2>
-      <div class="rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div class="rounded-lg border border-kumo-line bg-kumo-base p-4">
         <BarChartDemo client:visible />
       </div>
     </section>
@@ -39,14 +39,14 @@ import {
 
     <section class="space-y-3">
       <h2 class="text-xl font-semibold text-kumo-default">Loading (line)</h2>
-      <div class="rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div class="rounded-lg border border-kumo-line bg-kumo-base p-4">
         <LoadingChartDemo client:visible />
       </div>
     </section>
 
     <section class="space-y-3">
       <h2 class="text-xl font-semibold text-kumo-default">Loading (bar)</h2>
-      <div class="rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div class="rounded-lg border border-kumo-line bg-kumo-base p-4">
         <LoadingBarChartDemo client:visible />
       </div>
     </section>
@@ -55,7 +55,7 @@ import {
       <h2 class="text-xl font-semibold text-kumo-default">
         Loading toggle
       </h2>
-      <div class="rounded-lg border border-kumo-hairline bg-kumo-base p-4">
+      <div class="rounded-lg border border-kumo-line bg-kumo-base p-4">
         <LoadingToggleChartDemo 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 1d53e5799a..1375ca53fe 100644
--- a/packages/kumo-docs-astro/src/styles/global.css
+++ b/packages/kumo-docs-astro/src/styles/global.css
@@ -61,11 +61,11 @@ kbd,
   /* Bullet markers */
   --tw-prose-bullets: var(--text-color-kumo-default);
   /* Horizontal rules */
-  --tw-prose-hr: var(--color-kumo-hairline);
+  --tw-prose-hr: var(--color-kumo-line);
   /* Blockquote text */
   --tw-prose-quotes: var(--text-color-kumo-default);
   /* Blockquote left border */
-  --tw-prose-quote-borders: var(--color-kumo-hairline);
+  --tw-prose-quote-borders: var(--color-kumo-line);
   /* Figure captions */
   --tw-prose-captions: var(--text-color-kumo-subtle);
   /* Keyboard input */
@@ -79,9 +79,9 @@ kbd,
   /* Pre block background */
   --tw-prose-pre-bg: var(--color-kumo-canvas);
   /* Table header borders */
-  --tw-prose-th-borders: var(--color-kumo-hairline);
+  --tw-prose-th-borders: var(--color-kumo-line);
   /* Table cell borders */
-  --tw-prose-td-borders: var(--color-kumo-hairline);
+  --tw-prose-td-borders: var(--color-kumo-line);
 
   /* Dark mode — same tokens, they auto-adapt via light-dark() */
   --tw-prose-invert-body: var(--text-color-kumo-default);
@@ -91,17 +91,17 @@ kbd,
   --tw-prose-invert-bold: var(--text-color-kumo-strong);
   --tw-prose-invert-counters: var(--text-color-kumo-subtle);
   --tw-prose-invert-bullets: var(--text-color-kumo-default);
-  --tw-prose-invert-hr: var(--color-kumo-hairline);
+  --tw-prose-invert-hr: var(--color-kumo-line);
   --tw-prose-invert-quotes: var(--text-color-kumo-default);
-  --tw-prose-invert-quote-borders: var(--color-kumo-hairline);
+  --tw-prose-invert-quote-borders: var(--color-kumo-line);
   --tw-prose-invert-captions: var(--text-color-kumo-subtle);
   --tw-prose-invert-kbd: var(--text-color-kumo-default);
   --tw-prose-invert-kbd-shadows: transparent;
   --tw-prose-invert-code: var(--text-color-kumo-default);
   --tw-prose-invert-pre-code: var(--text-color-kumo-default);
   --tw-prose-invert-pre-bg: var(--color-kumo-canvas);
-  --tw-prose-invert-th-borders: var(--color-kumo-hairline);
-  --tw-prose-invert-td-borders: var(--color-kumo-hairline);
+  --tw-prose-invert-th-borders: var(--color-kumo-line);
+  --tw-prose-invert-td-borders: var(--color-kumo-line);
 }
 
 /* Reset prose styles inside not-prose wrappers */
@@ -115,7 +115,7 @@ kbd,
   font-weight: 500;
   font-size: 0.875em;
   background-color: var(--color-kumo-base);
-  border: 1px solid var(--color-kumo-hairline);
+  border: 1px solid var(--color-kumo-line);
   border-radius: 0.25rem;
   padding: 0.125rem 0.375rem;
   font-family:
@@ -189,7 +189,7 @@ kbd,
 /* kbd styling */
 .kumo-prose :where(kbd) {
   background-color: var(--color-kumo-control);
-  border: 1px solid var(--color-kumo-hairline);
+  border: 1px solid var(--color-kumo-line);
   border-radius: 0.25rem;
   padding: 0.125rem 0.375rem;
   font-size: 0.875em;
@@ -200,7 +200,7 @@ kbd,
 .kumo-prose :where(pre):not(:where(.not-prose, .not-prose *)) {
   @apply text-base;
   background-color: var(--tw-prose-pre-bg);
-  border: 1px solid var(--color-kumo-hairline);
+  border: 1px solid var(--color-kumo-line);
   border-radius: 0.5rem;
   letter-spacing: normal;
   padding: 0.75rem 1rem;
@@ -214,7 +214,7 @@ kbd,
 
 /* Table header border */
 .kumo-prose :where(thead) {
-  border-bottom-color: var(--color-kumo-hairline);
+  border-bottom-color: var(--color-kumo-line);
 }
 
 /* Table header cells */
@@ -256,7 +256,7 @@ kbd,
 pre.astro-code {
   overflow: hidden;
   border-radius: 0.5rem;
-  border: 1px solid var(--color-kumo-hairline);
+  border: 1px solid var(--color-kumo-line);
   margin: 1rem 0;
 }
 
@@ -282,7 +282,7 @@ pre.astro-code {
   @apply absolute top-3 right-3 flex size-6.5 cursor-pointer items-center justify-center rounded-md border-none shadow-none select-none focus-visible:ring-1;
   background: var(--color-kumo-base);
   color: var(--text-color-kumo-subtle);
-  --tw-ring-color: var(--color-kumo-hairline);
+  --tw-ring-color: var(--color-kumo-line);
 
   &:hover {
     background: var(--color-kumo-tint);
diff --git a/packages/kumo-figma/src/generators/button.ts b/packages/kumo-figma/src/generators/button.ts
index 98a259d1a3..52bd27ca2d 100644
--- a/packages/kumo-figma/src/generators/button.ts
+++ b/packages/kumo-figma/src/generators/button.ts
@@ -275,7 +275,7 @@ export function getStateStylesMap(): Record<
  *
  * These are derived from the stateClasses in component-registry.json:
  * - hover: hover:bg-* classes
- * - focus: ring-kumo-hairline (focus-visible ring)
+ * - focus: ring-kumo-line (focus-visible ring)
  * - pressed: same as hover but slightly darker
  *
  * Note: Figma doesn't support pseudo-states, so we create separate
@@ -485,7 +485,7 @@ async function createButtonComponent(
         }
       }
 
-      // Add focus ring (ring-kumo-hairline)
+      // Add focus ring (ring-kumo-line)
       if (stateStyle.addRing) {
         const ringVar = getVariableByName(VAR_NAMES.color.brand);
         if (ringVar) {
diff --git a/packages/kumo-figma/src/generators/shared.ts b/packages/kumo-figma/src/generators/shared.ts
index 29c0cf52da..7cfc2a1171 100644
--- a/packages/kumo-figma/src/generators/shared.ts
+++ b/packages/kumo-figma/src/generators/shared.ts
@@ -54,7 +54,7 @@ export const VAR_NAMES = {
     brand: "color-kumo-brand",
     brandHover: "color-kumo-brand-hover",
     line: "color-kumo-line",
-    ring: "color-kumo-hairline",
+    ring: "color-kumo-line",
     tipShadow: "color-kumo-tip-shadow",
     tipStroke: "color-kumo-tip-stroke",
     info: "color-kumo-info",
diff --git a/packages/kumo-figma/src/parsers/tailwind-to-figma.test.ts b/packages/kumo-figma/src/parsers/tailwind-to-figma.test.ts
index 8eeb188efc..6b5ab26a95 100644
--- a/packages/kumo-figma/src/parsers/tailwind-to-figma.test.ts
+++ b/packages/kumo-figma/src/parsers/tailwind-to-figma.test.ts
@@ -350,12 +350,12 @@ describe("parseTailwindClasses", () => {
     });
 
     it("should parse focus state classes", () => {
-      const result = parseTailwindClasses("focus:ring-kumo-hairline");
+      const result = parseTailwindClasses("focus:ring-kumo-line");
       expect(result.states).toBeDefined();
-      // Note: ring-kumo-hairline is parsed as strokeVariable and hasBorder
+      // Note: ring-kumo-line is parsed as strokeVariable and hasBorder
       expect(result.states?.focus).toEqual({
         hasBorder: true,
-        strokeVariable: "color-kumo-hairline",
+        strokeVariable: "color-kumo-line",
       });
     });
 
@@ -368,7 +368,7 @@ describe("parseTailwindClasses", () => {
 
     it("should parse both base classes and state variants", () => {
       const result = parseTailwindClasses(
-        "bg-kumo-brand hover:bg-kumo-control text-white focus:ring-kumo-hairline",
+        "bg-kumo-brand hover:bg-kumo-control text-white focus:ring-kumo-line",
       );
       expect(result).toEqual({
         fillVariable: "color-kumo-brand",
@@ -380,7 +380,7 @@ describe("parseTailwindClasses", () => {
           },
           focus: {
             hasBorder: true,
-            strokeVariable: "color-kumo-hairline",
+            strokeVariable: "color-kumo-line",
           },
         },
       });
@@ -575,9 +575,9 @@ describe("parseTailwindClasses", () => {
     });
 
     it("should parse ring color opacity modifiers", () => {
-      expect(parseTailwindClasses("ring-kumo-hairline/50")).toEqual({
+      expect(parseTailwindClasses("ring-kumo-line/50")).toEqual({
         hasBorder: true,
-        strokeVariable: "color-kumo-hairline/50",
+        strokeVariable: "color-kumo-line/50",
         strokeOpacity: 0.5,
       });
       expect(parseTailwindClasses("ring-kumo-danger/70")).toEqual({
diff --git a/packages/kumo-figma/src/parsers/tailwind-to-figma.ts b/packages/kumo-figma/src/parsers/tailwind-to-figma.ts
index 42d713ed34..b2da49ff96 100644
--- a/packages/kumo-figma/src/parsers/tailwind-to-figma.ts
+++ b/packages/kumo-figma/src/parsers/tailwind-to-figma.ts
@@ -90,7 +90,6 @@ const COLOR_TO_VARIABLE: Record<string, string> = {
   "bg-kumo-brand": "color-kumo-brand",
   "bg-kumo-brand-hover": "color-kumo-brand-hover",
   "bg-kumo-line": "color-kumo-line",
-  "bg-kumo-hairline": "color-kumo-hairline",
   "bg-kumo-info": "color-kumo-info",
   "bg-kumo-info-tint": "color-kumo-info-tint",
   "bg-kumo-warning": "color-kumo-warning",
@@ -120,7 +119,6 @@ const COLOR_TO_VARIABLE: Record<string, string> = {
 
   // Border colors (use --color-kumo-* tokens)
   "border-kumo-line": "color-kumo-line",
-  "border-kumo-hairline": "color-kumo-hairline",
   "border-kumo-brand": "color-kumo-brand",
   "border-kumo-fill": "color-kumo-fill",
   "border-kumo-info": "color-kumo-info",
@@ -128,7 +126,6 @@ const COLOR_TO_VARIABLE: Record<string, string> = {
   "border-kumo-danger": "color-kumo-danger",
   "border-kumo-success": "color-kumo-success",
   "ring-kumo-line": "color-kumo-line",
-  "ring-kumo-hairline": "color-kumo-hairline",
   "ring-kumo-danger": "color-kumo-danger",
 };
 
@@ -438,7 +435,7 @@ export function parseTailwindClasses(classes: string): ParsedStyles {
     // Ring (used as border in some variants)
     if (cls === "ring" || cls.startsWith("ring-")) {
       result.hasBorder = true;
-      // Check for opacity modifier (e.g., ring-kumo-hairline/50)
+      // Check for opacity modifier (e.g., ring-kumo-line/50)
       const opacityMatch = cls.match(/^(ring-[^/]+)\/([0-9]+)$/);
       if (opacityMatch) {
         const baseClass = opacityMatch[1];
diff --git a/packages/kumo/ai/USAGE.md b/packages/kumo/ai/USAGE.md
index c5f32da522..783455188f 100644
--- a/packages/kumo/ai/USAGE.md
+++ b/packages/kumo/ai/USAGE.md
@@ -120,10 +120,9 @@ Use the solid token on icons, status dots, and progress fills. Banners and badge
 
 ### Borders & Rings
 
-| Token           | Purpose                                                                                                 |
-| --------------- | ------------------------------------------------------------------------------------------------------- |
-| `kumo-hairline` | A border/ring color to distinguish between flat surfaces where no shadow is present (i.e. `LayerCard`). |
-| `kumo-line`     | A thicker border/ring color that defines the edge of an elevated surface alongside a shadow.            |
+| Token       | Purpose                                                                                                              |
+| ----------- | -------------------------------------------------------------------------------------------------------------------- |
+| `kumo-line` | Border/ring color for all surface edges (10% black in light mode, 10% white in dark mode). Use for both flat surfaces (e.g. `LayerCard`) and elevated surfaces alongside a shadow. |
 
 ## Icons
 
diff --git a/packages/kumo/lint/no-primitive-colors.js b/packages/kumo/lint/no-primitive-colors.js
index 82d846826f..b7f849ddb0 100644
--- a/packages/kumo/lint/no-primitive-colors.js
+++ b/packages/kumo/lint/no-primitive-colors.js
@@ -11,7 +11,7 @@ const INVALID_TOKEN_RULE = "invalid-color-token";
 
 // We want to enforce use of Kumo semantic color tokens `--color-kumo-*`.
 // Any Tailwind color utility (e.g. `bg-blue-500`) or legacy semantic
-// utility (e.g. `bg-kumo-hairline`, `text-kumo-default`) in class strings should be
+// utility (e.g. `bg-kumo-line`, `text-kumo-default`) in class strings should be
 // replaced by semantic tokens / component APIs.
 
 // Matches Tailwind-like color utilities in class strings.
diff --git a/packages/kumo/scripts/component-registry/index.test.ts b/packages/kumo/scripts/component-registry/index.test.ts
index c6989a7462..62d82368e5 100644
--- a/packages/kumo/scripts/component-registry/index.test.ts
+++ b/packages/kumo/scripts/component-registry/index.test.ts
@@ -217,18 +217,18 @@ describe("extractStateClasses", () => {
   });
 
   it("extracts focus state", () => {
-    const classes = "ring-kumo-line focus:ring-kumo-hairline";
+    const classes = "ring-kumo-line focus:ring-kumo-line";
     expect(extractStateClasses(classes)).toEqual({
-      focus: "focus:ring-kumo-hairline",
+      focus: "focus:ring-kumo-line",
     });
   });
 
   it("extracts multiple states", () => {
     const classes =
-      "bg-kumo-base hover:bg-kumo-elevated focus:ring-kumo-hairline disabled:opacity-50";
+      "bg-kumo-base hover:bg-kumo-elevated focus:ring-kumo-line disabled:opacity-50";
     expect(extractStateClasses(classes)).toEqual({
       hover: "hover:bg-kumo-elevated",
-      focus: "focus:ring-kumo-hairline",
+      focus: "focus:ring-kumo-line",
       disabled: "disabled:opacity-50",
     });
   });
diff --git a/packages/kumo/scripts/component-registry/metadata.ts b/packages/kumo/scripts/component-registry/metadata.ts
index c78928eb92..9f7978f52c 100644
--- a/packages/kumo/scripts/component-registry/metadata.ts
+++ b/packages/kumo/scripts/component-registry/metadata.ts
@@ -597,8 +597,8 @@ export const COMPONENT_STYLING_METADATA: Record<string, ComponentStyling> = {
       checked: ["bg-kumo-contrast", "text-kumo-inverse"],
       indeterminate: ["bg-kumo-contrast", "text-kumo-inverse"],
       error: ["ring-kumo-danger"],
-      hover: ["ring-kumo-hairline"],
-      focus: ["ring-kumo-hairline"],
+      hover: ["ring-kumo-line"],
+      focus: ["ring-kumo-line"],
       disabled: ["opacity-50", "cursor-not-allowed"],
     },
     icons: [
@@ -751,7 +751,7 @@ export const COMPONENT_STYLING_METADATA: Record<string, ComponentStyling> = {
     },
     states: {
       base: ["bg-kumo-control", "text-kumo-default", "ring-kumo-line"],
-      focus: ["ring-kumo-hairline"],
+      focus: ["ring-kumo-line"],
       error: ["ring-kumo-danger"],
       disabled: ["opacity-50", "text-kumo-subtle"],
     },
diff --git a/packages/kumo/scripts/theme-generator/config.ts b/packages/kumo/scripts/theme-generator/config.ts
index 947f803a79..f09561ba38 100644
--- a/packages/kumo/scripts/theme-generator/config.ts
+++ b/packages/kumo/scripts/theme-generator/config.ts
@@ -313,21 +313,8 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         kumo: {
-          light: "oklch(14.5% 0 0 / 0.1)",
-          dark: "var(--color-kumo-neutral-750, oklch(32% 0 0))",
-        },
-      },
-    },
-    "kumo-hairline": {
-      newName: "",
-      theme: {
-        kumo: {
-          light: "var(--color-kumo-neutral-150, oklch(93.5% 0 0))",
-          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
-        },
-        fedramp: {
-          light: "#c8d4e5",
-          dark: "#c8d4e5",
+          light: "rgb(0 0 0 / 0.1)",
+          dark: "rgb(255 255 255 / 0.1)",
         },
       },
     },
diff --git a/packages/kumo/src/components/AGENTS.md b/packages/kumo/src/components/AGENTS.md
index e7e8f59405..5d4cb4f108 100644
--- a/packages/kumo/src/components/AGENTS.md
+++ b/packages/kumo/src/components/AGENTS.md
@@ -154,7 +154,7 @@ className="base-classes"
 Tailwind state prefixes are extractable:
 
 ```typescript
-classes: "bg-kumo-elevated hover:bg-kumo-base focus:ring-kumo-hairline disabled:opacity-50";
+classes: "bg-kumo-elevated hover:bg-kumo-base focus:ring-kumo-line disabled:opacity-50";
 // Parsed into: { default, hover, focus, disabled } state map
 ```
 
diff --git a/packages/kumo/src/components/badge/badge.tsx b/packages/kumo/src/components/badge/badge.tsx
index f9b6355097..2208512e5f 100644
--- a/packages/kumo/src/components/badge/badge.tsx
+++ b/packages/kumo/src/components/badge/badge.tsx
@@ -91,7 +91,7 @@ export const KUMO_BADGE_VARIANTS = {
     },
     dot: {
       classes:
-        "gap-1.5 bg-transparent text-kumo-default ring ring-kumo-hairline",
+        "gap-1.5 bg-transparent text-kumo-default ring ring-kumo-line",
       description: "Outlined badge with a colored circle dot indicating status",
     },
   },
diff --git a/packages/kumo/src/components/checkbox/checkbox.tsx b/packages/kumo/src/components/checkbox/checkbox.tsx
index 2aa42fa6ce..5b9759174c 100644
--- a/packages/kumo/src/components/checkbox/checkbox.tsx
+++ b/packages/kumo/src/components/checkbox/checkbox.tsx
@@ -18,7 +18,7 @@ export const KUMO_CHECKBOX_VARIANTS = {
   variant: {
     default: {
       classes:
-        "[&:focus-within>span]:ring-kumo-focus [&:hover>span]:ring-kumo-hairline",
+        "[&:focus-within>span]:ring-kumo-focus [&:hover>span]:ring-kumo-line",
       description: "Default checkbox appearance",
     },
     error: {
@@ -270,9 +270,9 @@ const CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(
         className={cn(
           "relative flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2 focus:outline-none",
           label && "mt-0.5",
-          variant === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
+          variant === "error" ? "ring-kumo-danger" : "ring-kumo-line",
           !disabled &&
-            "hover:ring-kumo-hairline focus:ring-2 focus:ring-kumo-focus focus-visible:ring-2 focus-visible:ring-kumo-brand",
+            "hover:ring-kumo-line focus:ring-2 focus:ring-kumo-focus focus-visible:ring-2 focus-visible:ring-kumo-brand",
           "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",
           className,
@@ -370,9 +370,9 @@ const CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(
           onCheckedChange={onCheckedChange}
           className={cn(
             "peer relative mt-0.5 flex h-4 w-4 shrink-0 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-hairline",
+            variant === "error" ? "ring-kumo-danger" : "ring-kumo-line",
             !disabled &&
-              "group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus:ring-2 focus:ring-kumo-focus focus-visible:ring-2 focus-visible:ring-kumo-brand",
+              "group-hover:ring-kumo-line hover:ring-kumo-line focus:ring-2 focus:ring-kumo-focus focus-visible:ring-2 focus-visible:ring-kumo-brand",
             "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/cloudflare-logo/cloudflare-logo.tsx b/packages/kumo/src/components/cloudflare-logo/cloudflare-logo.tsx
index 7404d62005..c320f8d52e 100644
--- a/packages/kumo/src/components/cloudflare-logo/cloudflare-logo.tsx
+++ b/packages/kumo/src/components/cloudflare-logo/cloudflare-logo.tsx
@@ -266,7 +266,7 @@ export const PoweredByCloudflare = forwardRef<
           "ring-1 transition-all ring-inset hover:shadow-sm",
           // Color variants using semantic tokens
           color === "color" &&
-            "bg-kumo-base text-kumo-default ring-kumo-hairline",
+            "bg-kumo-base text-kumo-default ring-kumo-line",
           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 2a46ebdaa9..208a9ba262 100644
--- a/packages/kumo/src/components/combobox/combobox.tsx
+++ b/packages/kumo/src/components/combobox/combobox.tsx
@@ -500,7 +500,7 @@ function Group(props: ComboboxBase.Group.Props) {
   return (
     <ComboboxBase.Group
       {...props}
-      className="mt-2 border-t border-kumo-hairline pt-2 first:mt-0 first:border-t-0 first:pt-0"
+      className="mt-2 border-t border-kumo-line pt-2 first:mt-0 first:border-t-0 first:pt-0"
     />
   );
 }
@@ -520,7 +520,7 @@ function Chip({
       className={cn(
         "flex items-center gap-2.5", // Layout
         "h-6 pr-[3px] pl-2", // Dimensions
-        "rounded-sm ring-1 ring-kumo-hairline", // Border
+        "rounded-sm ring-1 ring-kumo-line", // 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 64d091115c..6328b6d90d 100644
--- a/packages/kumo/src/components/command-palette/command-palette.tsx
+++ b/packages/kumo/src/components/command-palette/command-palette.tsx
@@ -279,7 +279,7 @@ const List = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative min-h-0 flex-1 scroll-py-2 overflow-y-auto rounded-b-lg bg-kumo-base px-2 py-2 ring-1 ring-kumo-hairline",
+        "relative min-h-0 flex-1 scroll-py-2 overflow-y-auto rounded-b-lg bg-kumo-base px-2 py-2 ring-1 ring-kumo-line",
         className,
       )}
     >
diff --git a/packages/kumo/src/components/dropdown/dropdown.tsx b/packages/kumo/src/components/dropdown/dropdown.tsx
index 46436709e9..1d23bd3a1f 100644
--- a/packages/kumo/src/components/dropdown/dropdown.tsx
+++ b/packages/kumo/src/components/dropdown/dropdown.tsx
@@ -380,7 +380,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-kumo-hairline", className)}
+    className={cn("-mx-1 my-1 h-px bg-kumo-line", className)}
     {...props}
   />
 ));
diff --git a/packages/kumo/src/components/flow/diagram.tsx b/packages/kumo/src/components/flow/diagram.tsx
index 0fce802e35..878e3411ca 100644
--- a/packages/kumo/src/components/flow/diagram.tsx
+++ b/packages/kumo/src/components/flow/diagram.tsx
@@ -405,7 +405,7 @@ export function FlowDiagram({
 
         {/* Vertical scrollbar */}
         {canScrollY && (
-          <div className="absolute top-1 right-1 bottom-1 w-1.5 rounded-full bg-kumo-hairline/50 opacity-0 group-hover:opacity-100">
+          <div className="absolute top-1 right-1 bottom-1 w-1.5 rounded-full bg-kumo-line/50 opacity-0 group-hover:opacity-100">
             <motion.div
               className="absolute w-full rounded-full bg-kumo-fill"
               style={{
@@ -418,7 +418,7 @@ export function FlowDiagram({
 
         {/* Horizontal scrollbar */}
         {canScrollX && (
-          <div className="absolute right-1 bottom-1 left-1 h-1.5 rounded-full bg-kumo-hairline/50 opacity-0 group-hover:opacity-100">
+          <div className="absolute right-1 bottom-1 left-1 h-1.5 rounded-full bg-kumo-line/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 9a7b74983d..113cbf776d 100644
--- a/packages/kumo/src/components/flow/flow.browser.test.tsx
+++ b/packages/kumo/src/components/flow/flow.browser.test.tsx
@@ -368,7 +368,7 @@ const ExpandableNode = forwardRef<
     <li
       ref={ref}
       {...props}
-      className="overflow-hidden rounded-lg bg-kumo-base ring ring-kumo-hairline"
+      className="overflow-hidden rounded-lg bg-kumo-base ring ring-kumo-line"
     >
       <button
         type="button"
@@ -378,7 +378,7 @@ const ExpandableNode = forwardRef<
         {title}
       </button>
       {open && (
-        <div className="border-t border-kumo-hairline px-3 py-2 text-sm">
+        <div className="border-t border-kumo-line px-3 py-2 text-sm">
           {children}
         </div>
       )}
diff --git a/packages/kumo/src/components/flow/flow.test.tsx b/packages/kumo/src/components/flow/flow.test.tsx
index 3d0ea2c2e6..9aa02223d8 100644
--- a/packages/kumo/src/components/flow/flow.test.tsx
+++ b/packages/kumo/src/components/flow/flow.test.tsx
@@ -197,7 +197,7 @@ describe("Flow", () => {
             render={
               <li
                 data-testid="custom-circle"
-                className="size-4 rounded-full bg-kumo-hairline"
+                className="size-4 rounded-full bg-kumo-line"
               />
             }
           />
diff --git a/packages/kumo/src/components/grid/grid.tsx b/packages/kumo/src/components/grid/grid.tsx
index 1efc13ef1a..f7964fc2e7 100644
--- a/packages/kumo/src/components/grid/grid.tsx
+++ b/packages/kumo/src/components/grid/grid.tsx
@@ -162,7 +162,7 @@ export function gridItemVariants({
   return cn(
     mobileDivider &&
       variant === "4up" &&
-      "border-b border-kumo-hairline pb-8 md:border-b-0 md:pb-0",
+      "border-b border-kumo-line pb-8 md:border-b-0 md:pb-0",
   );
 }
 
diff --git a/packages/kumo/src/components/layer-card/layer-card.tsx b/packages/kumo/src/components/layer-card/layer-card.tsx
index 1a708cd4e0..5f65144022 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 @@ import { cn } from "../../utils/cn";
 const LAYER_CARD_SURFACE_CLASSES =
   "overflow-hidden rounded-lg bg-kumo-base shadow-xs ring ring-kumo-line";
 const LAYER_CARD_LAYERED_ROOT_CLASSES =
-  "flex w-full flex-col overflow-hidden rounded-lg bg-kumo-elevated text-base ring ring-kumo-hairline";
+  "flex w-full flex-col overflow-hidden rounded-lg bg-kumo-elevated text-base ring ring-kumo-line";
 const LAYER_CARD_SECONDARY_CLASSES =
   "-my-2 flex items-center gap-2 bg-kumo-elevated p-4 text-base font-medium text-kumo-subtle";
 const LAYER_CARD_PRIMARY_CLASSES =
diff --git a/packages/kumo/src/components/pagination/pagination.tsx b/packages/kumo/src/components/pagination/pagination.tsx
index bd93912d66..032e439784 100644
--- a/packages/kumo/src/components/pagination/pagination.tsx
+++ b/packages/kumo/src/components/pagination/pagination.tsx
@@ -286,7 +286,7 @@ function PaginationControls({
             (pageSelector === "dropdown" ? (
               <Select
                 aria-label={labels.pageNumber}
-                className="rounded-none ring-kumo-hairline"
+                className="rounded-none ring-kumo-line"
                 value={page}
                 onValueChange={(value) => {
                   const num = value as number;
@@ -374,7 +374,7 @@ function PaginationSeparator({ className }: PaginationSeparatorProps) {
   return (
     <div
       data-slot="pagination-separator"
-      className={cn("mx-2 h-6 border-l border-kumo-hairline", className)}
+      className={cn("mx-2 h-6 border-l border-kumo-line", className)}
     />
   );
 }
diff --git a/packages/kumo/src/components/radio/radio.tsx b/packages/kumo/src/components/radio/radio.tsx
index 071b62dffe..a9a76bb85e 100644
--- a/packages/kumo/src/components/radio/radio.tsx
+++ b/packages/kumo/src/components/radio/radio.tsx
@@ -26,7 +26,7 @@ export type RadioGroupChangeEventDetails =
 export const KUMO_RADIO_VARIANTS = {
   variant: {
     default: {
-      classes: "ring-kumo-hairline",
+      classes: "ring-kumo-line",
       description: "Default radio appearance",
     },
     error: {
@@ -41,7 +41,7 @@ export const KUMO_RADIO_VARIANTS = {
     },
     card: {
       classes:
-        "rounded-lg border border-kumo-hairline bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint",
+        "rounded-lg border border-kumo-line bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint",
       description:
         "Choice card appearance with border, padding, and highlighted selection state",
     },
@@ -327,7 +327,7 @@ function _RadioItem<T = string>(
         data-kumo-component="Radio"
         data-kumo-part="item-label"
         className={cn(
-          "group relative m-0 flex items-start gap-3 rounded-lg border border-kumo-hairline bg-kumo-base p-3 transition-colors has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint",
+          "group relative m-0 flex items-start gap-3 rounded-lg border border-kumo-line bg-kumo-base p-3 transition-colors has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint",
           controlAtStart && "flex-row-reverse",
           variant === "error" &&
             "border-kumo-danger has-[[data-checked]]:border-kumo-danger has-[[data-checked]]:bg-kumo-base",
@@ -360,7 +360,7 @@ function _RadioItem<T = string>(
             variant === "error" ? "ring-kumo-danger" : "ring-kumo-line",
             !disabled &&
               variant !== "error" &&
-              "group-hover:ring-kumo-hairline focus-visible:outline-offset-3",
+              "group-hover:ring-kumo-line focus-visible:outline-offset-3",
             !disabled &&
               variant === "error" &&
               "focus-visible:outline-offset-3",
@@ -402,7 +402,7 @@ function _RadioItem<T = string>(
           variant === "error" ? "ring-kumo-danger" : "ring-kumo-line",
           !disabled &&
             variant !== "error" &&
-            "group-hover:ring-kumo-hairline focus:ring-2 focus:ring-kumo-focus focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:outline-offset-3",
+            "group-hover:ring-kumo-line focus:ring-2 focus:ring-kumo-focus focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:outline-offset-3",
           !disabled &&
             variant === "error" &&
             "focus:ring-2 focus:ring-kumo-focus focus-visible:ring-2 focus-visible:ring-kumo-brand 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 0926e899a1..563860580b 100644
--- a/packages/kumo/src/components/select/select.test.tsx
+++ b/packages/kumo/src/components/select/select.test.tsx
@@ -486,7 +486,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-hairline");
+      expect(separator?.className).toContain("bg-kumo-line");
     });
 
     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 1291cb7fc7..22eddd4046 100644
--- a/packages/kumo/src/components/select/select.tsx
+++ b/packages/kumo/src/components/select/select.tsx
@@ -689,7 +689,7 @@ const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
   ({ className }, ref) => (
     <SelectBase.Separator
       ref={ref}
-      className={cn("-mx-1 my-1 h-px bg-kumo-hairline", className)}
+      className={cn("-mx-1 my-1 h-px bg-kumo-line", className)}
     />
   ),
 );
diff --git a/packages/kumo/src/components/sidebar/sidebar.tsx b/packages/kumo/src/components/sidebar/sidebar.tsx
index e822fa41ba..facbe9236c 100644
--- a/packages/kumo/src/components/sidebar/sidebar.tsx
+++ b/packages/kumo/src/components/sidebar/sidebar.tsx
@@ -2044,7 +2044,7 @@ const SidebarResizeHandle = forwardRef<
         "absolute inset-y-0 z-2 hidden w-3 cursor-col-resize sm:block",
         "after:absolute after:inset-y-0 after:w-0.5",
         "after:bg-transparent after:transition-colors",
-        "hover:after:bg-kumo-hairline focus-visible:after:bg-kumo-hairline active:after:bg-kumo-hairline",
+        "hover:after:bg-kumo-line focus-visible:after:bg-kumo-line active:after:bg-kumo-line",
         "focus:outline-none",
         side === "left" && "right-0 after:right-0",
         side === "right" && "left-0 after:left-0",
diff --git a/packages/kumo/src/components/switch/switch.tsx b/packages/kumo/src/components/switch/switch.tsx
index 6731eb258e..aa9ff78019 100644
--- a/packages/kumo/src/components/switch/switch.tsx
+++ b/packages/kumo/src/components/switch/switch.tsx
@@ -276,7 +276,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-hairline"
+              : "bg-neutral-150 dark:bg-kumo-base ring-kumo-line"
             : 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";
@@ -429,7 +429,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-hairline"
+                : "bg-neutral-150 dark:bg-kumo-base ring-kumo-line"
               : 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";
diff --git a/packages/kumo/src/components/table-of-contents/table-of-contents.tsx b/packages/kumo/src/components/table-of-contents/table-of-contents.tsx
index ddcb32374a..7dbb3a137a 100644
--- a/packages/kumo/src/components/table-of-contents/table-of-contents.tsx
+++ b/packages/kumo/src/components/table-of-contents/table-of-contents.tsx
@@ -63,7 +63,7 @@ const TableOfContentsList = forwardRef<
   <ul
     ref={ref}
     className={cn(
-      "flex flex-col gap-2 border-l-2 border-kumo-hairline",
+      "flex flex-col gap-2 border-l-2 border-kumo-line",
       className,
     )}
     {...props}
@@ -138,7 +138,7 @@ export interface TableOfContentsGroupProps extends Omit<
 }
 
 const NESTED_UL_CLASSES =
-  "flex flex-col gap-2 border-l-2 border-kumo-hairline [&>li>a]:pl-7 [&>li>button]:pl-7";
+  "flex flex-col gap-2 border-l-2 border-transparent [&>li>a]:pl-7 [&>li>button]:pl-7";
 
 const TableOfContentsGroup = forwardRef<
   HTMLLIElement,
diff --git a/packages/kumo/src/components/table/table.tsx b/packages/kumo/src/components/table/table.tsx
index 3da293028d..51fed00e46 100644
--- a/packages/kumo/src/components/table/table.tsx
+++ b/packages/kumo/src/components/table/table.tsx
@@ -271,7 +271,7 @@ const TableResizeHandle = forwardRef<
         "focus-visible:ring-2 focus-visible:ring-kumo-brand", // Consistent keyboard focus styling
       )}
     >
-      <span className="h-5 w-[2px] rounded bg-kumo-hairline" />
+      <span className="h-5 w-[2px] rounded bg-kumo-line" />
     </button>
   );
 });
diff --git a/packages/kumo/src/components/tabs/tabs.tsx b/packages/kumo/src/components/tabs/tabs.tsx
index f76480d7eb..51eae0a35c 100644
--- a/packages/kumo/src/components/tabs/tabs.tsx
+++ b/packages/kumo/src/components/tabs/tabs.tsx
@@ -195,7 +195,7 @@ export function Tabs({
       className={cn(
         "relative isolate min-w-0 font-medium",
         isSegmented &&
-          (isSm ? "rounded-md" : "rounded-lg") + " ring ring-kumo-hairline/70",
+          (isSm ? "rounded-md" : "rounded-lg") + " ring ring-kumo-line/70",
         className,
       )}
       onValueChange={(nextValue) => {
@@ -224,7 +224,7 @@ export function Tabs({
           isSegmented && "rounded-lg bg-kumo-recessed px-0.5",
           isSegmented && (isSm ? "h-6.5 rounded-md" : "h-9"),
           isOverflowing && "cursor-grab active:cursor-grabbing",
-          isUnderline && "gap-4 border-b border-kumo-hairline pb-2",
+          isUnderline && "gap-4 border-b border-kumo-line pb-2",
           isUnderline && (isSm ? "h-6.5" : "h-7.5"),
           listClassName,
         )}
diff --git a/packages/kumo/src/components/toast/toast.tsx b/packages/kumo/src/components/toast/toast.tsx
index 29e1b2f5ad..b2d1d8e82e 100644
--- a/packages/kumo/src/components/toast/toast.tsx
+++ b/packages/kumo/src/components/toast/toast.tsx
@@ -88,7 +88,7 @@ export const KUMO_TOAST_STYLING = {
     padding: 16,
     borderRadius: 8,
     background: "bg-kumo-base",
-    border: "ring-[0.3px] ring-kumo-hairline",
+    border: "ring-[0.3px] ring-kumo-line",
     shadow: "shadow-lg",
     gap: 4,
   },
diff --git a/packages/kumo/src/styles/kumo-binding.css b/packages/kumo/src/styles/kumo-binding.css
index 89234acd42..ef7f84e737 100644
--- a/packages/kumo/src/styles/kumo-binding.css
+++ b/packages/kumo/src/styles/kumo-binding.css
@@ -22,6 +22,13 @@
   --color-kumo-neutral-950: oklch(15% 0 0);
   --color-kumo-neutral-975: oklch(12% 0 0);
   --color-kumo-neutral-1000: oklch(10% 0 0);
+
+  /**
+   * @deprecated `kumo-hairline` is deprecated. Use `kumo-line` instead.
+   * This alias keeps existing consumers working; it will be removed in the
+   * next major release.
+   */
+  --color-kumo-hairline: var(--color-kumo-line);
 }
 
 /* Typography is now generated in theme-kumo.css via codegen:themes */
diff --git a/packages/kumo/src/styles/theme-fedramp.css b/packages/kumo/src/styles/theme-fedramp.css
index 588574c08d..773830baa4 100644
--- a/packages/kumo/src/styles/theme-fedramp.css
+++ b/packages/kumo/src/styles/theme-fedramp.css
@@ -6,11 +6,17 @@
  * Then run: pnpm codegen:themes
  */
 
+
 @layer base {
   [data-theme="fedramp"] {
-    --color-kumo-canvas: light-dark(#5b697c, #5b697c);
-    --color-kumo-base: light-dark(#5b697c, #5b697c);
-    --color-kumo-hairline: light-dark(#c8d4e5, #c8d4e5);
+    --color-kumo-canvas: light-dark(
+    #5b697c,
+    #5b697c
+  );
+    --color-kumo-base: light-dark(
+    #5b697c,
+    #5b697c
+  );
   }
 }
 
@@ -18,14 +24,10 @@
   [data-theme="fedramp"] {
     --color-kumo-canvas: #5b697c;
     --color-kumo-base: #5b697c;
-    --color-kumo-hairline: #c8d4e5;
   }
-
-  [data-mode="dark"] [data-theme="fedramp"],
-  [data-theme="fedramp"][data-mode="dark"],
-  [data-theme="fedramp"] [data-mode="dark"] {
+  
+  [data-mode="dark"] [data-theme="fedramp"], [data-theme="fedramp"][data-mode="dark"], [data-theme="fedramp"] [data-mode="dark"] {
     --color-kumo-canvas: #5b697c;
     --color-kumo-base: #5b697c;
-    --color-kumo-hairline: #c8d4e5;
   }
 }
diff --git a/packages/kumo/src/styles/theme-kumo.css b/packages/kumo/src/styles/theme-kumo.css
index 356e3daf6b..4590fc3134 100644
--- a/packages/kumo/src/styles/theme-kumo.css
+++ b/packages/kumo/src/styles/theme-kumo.css
@@ -6,6 +6,7 @@
  * Then run: pnpm codegen:themes
  */
 
+
 @theme {
   --text-color-kumo-default: light-dark(
     var(--color-neutral-900, oklch(21% 0.006 285.885)),
@@ -37,7 +38,10 @@
     var(--color-neutral-500, oklch(55.6% 0 0))
   );
 
-  --text-color-kumo-brand: light-dark(#f6821f, #f6821f);
+  --text-color-kumo-brand: light-dark(
+    #f6821f,
+    #f6821f
+  );
 
   --text-color-kumo-link: light-dark(
     var(--color-blue-800, oklch(42.4% 0.199 265.638)),
@@ -83,6 +87,7 @@
     var(--color-white, #fff),
     var(--color-black, #000)
   );
+
 }
 
 @theme {
@@ -152,13 +157,8 @@
   );
 
   --color-kumo-line: light-dark(
-    oklch(14.5% 0 0 / 0.1),
-    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-800, oklch(26.9% 0 0))
+    rgb(0 0 0 / 0.1),
+    rgb(255 255 255 / 0.1)
   );
 
   --color-kumo-focus: light-dark(
@@ -188,7 +188,7 @@
 
   --color-kumo-info-tint: light-dark(
     oklch(93.2% 0.032 255.6 / 0.45),
-    oklch(38% 0.145 265.5 / 0.22)
+    oklch(38.0% 0.145 265.5 / 0.22)
   );
 
   --color-kumo-info: light-dark(
@@ -197,13 +197,13 @@
   );
 
   --color-kumo-warning-tint: light-dark(
-    oklch(93.1% 0.107 94.6 / 0.2),
-    oklch(35.3% 0.079 65 / 0.37)
+    oklch(93.1% 0.107 94.6 / 0.20),
+    oklch(35.3% 0.079 65.0 / 0.37)
   );
 
   --color-kumo-warning: light-dark(
     oklch(73.9% 0.177 58.2),
-    oklch(64.5% 0.168 50)
+    oklch(64.5% 0.168 50.0)
   );
 
   --color-kumo-danger-tint: light-dark(
@@ -218,7 +218,7 @@
 
   --color-kumo-success-tint: light-dark(
     oklch(96.2% 0.043 156.7 / 0.57),
-    oklch(39.3% 0.096 152.3 / 0.2)
+    oklch(39.3% 0.096 152.3 / 0.20)
   );
 
   --color-kumo-success: light-dark(
@@ -275,6 +275,7 @@
     var(--color-neutral-950, oklch(14.5% 0 0)),
     var(--color-white, #fff)
   );
+
 }
 
 @theme {
@@ -290,12 +291,8 @@
 }
 
 @layer base {
-  :root,
-  [data-theme="kumo"] {
-    --text-color-kumo-default: var(
-      --color-neutral-900,
-      oklch(21% 0.006 285.885)
-    );
+  :root, [data-theme="kumo"] {
+    --text-color-kumo-default: var(--color-neutral-900, oklch(21% 0.006 285.885));
     --text-color-kumo-inverse: var(--color-neutral-100, oklch(97% 0 0));
     --text-color-kumo-strong: var(--color-neutral-950, oklch(14.5% 0 0));
     --text-color-kumo-subtle: var(--color-neutral-500, oklch(55.6% 0 0));
@@ -304,24 +301,12 @@
     --text-color-kumo-brand: #f6821f;
     --text-color-kumo-link: var(--color-blue-800, oklch(42.4% 0.199 265.638));
     --text-color-kumo-info: var(--color-blue-800, oklch(42.4% 0.199 265.638));
-    --text-color-kumo-success: var(
-      --color-emerald-800,
-      oklch(43.2% 0.095 166.913)
-    );
+    --text-color-kumo-success: var(--color-emerald-800, oklch(43.2% 0.095 166.913));
     --text-color-kumo-danger: var(--color-red-700, oklch(50.5% 0.213 27.518));
     --text-color-kumo-warning: oklch(59.7% 0.144 57.5);
-    --text-color-kumo-badge-orange-subtle: var(
-      --color-orange-800,
-      oklch(47% 0.157 37.304)
-    );
-    --text-color-kumo-badge-teal-subtle: var(
-      --color-teal-800,
-      oklch(43.7% 0.078 188.216)
-    );
-    --text-color-kumo-badge-neutral-subtle: var(
-      --color-neutral-800,
-      oklch(26.9% 0 0)
-    );
+    --text-color-kumo-badge-orange-subtle: var(--color-orange-800, oklch(47% 0.157 37.304));
+    --text-color-kumo-badge-teal-subtle: var(--color-teal-800, oklch(43.7% 0.078 188.216));
+    --text-color-kumo-badge-neutral-subtle: var(--color-neutral-800, oklch(26.9% 0 0));
     --text-color-kumo-badge-inverted: var(--color-white, #fff);
     --color-kumo-canvas: var(--color-kumo-neutral-25, oklch(98.75% 0 0));
     --color-kumo-elevated: var(--color-kumo-neutral-75, oklch(98% 0 0));
@@ -336,8 +321,7 @@
     --color-kumo-fill-hover: var(--color-kumo-neutral-125, oklch(96.5% 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: oklch(14.5% 0 0 / 0.1);
-    --color-kumo-hairline: var(--color-kumo-neutral-150, oklch(93.5% 0 0));
+    --color-kumo-line: rgb(0 0 0 / 0.1);
     --color-kumo-focus: var(--color-kumo-neutral-950, oklch(15% 0 0));
     --color-kumo-shadow-edge: oklch(0% 0 0 / 0.12);
     --color-kumo-shadow-drop: oklch(0% 0 0 / 0.08);
@@ -345,38 +329,25 @@
     --color-kumo-tip-stroke: transparent;
     --color-kumo-info-tint: oklch(93.2% 0.032 255.6 / 0.45);
     --color-kumo-info: var(--color-blue-500, oklch(68.5% 0.169 237.323));
-    --color-kumo-warning-tint: oklch(93.1% 0.107 94.6 / 0.2);
+    --color-kumo-warning-tint: oklch(93.1% 0.107 94.6 / 0.20);
     --color-kumo-warning: oklch(73.9% 0.177 58.2);
     --color-kumo-danger-tint: oklch(93.6% 0.032 17.7 / 0.42);
     --color-kumo-danger: var(--color-red-500, oklch(63.7% 0.237 25.331));
     --color-kumo-success-tint: oklch(96.2% 0.043 156.7 / 0.57);
     --color-kumo-success: var(--color-emerald-600, oklch(59.6% 0.145 163.225));
     --color-kumo-banner-info: oklch(93.2% 0.032 255.585 / 0.7);
-    --color-kumo-banner-warning: var(
-      --color-yellow-100,
-      oklch(97.3% 0.071 103.193)
-    );
+    --color-kumo-banner-warning: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
     --color-kumo-badge-red: var(--color-red-600, oklch(57.7% 0.245 27.325));
-    --color-kumo-badge-green: var(
-      --color-emerald-600,
-      oklch(59.6% 0.145 163.225)
-    );
+    --color-kumo-badge-green: var(--color-emerald-600, oklch(59.6% 0.145 163.225));
     --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76));
-    --color-kumo-badge-purple: var(
-      --color-purple-600,
-      oklch(55.8% 0.288 302.321)
-    );
+    --color-kumo-badge-purple: var(--color-purple-600, oklch(55.8% 0.288 302.321));
     --color-kumo-badge-teal: var(--color-teal-650, oklch(54.9% 0.096 184.565));
     --color-kumo-badge-blue: var(--color-blue-600, oklch(54.6% 0.245 262.881));
     --color-kumo-badge-neutral: var(--color-neutral-500, oklch(55.6% 0 0));
     --color-kumo-badge-inverted: var(--color-neutral-950, oklch(14.5% 0 0));
   }
-
-  :root[data-mode="dark"],
-  [data-mode="dark"]:not([data-theme]),
-  [data-mode="dark"] [data-theme="kumo"],
-  [data-theme="kumo"][data-mode="dark"],
-  [data-theme="kumo"] [data-mode="dark"] {
+  
+  :root[data-mode="dark"], [data-mode="dark"]:not([data-theme]), [data-mode="dark"] [data-theme="kumo"], [data-theme="kumo"][data-mode="dark"], [data-theme="kumo"] [data-mode="dark"] {
     --text-color-kumo-default: var(--color-neutral-100, oklch(97% 0 0));
     --text-color-kumo-inverse: var(--color-neutral-900, oklch(20.5% 0 0));
     --text-color-kumo-strong: var(--color-neutral-50, oklch(98.5% 0 0));
@@ -386,24 +357,12 @@
     --text-color-kumo-brand: #f6821f;
     --text-color-kumo-link: var(--color-blue-400, oklch(70.7% 0.165 254.624));
     --text-color-kumo-info: var(--color-blue-400, oklch(70.7% 0.165 254.624));
-    --text-color-kumo-success: var(
-      --color-emerald-200,
-      oklch(90.5% 0.093 164.15)
-    );
+    --text-color-kumo-success: var(--color-emerald-200, oklch(90.5% 0.093 164.15));
     --text-color-kumo-danger: var(--color-red-400, oklch(70.4% 0.191 22.216));
     --text-color-kumo-warning: var(--color-orange-400, oklch(75% 0.183 55.934));
-    --text-color-kumo-badge-orange-subtle: var(
-      --color-orange-200,
-      oklch(90.1% 0.076 70.697)
-    );
-    --text-color-kumo-badge-teal-subtle: var(
-      --color-teal-200,
-      oklch(91% 0.096 180.426)
-    );
-    --text-color-kumo-badge-neutral-subtle: var(
-      --color-neutral-200,
-      oklch(92.2% 0 0)
-    );
+    --text-color-kumo-badge-orange-subtle: var(--color-orange-200, oklch(90.1% 0.076 70.697));
+    --text-color-kumo-badge-teal-subtle: var(--color-teal-200, oklch(91% 0.096 180.426));
+    --text-color-kumo-badge-neutral-subtle: var(--color-neutral-200, oklch(92.2% 0 0));
     --text-color-kumo-badge-inverted: var(--color-black, #000);
     --color-kumo-canvas: var(--color-kumo-neutral-1000, oklch(10% 0 0));
     --color-kumo-elevated: var(--color-kumo-neutral-975, oklch(12% 0 0));
@@ -416,42 +375,31 @@
     --color-kumo-interact: var(--color-neutral-700, oklch(37.1% 0 0));
     --color-kumo-fill: var(--color-neutral-800, oklch(26.9% 0 0));
     --color-kumo-fill-hover: var(--color-neutral-800, oklch(37.1% 0 0));
-    --color-kumo-brand: color-mix(
-      in oklch,
-      oklch(0.5772 0.2324 260),
-      black 10%
-    );
+    --color-kumo-brand: color-mix(in oklch, oklch(0.5772 0.2324 260), black 10%);
     --color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376));
-    --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-line: rgb(255 255 255 / 0.1);
     --color-kumo-focus: var(--color-kumo-neutral-150, oklch(93.5% 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;
     --color-kumo-tip-stroke: var(--color-neutral-800, oklch(26.9% 0 0));
-    --color-kumo-info-tint: oklch(38% 0.145 265.5 / 0.22);
+    --color-kumo-info-tint: oklch(38.0% 0.145 265.5 / 0.22);
     --color-kumo-info: var(--color-blue-500, oklch(68.5% 0.169 237.323));
-    --color-kumo-warning-tint: oklch(35.3% 0.079 65 / 0.37);
-    --color-kumo-warning: oklch(64.5% 0.168 50);
+    --color-kumo-warning-tint: oklch(35.3% 0.079 65.0 / 0.37);
+    --color-kumo-warning: oklch(64.5% 0.168 50.0);
     --color-kumo-danger-tint: oklch(42.9% 0.176 28.7 / 0.17);
     --color-kumo-danger: var(--color-red-600, oklch(57.7% 0.245 27.325));
-    --color-kumo-success-tint: oklch(39.3% 0.096 152.3 / 0.2);
+    --color-kumo-success-tint: oklch(39.3% 0.096 152.3 / 0.20);
     --color-kumo-success: var(--color-emerald-400, oklch(76.5% 0.177 163.223));
     --color-kumo-banner-info: oklch(37.9% 0.146 265.522 / 0.5);
     --color-kumo-banner-warning: oklch(55.4% 0.135 66.442 / 0.5);
     --color-kumo-badge-red: var(--color-red-700, oklch(50.5% 0.213 27.518));
-    --color-kumo-badge-green: var(
-      --color-emerald-700,
-      oklch(50.8% 0.118 165.612)
-    );
+    --color-kumo-badge-green: var(--color-emerald-700, oklch(50.8% 0.118 165.612));
     --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76));
-    --color-kumo-badge-purple: var(
-      --color-purple-700,
-      oklch(49.6% 0.265 301.924)
-    );
+    --color-kumo-badge-purple: var(--color-purple-700, oklch(49.6% 0.265 301.924));
     --color-kumo-badge-teal: var(--color-teal-700, oklch(51.1% 0.096 186.391));
     --color-kumo-badge-blue: var(--color-blue-700, oklch(48.8% 0.243 264.376));
     --color-kumo-badge-neutral: var(--color-neutral-600, oklch(43.9% 0 0));
     --color-kumo-badge-inverted: var(--color-white, #fff);
   }
-}
+}
\ No newline at end of file