@morphika/andami 0.5.0 → 0.5.2

package/components/builder/settings-panel/AnimationTab.tsx

@@ -1,138 +1,138 @@
-"use client";
-
-/**
- * AnimationTab — Routes to EnterAnimationPicker / HoverEffectPicker based on selection.
- *
- * Extracted from SettingsPanel.tsx in Session C (refactor split).
- */
-
-import { useBuilderStore } from "../../../lib/builder/store";
-import type { ContentBlock, ProjectGridBlock } from "../../../lib/sanity/types";
-import type { HoverEffectConfig } from "../../../lib/animation/hover-effect-types";
-import EnterAnimationPicker from "../editors/EnterAnimationPicker";
-import HoverEffectPicker from "../editors/HoverEffectPicker";
-import {
-  getBlockAnimationValue,
-  hasBlockAnimationOverride,
-  setBlockAnimationOverride,
-} from "./responsive-helpers";
-import { CardEntranceSection } from "./CardEntranceSection";
-
-/** Safely extract hover_effect (new unified type) from any content block.
- *  ProjectGridBlock has a legacy `hover_effect: "3d" | "scale" | "none"` string field
- *  that collides — skip it (returns undefined). Other blocks have HoverEffectConfig. */
-export function getBlockHoverEffect(block: ContentBlock): HoverEffectConfig | undefined {
-  // ProjectGridBlock hover_effect is the old per-card string — not HoverEffectConfig
-  if (block._type === "projectGridBlock") return undefined;
-  const val = (block as unknown as Record<string, unknown>).hover_effect;
-  if (val === undefined || val === null) return undefined;
-  if (typeof val === "object") return val as HoverEffectConfig;
-  return undefined;
-}
-
-interface AnimationTabProps {
-  selectedBlock: { block: ContentBlock; rowKey: string; colKey: string; isSection: boolean } | null;
-}
-
-export function AnimationTab({ selectedBlock }: AnimationTabProps) {
-  const store = useBuilderStore();
-
-  // Block level: type-specific enter picker + card entrance for projectGrid
-  if (selectedBlock) {
-    const isProjectGrid = selectedBlock.block._type === "projectGridBlock";
-    const pgBlock = isProjectGrid ? (selectedBlock.block as ProjectGridBlock) : null;
-    const bvp = store.activeViewport;
-    const isBlockResponsive = bvp !== "desktop";
-
-    const effectiveEnterAnim = getBlockAnimationValue(
-      selectedBlock.block, bvp, "enter_animation", undefined
-    );
-    const effectiveHoverEffect = getBlockAnimationValue(
-      selectedBlock.block, bvp, "hover_effect", undefined
-    ) as HoverEffectConfig | undefined;
-
-    const hasEnterOverride = hasBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation");
-    const hasHoverOverride = hasBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect");
-
-    return (
-      <>
-        {isBlockResponsive && (
-          <div className="px-4 pt-3">
-            <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
-              <span className="text-[11px] font-medium text-[#076bff]">
-                Editing {bvp === "tablet" ? "Tablet" : "Phone"} overrides
-              </span>
-            </div>
-          </div>
-        )}
-        <div className="relative">
-          {hasEnterOverride && (
-            <div className="flex items-center justify-between px-4 pt-2">
-              <span className="text-[9px] text-[#076bff] font-medium">overridden</span>
-              <button
-                onClick={() => {
-                  const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", undefined);
-                  store.updateBlock(selectedBlock.block._key, updates);
-                }}
-                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
-              >
-                Reset
-              </button>
-            </div>
-          )}
-          <EnterAnimationPicker
-            mode={{ level: "block", blockType: selectedBlock.block._type }}
-            config={effectiveEnterAnim}
-            onChange={(cfg) => {
-              const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", cfg);
-              store.updateBlock(selectedBlock.block._key, updates);
-            }}
-          />
-        </div>
-        {/* Hover Effect — block-level only, shown if block type has hover presets */}
-        <div className="border-t border-neutral-200 my-1" />
-        <div className="relative">
-          {hasHoverOverride && (
-            <div className="flex items-center justify-between px-4 pt-2">
-              <span className="text-[9px] text-[#076bff] font-medium">overridden</span>
-              <button
-                onClick={() => {
-                  const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", undefined);
-                  store.updateBlock(selectedBlock.block._key, updates);
-                }}
-                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
-              >
-                Reset
-              </button>
-            </div>
-          )}
-          <HoverEffectPicker
-            blockType={selectedBlock.block._type}
-            config={effectiveHoverEffect ?? getBlockHoverEffect(selectedBlock.block)}
-            onChange={(cfg) => {
-              const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", cfg);
-              store.updateBlock(selectedBlock.block._key, updates);
-            }}
-          />
-        </div>
-        {isProjectGrid && pgBlock && (
-          <>
-            <div className="border-t border-neutral-200 my-1" />
-            <CardEntranceSection block={pgBlock} />
-          </>
-        )}
-      </>
-    );
-  }
-
-  // Page-level: generic enter animation (no hover at page level)
-  return (
-    <EnterAnimationPicker
-      mode={{ level: "page" }}
-      config={store.pageSettings.enter_animation}
-      onChange={(cfg) => {
-        store.updatePageSettings({ enter_animation: cfg });
-      }}
-    />
-  );
-}
+"use client";
+
+/**
+ * AnimationTab — Routes to EnterAnimationPicker / HoverEffectPicker based on selection.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ContentBlock, ProjectGridBlock } from "../../../lib/sanity/types";
+import type { HoverEffectConfig } from "../../../lib/animation/hover-effect-types";
+import EnterAnimationPicker from "../editors/EnterAnimationPicker";
+import HoverEffectPicker from "../editors/HoverEffectPicker";
+import {
+  getBlockAnimationValue,
+  hasBlockAnimationOverride,
+  setBlockAnimationOverride,
+} from "./responsive-helpers";
+import { CardEntranceSection } from "./CardEntranceSection";
+
+/** Safely extract hover_effect (new unified type) from any content block.
+ *  ProjectGridBlock has a legacy `hover_effect: "3d" | "scale" | "none"` string field
+ *  that collides — skip it (returns undefined). Other blocks have HoverEffectConfig. */
+export function getBlockHoverEffect(block: ContentBlock): HoverEffectConfig | undefined {
+  // ProjectGridBlock hover_effect is the old per-card string — not HoverEffectConfig
+  if (block._type === "projectGridBlock") return undefined;
+  const val = (block as unknown as Record<string, unknown>).hover_effect;
+  if (val === undefined || val === null) return undefined;
+  if (typeof val === "object") return val as HoverEffectConfig;
+  return undefined;
+}
+
+interface AnimationTabProps {
+  selectedBlock: { block: ContentBlock; rowKey: string; colKey: string; isSection: boolean } | null;
+}
+
+export function AnimationTab({ selectedBlock }: AnimationTabProps) {
+  const store = useBuilderStore();
+
+  // Block level: type-specific enter picker + card entrance for projectGrid
+  if (selectedBlock) {
+    const isProjectGrid = selectedBlock.block._type === "projectGridBlock";
+    const pgBlock = isProjectGrid ? (selectedBlock.block as ProjectGridBlock) : null;
+    const bvp = store.activeViewport;
+    const isBlockResponsive = bvp !== "desktop";
+
+    const effectiveEnterAnim = getBlockAnimationValue(
+      selectedBlock.block, bvp, "enter_animation", undefined
+    );
+    const effectiveHoverEffect = getBlockAnimationValue(
+      selectedBlock.block, bvp, "hover_effect", undefined
+    ) as HoverEffectConfig | undefined;
+
+    const hasEnterOverride = hasBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation");
+    const hasHoverOverride = hasBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect");
+
+    return (
+      <>
+        {isBlockResponsive && (
+          <div className="px-4 pt-3">
+            <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#3580f9]/8 border border-[#3580f9]/15">
+              <span className="text-[11px] font-medium text-[#3580f9]">
+                Editing {bvp === "tablet" ? "Tablet" : "Phone"} overrides
+              </span>
+            </div>
+          </div>
+        )}
+        <div className="relative">
+          {hasEnterOverride && (
+            <div className="flex items-center justify-between px-4 pt-2">
+              <span className="text-[9px] text-[#3580f9] font-medium">overridden</span>
+              <button
+                onClick={() => {
+                  const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", undefined);
+                  store.updateBlock(selectedBlock.block._key, updates);
+                }}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          )}
+          <EnterAnimationPicker
+            mode={{ level: "block", blockType: selectedBlock.block._type }}
+            config={effectiveEnterAnim}
+            onChange={(cfg) => {
+              const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", cfg);
+              store.updateBlock(selectedBlock.block._key, updates);
+            }}
+          />
+        </div>
+        {/* Hover Effect — block-level only, shown if block type has hover presets */}
+        <div className="border-t border-neutral-200 my-1" />
+        <div className="relative">
+          {hasHoverOverride && (
+            <div className="flex items-center justify-between px-4 pt-2">
+              <span className="text-[9px] text-[#3580f9] font-medium">overridden</span>
+              <button
+                onClick={() => {
+                  const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", undefined);
+                  store.updateBlock(selectedBlock.block._key, updates);
+                }}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          )}
+          <HoverEffectPicker
+            blockType={selectedBlock.block._type}
+            config={effectiveHoverEffect ?? getBlockHoverEffect(selectedBlock.block)}
+            onChange={(cfg) => {
+              const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", cfg);
+              store.updateBlock(selectedBlock.block._key, updates);
+            }}
+          />
+        </div>
+        {isProjectGrid && pgBlock && (
+          <>
+            <div className="border-t border-neutral-200 my-1" />
+            <CardEntranceSection block={pgBlock} />
+          </>
+        )}
+      </>
+    );
+  }
+
+  // Page-level: generic enter animation (no hover at page level)
+  return (
+    <EnterAnimationPicker
+      mode={{ level: "page" }}
+      config={store.pageSettings.enter_animation}
+      onChange={(cfg) => {
+        store.updatePageSettings({ enter_animation: cfg });
+      }}
+    />
+  );
+}

