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

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

@@ -132,8 +132,8 @@ function ConceptDetailPanel({
     <div style={detailPanelStyle}>
       <div style={detailHeaderStyle}>
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <BookOpen size={13} color="#9ee8d7" />
-          <span style={{ color: "#fff0f2", fontSize: 13, fontWeight: 700 }}>Concept Detail</span>
+          <BookOpen size={13} color="#0e7f66" />
+          <span style={{ color: "#2d1619", fontSize: 13, fontWeight: 700 }}>Concept Detail</span>
         </div>
         <button onClick={onClose} style={iconBtnStyle}>
           <X size={14} />
@@ -148,15 +148,15 @@ function ConceptDetailPanel({
 
       {error && (
         <div style={centerStyle}>
-          <AlertCircle size={16} color="#ff9daf" />
-          <span style={{ color: "#ff9daf", fontSize: 12, marginTop: 6 }}>{error}</span>
+          <AlertCircle size={16} color="#e0556d" />
+          <span style={{ color: "#e0556d", fontSize: 12, marginTop: 6 }}>{error}</span>
         </div>
       )}
 
       {detail && !loading && (
         <div style={detailBodyStyle}>
           <div style={{ marginBottom: 14 }}>
-            <h3 style={{ margin: "0 0 4px", color: "#fff0f2", fontSize: 17, fontWeight: 800, letterSpacing: "-0.03em" }}>
+            <h3 style={{ margin: "0 0 4px", color: "#2d1619", fontSize: 17, fontWeight: 800, letterSpacing: "-0.03em" }}>
               {detail.pref_label}
             </h3>
             {detail.alt_labels.length > 0 && (
@@ -178,7 +178,7 @@ function ConceptDetailPanel({
 
           {detail.definition && (
             <PropSection label="Definition">
-              <p style={{ margin: 0, color: "#f0cdd3", fontSize: 13, lineHeight: 1.6 }}>
+              <p style={{ margin: 0, color: "#602b34", fontSize: 13, lineHeight: 1.6 }}>
                 {detail.definition}
               </p>
             </PropSection>
@@ -186,7 +186,7 @@ function ConceptDetailPanel({
 
           {detail.scope_note && (
             <PropSection label="Scope Note">
-              <p style={{ margin: 0, color: "#c99aa3", fontSize: 12, lineHeight: 1.5 }}>
+              <p style={{ margin: 0, color: "#aa485b", fontSize: 12, lineHeight: 1.5 }}>
                 {detail.scope_note}
               </p>
             </PropSection>
@@ -194,7 +194,7 @@ function ConceptDetailPanel({
 
           {detail.editorial_note && (
             <PropSection label="Editorial Note">
-              <p style={{ margin: 0, color: "#c99aa3", fontSize: 12, lineHeight: 1.5 }}>
+              <p style={{ margin: 0, color: "#aa485b", fontSize: 12, lineHeight: 1.5 }}>
                 {detail.editorial_note}
               </p>
             </PropSection>
@@ -210,7 +210,7 @@ function ConceptDetailPanel({
 
           {detail.scheme_uri && (
             <PropSection label="Concept Scheme">
-              <span style={{ color: "#f0cdd3", fontSize: 11, fontFamily: "monospace", wordBreak: "break-all" }}>
+              <span style={{ color: "#602b34", fontSize: 11, fontFamily: "monospace", wordBreak: "break-all" }}>
                 {detail.scheme_uri}
               </span>
             </PropSection>
@@ -223,7 +223,7 @@ function ConceptDetailPanel({
 
 function PropSection({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div style={{ paddingTop: 10, borderTop: "1px solid rgba(255,255,255,0.05)", marginTop: 10 }}>
+    <div style={{ paddingTop: 10, borderTop: "1px solid rgba(28, 20, 24,0.05)", marginTop: 10 }}>
       <div style={{ color: "#9c7a82", fontSize: 10, fontWeight: 700, textTransform: "uppercase" as const, letterSpacing: "0.07em", marginBottom: 5 }}>
         {label}
       </div>
@@ -295,7 +295,7 @@ function ConceptTreeNode({
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
-            color: isSelected ? "#fff0f2" : depth === 0 ? "#f0cdd3" : "#c99aa3",
+            color: isSelected ? "#2d1619" : depth === 0 ? "#602b34" : "#aa485b",
             fontSize: depth === 0 ? 13 : 12,
             fontWeight: depth === 0 ? 600 : 400,
           }}
@@ -406,8 +406,8 @@ function SchemePanel({
     <div style={schemePanelStyle}>
       <button onClick={() => setExpanded((v) => !v)} style={schemeHeaderBtnStyle}>
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          {expanded ? <ChevronDown size={13} color="#c99aa3" /> : <ChevronRight size={13} color="#c99aa3" />}
-          <span style={{ color: "#ffeaed", fontSize: 14, fontWeight: 700 }}>{scheme.title}</span>
+          {expanded ? <ChevronDown size={13} color="#aa485b" /> : <ChevronRight size={13} color="#aa485b" />}
+          <span style={{ color: "#2d1619", fontSize: 14, fontWeight: 700 }}>{scheme.title}</span>
         </div>
         <span style={{ color: "#9c7a82", fontSize: 11 }}>
           {loading ? "…" : `${totalConcepts} concept${totalConcepts !== 1 ? "s" : ""}`}
@@ -509,15 +509,15 @@ export function SKOSVocabularyManager({ schemeUri }: Props) {
 
           {error && (
             <div style={centerStyle}>
-              <AlertCircle size={16} color="#ff9daf" />
-              <span style={{ color: "#ff9daf", fontSize: 12, marginTop: 6 }}>{error}</span>
+              <AlertCircle size={16} color="#e0556d" />
+              <span style={{ color: "#e0556d", fontSize: 12, marginTop: 6 }}>{error}</span>
             </div>
           )}
 
           {!loading && !error && displayedSchemes.length === 0 && (
             <div style={{ ...centerStyle, textAlign: "center", padding: 28 }}>
               <BookOpen size={28} color="rgba(158,232,215,0.15)" />
-              <span style={{ color: "#c99aa3", fontSize: 12, marginTop: 10 }}>
+              <span style={{ color: "#aa485b", fontSize: 12, marginTop: 10 }}>
                 No SKOS concept schemes found
               </span>
               <span style={{ color: "#9c7a82", fontSize: 11, marginTop: 4, maxWidth: 220 }}>
@@ -580,7 +580,7 @@ const skosSearchInputStyle: React.CSSProperties = {
   background: "transparent",
   border: "none",
   outline: "none",
-  color: "#fff0f2",
+  color: "#2d1619",
   fontSize: 12,
 };
 
@@ -603,7 +603,7 @@ const detailPanelStyle: React.CSSProperties = {
   display: "flex",
   flexDirection: "column",
   borderLeft: "1px solid rgba(255,107,129,0.1)",
-  background: "rgba(6,3,5,0.5)",
+  background: "rgba(255, 255, 255,0.5)",
   overflow: "hidden",
 };
 
@@ -625,7 +625,7 @@ const detailBodyStyle: React.CSSProperties = {
 const schemePanelStyle: React.CSSProperties = {
   borderRadius: 10,
   border: "1px solid rgba(255,107,129,0.1)",
-  background: "rgba(255,255,255,0.02)",
+  background: "rgba(28, 20, 24,0.02)",
   overflow: "hidden",
   marginBottom: 8,
 };
@@ -639,13 +639,13 @@ const schemeHeaderBtnStyle: 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 expandBtnStyle: React.CSSProperties = {
   background: "transparent",
   border: "none",
-  color: "#c99aa3",
+  color: "#aa485b",
   cursor: "pointer",
   padding: 0,
   display: "flex",
@@ -657,16 +657,16 @@ const expandBtnStyle: React.CSSProperties = {
 const chipStyle: React.CSSProperties = {
   padding: "2px 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,
 };
 
 const iconBtnStyle: React.CSSProperties = {
   background: "transparent",
   border: "none",
-  color: "#c99aa3",
+  color: "#aa485b",
   cursor: "pointer",
   padding: 2,
   display: "grid",
@@ -684,7 +684,7 @@ const navLinkStyle: React.CSSProperties = {
   textAlign: "left",
 };
 
-const errorStyle: React.CSSProperties = { padding: 12, borderRadius: 14, color: "#ffb4c2", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)", margin: "0 10px 10px 10px", fontSize: 12 };
+const errorStyle: React.CSSProperties = { padding: 12, borderRadius: 14, color: "#e98498", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)", margin: "0 10px 10px 10px", fontSize: 12 };
 
 const centerStyle: React.CSSProperties = {
   display: "flex",

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

@@ -179,8 +179,8 @@ export function ShaclStudio({ onJumpToNode }: ShaclStudioProps) {
           { token: "delimiter", foreground: "8fa8c6" },
         ],
         colors: {
-          "editor.background": "#050b13",
-          "editor.foreground": "#d7e7f8",
+          "editor.background": "#f5f6f6",
+          "editor.foreground": "#16222e",
           "editorLineNumber.foreground": "#41536b",
         },
       });
@@ -233,7 +233,7 @@ export function ShaclStudio({ onJumpToNode }: ShaclStudioProps) {
                       style={{
                         ...shapeRowStyle,
                         cursor: "pointer",
-                        background: isSelected ? "rgba(124,231,211,0.1)" : "rgba(255,255,255,0.03)",
+                        background: isSelected ? "rgba(124,231,211,0.1)" : "rgba(28, 20, 24,0.03)",
                         border: isSelected ? "1px solid rgba(124,231,211,0.35)" : "1px solid rgba(255,107,129,0.08)",
                         textAlign: "left",
                         width: "100%",
@@ -241,9 +241,9 @@ export function ShaclStudio({ onJumpToNode }: ShaclStudioProps) {
                       onClick={() => handleSelectShape(shape.id)}
                       title="Click to load this shape into the editor"
                     >
-                      <FileCode2 size={14} color={isSelected ? "#7ce7d3" : "#9ee8d7"} />
+                      <FileCode2 size={14} color={isSelected ? "#0e8571" : "#0e7f66"} />
                       <div>
-                        <div style={{ color: "#fff0f2", fontWeight: 800 }}>{shape.id}</div>
+                        <div style={{ color: "#2d1619", fontWeight: 800 }}>{shape.id}</div>
                         <div style={mutedStyle}>
                           {shape.constraint_count} constraints
                           {shape.constraints.length ? ` · ${shape.constraints.join(", ")}` : ""}
@@ -306,7 +306,7 @@ export function ShaclStudio({ onJumpToNode }: ShaclStudioProps) {
                 return (
                   <div key={`${violation.node}-${violation.path}-${index}`} style={violationRowStyle}>
                     <div>
-                      <div style={{ color: "#fff0f2", fontWeight: 800 }}>{violation.message}</div>
+                      <div style={{ color: "#2d1619", fontWeight: 800 }}>{violation.message}</div>
                       <div style={mutedStyle}>{violation.severity} {violation.path ? `· ${violation.path}` : ""}</div>
                       {nodeId ? <div style={monoStyle}>{nodeId}</div> : null}
                     </div>
@@ -330,34 +330,34 @@ export function ShaclStudio({ onJumpToNode }: ShaclStudioProps) {
 }
 
 function validationBadgeStyle(status: string, conforms: boolean): CSSProperties {
-  const color = status === "unavailable" ? "#ff7a45" : conforms ? "#7ce7d3" : "#ff9daf";
+  const color = status === "unavailable" ? "#e86a2e" : conforms ? "#0e8571" : "#e0556d";
   return { color, border: `1px solid ${color}35`, background: `${color}14`, borderRadius: 999, padding: "4px 9px", fontSize: 11, fontWeight: 900, textTransform: "uppercase" };
 }
 
 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: 680 };
+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: 680 };
 const selectorShellStyle: CSSProperties = { minWidth: 320 };
 const labelStyle: CSSProperties = { display: "block", color: "#9c7a82", fontSize: 11, fontWeight: 800, margin: "0 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 gridStyle: CSSProperties = { display: "grid", gridTemplateColumns: "360px minmax(0, 1fr)", gap: 16, minHeight: 560 };
-const cardStyle: CSSProperties = { padding: 18, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 20, background: "rgba(12,6,9,0.78)" };
+const cardStyle: CSSProperties = { padding: 18, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 20, background: "rgba(255, 255, 255,0.78)" };
 const editorShellStyle: CSSProperties = { ...cardStyle, display: "flex", flexDirection: "column", minHeight: 560 };
 const panelHeaderStyle: CSSProperties = { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 12 };
-const sectionTitleStyle: CSSProperties = { margin: 0, color: "#fff0f2", fontSize: 16 };
-const countBadgeStyle: CSSProperties = { color: "#9ee8d7", border: "1px solid rgba(158,232,215,0.2)", borderRadius: 999, padding: "4px 9px", fontSize: 11, fontWeight: 900 };
+const sectionTitleStyle: CSSProperties = { margin: 0, color: "#2d1619", fontSize: 16 };
+const countBadgeStyle: CSSProperties = { color: "#0e7f66", border: "1px solid rgba(158,232,215,0.2)", borderRadius: 999, padding: "4px 9px", fontSize: 11, fontWeight: 900 };
 const shapeListStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 10 };
 const shapeGroupStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 6 };
 const shapeTargetStyle: CSSProperties = { color: "#9c7a82", fontSize: 11, fontWeight: 900, textTransform: "uppercase", letterSpacing: "0.08em" };
-const shapeRowStyle: CSSProperties = { display: "grid", gridTemplateColumns: "18px 1fr auto", gap: 10, padding: 10, borderRadius: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,107,129,0.08)" };
-const violationBadgeStyle: CSSProperties = { color: "#ff7a45", fontWeight: 900 };
+const shapeRowStyle: CSSProperties = { display: "grid", gridTemplateColumns: "18px 1fr auto", gap: 10, padding: 10, borderRadius: 14, background: "rgba(28, 20, 24,0.03)", border: "1px solid rgba(255,107,129,0.08)" };
+const violationBadgeStyle: CSSProperties = { color: "#e86a2e", fontWeight: 900 };
 const editorFrameStyle: CSSProperties = { flex: 1, minHeight: 0, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 16, overflow: "hidden" };
-const primaryButtonStyle: CSSProperties = { border: "1px solid rgba(124,231,211,0.35)", borderRadius: 12, padding: "9px 11px", 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", gap: 8 };
+const primaryButtonStyle: CSSProperties = { border: "1px solid rgba(124,231,211,0.35)", borderRadius: 12, padding: "9px 11px", 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", gap: 8 };
 const secondaryButtonStyle: CSSProperties = { ...primaryButtonStyle, background: "rgba(255,107,129,0.08)", borderColor: "rgba(255,107,129,0.18)" };
-const violationRowStyle: CSSProperties = { display: "grid", gridTemplateColumns: "1fr auto", gap: 12, padding: 12, borderRadius: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,107,129,0.08)" };
-const smallButtonStyle: CSSProperties = { border: "1px solid rgba(255,107,129,0.16)", borderRadius: 10, padding: "7px 9px", background: "rgba(255,107,129,0.08)", color: "#fff0f2", cursor: "pointer", fontWeight: 800 };
+const violationRowStyle: CSSProperties = { display: "grid", gridTemplateColumns: "1fr auto", gap: 12, padding: 12, borderRadius: 14, background: "rgba(28, 20, 24,0.03)", border: "1px solid rgba(255,107,129,0.08)" };
+const smallButtonStyle: CSSProperties = { border: "1px solid rgba(255,107,129,0.16)", borderRadius: 10, padding: "7px 9px", background: "rgba(255,107,129,0.08)", color: "#2d1619", cursor: "pointer", fontWeight: 800 };
 const monoStyle: CSSProperties = { marginTop: 4, color: "#9c7a82", fontSize: 11, fontFamily: "JetBrains Mono, monospace", wordBreak: "break-all" };
 const mutedStyle: CSSProperties = { margin: 0, color: "#9c7a82", fontSize: 12, lineHeight: 1.5 };
-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 errorStyle: CSSProperties = { padding: 12, borderRadius: 14, color: "#e98498", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" };

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

@@ -218,15 +218,15 @@ export function VersionsTab() {
   const getStateIcon = (state: string) => {
     switch (state) {
       case "published":
-        return <CheckCircle size={16} color="#4cc38a" />;
+        return <CheckCircle size={16} color="#1f9d5f" />;
       case "approved":
         return <CheckCircle size={16} color="#ff2d4b" />;
       case "rejected":
-        return <XCircle size={16} color="#ff6b6b" />;
+        return <XCircle size={16} color="#e71313" />;
       case "proposed":
-        return <AlertCircle size={16} color="#ff7a45" />;
+        return <AlertCircle size={16} color="#e86a2e" />;
       default:
-        return <Clock size={16} color="#c99aa3" />;
+        return <Clock size={16} color="#aa485b" />;
     }
   };
 
@@ -234,7 +234,7 @@ export function VersionsTab() {
     display: "flex",
     flexDirection: "column",
     height: "100%",
-    background: "#0b0508",
+    background: "#ffffff",
     padding: "20px",
     overflow: "auto",
   };
@@ -248,7 +248,7 @@ export function VersionsTab() {
 
   const titleStyle: React.CSSProperties = {
     margin: 0,
-    color: "#fff0f2",
+    color: "#2d1619",
     fontSize: "20px",
     fontWeight: "700",
   };
@@ -259,7 +259,7 @@ export function VersionsTab() {
 
   const sectionTitleStyle: React.CSSProperties = {
     margin: "0 0 12px",
-    color: "#fff0f2",
+    color: "#2d1619",
     fontSize: "14px",
     fontWeight: "600",
     display: "flex",
@@ -279,7 +279,7 @@ export function VersionsTab() {
     gap: "12px",
     padding: "12px 16px",
     borderRadius: "8px",
-    background: "rgba(12, 6, 9, 0.8)",
+    background: "rgba(255, 255, 255, 0.8)",
     border: "1px solid rgba(255, 107, 129, 0.12)",
     transition: "160ms ease",
   };
@@ -295,7 +295,7 @@ export function VersionsTab() {
   };
 
   const modalStyle: React.CSSProperties = {
-    background: "rgba(12, 6, 9, 0.95)",
+    background: "rgba(255, 255, 255, 0.95)",
     border: "1px solid rgba(255, 107, 129, 0.2)",
     borderRadius: "12px",
     padding: "24px",
@@ -314,7 +314,7 @@ export function VersionsTab() {
     borderRadius: "6px",
     border: "1px solid rgba(255, 107, 129, 0.2)",
     background: "rgba(255, 45, 75, 0.1)",
-    color: "#fff0f2",
+    color: "#2d1619",
     fontSize: "12px",
     fontWeight: "600",
     cursor: "pointer",
@@ -326,13 +326,13 @@ export function VersionsTab() {
     padding: "10px 12px",
     borderRadius: "6px",
     border: "1px solid rgba(255, 107, 129, 0.2)",
-    background: "rgba(6, 3, 5, 0.8)",
-    color: "#fff0f2",
+    background: "rgba(255, 255, 255, 0.8)",
+    color: "#2d1619",
     fontSize: "13px",
     marginBottom: "12px",
   };
 
-  const errorStyle: React.CSSProperties = { padding: "12px", borderRadius: "14px", color: "#ffb4c2", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)", marginBottom: "16px" };
+  const errorStyle: React.CSSProperties = { padding: "12px", borderRadius: "14px", color: "#e98498", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)", marginBottom: "16px" };
 
   return (
     <div style={containerStyle}>
@@ -356,16 +356,16 @@ export function VersionsTab() {
         </h2>
         <div style={listStyle}>
           {versions.length === 0 ? (
-            <div style={{ color: "#c99aa3", fontSize: "13px" }}>No versions found</div>
+            <div style={{ color: "#aa485b", fontSize: "13px" }}>No versions found</div>
           ) : (
             versions.map((version) => (
               <div key={version.version_id} style={itemStyle}>
                 {getStateIcon(version.state)}
                 <div style={{ flex: 1 }}>
-                  <div style={{ color: "#fff0f2", fontSize: "13px", fontWeight: "600" }}>
+                  <div style={{ color: "#2d1619", fontSize: "13px", fontWeight: "600" }}>
                     {version.version_id}
                   </div>
-                  <div style={{ color: "#c99aa3", fontSize: "11px" }}>
+                  <div style={{ color: "#aa485b", fontSize: "11px" }}>
                     {version.author} • {new Date(version.date).toLocaleDateString()}
                   </div>
                 </div>
@@ -392,16 +392,16 @@ export function VersionsTab() {
         </h2>
         <div style={listStyle}>
           {proposals.length === 0 ? (
-            <div style={{ color: "#c99aa3", fontSize: "13px" }}>No proposals found</div>
+            <div style={{ color: "#aa485b", fontSize: "13px" }}>No proposals found</div>
           ) : (
             proposals.map((proposal) => (
               <div key={proposal.proposal_id} style={itemStyle}>
                 {getStateIcon(proposal.state)}
                 <div style={{ flex: 1 }}>
-                  <div style={{ color: "#fff0f2", fontSize: "13px", fontWeight: "600" }}>
+                  <div style={{ color: "#2d1619", fontSize: "13px", fontWeight: "600" }}>
                     {proposal.summary}
                   </div>
-                  <div style={{ color: "#c99aa3", fontSize: "11px" }}>
+                  <div style={{ color: "#aa485b", fontSize: "11px" }}>
                     {proposal.author} • {new Date(proposal.created_at).toLocaleDateString()}
                   </div>
                 </div>
@@ -443,51 +443,51 @@ export function VersionsTab() {
         <div style={modalOverlayStyle} onClick={() => setShowProposalModal(false)}>
           <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
             <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "16px" }}>
-              <h3 style={{ margin: 0, color: "#fff0f2", fontSize: "16px" }}>Proposal Details</h3>
-              <button onClick={() => setShowProposalModal(false)} style={{ background: "none", border: "none", color: "#c99aa3", cursor: "pointer" }}>
+              <h3 style={{ margin: 0, color: "#2d1619", fontSize: "16px" }}>Proposal Details</h3>
+              <button onClick={() => setShowProposalModal(false)} style={{ background: "none", border: "none", color: "#aa485b", cursor: "pointer" }}>
                 <X size={18} />
               </button>
             </div>
             <div style={{ marginBottom: "12px" }}>
-              <label style={{ display: "block", color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>
+              <label style={{ display: "block", color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>
                 Summary
               </label>
-              <div style={{ color: "#fff0f2", fontSize: "13px" }}>{selectedProposal.summary}</div>
+              <div style={{ color: "#2d1619", fontSize: "13px" }}>{selectedProposal.summary}</div>
             </div>
             <div style={{ marginBottom: "12px" }}>
-              <label style={{ display: "block", color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>
+              <label style={{ display: "block", color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>
                 State
               </label>
-              <div style={{ display: "flex", alignItems: "center", gap: "6px", color: "#fff0f2", fontSize: "13px" }}>
+              <div style={{ display: "flex", alignItems: "center", gap: "6px", color: "#2d1619", fontSize: "13px" }}>
                 {getStateIcon(selectedProposal.state)}
                 {selectedProposal.state}
               </div>
             </div>
             <div style={{ marginBottom: "12px" }}>
-              <label style={{ display: "block", color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>
+              <label style={{ display: "block", color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>
                 Impact Analysis
               </label>
-              <pre style={{ background: "rgba(6, 3, 5, 0.8)", padding: "12px", borderRadius: "6px", color: "#fff0f2", fontSize: "12px", overflow: "auto" }}>
+              <pre style={{ background: "rgba(255, 255, 255, 0.8)", padding: "12px", borderRadius: "6px", color: "#2d1619", fontSize: "12px", overflow: "auto" }}>
                 {JSON.stringify(selectedProposal.impact_analysis, null, 2)}
               </pre>
             </div>
             <div style={{ marginBottom: "12px" }}>
-              <label style={{ display: "block", color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>
+              <label style={{ display: "block", color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>
                 SHACL Validation
               </label>
-              <pre style={{ background: "rgba(6, 3, 5, 0.8)", padding: "12px", borderRadius: "6px", color: "#fff0f2", fontSize: "12px", overflow: "auto" }}>
+              <pre style={{ background: "rgba(255, 255, 255, 0.8)", padding: "12px", borderRadius: "6px", color: "#2d1619", fontSize: "12px", overflow: "auto" }}>
                 {JSON.stringify(selectedProposal.shacl_validation, null, 2)}
               </pre>
             </div>
             <div>
-              <label style={{ display: "block", color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>
+              <label style={{ display: "block", color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>
                 Comments ({selectedProposal.comments.length})
               </label>
               <div style={{ maxHeight: "120px", overflow: "auto" }}>
                 {selectedProposal.comments.map((comment) => (
-                  <div key={comment.id} style={{ padding: "8px", background: "rgba(6, 3, 5, 0.6)", borderRadius: "4px", marginBottom: "6px" }}>
-                    <div style={{ color: "#fff0f2", fontSize: "12px", fontWeight: "600" }}>{comment.author}</div>
-                    <div style={{ color: "#c99aa3", fontSize: "11px" }}>{comment.text}</div>
+                  <div key={comment.id} style={{ padding: "8px", background: "rgba(255, 255, 255, 0.6)", borderRadius: "4px", marginBottom: "6px" }}>
+                    <div style={{ color: "#2d1619", fontSize: "12px", fontWeight: "600" }}>{comment.author}</div>
+                    <div style={{ color: "#aa485b", fontSize: "11px" }}>{comment.text}</div>
                   </div>
                 ))}
               </div>
@@ -500,14 +500,14 @@ export function VersionsTab() {
         <div style={modalOverlayStyle} onClick={() => setShowCompareModal(false)}>
           <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
             <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "16px" }}>
-              <h3 style={{ margin: 0, color: "#fff0f2", fontSize: "16px" }}>Compare Versions</h3>
-              <button onClick={() => setShowCompareModal(false)} style={{ background: "none", border: "none", color: "#c99aa3", cursor: "pointer" }}>
+              <h3 style={{ margin: 0, color: "#2d1619", fontSize: "16px" }}>Compare Versions</h3>
+              <button onClick={() => setShowCompareModal(false)} style={{ background: "none", border: "none", color: "#aa485b", cursor: "pointer" }}>
                 <X size={18} />
               </button>
             </div>
             <div style={{ display: "flex", gap: "12px", marginBottom: "16px" }}>
               <div style={{ flex: 1 }}>
-                <label style={{ display: "block", color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>
+                <label style={{ display: "block", color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>
                   Version 1
                 </label>
                 <input
@@ -518,7 +518,7 @@ export function VersionsTab() {
                 />
               </div>
               <div style={{ flex: 1 }}>
-                <label style={{ display: "block", color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>
+                <label style={{ display: "block", color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>
                   Version 2
                 </label>
                 <input
@@ -534,7 +534,7 @@ export function VersionsTab() {
               {isLoading ? "Comparing..." : "Compare"}
             </button>
             {compareResult && (
-              <pre style={{ marginTop: "16px", background: "rgba(6, 3, 5, 0.8)", padding: "12px", borderRadius: "6px", color: "#fff0f2", fontSize: "12px", overflow: "auto" }}>
+              <pre style={{ marginTop: "16px", background: "rgba(255, 255, 255, 0.8)", padding: "12px", borderRadius: "6px", color: "#2d1619", fontSize: "12px", overflow: "auto" }}>
                 {JSON.stringify(compareResult, null, 2)}
               </pre>
             )}

package/explorer/src/workspaces/OntologyWorkspace/ontologyEditorModel.ts

@@ -6,12 +6,12 @@ export type RegistryEntry = {
 };
 
 export const ONTOLOGY_MINIMAP_THEME = {
-  bgColor: "#0b1625",
-  maskColor: "rgba(11, 5, 8, 0.72)",
+  bgColor: "#f7f7f8",
+  maskColor: "rgba(255, 255, 255, 0.72)",
   maskStrokeColor: "#5faeff",
   maskStrokeWidth: 2,
   nodeColor: "#2d7fd3",
-  nodeStrokeColor: "#9acbff",
+  nodeStrokeColor: "#1f3348",
   nodeStrokeWidth: 1,
   style: {
     border: "1px solid #29435c",

package/explorer/src/workspaces/ReasoningWorkspace.tsx

@@ -145,11 +145,11 @@ export function ReasoningWorkspace() {
                 onChange={(e) => setApplyToGraph(e.target.checked)}
                 style={{ opacity: 0, position: "absolute", inset: 0, cursor: "pointer", margin: 0 }}
               />
-              <div style={{ position: "absolute", inset: 0, borderRadius: 999, background: applyToGraph ? "var(--ws-green)" : "rgba(255,255,255,0.12)", transition: "background 180ms ease" }} />
-              <div style={{ position: "absolute", top: 3, left: applyToGraph ? 19 : 3, width: 14, height: 14, borderRadius: 999, background: "#fff", transition: "left 180ms ease", boxShadow: "0 1px 4px rgba(0,0,0,0.4)" }} />
+              <div style={{ position: "absolute", inset: 0, borderRadius: 999, background: applyToGraph ? "var(--ws-green)" : "rgba(28, 20, 24,0.12)", transition: "background 180ms ease" }} />
+              <div style={{ position: "absolute", top: 3, left: applyToGraph ? 19 : 3, width: 14, height: 14, borderRadius: 999, background: "#16181d", transition: "left 180ms ease", boxShadow: "0 1px 4px rgba(0,0,0,0.4)" }} />
             </div>
             <div>
-              <div style={{ fontSize: 13, fontWeight: 700, color: applyToGraph ? "#6ee7b7" : "var(--ws-text-muted)" }}>Write inferred facts to graph</div>
+              <div style={{ fontSize: 13, fontWeight: 700, color: applyToGraph ? "#0f8f6e" : "var(--ws-text-muted)" }}>Write inferred facts to graph</div>
               <div style={{ fontSize: 11, color: "var(--ws-text-dim)" }}>Inferred binary facts are added as edges</div>
             </div>
           </label>
@@ -194,7 +194,7 @@ export function ReasoningWorkspace() {
 
         <div className="ws-scroll ws-padded" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
           {error && (
-            <div className="ws-animate-in" style={{ display: "flex", gap: 10, padding: "12px 14px", borderRadius: "var(--ws-radius-sm)", background: "var(--ws-red-soft)", border: "1px solid rgba(255,123,114,0.28)", color: "#fca5a5", fontSize: 13 }}>
+            <div className="ws-animate-in" style={{ display: "flex", gap: 10, padding: "12px 14px", borderRadius: "var(--ws-radius-sm)", background: "var(--ws-red-soft)", border: "1px solid rgba(255,123,114,0.28)", color: "#4e2121", fontSize: 13 }}>
               <AlertCircle size={16} style={{ flexShrink: 0, marginTop: 1 }} />
               <div>{error}</div>
             </div>

package/explorer/src/workspaces/SparqlWorkspace/SparqlWorkspace.tsx

@@ -45,8 +45,8 @@ export function SparqlWorkspace() {
           { token: "number", foreground: "f2b66d" },
         ],
         colors: {
-          "editor.background": "#050c18",
-          "editor.lineHighlightBackground": "#0a1628",
+          "editor.background": "#f6f6f7",
+          "editor.lineHighlightBackground": "#f7f7f8",
           "editorLineNumber.foreground": "#2a4060",
           "editorCursor.foreground": "#ff2d4b",
           "editor.selectionBackground": "#1e3a5a",
@@ -211,7 +211,7 @@ export function SparqlWorkspace() {
               )}
 
               {result?.error && !isLoading && (
-                <div className="ws-animate-in" style={{ margin: 16, display: "flex", gap: 10, padding: "12px 14px", borderRadius: "var(--ws-radius-sm)", background: "var(--ws-red-soft)", border: "1px solid rgba(255,123,114,0.28)", color: "#fca5a5", fontSize: 13 }}>
+                <div className="ws-animate-in" style={{ margin: 16, display: "flex", gap: 10, padding: "12px 14px", borderRadius: "var(--ws-radius-sm)", background: "var(--ws-red-soft)", border: "1px solid rgba(255,123,114,0.28)", color: "#4e2121", fontSize: 13 }}>
                   <AlertCircle size={16} style={{ flexShrink: 0, marginTop: 1 }} />
                   {result.error}
                 </div>

package/explorer/src/workspaces/VocabularyWorkspace/ConceptTree.tsx

@@ -52,7 +52,7 @@ export const ConceptTree: React.FC<ConceptTreeProps> = ({ data, onSelectConcept
                   ? 'rgba(255,45,75,0.12)'
                   : 'transparent',
                 userSelect: 'none',
-                borderBottom: '1px solid rgba(255,255,255,0.04)',
+                borderBottom: '1px solid rgba(28, 20, 24,0.04)',
                 transition: 'background 0.15s',
               }}
               onMouseEnter={(e) => {
@@ -76,13 +76,13 @@ export const ConceptTree: React.FC<ConceptTreeProps> = ({ data, onSelectConcept
 
               <span style={{ marginRight: 8, display: 'flex', alignItems: 'center' }}>
                 {isFolder
-                  ? <Folder size={14} color="#d2a8ff" />
+                  ? <Folder size={14} color="#7c3aed" />
                   : <FileText size={14} color="#484f58" />
                 }
               </span>
 
               <span style={{
-                fontSize: 13, color: '#e8ccd1',
+                fontSize: 13, color: '#523036',
                 whiteSpace: 'nowrap', overflow: 'hidden',
                 textOverflow: 'ellipsis',
               }}>