@runwisp/ui 0.13.0 → 0.14.0

package/src/lib/components/DataGrid.svelte

@@ -169,7 +169,7 @@
 </script>
 
 <div
-    class="relative flex flex-col rounded-xl border border-outline bg-surface-raised shadow-sm {className}"
+    class="relative flex flex-col rounded-[4px] border border-outline bg-surface-raised shadow-sm {className}"
 >
     {#if filterable}
         <div class="border-b border-outline p-3">
@@ -188,7 +188,7 @@
     {/if}
 
     <div
-        class="relative min-h-0 flex-1 rounded-t-xl rounded-b-xl {wrapperClass ??
+        class="relative min-h-0 flex-1 rounded-[4px] {wrapperClass ??
             (stickyHeader ? '' : 'overflow-x-auto')}"
     >
         {#if loading}
@@ -196,7 +196,7 @@
                 class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised/50 backdrop-blur-[1px]"
             >
                 <div
-                    class="flex items-center gap-3 rounded-full border border-outline-faint bg-surface-raised px-4 py-2 shadow-lg"
+                    class="flex items-center gap-3 rounded-full border border-outline bg-surface-raised px-4 py-2 shadow-md"
                 >
                     <svg class="h-5 w-5 animate-spin text-primary" viewBox="0 0 24 24" fill="none">
                         <circle
@@ -213,7 +213,7 @@
                             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                         ></path>
                     </svg>
-                    <span class="text-sm font-medium text-on-surface-muted">Loading...</span>
+                    <span class="font-mono text-sm text-on-surface-muted">Loading...</span>
                 </div>
             </div>
         {/if}
@@ -239,7 +239,7 @@
                         <th
                             class="
 							    group px-4 {compact ? 'py-2' : 'py-3'}
-							    font-medium text-on-surface-muted
+							    font-mono text-xs tracking-wide text-on-surface-faint uppercase
 							    {column.align === 'center' ? 'text-center' : ''}
 							    {column.align === 'right' ? 'text-right' : ''}
 						    "
@@ -249,7 +249,7 @@
                                 <button
                                     onclick={() => handleSort(column.key as string)}
                                     class="
-                                        inline-flex items-center gap-1 transition-colors group-hover:text-on-surface
+                                        inline-flex items-center gap-1 group-hover:text-on-surface
                                         {sortKey === column.key ? 'text-on-surface' : ''}
                                     "
                                 >
@@ -263,7 +263,7 @@
                                     {:else}
                                         <ArrowUpDown
                                             size={14}
-                                            class="text-on-surface-faint opacity-0 transition-opacity group-hover:opacity-100"
+                                            class="text-on-surface-faint opacity-0 group-hover:opacity-100"
                                         />
                                     {/if}
                                 </button>
@@ -295,13 +295,12 @@
                     {#each pagedData as row, idx (idx)}
                         <tr
                             class="
-							    border-b border-outline-faint last:border-b-0
+							    border-b border-outline last:border-b-0
 							    {striped && idx % 2 === 1 ? 'bg-surface-sunken/30' : ''}
 							    {hoverable ? 'hover:bg-surface-sunken' : ''}
 							    {isSelected(row) ? 'bg-primary-soft/30' : ''}
 							    {onRowClick ? 'cursor-pointer' : ''}
-							    transition-colors duration-200
-						    "
+							    						    "
                             onclick={() => onRowClick?.(row)}
                         >
                             {#if selectable}
@@ -329,7 +328,11 @@
                                     {#if column.render}
                                         {@render column.render(row)}
                                     {:else}
-                                        {dlv(row, column.key as string) ?? "-"}
+                                        <!-- Raw field value: a token, so mono. Snippet-rendered
+                                             cells choose their own voice. -->
+                                        <span class="font-mono"
+                                            >{dlv(row, column.key as string) ?? "-"}</span
+                                        >
                                     {/if}
                                 </td>
                             {/each}

package/src/lib/components/Drawer.svelte

@@ -100,7 +100,7 @@
         <div
             class="
                 absolute z-10 flex flex-col
-                bg-surface-overlay shadow-xl
+                border border-outline bg-surface-overlay shadow-lg
                 {positionClasses[side]}
                 {className}
             "
@@ -112,16 +112,19 @@
         >
             <!-- Header -->
             {#if header}
-                <div class="border-b border-outline-faint px-6 py-4">
+                <div class="border-b border-outline px-6 py-4">
                     {@render header()}
                 </div>
             {:else if title || closable}
                 <div
-                    class="flex items-start justify-between gap-4 border-b border-outline-faint px-6 py-4"
+                    class="flex items-start justify-between gap-4 border-b border-outline px-6 py-4"
                 >
                     <div>
                         {#if title}
-                            <h2 id="drawer-title" class="text-lg font-semibold text-on-surface">
+                            <h2
+                                id="drawer-title"
+                                class="font-mono text-lg font-semibold text-on-surface"
+                            >
                                 {title}
                             </h2>
                         {/if}
@@ -129,7 +132,7 @@
                     {#if closable}
                         <button
                             onclick={handleClose}
-                            class="-m-2 shrink-0 rounded-lg p-2 text-on-surface-faint transition-colors hover:bg-surface-sunken hover:text-on-surface-muted"
+                            class="-m-2 shrink-0 rounded-[3px] p-2 text-on-surface-faint hover:bg-surface-sunken hover:text-on-surface-muted"
                             aria-label="Close"
                         >
                             <X size={20} />
@@ -147,7 +150,7 @@
 
             <!-- Footer -->
             {#if footer}
-                <div class="border-t border-outline-faint bg-surface-sunken/50 px-6 py-4">
+                <div class="border-t border-outline bg-surface-sunken px-6 py-4">
                     {@render footer()}
                 </div>
             {/if}

package/src/lib/components/Dropdown.svelte

@@ -6,8 +6,6 @@
     import type { Component } from "svelte";
     import { tick, onDestroy } from "svelte";
     import { EllipsisVertical, Check } from "@lucide/svelte";
-    import { scale } from "svelte/transition";
-    import { quintOut } from "svelte/easing";
     import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
 
     interface MenuItem {
@@ -127,7 +125,7 @@
         bind:this={triggerEl}
         aria-label={triggerLabel}
         aria-expanded={open}
-        class="rounded-lg p-2 text-on-surface-muted transition-colors hover:bg-surface-sunken hover:text-on-surface focus:ring-2 focus:ring-outline focus:outline-none active:bg-surface-sunken"
+        class="rounded-[3px] p-2 text-on-surface-muted hover:bg-surface-sunken hover:text-on-surface focus:ring-2 focus:ring-outline focus:outline-none active:bg-surface-sunken"
     >
         {#if trigger}
             {@render trigger()}
@@ -141,12 +139,11 @@
             use:portal
             bind:this={menuEl}
             role="menu"
-            transition:scale={{ duration: 150, start: 0.95, easing: quintOut }}
             class="
 				z-[9999]
 				min-w-48 overflow-y-auto
-				rounded-xl
-				border border-outline bg-surface-overlay py-1 shadow-xl shadow-on-surface/5
+				rounded-[4px]
+				border border-outline bg-surface-overlay py-1 shadow-lg
 			"
             style="transform-origin: {transformOrigin};"
         >
@@ -155,20 +152,19 @@
             {:else}
                 {#each items as item, idx (idx)}
                     {#if item.divider}
-                        <hr class="my-1 border-outline-faint" />
+                        <hr class="my-1 border-outline" />
                     {:else if item.href}
                         <a
                             href={item.href}
                             title={item.title}
                             role="menuitem"
                             class="
-									mx-1 flex items-center gap-3 rounded-lg px-3 py-2 text-sm
+									mx-1 flex items-center gap-3 rounded-[3px] px-3 py-2 font-mono text-sm
 									{item.danger
                                 ? 'text-danger-soft-text hover:bg-danger-soft'
-                                : 'text-on-surface-muted hover:bg-surface-sunken'}
+                                : 'text-on-surface-muted hover:bg-surface-sunken hover:text-on-surface'}
 									{item.disabled ? 'cursor-not-allowed opacity-50' : ''}
-								transition-colors
-							"
+															"
                         >
                             {#if item.icon}
                                 {@const Icon = item.icon}
@@ -183,11 +179,11 @@
                             title={item.title}
                             role="menuitem"
                             class="
-									mx-1 box-border flex w-full max-w-[calc(100%-8px)] items-center gap-3 rounded-lg px-3 py-2 text-left text-sm
+									mx-1 box-border flex w-full max-w-[calc(100%-8px)] items-center gap-3 rounded-[3px] px-3 py-2 text-left font-mono text-sm
 									{item.danger
                                 ? 'text-danger-soft-text hover:bg-danger-soft'
-                                : 'text-on-surface-muted hover:bg-surface-sunken'}
-									transition-colors disabled:cursor-not-allowed
+                                : 'text-on-surface-muted hover:bg-surface-sunken hover:text-on-surface'}
+									disabled:cursor-not-allowed
 									disabled:opacity-50
 							"
                         >

package/src/lib/components/DurationInput.svelte

@@ -46,15 +46,15 @@
     };
 
     const inputClasses = `
-        w-full rounded-lg border
+        w-full rounded-[3px] border font-mono
         bg-surface-raised text-on-surface placeholder:text-on-surface-faint
-        focus:outline-none focus:ring-4 focus:ring-ring/10 focus:border-ring
+        focus:outline-none focus:border-ring focus:ring-2 focus:ring-ring focus:ring-offset-2
         disabled:bg-surface-sunken disabled:text-on-surface-muted disabled:cursor-not-allowed
-        transition-all duration-normal ease-in-out
-    `;
+            `;
 
     const normalBorder = "border-outline hover:border-outline-hover shadow-sm";
-    const errorBorder = "border-danger-400 focus:border-danger-500 focus:ring-danger-500/20";
+    const errorBorder =
+        "border-danger-surface focus:border-danger-surface focus:ring-danger-surface";
 
     function formatMs(msValue: number): string {
         if (typeof msValue !== "number" || isNaN(msValue)) return "";
@@ -113,14 +113,14 @@
 
 <div class="space-y-1.5 {className}">
     {#if label}
-        <label for={inputId} class="block text-sm font-medium text-on-surface-muted">
+        <label for={inputId} class="block font-mono text-xs font-medium text-on-surface-muted">
             {label}
         </label>
     {/if}
 
     <div class="group relative">
         <div
-            class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-on-surface-faint transition-colors group-focus-within:text-primary"
+            class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-on-surface-faint group-focus-within:text-primary"
         >
             <Clock size={16} />
         </div>
@@ -155,18 +155,14 @@
     </div>
 
     {#if parsedHuman && isFocused}
-        <p
-            class="animate-in slide-in-from-top-1 fade-in text-xs font-medium text-primary duration-200"
-        >
+        <p class="font-sans text-xs font-medium text-primary">
             {parsedHuman}
         </p>
     {:else if error}
-        <p
-            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
-        >
+        <p class="font-sans text-xs text-danger-soft-text">
             {error}
         </p>
     {:else if hint}
-        <p class="text-sm text-on-surface-muted">{hint}</p>
+        <p class="font-sans text-xs text-on-surface-muted">{hint}</p>
     {/if}
 </div>

package/src/lib/components/EmptyState.svelte

@@ -32,7 +32,7 @@
         <Icon size={iconSize} class="text-on-surface-faint" />
     </div>
 
-    <h3 class="mb-1 text-lg font-semibold text-on-surface">{title}</h3>
+    <h3 class="mb-1 font-mono text-lg font-semibold text-on-surface">{title}</h3>
 
     {#if description}
         <p class="mb-6 max-w-sm text-sm text-on-surface-muted">{description}</p>

package/src/lib/components/ErrorState.svelte

@@ -41,14 +41,14 @@
 
     const IconComponent = $derived(icon ?? (variant === "disconnected" ? WifiOff : TriangleAlert));
 
-    const iconBg = $derived(variant === "disconnected" ? "bg-danger-soft" : "bg-warning-soft");
+    const iconBg = $derived(variant === "disconnected" ? "bg-warning-soft" : "bg-danger-soft");
     const iconColor = $derived(
-        variant === "disconnected" ? "text-danger-surface" : "text-warning-surface",
+        variant === "disconnected" ? "text-warning-soft-text" : "text-danger-soft-text",
     );
 </script>
 
 <div
-    class="flex flex-col items-center justify-center gap-4 rounded-xl border border-outline bg-surface-raised px-6 py-12 text-center {className}"
+    class="flex flex-col items-center justify-center gap-4 rounded-[4px] border border-outline bg-surface-raised px-6 py-12 text-center {className}"
     role="alert"
 >
     <div class="rounded-full {iconBg} p-3">
@@ -56,7 +56,7 @@
     </div>
 
     <div class="space-y-1">
-        <h3 class="text-lg font-semibold text-on-surface">{defaultTitle}</h3>
+        <h3 class="font-mono text-lg font-semibold text-on-surface">{defaultTitle}</h3>
         <p class="max-w-sm text-sm text-on-surface-muted">{message}</p>
     </div>
 

package/src/lib/components/FeatureCard.svelte

@@ -15,19 +15,19 @@
 </script>
 
 <article
-    class="overflow-hidden rounded-xl border border-outline bg-surface-raised p-6 shadow-sm transition-colors hover:border-outline-hover {className}"
+    class="overflow-hidden rounded-[4px] border border-outline bg-surface-raised p-6 hover:border-outline-hover {className}"
 >
     <div class="flex flex-col gap-3">
         {#if Icon}
             <span
-                class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary-soft-text"
+                class="inline-flex h-10 w-10 items-center justify-center rounded-[3px] border border-primary-soft-border bg-primary-soft text-primary-soft-text"
             >
                 <Icon size={20} />
             </span>
         {/if}
-        <h3 class="text-lg font-semibold text-on-surface">{title}</h3>
+        <h3 class="font-mono text-base text-primary">{title}</h3>
         {#if children}
-            <div class="text-sm leading-relaxed text-on-surface-muted">
+            <div class="font-sans text-sm leading-relaxed text-on-surface-muted">
                 {@render children()}
             </div>
         {/if}

package/src/lib/components/FormField.svelte

@@ -36,7 +36,7 @@
 
 <div class="space-y-1.5 {className}">
     {#if label}
-        <label for={fieldId} class="block text-sm font-medium text-on-surface-muted">
+        <label for={fieldId} class="block font-mono text-xs font-medium text-on-surface-muted">
             {label}
             {#if required}
                 <span class="text-danger-soft-text">*</span>
@@ -45,18 +45,16 @@
     {/if}
 
     {#if description}
-        <p class="text-sm text-on-surface-faint">{description}</p>
+        <p class="font-sans text-xs text-on-surface-faint">{description}</p>
     {/if}
 
     {@render children()}
 
     {#if error}
-        <p
-            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
-        >
+        <p class="font-sans text-xs text-danger-soft-text">
             {error}
         </p>
     {:else if hint}
-        <p class="text-sm text-on-surface-muted">{hint}</p>
+        <p class="font-sans text-xs text-on-surface-muted">{hint}</p>
     {/if}
 </div>

package/src/lib/components/Heading.svelte

@@ -40,6 +40,9 @@
     const tag = $derived(`h${level}` as const);
 </script>
 
-<svelte:element this={tag} class="text-on-surface {sizeClasses[resolvedSize]} {className}">
+<svelte:element
+    this={tag}
+    class="font-mono tracking-tight text-on-surface {sizeClasses[resolvedSize]} {className}"
+>
     {@render children()}
 </svelte:element>

package/src/lib/components/Input.svelte

@@ -43,20 +43,20 @@
     };
 
     const inputClasses = `
-		w-full rounded-lg border
+		w-full rounded-[3px] border font-mono
 		bg-surface-raised text-on-surface placeholder:text-on-surface-faint
-		focus:outline-none focus:ring-4 focus:ring-ring/10 focus:border-ring
+		focus:outline-none focus:border-ring focus:ring-2 focus:ring-ring focus:ring-offset-2
 		disabled:bg-surface-sunken disabled:text-on-surface-muted disabled:cursor-not-allowed
-		transition-all duration-normal ease-in-out
-	`;
+			`;
 
     const normalBorder = "border-outline hover:border-outline-hover shadow-sm";
-    const errorBorder = "border-danger-400 focus:border-danger-500 focus:ring-danger-500/20";
+    const errorBorder =
+        "border-danger-surface focus:border-danger-surface focus:ring-danger-surface";
 </script>
 
 <div class="space-y-1.5 {className}">
     {#if label}
-        <label for={inputId} class="block text-sm font-medium text-on-surface-muted">
+        <label for={inputId} class="block font-mono text-xs font-medium text-on-surface-muted">
             {label}
         </label>
     {/if}
@@ -64,7 +64,7 @@
     <div class="group relative">
         {#if leadingIcon}
             <div
-                class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-on-surface-faint transition-colors group-focus-within:text-on-surface-muted"
+                class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-on-surface-faint group-focus-within:text-on-surface-muted"
             >
                 {@render leadingIcon()}
             </div>
@@ -97,7 +97,7 @@
             </div>
         {:else if trailingIcon}
             <div
-                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-on-surface-faint transition-colors group-focus-within:text-on-surface-muted"
+                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-on-surface-faint group-focus-within:text-on-surface-muted"
             >
                 {@render trailingIcon()}
             </div>
@@ -105,12 +105,10 @@
     </div>
 
     {#if error}
-        <p
-            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
-        >
+        <p class="font-sans text-xs text-danger-soft-text">
             {error}
         </p>
     {:else if hint}
-        <p class="text-sm text-on-surface-muted">{hint}</p>
+        <p class="font-sans text-xs text-on-surface-muted">{hint}</p>
     {/if}
 </div>

package/src/lib/components/Kbd.svelte

@@ -16,7 +16,7 @@
         min-w-[1.5em] px-1.5 py-0.5
         text-xs font-mono font-medium
         bg-surface-sunken text-on-surface-muted
-        border border-outline rounded-md
+        border border-outline rounded-[3px]
         shadow-sm
     `;
 </script>

package/src/lib/components/Link.svelte

@@ -27,9 +27,8 @@
 
     const baseClasses = `
         inline-flex items-center gap-1
-        transition-colors duration-normal ease-out
-        focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/10 focus-visible:border-ring
-        rounded-sm
+                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+        rounded-[3px]
     `;
 
     const variantClasses: Record<LinkVariant, string> = {

package/src/lib/components/LinkButton.svelte

@@ -40,7 +40,7 @@
     {...restProps}
 >
     {#if icon}
-        <span class="shrink-0 transition-transform group-active:scale-95">
+        <span class="shrink-0 group-active:scale-95">
             {@render icon()}
         </span>
     {/if}
@@ -48,7 +48,7 @@
         {@render children()}
     {/if}
     {#if iconRight}
-        <span class="shrink-0 transition-transform group-active:scale-95">
+        <span class="shrink-0 group-active:scale-95">
             {@render iconRight()}
         </span>
     {/if}

package/src/lib/components/LogConsole.svelte

@@ -564,8 +564,8 @@
         >
             {#if cache.firstAvailableLine > 0}
                 <div
-                    class="absolute right-0 left-0 flex items-center bg-warning-700/20 text-warning-400"
-                    style="top: 0px; height: {lineHeight}px;"
+                    class="absolute right-0 left-0 flex items-center text-term-warn"
+                    style="top: 0px; height: {lineHeight}px; background-color: color-mix(in srgb, var(--rw-term-warn) 15%, transparent);"
                 >
                     <div
                         class="sticky left-0 z-10 flex-shrink-0 pr-3 text-right select-none"
@@ -585,10 +585,7 @@
                 <div
                     class="log-line absolute right-0 left-0 flex {wrap
                         ? 'items-start'
-                        : 'items-center'} hover:bg-[rgb(255_255_255_/_0.025)] {flashLine ===
-                    line.num
-                        ? 'log-line--flash'
-                        : ''}"
+                        : 'items-center'} {flashLine === line.num ? 'log-line--flash' : ''}"
                     style="top: {lineTop(line.num)}px; height: {lineHeightPx(line.num)}px;"
                 >
                     <div
@@ -783,12 +780,11 @@
 
     {#if userScrolledUp && cache.totalLines > 0}
         <button
-            class="absolute right-4 bottom-12 z-10 flex items-center gap-2 rounded-full border
-                   border-[rgb(255_255_255_/_0.1)] bg-[var(--rw-con-panel)]
+            class="absolute right-4 bottom-12 z-10 flex items-center gap-2 rounded-[3px] border
+                   border-[var(--rw-con-gutter)] bg-[var(--rw-con-panel)]
                    px-3 py-1.5 text-xs
-                   font-medium text-[var(--rw-con-text)] shadow-lg
-                   transition-all duration-200 hover:scale-105
-                   hover:bg-[rgb(255_255_255_/_0.06)] active:scale-95"
+                   text-[var(--rw-con-text)]
+                                      hover:border-term-teal hover:text-term-teal active:translate-y-[1px]"
             onclick={enableAutoScroll}
         >
             <svg
@@ -805,8 +801,8 @@
     {/if}
 
     <div
-        class="flex flex-shrink-0 items-center justify-between border-t border-[rgb(255_255_255_/_0.06)]
-               bg-[var(--rw-con-panel)] px-3.5 py-2 text-[11px] text-[var(--rw-con-dim)]"
+        class="flex flex-shrink-0 items-center justify-between border-t border-[var(--rw-con-gutter)]
+               bg-[var(--rw-con-panel)] px-3.5 py-2 text-[11px] tracking-wide text-[var(--rw-con-dim)]"
     >
         <div class="flex items-center gap-3">
             {#if isStreaming}
@@ -827,7 +823,7 @@
                 <span>{formatBytes(cache.totalBytes)}</span>
             {/if}
             {#if isAutoScroll}
-                <span class="inline-flex items-center gap-1.5 text-[#7fe0b0]">
+                <span class="inline-flex items-center gap-1.5 text-term-ok">
                     <svg
                         class="h-3 w-3"
                         viewBox="0 0 24 24"
@@ -857,15 +853,21 @@
        way the approved design closes a finished capture. */
     .sentinel--muted {
         color: var(--rw-con-gutter);
-        border-top-color: rgb(255 255 255 / 0.08);
+        border-top-color: var(--rw-con-gutter);
     }
     .sentinel--warn {
-        color: #e5a552;
-        border-top-color: rgb(229 165 82 / 0.3);
+        color: var(--rw-term-warn);
+        border-top-color: color-mix(in srgb, var(--rw-term-warn) 30%, transparent);
+    }
+
+    /* Subtle row hover on the fixed-dark console surface — a faint lift of the
+       console text colour, never a theme-flipping fill. */
+    .log-line:hover {
+        background-color: color-mix(in srgb, var(--rw-con-text) 4%, transparent);
     }
 
     .log-line--flash {
-        animation: log-line-flash 1.5s ease-out;
+        animation: log-line-flash 1.5s;
     }
 
     .frame-toggle {
@@ -875,12 +877,11 @@
         background: transparent;
         border: none;
         padding: 0;
-        transition: color 120ms ease;
     }
 
     @keyframes log-line-flash {
         0% {
-            background-color: oklch(0.8 0.18 70 / 0.45);
+            background-color: color-mix(in srgb, var(--rw-term-warn) 45%, transparent);
         }
         100% {
             background-color: transparent;
@@ -924,7 +925,7 @@
         height: 4px;
         border-radius: 50%;
         background-color: currentColor;
-        animation: dot-pulse 1s ease-in-out infinite;
+        animation: dot-pulse 1s infinite;
     }
 
     @keyframes dot-pulse {

package/src/lib/components/Logo.svelte

@@ -20,7 +20,9 @@
     };
 </script>
 
-<span class="inline-flex {sizeClasses[size]} {className}" aria-hidden="true">
+<!-- The mark is flat currentColor (matching the website's brand mark), so the
+     brand teal comes from text-primary and any caller can override it. -->
+<span class="inline-flex text-primary {sizeClasses[size]} {className}" aria-hidden="true">
     <!-- SVG body is a static, repo-vendored asset imported via Vite's ?raw loader. -->
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {@html logoSvg}

package/src/lib/components/Modal.svelte

@@ -82,7 +82,7 @@
             class="
 				relative z-10 w-full {sizeClasses[size]}
 				flex max-h-[90vh] flex-col
-				rounded-2xl bg-surface-overlay shadow-xl
+				rounded-[4px] border border-outline bg-surface-overlay shadow-lg
 				{className}
 			"
             role="dialog"
@@ -91,16 +91,19 @@
         >
             <!-- Header -->
             {#if header}
-                <div class="border-b border-outline-faint px-6 py-4">
+                <div class="border-b border-outline px-6 py-4">
                     {@render header()}
                 </div>
             {:else if title || closable}
                 <div
-                    class="flex items-start justify-between gap-4 border-b border-outline-faint px-6 py-4"
+                    class="flex items-start justify-between gap-4 border-b border-outline px-6 py-4"
                 >
                     <div>
                         {#if title}
-                            <h2 id="modal-title" class="text-lg font-semibold text-on-surface">
+                            <h2
+                                id="modal-title"
+                                class="font-mono text-lg font-semibold text-on-surface"
+                            >
                                 {title}
                             </h2>
                         {/if}
@@ -111,7 +114,7 @@
                     {#if closable}
                         <button
                             onclick={handleClose}
-                            class="-m-2 shrink-0 rounded-lg p-2 text-on-surface-faint transition-colors hover:bg-surface-sunken hover:text-on-surface-muted"
+                            class="-m-2 shrink-0 rounded-[3px] p-2 text-on-surface-faint hover:bg-surface-sunken hover:text-on-surface-muted"
                             aria-label="Close"
                         >
                             <X size={20} />
@@ -129,9 +132,7 @@
 
             <!-- Footer -->
             {#if footer}
-                <div
-                    class="rounded-b-2xl border-t border-outline-faint bg-surface-sunken/50 px-6 py-4"
-                >
+                <div class="rounded-b-[4px] border-t border-outline bg-surface-sunken px-6 py-4">
                     {@render footer()}
                 </div>
             {/if}