package/components/builder/settings-panel/BlockLayoutTab.tsx

@@ -133,7 +133,7 @@ function AlignmentButtons<T extends string>({
             onClick={() => onChange(opt.value)}
             className={`flex items-center justify-center w-[34px] h-[30px] rounded-md border transition-all ${
               isActive
-                ? "bg-[#076bff]/10 border-[#076bff]/30 text-[#076bff]"
+                ? "bg-[#3580f9]/10 border-[#3580f9]/30 text-[#3580f9]"
                 : "bg-[#f5f5f5] border-transparent text-neutral-400 hover:bg-[#efefef] hover:text-neutral-600"
             }`}
           >
@@ -172,7 +172,7 @@ function OverrideBadge({
   if (hasAny) {
     return (
       <div className="flex items-center gap-2 mt-1">
-        <span className="text-[9px] text-[#076bff]">overridden</span>
+        <span className="text-[9px] text-[#3580f9]">overridden</span>
         <button
           onClick={onReset}
           className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
@@ -233,8 +233,8 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
     <>
       {viewportLabel && (
         <div className="px-4 pt-3">
-          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
-            <span className="text-[11px] font-medium text-[#076bff]">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#3580f9]/8 border border-[#3580f9]/15">
+            <span className="text-[11px] font-medium text-[#3580f9]">
               Editing {viewportLabel} overrides
             </span>
           </div>
@@ -345,7 +345,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
               max={100}
               value={bgOpacity}
               onChange={(e) => updateLayout("background_opacity", parseInt(e.target.value))}
-              className={`flex-1 accent-[#076bff] ${bgIsGradient ? "opacity-40 pointer-events-none" : ""}`}
+              className={`flex-1 accent-[#3580f9] ${bgIsGradient ? "opacity-40 pointer-events-none" : ""}`}
               disabled={bgIsGradient}
             />
             <span className="text-xs text-neutral-900 w-10 text-right">
@@ -444,7 +444,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
               max={20}
               value={parseInt(getBlockLayoutValue<string>(block, activeViewport, "border_width", "0"))}
               onChange={(e) => updateLayout("border_width", e.target.value)}
-              className="flex-1 accent-[#076bff]"
+              className="flex-1 accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-900 w-10 text-right">
               {getBlockLayoutValue<string>(block, activeViewport, "border_width", "0")}px
@@ -489,7 +489,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
               max={50}
               value={parseInt(getBlockLayoutValue<string>(block, activeViewport, "border_radius", "0"))}
               onChange={(e) => updateLayout("border_radius", e.target.value)}
-              className="flex-1 accent-[#076bff]"
+              className="flex-1 accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-900 w-10 text-right">
               {getBlockLayoutValue<string>(block, activeViewport, "border_radius", "0")}px

package/components/builder/settings-panel/CardEntranceSection.tsx

@@ -1,114 +1,114 @@
-"use client";
-
-/**
- * CardEntranceSection — Toggle + preset/stagger/duration controls for
- * ProjectGrid card entrance animations.
- *
- * Extracted from SettingsPanel.tsx in Session C (refactor split).
- */
-
-import { useBuilderStore } from "../../../lib/builder/store";
-import type { ProjectGridBlock, CardEntranceConfig } from "../../../lib/sanity/types";
-
-export const ENTRANCE_PRESETS = [
-  { value: "fade", label: "Fade" },
-  { value: "slide-up", label: "Slide Up" },
-  { value: "scale", label: "Scale" },
-] as const;
-
-export const CARD_ENTRANCE_SELECT_CLASS =
-  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]";
-
-export const CARD_ENTRANCE_SLIDER_CLASS =
-  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#076bff] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#076bff] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
-
-export function CardEntranceSection({ block }: { block: ProjectGridBlock }) {
-  const updateBlock = useBuilderStore((s) => s.updateBlock);
-  const entrance = block.card_entrance;
-  const enabled = entrance?.enabled ?? false;
-
-  const update = (updates: Partial<CardEntranceConfig>) => {
-    updateBlock(block._key, {
-      card_entrance: { ...entrance, ...updates },
-    } as Partial<ProjectGridBlock>);
-  };
-
-  return (
-    <div className="px-4 py-3">
-      <div className="flex items-center justify-between mb-2.5">
-        <span className="text-xs font-medium text-neutral-700">Card Entrance</span>
-        <button
-          type="button"
-          onClick={() => update({ enabled: !enabled })}
-          className={`relative w-8 h-[18px] rounded-full transition-colors ${
-            enabled ? "bg-[#076bff]" : "bg-neutral-300"
-          }`}
-        >
-          <span
-            className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow transition-transform ${
-              enabled ? "translate-x-[16px]" : "translate-x-[2px]"
-            }`}
-          />
-        </button>
-      </div>
-
-      {enabled && (
-        <div className="space-y-3">
-          {/* Preset — dropdown instead of segmented buttons */}
-          <div>
-            <label className="text-[11px] text-neutral-500 mb-1 block">Preset</label>
-            <select
-              value={entrance?.preset || "slide-up"}
-              onChange={(e) => update({ preset: e.target.value as "fade" | "slide-up" | "scale" })}
-              className={CARD_ENTRANCE_SELECT_CLASS}
-            >
-              {ENTRANCE_PRESETS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {/* Stagger delay */}
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label className="text-[11px] text-neutral-500">Stagger</label>
-              <span className="text-[11px] text-neutral-500 tabular-nums">
-                {entrance?.stagger_delay ?? 80}ms
-              </span>
-            </div>
-            <input
-              type="range"
-              min={0}
-              max={5000}
-              step={10}
-              value={entrance?.stagger_delay ?? 80}
-              onChange={(e) => update({ stagger_delay: Number(e.target.value) })}
-              className={CARD_ENTRANCE_SLIDER_CLASS}
-            />
-          </div>
-
-          {/* Duration */}
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label className="text-[11px] text-neutral-500">Duration</label>
-              <span className="text-[11px] text-neutral-500 tabular-nums">
-                {entrance?.duration ?? 500}ms
-              </span>
-            </div>
-            <input
-              type="range"
-              min={200}
-              max={5000}
-              step={50}
-              value={entrance?.duration ?? 500}
-              onChange={(e) => update({ duration: Number(e.target.value) })}
-              className={CARD_ENTRANCE_SLIDER_CLASS}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+"use client";
+
+/**
+ * CardEntranceSection — Toggle + preset/stagger/duration controls for
+ * ProjectGrid card entrance animations.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ProjectGridBlock, CardEntranceConfig } from "../../../lib/sanity/types";
+
+export const ENTRANCE_PRESETS = [
+  { value: "fade", label: "Fade" },
+  { value: "slide-up", label: "Slide Up" },
+  { value: "scale", label: "Scale" },
+] as const;
+
+export const CARD_ENTRANCE_SELECT_CLASS =
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]";
+
+export const CARD_ENTRANCE_SLIDER_CLASS =
+  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#3580f9] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#3580f9] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
+
+export function CardEntranceSection({ block }: { block: ProjectGridBlock }) {
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const entrance = block.card_entrance;
+  const enabled = entrance?.enabled ?? false;
+
+  const update = (updates: Partial<CardEntranceConfig>) => {
+    updateBlock(block._key, {
+      card_entrance: { ...entrance, ...updates },
+    } as Partial<ProjectGridBlock>);
+  };
+
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-center justify-between mb-2.5">
+        <span className="text-xs font-medium text-neutral-700">Card Entrance</span>
+        <button
+          type="button"
+          onClick={() => update({ enabled: !enabled })}
+          className={`relative w-8 h-[18px] rounded-full transition-colors ${
+            enabled ? "bg-[#3580f9]" : "bg-neutral-300"
+          }`}
+        >
+          <span
+            className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow transition-transform ${
+              enabled ? "translate-x-[16px]" : "translate-x-[2px]"
+            }`}
+          />
+        </button>
+      </div>
+
+      {enabled && (
+        <div className="space-y-3">
+          {/* Preset — dropdown instead of segmented buttons */}
+          <div>
+            <label className="text-[11px] text-neutral-500 mb-1 block">Preset</label>
+            <select
+              value={entrance?.preset || "slide-up"}
+              onChange={(e) => update({ preset: e.target.value as "fade" | "slide-up" | "scale" })}
+              className={CARD_ENTRANCE_SELECT_CLASS}
+            >
+              {ENTRANCE_PRESETS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Stagger delay */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label className="text-[11px] text-neutral-500">Stagger</label>
+              <span className="text-[11px] text-neutral-500 tabular-nums">
+                {entrance?.stagger_delay ?? 80}ms
+              </span>
+            </div>
+            <input
+              type="range"
+              min={0}
+              max={5000}
+              step={10}
+              value={entrance?.stagger_delay ?? 80}
+              onChange={(e) => update({ stagger_delay: Number(e.target.value) })}
+              className={CARD_ENTRANCE_SLIDER_CLASS}
+            />
+          </div>
+
+          {/* Duration */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label className="text-[11px] text-neutral-500">Duration</label>
+              <span className="text-[11px] text-neutral-500 tabular-nums">
+                {entrance?.duration ?? 500}ms
+              </span>
+            </div>
+            <input
+              type="range"
+              min={200}
+              max={5000}
+              step={50}
+              value={entrance?.duration ?? 500}
+              onChange={(e) => update({ duration: Number(e.target.value) })}
+              className={CARD_ENTRANCE_SLIDER_CLASS}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/builder/settings-panel/ColumnV2Settings.tsx

@@ -85,8 +85,8 @@ export default function ColumnV2Settings({
     <>
       {isResponsive && (
         <div className="px-4 pt-3">
-          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#4794e2]/8 border border-[#4794e2]/15">
-            <span className="text-[11px] font-medium text-[#4794e2]">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#3580f9]/8 border border-[#3580f9]/15">
+            <span className="text-[11px] font-medium text-[#3580f9]">
               Editing {activeViewport === "tablet" ? "Tablet" : "Phone"} overrides
             </span>
           </div>
@@ -98,7 +98,7 @@ export default function ColumnV2Settings({
           <span>
             Span
             {hasSpanOverride && (
-              <span className="ml-1 text-[9px] text-[#4794e2]">overridden</span>
+              <span className="ml-1 text-[9px] text-[#3580f9]">overridden</span>
             )}
           </span>
         }>
@@ -109,7 +109,7 @@ export default function ColumnV2Settings({
               max={gridColumns}
               value={effectiveSpan}
               onChange={(e) => handleSpanChange(parseInt(e.target.value))}
-              className="flex-1 accent-[#4794e2]"
+              className="flex-1 accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-900 w-12 text-right font-medium">
               {effectiveSpan}/{gridColumns}
@@ -133,7 +133,7 @@ export default function ColumnV2Settings({
                 <div
                   key={i}
                   className={`h-1.5 flex-1 rounded-full transition-colors ${
-                    isActive ? "bg-[#4794e2]" : "bg-neutral-200"
+                    isActive ? "bg-[#3580f9]" : "bg-neutral-200"
                   }`}
                 />
               );