@ltm-blueverse/alpha-semantic-hub 0.7.0 → 0.7.2

package/explorer/src/workspaces/GraphWorkspace/plugins/legendPlugin.tsx

@@ -49,7 +49,7 @@ export const legendPlugin: GraphPlugin = {
                     style={{
                       ...swatchStyle,
                       background: item.color,
-                      boxShadow: `0 0 0 1px rgba(255,255,255,0.06), 0 0 18px ${item.color}44`,
+                      boxShadow: `0 0 0 1px rgba(28, 20, 24,0.06), 0 0 18px ${item.color}44`,
                     }}
                   />
                   <div style={{ minWidth: 0, flex: 1 }}>
@@ -75,7 +75,7 @@ const panelBodyStyle: CSSProperties = {
 };
 
 const panelEyebrowStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 11,
   fontWeight: 700,
   letterSpacing: "0.08em",
@@ -88,8 +88,8 @@ const legendRowStyle: CSSProperties = {
   gap: 10,
   padding: "8px 10px",
   borderRadius: 12,
-  border: "1px solid rgba(255,255,255,0.06)",
-  background: "rgba(255,255,255,0.025)",
+  border: "1px solid rgba(28, 20, 24,0.06)",
+  background: "rgba(28, 20, 24,0.025)",
 };
 
 const swatchStyle: CSSProperties = {
@@ -100,7 +100,7 @@ const swatchStyle: CSSProperties = {
 };
 
 const rowTitleStyle: CSSProperties = {
-  color: "#fff1f3",
+  color: "#2d1619",
   fontSize: 13,
   fontWeight: 600,
   overflow: "hidden",
@@ -109,12 +109,12 @@ const rowTitleStyle: CSSProperties = {
 };
 
 const rowMetaStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 12,
 };
 
 const emptyTextStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 12,
   lineHeight: 1.5,
 };

package/explorer/src/workspaces/GraphWorkspace/plugins/neighborhoodPanelPlugin.tsx

@@ -170,13 +170,13 @@ const panelBodyStyle: CSSProperties = {
 };
 
 const panelEyebrowStyle: CSSProperties = {
-  color: "#fff1f3",
+  color: "#2d1619",
   fontSize: 14,
   fontWeight: 700,
 };
 
 const summaryStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 12,
   lineHeight: 1.5,
 };
@@ -187,18 +187,18 @@ const neighborButtonStyle: CSSProperties = {
   gap: 10,
   width: "100%",
   padding: "8px 10px",
-  background: "rgba(255,255,255,0.025)",
-  border: "1px solid rgba(255,255,255,0.06)",
+  background: "rgba(28, 20, 24,0.025)",
+  border: "1px solid rgba(28, 20, 24,0.06)",
   borderRadius: 12,
   cursor: "pointer",
 };
 
 const controlButtonStyle: CSSProperties = {
   padding: "7px 10px",
-  background: "rgba(255,255,255,0.03)",
-  border: "1px solid rgba(255,255,255,0.08)",
+  background: "rgba(28, 20, 24,0.03)",
+  border: "1px solid rgba(28, 20, 24,0.08)",
   borderRadius: 10,
-  color: "#dce7f4",
+  color: "#18212c",
   cursor: "pointer",
   fontSize: 12,
 };
@@ -211,7 +211,7 @@ const swatchStyle: CSSProperties = {
 };
 
 const rowTitleStyle: CSSProperties = {
-  color: "#fff1f3",
+  color: "#2d1619",
   fontSize: 13,
   fontWeight: 600,
   overflow: "hidden",
@@ -220,12 +220,12 @@ const rowTitleStyle: CSSProperties = {
 };
 
 const rowMetaStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 12,
 };
 
 const emptyTextStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 12,
   lineHeight: 1.5,
 };

package/explorer/src/workspaces/GraphWorkspace/plugins/temporalOverlayPlugin.tsx

@@ -49,19 +49,19 @@ export const temporalOverlayPlugin: GraphPlugin = {
             padding: "8px 12px",
             borderRadius: 999,
             border: "1px solid rgba(255, 107, 129, 0.18)",
-            background: "linear-gradient(135deg, rgba(6, 15, 27, 0.88), rgba(11, 22, 39, 0.76))",
+            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.76))",
             boxShadow: "0 12px 30px rgba(0, 0, 0, 0.28)",
-            color: "#ffdfe4",
+            color: "#2e161a",
             fontSize: 11,
             letterSpacing: "0.05em",
             textTransform: "uppercase",
             pointerEvents: "none",
           }}
         >
