@blurrow/ui 0.2.0 → 0.2.1

package/dist/registry/SpotlightCard.tsx

@@ -52,11 +52,11 @@ export function SpotlightCard({
           <div
             className={[
               "w-9 h-9 rounded-[11px] flex items-center justify-center mb-auto",
-              dark ? "text-white" : "text-neutral-800",
+              dark ? "text-white" : "text-ink-soft",
             ].join(" ")}
             style={{
-              background: dark ? "var(--tile-dark)" : "var(--face-light)",
-              boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
+              background: dark ? "var(--tile-dark)" : "var(--tile)",
+              boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)",
             }}
           >
             {icon}
@@ -69,7 +69,7 @@ export function SpotlightCard({
               // Without an icon above to push it down, the copy still sits low
               icon ? "pt-8" : "mt-auto",
               "text-[14px] font-medium tracking-[-0.01em]",
-              dark ? "text-neutral-400" : "text-neutral-500",
+              dark ? "text-neutral-400" : "text-ink-muted",
             ].join(" ")}
           >
             {eyebrow}
@@ -81,7 +81,7 @@ export function SpotlightCard({
             titleSizeBySize[size],
             !icon && !eyebrow ? "mt-auto" : "",
             "font-medium leading-[1.12] tracking-[-0.03em] text-balance",
-            dark ? "text-white" : "text-neutral-900",
+            dark ? "text-white" : "text-ink",
           ].join(" ")}
         >
           {title}
@@ -91,7 +91,7 @@ export function SpotlightCard({
           <p
             className={[
               "text-[15px] leading-[1.6] max-w-lg text-pretty",
-              dark ? "text-neutral-400" : "text-neutral-600",
+              dark ? "text-neutral-400" : "text-ink-body",
             ].join(" ")}
           >
             {subtitle}

package/dist/registry/Stat.tsx

@@ -43,16 +43,16 @@ export function Stat({ value, label, prefix = "", suffix = "", trend, className
     <div className={["flex flex-col gap-0.5", className].join(" ")}>
       <div className="flex items-baseline gap-1.5">
         <span
-          className="text-[32px] font-semibold text-neutral-900 leading-none tabular-nums"
+          className="text-[32px] font-semibold text-ink leading-none tabular-nums"
           style={{ letterSpacing: "-0.03em" }}
         >
           {prefix}{displayed}{suffix}
         </span>
         {trend && (
-          <span className="text-[12px] text-neutral-500 font-medium">{trend}</span>
+          <span className="text-[12px] text-ink-muted font-medium">{trend}</span>
         )}
       </div>
-      <span className="text-[12px] text-neutral-500">{label}</span>
+      <span className="text-[12px] text-ink-muted">{label}</span>
     </div>
   );
 }
@@ -65,7 +65,7 @@ interface StatRowProps {
 export function StatRow({ children, className = "" }: StatRowProps) {
   const arr = React.Children.toArray(children);
   return (
-    <div className={["grid grid-cols-2 gap-6 sm:flex sm:divide-x sm:divide-neutral-200 sm:gap-0", className].join(" ")}>
+    <div className={["grid grid-cols-2 gap-6 sm:flex sm:divide-x sm:divide-line-strong sm:gap-0", className].join(" ")}>
       {arr.map((child, i) => (
         <div
           key={i}

package/dist/registry/StatCard.tsx

@@ -76,7 +76,7 @@ function Sparkline({ data, dark }: { data: number[]; dark?: boolean }) {
   // The fill runs off both edges of the face so it reads as part of the surface
   const area = `M0,${pts[0][1].toFixed(1)} ${line.replace(/^M/, "L")} L${W},${pts[pts.length - 1][1].toFixed(1)} L${W},${H} L0,${H} Z`;
 
-  const stroke = dark ? "#ffffff" : "#171717";
+  const stroke = dark ? "var(--spark-dark)" : "var(--spark)";
   const gradId = `spark-fade-${uid.replace(/:/g, "")}`;
   const [lx, ly] = pts[pts.length - 1];
 
@@ -86,22 +86,22 @@ function Sparkline({ data, dark }: { data: number[]; dark?: boolean }) {
       className="relative h-14"
       // Fades in from the left so the line arrives rather than starts at a hard edge
       style={{
-        maskImage: "linear-gradient(90deg, transparent 0%, #000 18%)",
-        WebkitMaskImage: "linear-gradient(90deg, transparent 0%, #000 18%)",
+        maskImage: "linear-gradient(90deg, transparent 0%, black 18%)",
+        WebkitMaskImage: "linear-gradient(90deg, transparent 0%, black 18%)",
       }}
     >
       <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" className="absolute inset-0 w-full h-full overflow-visible">
         <defs>
           <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor={stroke} stopOpacity={dark ? 0.2 : 0.08} />
-            <stop offset="100%" stopColor={stroke} stopOpacity="0" />
+            <stop offset="0%" style={{ stopColor: stroke }} stopOpacity={dark ? 0.2 : 0.08} />
+            <stop offset="100%" style={{ stopColor: stroke }} stopOpacity="0" />
           </linearGradient>
         </defs>
         <path d={area} fill={`url(#${gradId})`} />
         <path
           d={line}
           fill="none"
-          stroke={stroke}
+          style={{ stroke }}
           strokeOpacity={dark ? 0.85 : 0.9}
           strokeWidth={1.5}
           strokeLinecap="round"
@@ -116,7 +116,7 @@ function Sparkline({ data, dark }: { data: number[]; dark?: boolean }) {
           left: `${(lx / W) * 100}%`,
           top: `${(ly / H) * 100}%`,
           background: stroke,
-          boxShadow: dark ? "0 0 0 3px rgba(255,255,255,0.14)" : "0 0 0 3px rgba(17,17,17,0.08)",
+          boxShadow: dark ? "0 0 0 3px var(--spark-dark-halo)" : "0 0 0 3px var(--spark-halo)",
         }}
       />
     </div>
@@ -124,9 +124,9 @@ function Sparkline({ data, dark }: { data: number[]; dark?: boolean }) {
 }
 
 const deltaTone: Record<DeltaDirection, { light: string; dark: string; label: string }> = {
-  up: { light: "text-emerald-700", dark: "text-emerald-400", label: "up" },
-  down: { light: "text-red-600", dark: "text-red-400", label: "down" },
-  neutral: { light: "text-neutral-600", dark: "text-neutral-300", label: "unchanged" },
+  up: { light: "text-success", dark: "text-emerald-400", label: "up" },
+  down: { light: "text-danger", dark: "text-red-400", label: "down" },
+  neutral: { light: "text-ink-body", dark: "text-neutral-300", label: "unchanged" },
 };
 
 function DeltaArrow({ direction }: { direction: DeltaDirection }) {
@@ -171,8 +171,8 @@ export function StatCard({
         dark ? deltaTone[delta.direction].dark : deltaTone[delta.direction].light,
       ].join(" ")}
       style={{
-        background: dark ? "var(--tile-dark)" : "var(--face-light)",
-        boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
+        background: dark ? "var(--tile-dark)" : "var(--tile)",
+        boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)",
       }}
     >
       <DeltaArrow direction={delta.direction} />
@@ -192,11 +192,11 @@ export function StatCard({
               aria-hidden
               className={[
                 "w-7 h-7 rounded-[9px] flex items-center justify-center shrink-0",
-                dark ? "text-neutral-100" : "text-neutral-600",
+                dark ? "text-neutral-100" : "text-ink-body",
               ].join(" ")}
               style={{
-                background: dark ? "var(--tile-dark)" : "var(--face-light)",
-                boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
+                background: dark ? "var(--tile-dark)" : "var(--tile)",
+                boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)",
               }}
             >
               {icon}
@@ -205,7 +205,7 @@ export function StatCard({
           <p
             className={[
               "text-[14px] font-medium tracking-[-0.01em] truncate",
-              dark ? "text-neutral-300" : "text-neutral-700",
+              dark ? "text-neutral-300" : "text-ink-label",
             ].join(" ")}
           >
             {label}
@@ -220,7 +220,7 @@ export function StatCard({
         aria-hidden
         className={[
           "px-6 mt-5 text-[44px] font-semibold tabular-nums tracking-[-0.045em] leading-none",
-          dark ? "text-white" : "text-neutral-900",
+          dark ? "text-white" : "text-ink",
         ].join(" ")}
       >
         {prefix}
@@ -230,7 +230,7 @@ export function StatCard({
           <span
             className={[
               "ml-1 text-[17px] font-medium tracking-[-0.01em]",
-              dark ? "text-neutral-500" : "text-neutral-400",
+              dark ? "text-neutral-500" : "text-ink-faint",
             ].join(" ")}
           >
             {suffix.trim()}
@@ -238,7 +238,7 @@ export function StatCard({
         )}
       </p>
       {hint && (
-        <p className={["px-6 mt-2.5 text-[13px] truncate", dark ? "text-neutral-500" : "text-neutral-500"].join(" ")}>
+        <p className={["px-6 mt-2.5 text-[13px] truncate", dark ? "text-neutral-500" : "text-ink-muted"].join(" ")}>
           {hint}
         </p>
       )}

package/dist/registry/Steps.tsx

@@ -62,7 +62,7 @@ export function Steps({ steps, current, className = "" }: StepsProps) {
                 <span
                   className="block h-full rounded-full origin-left transition-transform duration-500 ease-[var(--ease-out-soft)]"
                   style={{
-                    background: "var(--face-dark)",
+                    background: "var(--face-inverse)",
                     transform: isCompleted ? "scaleX(1)" : "scaleX(0)",
                   }}
                 />
@@ -73,14 +73,14 @@ export function Steps({ steps, current, className = "" }: StepsProps) {
               className={[
                 "relative w-[30px] h-[30px] rounded-full flex items-center justify-center text-[12.5px] font-semibold tabular-nums shrink-0",
                 "transition-[box-shadow,color] duration-300",
-                reached ? "text-white" : "text-neutral-400",
+                reached ? "text-ink-inverse" : "text-ink-faint",
               ].join(" ")}
               style={{
-                background: reached ? "var(--face-dark)" : "var(--field)",
+                background: reached ? "var(--face-inverse)" : "var(--field)",
                 boxShadow: isCurrent
-                  ? "var(--face-dark-shadow), 0 0 0 4px rgba(17,17,17,0.06), 0 0 0 5px rgba(17,17,17,0.03)"
+                  ? "var(--face-inverse-shadow), var(--halo)"
                   : reached
-                    ? "var(--face-dark-shadow)"
+                    ? "var(--face-inverse-shadow)"
                     : "var(--field-shadow)",
               }}
             >
@@ -92,13 +92,13 @@ export function Steps({ steps, current, className = "" }: StepsProps) {
               <span
                 className={[
                   "text-[13px] font-medium leading-tight transition-colors duration-200",
-                  reached ? "text-neutral-900" : "text-neutral-500",
+                  reached ? "text-ink" : "text-ink-muted",
                 ].join(" ")}
               >
                 {step.label}
               </span>
               {step.description && (
-                <span className="text-[12px] text-neutral-400 leading-snug">{step.description}</span>
+                <span className="text-[12px] text-ink-faint leading-snug">{step.description}</span>
               )}
             </span>
           </li>

package/dist/registry/Table.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 interface Column<T> {
@@ -36,26 +38,26 @@ export function Table<T extends Record<string, unknown>>({
     >
       {(title || description) && (
         <div className="px-3.5 pt-3.5 pb-3">
-          {title && <p className="text-[13px] font-semibold text-neutral-900 tracking-[-0.01em]">{title}</p>}
-          {description && <p className="text-[12px] text-neutral-500 mt-0.5">{description}</p>}
+          {title && <p className="text-[13px] font-semibold text-ink tracking-[-0.01em]">{title}</p>}
+          {description && <p className="text-[12px] text-ink-muted mt-0.5">{description}</p>}
         </div>
       )}
 
       <div
-        className="bg-white rounded-[13px] overflow-x-auto scroll-thin"
+        className="bg-panel-face rounded-[13px] overflow-x-auto scroll-thin"
         style={{ boxShadow: "var(--panel-face-shadow)" }}
       >
         <table className="w-full text-left border-collapse">
           {title && <caption className="sr-only">{title}</caption>}
           <thead>
-            <tr className="border-b border-neutral-100">
+            <tr className="border-b border-line">
               {columns.map((col) => (
                 <th
                   key={String(col.key)}
                   scope="col"
                   style={col.width ? { width: col.width } : undefined}
                   className={[
-                    "px-4 pt-3 pb-2.5 text-[12px] font-medium text-neutral-500 lowercase whitespace-nowrap",
+                    "px-4 pt-3 pb-2.5 text-[12px] font-medium text-ink-muted lowercase whitespace-nowrap",
                     alignClass(col.align),
                   ].join(" ")}
                 >
@@ -82,9 +84,9 @@ export function Table<T extends Record<string, unknown>>({
                     : undefined
                 }
                 className={[
-                  "border-b border-neutral-100 last:border-0 transition-colors duration-100",
+                  "border-b border-line last:border-0 transition-colors duration-100",
                   onRowClick
-                    ? "cursor-pointer hover:bg-neutral-50 focus-visible:bg-neutral-50 outline-none focus-visible:shadow-[inset_2px_0_0_#171717]"
+                    ? "cursor-pointer hover:bg-surface-hover focus-visible:bg-surface-hover outline-none focus-visible:shadow-[inset_2px_0_0_var(--ink)]"
                     : "",
                 ].join(" ")}
               >
@@ -95,7 +97,7 @@ export function Table<T extends Record<string, unknown>>({
                       key={String(col.key)}
                       className={[
                         "px-4 py-3 text-[13px]",
-                        ci === 0 ? "font-medium text-neutral-900" : "text-neutral-600 tabular-nums",
+                        ci === 0 ? "font-medium text-ink" : "text-ink-body tabular-nums",
                         alignClass(col.align),
                       ].join(" ")}
                     >
@@ -108,8 +110,8 @@ export function Table<T extends Record<string, unknown>>({
             {rows.length === 0 && (
               <tr>
                 <td colSpan={columns.length} className="px-5 py-12 text-center">
-                  <p className="text-[13px] font-medium text-neutral-700">nothing here yet</p>
-                  <p className="text-[12px] text-neutral-500 mt-0.5">rows will show up here once there are some.</p>
+                  <p className="text-[13px] font-medium text-ink-label">nothing here yet</p>
+                  <p className="text-[12px] text-ink-muted mt-0.5">rows will show up here once there are some.</p>
                 </td>
               </tr>
             )}

package/dist/registry/TableOfContents.tsx

@@ -64,19 +64,19 @@ export function TableOfContents({
       style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
     >
       <div
-        className="bg-white rounded-[13px] px-5 pt-4 pb-4"
+        className="bg-panel-face rounded-[13px] px-5 pt-4 pb-4"
         style={{ boxShadow: "var(--panel-face-shadow)" }}
       >
-        <p aria-hidden className="text-[12px] font-medium text-neutral-400 mb-3">
+        <p aria-hidden className="text-[12px] font-medium text-ink-faint mb-3">
           on this page
         </p>
 
         <div className="relative">
-          <span aria-hidden className="absolute left-0 top-0 bottom-0 w-px bg-neutral-900/[0.08]" />
+          <span aria-hidden className="absolute left-0 top-0 bottom-0 w-px bg-ink/[0.08]" />
           {marker && (
             <span
               aria-hidden
-              className="absolute -left-[0.5px] w-[2px] rounded-full bg-neutral-900"
+              className="absolute -left-[0.5px] w-[2px] rounded-full bg-ink"
               style={{ top: marker.top + 6, height: marker.height - 12, transition: slide }}
             />
           )}
@@ -96,12 +96,12 @@ export function TableOfContents({
                   // Weight stays fixed so the active item doesn't reflow its line
                   "relative block w-full text-left py-1.5 text-[13px] leading-5 rounded-[6px] cursor-pointer",
                   "transition-colors duration-200 outline-none",
-                  "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-neutral-900",
+                  "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ink",
                   isActive
-                    ? "text-neutral-900 font-medium"
+                    ? "text-ink font-medium"
                     : item.level === 1
-                      ? "text-neutral-600 hover:text-neutral-900"
-                      : "text-neutral-400 hover:text-neutral-700",
+                      ? "text-ink-body hover:text-ink"
+                      : "text-ink-faint hover:text-ink-label",
                 ].join(" ")}
                 style={{ paddingLeft: indent[item.level] }}
               >

package/dist/registry/Tabs.tsx

@@ -34,8 +34,8 @@ export function Tabs({ tabs, defaultTab, onChange, className = "" }: TabsProps)
     setPill({ left: br.left - lr.left, width: br.width, ready: true });
   };
 
-  useLayoutEffect(() => { measurePill(active); }, []);
-  useEffect(() => { measurePill(active); }, [active]);
+  // Before paint, so the thumb is never seen out of place
+  useLayoutEffect(() => { measurePill(active); }, [active]);
 
   useEffect(() => {
     const ro = new ResizeObserver(() => measurePill(active));
@@ -83,7 +83,7 @@ export function Tabs({ tabs, defaultTab, onChange, className = "" }: TabsProps)
             style={{
               left: pill.left,
               width: pill.width,
-              background: "var(--face-light)",
+              background: "var(--face)",
               boxShadow: "var(--thumb-shadow)",
               transition: "left 300ms var(--ease-spring), width 300ms var(--ease-spring)",
             }}
@@ -106,8 +106,8 @@ export function Tabs({ tabs, defaultTab, onChange, className = "" }: TabsProps)
               className={[
                 "relative z-10 flex-1 sm:flex-none px-3.5 py-2 rounded-[9px] text-[13px] font-medium text-center whitespace-nowrap cursor-pointer",
                 "transition-colors duration-150",
-                "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-900",
-                isActive ? "text-neutral-900" : "text-neutral-500 hover:text-neutral-800",
+                "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink",
+                isActive ? "text-ink" : "text-ink-muted hover:text-ink-soft",
               ].join(" ")}
             >
               {tab.label}
@@ -124,7 +124,7 @@ export function Tabs({ tabs, defaultTab, onChange, className = "" }: TabsProps)
           aria-labelledby={`${uid}-tab-${active}`}
           tabIndex={0}
           className={[
-            "text-[13px] text-neutral-600 leading-relaxed rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-neutral-900",
+            "text-[13px] text-ink-body leading-relaxed rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ink",
             direction === "right" ? "animate-tab-slide-right" : "animate-tab-slide-left",
           ].join(" ")}
         >

package/dist/registry/TagInput.tsx

@@ -120,7 +120,7 @@ export function TagInput({
   return (
     <div className={["flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
       {label && (
-        <label htmlFor={`${uid}-input`} className="text-[12.5px] font-medium text-neutral-700 tracking-[-0.005em]">
+        <label htmlFor={`${uid}-input`} className="text-[12.5px] font-medium text-ink-label tracking-[-0.005em]">
           {label}
         </label>
       )}
@@ -131,18 +131,18 @@ export function TagInput({
           "transition-[box-shadow,background] duration-200 ease-out cursor-text",
           "[background:var(--field)] [box-shadow:var(--field-shadow)]",
           "hover:[background:var(--field-hover)] hover:[box-shadow:var(--field-shadow-hover)]",
-          "focus-within:[background:#ffffff] focus-within:[box-shadow:var(--field-shadow-focus)]",
+          "focus-within:[background:var(--field-focus)] focus-within:[box-shadow:var(--field-shadow-focus)]",
           fullWidth ? "w-full" : "",
           className,
         ]
           .filter(Boolean)
           .join(" ")}
       >
-        {animTags.map((at, i) => (
+        {animTags.map((at) => (
           <span
             key={at.text}
             className={[
-              "inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-[7px] text-[11.5px] font-medium text-neutral-700 select-none",
+              "inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-[7px] text-[11.5px] font-medium text-ink-label select-none",
               "transition-all duration-180 ease-[cubic-bezier(0.34,1.4,0.64,1)]",
               at.state === "entering" ? "opacity-0 scale-75" : "",
               at.state === "visible" ? "opacity-100 scale-100" : "",
@@ -150,8 +150,8 @@ export function TagInput({
             ].join(" ")}
             style={{
               /* Tags are small raised faces sitting in the sunken field */
-              background: "var(--face-light)",
-              boxShadow: "var(--face-light-shadow)",
+              background: "var(--face)",
+              boxShadow: "var(--face-shadow)",
             }}
           >
             {at.text}
@@ -163,7 +163,7 @@ export function TagInput({
                 if (idx !== -1) removeTag(idx);
               }}
               aria-label={`Remove ${at.text}`}
-              className="w-4 h-4 inline-flex items-center justify-center rounded-[5px] text-neutral-400 hover:text-neutral-900 hover:bg-neutral-900/[0.06] cursor-pointer transition-colors"
+              className="w-4 h-4 inline-flex items-center justify-center rounded-[5px] text-ink-faint hover:text-ink hover:bg-ink/[0.06] cursor-pointer transition-colors"
             >
               <svg width="8" height="8" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -182,10 +182,10 @@ export function TagInput({
           placeholder={tags.length === 0 ? placeholder : ""}
           aria-label={label ? undefined : placeholder}
           aria-describedby={hint ? `${uid}-hint` : undefined}
-          className="flex-1 min-w-[80px] bg-transparent text-[13.5px] text-neutral-900 placeholder:text-neutral-400 outline-none py-0.5"
+          className="flex-1 min-w-[80px] bg-transparent text-[13.5px] text-ink placeholder:text-ink-faint outline-none py-0.5"
         />
       </div>
-      {hint && <p id={`${uid}-hint`} className="text-[11.5px] text-neutral-500 mt-0.5">{hint}</p>}
+      {hint && <p id={`${uid}-hint`} className="text-[11.5px] text-ink-muted mt-0.5">{hint}</p>}
     </div>
   );
 }

package/dist/registry/Textarea.tsx

@@ -44,7 +44,7 @@ export function Textarea({
       {label && (
         <label
           htmlFor={textareaId}
-          className="text-[12.5px] font-medium text-neutral-700 tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-neutral-950"
+          className="text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong"
         >
           {label}
         </label>
@@ -55,8 +55,8 @@ export function Textarea({
         rows={rows}
         onChange={handleChange}
         className={[
-          "field rounded-xl px-4 py-3 text-[13.5px] text-neutral-900 resize-none scroll-thin",
-          "placeholder:text-neutral-400 placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-neutral-300",
+          "field rounded-xl px-4 py-3 text-[13.5px] text-ink resize-none scroll-thin",
+          "placeholder:text-ink-faint placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-ink-ghost",
           "disabled:opacity-40 disabled:cursor-not-allowed",
           fullWidth ? "w-full" : "",
           className,
@@ -68,7 +68,7 @@ export function Textarea({
         {...rest}
       />
       {error && (
-        <p id={messageId} role="alert" className="text-[11.5px] text-red-600 font-medium flex items-center gap-1 mt-0.5">
+        <p id={messageId} role="alert" className="text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5">
           <svg width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
             <circle cx="12" cy="12" r="10" />
             <path strokeLinecap="round" d="M12 8v4m0 4h.01" />
@@ -77,7 +77,7 @@ export function Textarea({
         </p>
       )}
       {hint && !error && (
-        <p id={messageId} className="text-[11.5px] text-neutral-500 mt-0.5">{hint}</p>
+        <p id={messageId} className="text-[11.5px] text-ink-muted mt-0.5">{hint}</p>
       )}
     </div>
   );