-          <span style={{ color: "#7fc6ff", fontWeight: 700 }}>Temporal</span>
+          <span style={{ color: "#2f7fd6", fontWeight: 700 }}>Temporal</span>
           <span>{label}</span>
           {typeof temporal.activeNodeCount === "number" ? (
-            <span style={{ color: "#c99aa3" }}>{temporal.activeNodeCount.toLocaleString()} active</span>
+            <span style={{ color: "#aa485b" }}>{temporal.activeNodeCount.toLocaleString()} active</span>
           ) : null}
         </div>
       ),
@@ -113,7 +113,7 @@ const panelBodyStyle: CSSProperties = {
 };
 
 const panelEyebrowStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 11,
   fontWeight: 700,
   letterSpacing: "0.08em",
@@ -126,17 +126,17 @@ const detailRowStyle: CSSProperties = {
   gap: 16,
   padding: "8px 10px",
   borderRadius: 12,
-  border: "1px solid rgba(255,255,255,0.06)",
-  background: "rgba(255,255,255,0.025)",
+  border: "1px solid rgba(28, 20, 24,0.06)",
+  background: "rgba(28, 20, 24,0.025)",
 };
 
 const detailLabelStyle: CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 12,
 };
 
 const detailValueStyle: CSSProperties = {
-  color: "#fff1f3",
+  color: "#2d1619",
   fontSize: 12,
   fontWeight: 600,
 };

package/explorer/src/workspaces/ImportExportWorkspace/ImportExportWorkspace.tsx

@@ -112,7 +112,7 @@ export function ImportExportWorkspace() {
               <input {...getInputProps()} />
               {file ? (
                 <>
-                  {file.name.endsWith(".json") ? <FileJson size={40} color="#4cc38a" /> : <FileText size={40} color="#4cc38a" />}
+                  {file.name.endsWith(".json") ? <FileJson size={40} color="#1f9d5f" /> : <FileText size={40} color="#1f9d5f" />}
                   <div style={{ color: "var(--ws-text)", fontWeight: 700 }}>{file.name}</div>
                   <div className="ws-body" style={{ fontSize: 11 }}>{(file.size / 1024).toFixed(1)} KB — click to replace</div>
                 </>
@@ -174,7 +174,7 @@ export function ImportExportWorkspace() {
               className="ws-btn"
               onClick={handleExport}
               disabled={isExporting}
-              style={{ width: "100%", justifyContent: "center", background: "var(--ws-purple-soft)", borderColor: "rgba(192,132,252,0.3)", color: "#d8b4fe" }}
+              style={{ width: "100%", justifyContent: "center", background: "var(--ws-purple-soft)", borderColor: "rgba(192,132,252,0.3)", color: "#9333ea" }}
             >
               {isExporting ? <><Loader2 size={15} className="ws-spin" />Preparing…</> : <><Download size={15} />Download Export</>}
             </button>
@@ -185,8 +185,8 @@ export function ImportExportWorkspace() {
       {/* Toasts */}
       <div style={{ position: "fixed", bottom: 28, right: 28, display: "flex", flexDirection: "column", gap: 10, zIndex: 1000 }}>
         {toasts.map((t) => (
-          <div key={t.id} className="ws-animate-in" style={{ display: "flex", alignItems: "center", gap: 10, padding: "13px 18px", borderRadius: "var(--ws-radius-sm)", background: t.type === "success" ? "rgba(16,36,22,0.96)" : "rgba(40,10,10,0.96)", border: `1px solid ${t.type === "success" ? "rgba(76,195,138,0.4)" : "rgba(255,123,114,0.4)"}`, boxShadow: "0 8px 24px rgba(0,0,0,0.5)", backdropFilter: "blur(12px)" }}>
-            {t.type === "success" ? <CheckCircle2 size={16} color="#4cc38a" /> : <AlertCircle size={16} color="#ff7b72" />}
+          <div key={t.id} className="ws-animate-in" style={{ display: "flex", alignItems: "center", gap: 10, padding: "13px 18px", borderRadius: "var(--ws-radius-sm)", background: t.type === "success" ? "rgba(255, 255, 255,0.96)" : "rgba(255, 255, 255,0.96)", border: `1px solid ${t.type === "success" ? "rgba(76,195,138,0.4)" : "rgba(255,123,114,0.4)"}`, boxShadow: "0 8px 24px rgba(0,0,0,0.5)", backdropFilter: "blur(12px)" }}>
+            {t.type === "success" ? <CheckCircle2 size={16} color="#1f9d5f" /> : <AlertCircle size={16} color="#ec2315" />}
             <span style={{ color: "var(--ws-text)", fontSize: 13, fontWeight: 500 }}>{t.text}</span>
           </div>
         ))}

package/explorer/src/workspaces/LineageWorkspace/LineageDiagram.tsx

@@ -7,15 +7,15 @@ import { ReactFlow, Background, Controls } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 
 const THEME_CSS = `
-  .react-flow { background: var(--ws-bg, #080407); }
+  .react-flow { background: var(--ws-bg, #f9f7f7); }
   .react-flow__node-group {
     background: rgba(255,45,75,0.04);
     border: 1px dashed rgba(255,45,75,0.18);
     border-radius: 10px;
   }
   .react-flow__node-default {
-    background: rgba(6,13,26,0.92);
-    color: var(--ws-text, #ffe9ec);
+    background: rgba(255, 255, 255,0.92);
+    color: var(--ws-text, #2d1619);
     border: 1px solid rgba(255,45,75,0.22);
     border-radius: 8px;
     padding: 10px 12px;
@@ -23,9 +23,9 @@ const THEME_CSS = `
     font-size: 12px;
     box-shadow: 0 4px 16px rgba(0,0,0,0.4);
   }
-  .react-flow__controls { background: rgba(6,13,26,0.9); border: 1px solid rgba(255,45,75,0.18); border-radius: 10px; }
+  .react-flow__controls { background: rgba(255, 255, 255,0.9); border: 1px solid rgba(255,45,75,0.18); border-radius: 10px; }
   .react-flow__controls-button { background: transparent; border-color: rgba(255,45,75,0.15); color: var(--ws-text-muted, #8f6d75); }
-  .react-flow__controls-button:hover { background: rgba(255,45,75,0.1); color: var(--ws-text, #ffe9ec); }
+  .react-flow__controls-button:hover { background: rgba(255,45,75,0.1); color: var(--ws-text, #2d1619); }
 `;
 
 export function LineageDiagram() {
@@ -127,11 +127,11 @@ export function LineageDiagram() {
   }, [activeId]);
 
   return (
-    <div style={{ width: "100%", height: "100%", position: "relative", background: "var(--ws-bg, #080407)" }}>
+    <div style={{ width: "100%", height: "100%", position: "relative", background: "var(--ws-bg, #f9f7f7)" }}>
       <style>{THEME_CSS}</style>
 
       {/* Toolbar */}
-      <div style={{ position: "absolute", top: 14, left: 14, right: 14, zIndex: 10, display: "flex", gap: 8, alignItems: "center", background: "rgba(4,10,18,0.88)", backdropFilter: "blur(14px)", padding: "8px 12px", borderRadius: 12, border: "1px solid rgba(255,45,75,0.16)", boxShadow: "0 4px 20px rgba(0,0,0,0.4)" }}>
+      <div style={{ position: "absolute", top: 14, left: 14, right: 14, zIndex: 10, display: "flex", gap: 8, alignItems: "center", background: "rgba(255, 255, 255,0.88)", backdropFilter: "blur(14px)", padding: "8px 12px", borderRadius: 12, border: "1px solid rgba(255,45,75,0.16)", boxShadow: "0 4px 20px rgba(0,0,0,0.4)" }}>
         <span className="ws-eyebrow" style={{ color: "var(--ws-accent, #ff2d4b)", marginRight: 4 }}>PROV-O Lineage</span>
         <input
           className="ws-input"
@@ -155,7 +155,7 @@ export function LineageDiagram() {
       </div>
 
       {error ? (
-        <div style={{ position: "absolute", top: 60, left: 14, right: 14, zIndex: 10, padding: 12, borderRadius: 14, color: "#ffb4c2", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" }}>
+        <div style={{ position: "absolute", top: 60, left: 14, right: 14, zIndex: 10, padding: 12, borderRadius: 14, color: "#e98498", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" }}>
           {error}
         </div>
       ) : null}

package/explorer/src/workspaces/ManageWorkspace/KGOverviewTab.tsx

@@ -31,10 +31,10 @@ function TypeBar({ label, count, total, color }: { label: string; count: number;
   const pct = total > 0 ? Math.round((count / total) * 100) : 0;
   return (
     <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "5px 0" }}>
-      <div style={{ width: 120, flexShrink: 0, color: "#f0cdd3", fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={label}>
+      <div style={{ width: 120, flexShrink: 0, color: "#602b34", fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={label}>
         {label}
       </div>
-      <div style={{ flex: 1, height: 6, borderRadius: 999, background: "rgba(255,255,255,0.06)", overflow: "hidden" }}>
+      <div style={{ flex: 1, height: 6, borderRadius: 999, background: "rgba(28, 20, 24,0.06)", overflow: "hidden" }}>
         <div
           style={{
             width: `${pct}%`,
@@ -53,8 +53,8 @@ function TypeBar({ label, count, total, color }: { label: string; count: number;
   );
 }
 
-const NODE_COLORS = ["#3E79F2", "#149287", "#2F9F61", "#555FD6", "#8A56D8", "#B65473", "#C9922E", "#ff2d4b", "#ff7a45"];
-const EDGE_COLORS = ["#4cc38a", "#ff8fa0", "#d2a8ff", "#ff7a45", "#ff7b72", "#ff2d4b", "#ff2d4b", "#8A56D8"];
+const NODE_COLORS = ["#3e79f2", "#149287", "#2f9f61", "#555fd6", "#6d28d9", "#b65473", "#8a5a10", "#ff2d4b", "#e86a2e"];
+const EDGE_COLORS = ["#1f9d5f", "#d9455e", "#7c3aed", "#e86a2e", "#ec2315", "#ff2d4b", "#ff2d4b", "#6d28d9"];
 
 function buildTypeMap(nodes: NodeItem[], key: keyof NodeItem): Record<string, number> {
   const map: Record<string, number> = {};
@@ -198,7 +198,7 @@ export function KGOverviewTab() {
   return (
     <div className="ws-page">
       {error ? (
-        <div style={{ margin: "16px 22px 0 22px", padding: 12, borderRadius: 14, color: "#ffb4c2", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" }}>
+        <div style={{ margin: "16px 22px 0 22px", padding: 12, borderRadius: 14, color: "#e98498", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" }}>
           {error}
         </div>
       ) : null}

package/explorer/src/workspaces/ManageWorkspace/OntologySummaryTab.tsx

@@ -41,7 +41,7 @@ function ConceptRow({
           paddingBottom: 5,
           borderRadius: 6,
           cursor: "pointer",
-          color: depth === 0 ? "#f0cdd3" : "#b08b93",
+          color: depth === 0 ? "#602b34" : "#b08b93",
           fontSize: depth === 0 ? 13 : 12,
           transition: "background 120ms ease",
         }}
@@ -97,7 +97,7 @@ function SchemePanel({
       >
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
           {expanded ? <ChevronDown size={14} color="#b08b93" /> : <ChevronRight size={14} color="#b08b93" />}
-          <span style={{ color: "#ffeaed", fontSize: 14, fontWeight: 700 }}>{scheme.label}</span>
+          <span style={{ color: "#2d1619", fontSize: 14, fontWeight: 700 }}>{scheme.label}</span>
         </div>
         <span style={{ color: "#9c7a82", fontSize: 11 }}>
           {isLoading ? "…" : `${totalConcepts} concept${totalConcepts !== 1 ? "s" : ""}`}
@@ -137,9 +137,9 @@ export function OntologySummaryTab({
       {/* Header */}
       <div style={headerStyle}>
         <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-          <BookOpen size={18} color="#d2a8ff" />
+          <BookOpen size={18} color="#7c3aed" />
           <div>
-            <div style={{ color: "#fff0f2", fontSize: 16, fontWeight: 700 }}>Ontology Summary</div>
+            <div style={{ color: "#2d1619", fontSize: 16, fontWeight: 700 }}>Ontology Summary</div>
             <div style={{ color: "#b08b93", fontSize: 12 }}>
               {isLoading
                 ? "Loading schemes…"
@@ -161,7 +161,7 @@ export function OntologySummaryTab({
           {isLoading ? (
             <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 10 }}>
               {[90, 75, 60].map((w, i) => (
-                <div key={i} style={{ height: 36, borderRadius: 8, background: "rgba(255,255,255,0.04)", width: `${w}%` }} />
+                <div key={i} style={{ height: 36, borderRadius: 8, background: "rgba(28, 20, 24,0.04)", width: `${w}%` }} />
               ))}
             </div>
           ) : schemes.length === 0 ? (
@@ -185,13 +185,13 @@ export function OntologySummaryTab({
         {selectedConcept ? (
           <div style={detailPanelStyle}>
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
-              <div style={{ color: "#d2a8ff", fontSize: 11, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>
+              <div style={{ color: "#7c3aed", fontSize: 11, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>
                 Concept Detail
               </div>
               <button onClick={() => setSelectedConcept(null)} style={{ background: "transparent", border: "none", color: "#b08b93", cursor: "pointer", fontSize: 16 }}>×</button>
             </div>
 
-            <h3 style={{ color: "#ffffff", fontSize: 18, fontWeight: 800, letterSpacing: "-0.03em", margin: "0 0 6px 0" }}>
+            <h3 style={{ color: "#16181d", fontSize: 18, fontWeight: 800, letterSpacing: "-0.03em", margin: "0 0 6px 0" }}>
               {selectedConcept.pref_label}
             </h3>
             {selectedConcept.notation ? (
@@ -204,7 +204,7 @@ export function OntologySummaryTab({
             {selectedConcept.description ? (
               <div style={detailSectionStyle}>
                 <div style={detailLabelStyle}>Description</div>
-                <div style={{ color: "#f0cdd3", fontSize: 13, lineHeight: 1.6 }}>{selectedConcept.description}</div>
+                <div style={{ color: "#602b34", fontSize: 13, lineHeight: 1.6 }}>{selectedConcept.description}</div>
               </div>
             ) : null}
 
@@ -227,7 +227,7 @@ export function OntologySummaryTab({
                     <div
                       key={child.uri}
                       onClick={() => setSelectedConcept(child)}
-                      style={{ color: "#ff8fa0", fontSize: 12, cursor: "pointer", padding: "3px 0" }}
+                      style={{ color: "#d9455e", fontSize: 12, cursor: "pointer", padding: "3px 0" }}
                     >
                       → {child.pref_label}
                     </div>
@@ -252,7 +252,7 @@ const shellStyle: React.CSSProperties = {
   flexDirection: "column",
   width: "100%",
   height: "100%",
-  background: "#0a0508",
+  background: "#fdfcfc",
   overflow: "hidden",
 };
 
@@ -273,7 +273,7 @@ const openBrowserBtnStyle: React.CSSProperties = {
   borderRadius: 8,
   border: "1px solid rgba(210,168,255,0.22)",
   background: "rgba(210,168,255,0.08)",
-  color: "#d2a8ff",
+  color: "#7c3aed",
   fontSize: 12,
   fontWeight: 600,
   cursor: "pointer",
@@ -282,13 +282,13 @@ const openBrowserBtnStyle: React.CSSProperties = {
 const treeColumnStyle: React.CSSProperties = {
   flex: 1,
   overflowY: "auto",
-  borderRight: "1px solid rgba(255,255,255,0.06)",
+  borderRight: "1px solid rgba(28, 20, 24,0.06)",
 };
 
 const schemeCardStyle: React.CSSProperties = {
   borderRadius: 10,
   border: "1px solid rgba(210,168,255,0.1)",
-  background: "rgba(255,255,255,0.02)",
+  background: "rgba(28, 20, 24,0.02)",
   overflow: "hidden",
 };
 
@@ -301,21 +301,21 @@ const schemeHeaderStyle: React.CSSProperties = {
   background: "transparent",
   border: "none",
   cursor: "pointer",
-  borderBottom: "1px solid rgba(255,255,255,0.05)",
+  borderBottom: "1px solid rgba(28, 20, 24,0.05)",
 };
 
 const detailPanelStyle: React.CSSProperties = {
   width: 300,
   padding: "20px",
   overflowY: "auto",
-  borderLeft: "1px solid rgba(255,255,255,0.06)",
+  borderLeft: "1px solid rgba(28, 20, 24,0.06)",
   flexShrink: 0,
 };
 
 const detailSectionStyle: React.CSSProperties = {
   marginTop: 14,
   paddingTop: 12,
-  borderTop: "1px solid rgba(255,255,255,0.06)",
+  borderTop: "1px solid rgba(28, 20, 24,0.06)",
 };
 
 const detailLabelStyle: React.CSSProperties = {
@@ -330,9 +330,9 @@ const detailLabelStyle: React.CSSProperties = {
 const altLabelChipStyle: React.CSSProperties = {
   padding: "3px 8px",
   borderRadius: 999,
-  background: "rgba(255,255,255,0.05)",
-  border: "1px solid rgba(255,255,255,0.08)",
-  color: "#c99aa3",
+  background: "rgba(28, 20, 24,0.05)",
+  border: "1px solid rgba(28, 20, 24,0.08)",
+  color: "#aa485b",
   fontSize: 11,
 };
 

package/explorer/src/workspaces/MemoryWorkspace.tsx

@@ -345,7 +345,7 @@ const iconButtonStyle: CSSProperties = {
   height: 30,
   borderRadius: 8,
   border: `1px solid ${GRAPH_THEME.ui.surface.panelBorder}`,
-  background: "rgba(255, 255, 255, 0.04)",
+  background: "rgba(28, 20, 24, 0.04)",
   color: GRAPH_THEME.ui.text.body,
   cursor: "pointer",
 };
@@ -459,6 +459,6 @@ const alertStyle: CSSProperties = {
   borderRadius: 8,
   border: "1px solid rgba(248, 81, 73, 0.28)",
   background: "rgba(248, 81, 73, 0.1)",
-  color: "#ffb4ad",
+  color: "#552925",
   fontSize: 12,
 };

package/explorer/src/workspaces/OntologyWorkspace/AlignmentsTab.tsx

@@ -21,13 +21,13 @@ const RELATIONS: AlignmentRelation[] = [
 ];
 
 const RELATION_COLORS: Record<AlignmentRelation, string> = {
-  "owl:equivalentClass": "#7ce7d3",
-  "owl:equivalentProperty": "#7ce7d3",
-  "skos:exactMatch": "#9ee8d7",
+  "owl:equivalentClass": "#0e8571",
+  "owl:equivalentProperty": "#0e8571",
+  "skos:exactMatch": "#0e7f66",
   "skos:closeMatch": "#ff2d4b",
-  "skos:broadMatch": "#ff7a45",
-  "skos:narrowMatch": "#ff7a45",
-  "skos:relatedMatch": "#d2a8ff",
+  "skos:broadMatch": "#e86a2e",
+  "skos:narrowMatch": "#e86a2e",
+  "skos:relatedMatch": "#7c3aed",
 };
 
 export function AlignmentsTab() {
@@ -242,7 +242,7 @@ export function AlignmentsTab() {
                       const cellItems = matrix.cells.get(key) ?? [];
                       const isDiag = row.uri === col.uri;
                       return (
-                        <td key={col.uri} style={{ ...matrixCellStyle, background: isDiag ? "rgba(255,255,255,0.015)" : undefined }}>
+                        <td key={col.uri} style={{ ...matrixCellStyle, background: isDiag ? "rgba(28, 20, 24,0.015)" : undefined }}>
                           {isDiag ? <span style={mutedStyle}>—</span> : cellItems.length ? (
                             <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                               {cellItems.map((item) => (
@@ -355,10 +355,10 @@ export function AlignmentsTab() {
           <div style={suggestionListStyle}>
             {suggestions.map((item) => (
               <button key={`${item.source_uri}-${item.target_uri}-${item.relation}`} style={suggestionStyle} onClick={() => handleAcceptSuggestion(item)}>
-                <span style={{ color: "#fff0f2", fontWeight: 800 }}>{item.source_label}</span>
+                <span style={{ color: "#2d1619", fontWeight: 800 }}>{item.source_label}</span>
                 <span style={{ color: RELATION_COLORS[item.relation] }}>{item.relation}</span>
-                <span style={{ color: "#fff0f2", fontWeight: 800 }}>{item.target_label}</span>
-                <span style={{ color: "#c99aa3" }}>{Math.round(item.score * 100)}%</span>
+                <span style={{ color: "#2d1619", fontWeight: 800 }}>{item.target_label}</span>
+                <span style={{ color: "#aa485b" }}>{Math.round(item.score * 100)}%</span>
               </button>
             ))}
             {!suggestions.length ? <p style={mutedStyle}>Run suggestions to review ranked candidate mappings.</p> : null}
@@ -372,14 +372,14 @@ export function AlignmentsTab() {
           {alignments.map((item) => (
             <div key={item.id} style={rowStyle}>
               <div>
-                <div style={{ color: "#fff0f2", fontWeight: 800 }}>{item.source_label || item.source_uri}</div>
+                <div style={{ color: "#2d1619", fontWeight: 800 }}>{item.source_label || item.source_uri}</div>
                 <div style={monoStyle}>{item.source_uri}</div>
               </div>
               <div style={{ ...relationBadgeStyle, color: RELATION_COLORS[item.relation], borderColor: `${RELATION_COLORS[item.relation]}55` }}>
                 {item.relation}
               </div>
               <div>
-                <div style={{ color: "#fff0f2", fontWeight: 800 }}>{item.target_label || item.target_uri}</div>
+                <div style={{ color: "#2d1619", fontWeight: 800 }}>{item.target_label || item.target_uri}</div>
                 <div style={monoStyle}>{item.target_uri}</div>
               </div>
               <div style={confidenceStyle}>{Math.round(item.confidence * 100)}%</div>
@@ -398,40 +398,40 @@ export function AlignmentsTab() {
 function Metric({ label, value }: { label: string; value: number }) {
   return (
     <div style={metricStyle}>
-      <span style={{ color: "#9ee8d7", fontSize: 20, fontWeight: 900 }}>{value.toLocaleString()}</span>
+      <span style={{ color: "#0e7f66", fontSize: 20, fontWeight: 900 }}>{value.toLocaleString()}</span>
       <span style={{ color: "#9c7a82", fontSize: 11 }}>{label}</span>
     </div>
   );
 }
 
 const pageStyle: CSSProperties = { height: "100%", overflow: "auto", padding: 22, display: "flex", flexDirection: "column", gap: 16 };
-const heroStyle: CSSProperties = { display: "flex", justifyContent: "space-between", gap: 18, padding: 22, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 22, background: "linear-gradient(135deg, rgba(11,25,42,0.94), rgba(7,14,25,0.9))" };
-const kickerStyle: CSSProperties = { display: "inline-flex", gap: 8, alignItems: "center", color: "#9ee8d7", fontSize: 11, fontWeight: 900, letterSpacing: "0.12em", textTransform: "uppercase" };
-const titleStyle: CSSProperties = { margin: "8px 0", color: "#fff0f2", fontSize: 26, letterSpacing: "-0.04em" };
-const textStyle: CSSProperties = { margin: 0, color: "#c99aa3", lineHeight: 1.6, maxWidth: 620 };
+const heroStyle: CSSProperties = { display: "flex", justifyContent: "space-between", gap: 18, padding: 22, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 22, background: "linear-gradient(135deg, rgba(255, 255, 255,0.94), rgba(255, 255, 255,0.9))" };
+const kickerStyle: CSSProperties = { display: "inline-flex", gap: 8, alignItems: "center", color: "#0e7f66", fontSize: 11, fontWeight: 900, letterSpacing: "0.12em", textTransform: "uppercase" };
+const titleStyle: CSSProperties = { margin: "8px 0", color: "#2d1619", fontSize: 26, letterSpacing: "-0.04em" };
+const textStyle: CSSProperties = { margin: 0, color: "#aa485b", lineHeight: 1.6, maxWidth: 620 };
 const summaryGridStyle: CSSProperties = { display: "grid", gridTemplateColumns: "repeat(3, minmax(100px, 1fr))", gap: 10, minWidth: 320 };
-const metricStyle: CSSProperties = { padding: 14, borderRadius: 16, background: "rgba(255,255,255,0.035)", border: "1px solid rgba(255,107,129,0.1)", display: "flex", flexDirection: "column", gap: 4 };
+const metricStyle: CSSProperties = { padding: 14, borderRadius: 16, background: "rgba(28, 20, 24,0.035)", border: "1px solid rgba(255,107,129,0.1)", display: "flex", flexDirection: "column", gap: 4 };
 const gridStyle: CSSProperties = { display: "grid", gridTemplateColumns: "minmax(320px, 0.9fr) minmax(360px, 1.1fr)", gap: 16 };
-const cardStyle: CSSProperties = { padding: 18, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 20, background: "rgba(12,6,9,0.78)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)" };
-const sectionTitleStyle: CSSProperties = { margin: "0 0 14px", color: "#fff0f2", fontSize: 16 };
+const cardStyle: CSSProperties = { padding: 18, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 20, background: "rgba(255, 255, 255,0.78)", boxShadow: "inset 0 1px 0 rgba(28, 20, 24,0.04)" };
+const sectionTitleStyle: CSSProperties = { margin: "0 0 14px", color: "#2d1619", fontSize: 16 };
 const labelStyle: CSSProperties = { display: "block", color: "#9c7a82", fontSize: 11, fontWeight: 800, margin: "10px 0 6px", textTransform: "uppercase", letterSpacing: "0.08em" };
-const inputStyle: CSSProperties = { width: "100%", boxSizing: "border-box", border: "1px solid rgba(255,107,129,0.14)", borderRadius: 12, padding: "10px 12px", background: "rgba(6,3,5,0.8)", color: "#fff0f2" };
+const inputStyle: CSSProperties = { width: "100%", boxSizing: "border-box", border: "1px solid rgba(255,107,129,0.14)", borderRadius: 12, padding: "10px 12px", background: "rgba(255, 255, 255,0.8)", color: "#2d1619" };
 const twoColStyle: CSSProperties = { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 };
-const primaryButtonStyle: CSSProperties = { marginTop: 14, width: "100%", border: "1px solid rgba(124,231,211,0.35)", borderRadius: 12, padding: "11px 13px", background: "linear-gradient(135deg, rgba(20,151,136,0.55), rgba(255,45,75,0.35))", color: "#fff0f2", fontWeight: 900, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8 };
+const primaryButtonStyle: CSSProperties = { marginTop: 14, width: "100%", border: "1px solid rgba(124,231,211,0.35)", borderRadius: 12, padding: "11px 13px", background: "linear-gradient(135deg, rgba(20,151,136,0.55), rgba(255,45,75,0.35))", color: "#2d1619", fontWeight: 900, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8 };
 const secondaryButtonStyle: CSSProperties = { ...primaryButtonStyle, background: "rgba(255,107,129,0.08)", borderColor: "rgba(255,107,129,0.18)" };
 const suggestionListStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 8, marginTop: 14, maxHeight: 260, overflow: "auto" };
-const suggestionStyle: CSSProperties = { display: "grid", gridTemplateColumns: "1fr auto 1fr auto", gap: 10, alignItems: "center", textAlign: "left", border: "1px solid rgba(255,107,129,0.1)", borderRadius: 12, background: "rgba(255,255,255,0.03)", padding: 10, cursor: "pointer" };
+const suggestionStyle: CSSProperties = { display: "grid", gridTemplateColumns: "1fr auto 1fr auto", gap: 10, alignItems: "center", textAlign: "left", border: "1px solid rgba(255,107,129,0.1)", borderRadius: 12, background: "rgba(28, 20, 24,0.03)", padding: 10, cursor: "pointer" };
 const tableStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 8 };
-const rowStyle: CSSProperties = { display: "grid", gridTemplateColumns: "1fr auto 1fr auto auto", gap: 12, alignItems: "center", padding: 12, borderRadius: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,107,129,0.08)" };
+const rowStyle: CSSProperties = { display: "grid", gridTemplateColumns: "1fr auto 1fr auto auto", gap: 12, alignItems: "center", padding: 12, borderRadius: 14, background: "rgba(28, 20, 24,0.03)", border: "1px solid rgba(255,107,129,0.08)" };
 const monoStyle: CSSProperties = { color: "#9c7a82", fontSize: 11, fontFamily: "JetBrains Mono, monospace", wordBreak: "break-all" };
 const relationBadgeStyle: CSSProperties = { padding: "5px 9px", border: "1px solid", borderRadius: 999, fontSize: 10, fontWeight: 900 };
-const confidenceStyle: CSSProperties = { color: "#ff7a45", fontWeight: 900 };
-const iconButtonStyle: CSSProperties = { width: 34, height: 34, borderRadius: 10, border: "1px solid rgba(255,157,175,0.18)", background: "rgba(255,157,175,0.08)", color: "#ff9daf", cursor: "pointer" };
+const confidenceStyle: CSSProperties = { color: "#e86a2e", fontWeight: 900 };
+const iconButtonStyle: CSSProperties = { width: 34, height: 34, borderRadius: 10, border: "1px solid rgba(255,157,175,0.18)", background: "rgba(255,157,175,0.08)", color: "#e0556d", cursor: "pointer" };
 const mutedStyle: CSSProperties = { margin: 0, color: "#9c7a82", fontSize: 13 };
-const errorStyle: CSSProperties = { padding: 12, borderRadius: 14, color: "#ffb4c2", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" };
-const ephemeralBannerStyle: CSSProperties = { padding: "9px 14px", borderRadius: 12, color: "#ff7a45", background: "rgba(242,182,109,0.08)", border: "1px solid rgba(242,182,109,0.22)", fontSize: 12 };
+const errorStyle: CSSProperties = { padding: 12, borderRadius: 14, color: "#e98498", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" };
+const ephemeralBannerStyle: CSSProperties = { padding: "9px 14px", borderRadius: 12, color: "#e86a2e", background: "rgba(242,182,109,0.08)", border: "1px solid rgba(242,182,109,0.22)", fontSize: 12 };
 const matrixTableStyle: CSSProperties = { borderCollapse: "collapse", minWidth: "100%", fontSize: 12 };
 const matrixCornerStyle: CSSProperties = { padding: "8px 12px", borderBottom: "1px solid rgba(255,107,129,0.1)" };
-const matrixColHeaderStyle: CSSProperties = { padding: "8px 12px", color: "#9ee8d7", fontWeight: 900, borderBottom: "1px solid rgba(255,107,129,0.1)", textAlign: "center", whiteSpace: "nowrap" };
-const matrixRowHeaderStyle: CSSProperties = { padding: "8px 12px", color: "#9ee8d7", fontWeight: 900, borderRight: "1px solid rgba(255,107,129,0.1)", whiteSpace: "nowrap" };
+const matrixColHeaderStyle: CSSProperties = { padding: "8px 12px", color: "#0e7f66", fontWeight: 900, borderBottom: "1px solid rgba(255,107,129,0.1)", textAlign: "center", whiteSpace: "nowrap" };
+const matrixRowHeaderStyle: CSSProperties = { padding: "8px 12px", color: "#0e7f66", fontWeight: 900, borderRight: "1px solid rgba(255,107,129,0.1)", whiteSpace: "nowrap" };
 const matrixCellStyle: CSSProperties = { padding: "8px 10px", borderBottom: "1px solid rgba(255,107,129,0.06)", borderRight: "1px solid rgba(255,107,129,0.06)", textAlign: "center", verticalAlign: "middle", minWidth: 100 };