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

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

@@ -37,16 +37,16 @@ interface OntologyEntry {
 type RightPanel = "none" | "search" | "skos";
 
 const STATUS_COLORS: Record<string, string> = {
-  published: "#4cc38a",
-  draft: "#ff7a45",
+  published: "#1f9d5f",
+  draft: "#e86a2e",
   external: "#ff2d4b",
 };
 
 const FORMAT_COLORS: Record<string, string> = {
-  turtle: "#9ee8d7",
-  xml: "#ff9daf",
-  "json-ld": "#ff7a45",
-  nt: "#d2a8ff",
+  turtle: "#0e7f66",
+  xml: "#e0556d",
+  "json-ld": "#e86a2e",
+  nt: "#7c3aed",
   unknown: "#9c7a82",
 };
 
@@ -93,7 +93,7 @@ function FormatBadge({ format }: { format: string }) {
 function Stat({ value, label }: { value: number; label: string }) {
   return (
     <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 1 }}>
-      <span style={{ color: "#fff0f2", fontSize: 14, fontWeight: 800 }}>
+      <span style={{ color: "#2d1619", fontSize: 14, fontWeight: 800 }}>
         {value.toLocaleString()}
       </span>
       <span style={{ color: "#9c7a82", fontSize: 10 }}>{label}</span>
@@ -149,7 +149,7 @@ function RegistryRow({
         ...rowStyle,
         background: selected
           ? "rgba(255,45,75,0.1)"
-          : "rgba(255,255,255,0.02)",
+          : "rgba(28, 20, 24,0.02)",
         borderColor: selected
           ? "rgba(255,107,129,0.26)"
           : "rgba(255,107,129,0.1)",
@@ -196,7 +196,7 @@ function RegistryRow({
           {busyToggle ? (
             <Loader2 size={13} style={{ animation: "spin 0.8s linear infinite" }} />
           ) : entry.enabled ? (
-            <ToggleRight size={15} color="#4cc38a" />
+            <ToggleRight size={15} color="#1f9d5f" />
           ) : (
             <ToggleLeft size={15} color="#9c7a82" />
           )}
@@ -221,7 +221,7 @@ function RegistryRow({
           title="Remove from registry"
           onClick={handleRemove}
           disabled={busyRemove}
-          style={{ ...actionBtnStyle, color: "#ff9daf" }}
+          style={{ ...actionBtnStyle, color: "#e0556d" }}
         >
           {busyRemove ? (
             <Loader2 size={13} style={{ animation: "spin 0.8s linear infinite" }} />
@@ -436,7 +436,7 @@ export function OntologyManager() {
                 actionMsg.type === "ok"
                   ? "rgba(76,195,138,0.06)"
                   : "rgba(255,157,175,0.06)",
-              color: actionMsg.type === "ok" ? "#4cc38a" : "#ff9daf",
+              color: actionMsg.type === "ok" ? "#1f9d5f" : "#e0556d",
             }}
           >
             {actionMsg.type === "ok" ? (
@@ -455,18 +455,18 @@ export function OntologyManager() {
             {loading ? (
               <div style={centerStyle}>
                 <Loader2 size={22} color="#ff2d4b" style={{ animation: "spin 1s linear infinite" }} />
-                <span style={{ color: "#c99aa3", fontSize: 13, marginTop: 10 }}>Loading registry…</span>
+                <span style={{ color: "#aa485b", fontSize: 13, marginTop: 10 }}>Loading registry…</span>
               </div>
             ) : filteredEntries.length === 0 ? (
               <div style={emptyStateStyle}>
                 <BookMarked size={36} color="rgba(255,45,75,0.18)" />
-                <div style={{ color: "#c99aa3", fontSize: 14, fontWeight: 600, marginTop: 14 }}>
+                <div style={{ color: "#aa485b", fontSize: 14, fontWeight: 600, marginTop: 14 }}>
                   {searchQ ? "No ontologies match your search" : "No ontologies loaded yet"}
                 </div>
                 <div style={{ color: "#9c7a82", fontSize: 12, marginTop: 6, textAlign: "center", maxWidth: 300, lineHeight: 1.6 }}>
                   {searchQ
                     ? "Try a different search term or clear the filter."
-                    : <>Import from a URL, upload a file, or create a new ontology to get started. Click <strong style={{ color: "#ff6b81" }}>Load Ontology</strong> above.</>}
+                    : <>Import from a URL, upload a file, or create a new ontology to get started. Click <strong style={{ color: "#d41736" }}>Load Ontology</strong> above.</>}
                 </div>
                 {!searchQ && (
                   <button onClick={() => setShowLoader(true)} style={{ ...primaryToolBtnStyle, marginTop: 18 }}>
@@ -527,13 +527,13 @@ export function OntologyManager() {
               </div>
               <div style={detailBodyStyle}>
                 <DetailSection label="URI">
-                  <span style={{ fontFamily: "monospace", fontSize: 11, wordBreak: "break-all", color: "#f0cdd3" }}>
+                  <span style={{ fontFamily: "monospace", fontSize: 11, wordBreak: "break-all", color: "#602b34" }}>
                     {selectedEntry.uri}
                   </span>
                 </DetailSection>
                 {selectedEntry.description && (
                   <DetailSection label="Description">
-                    <span style={{ color: "#f0cdd3", fontSize: 13, lineHeight: 1.6 }}>
+                    <span style={{ color: "#602b34", fontSize: 13, lineHeight: 1.6 }}>
                       {selectedEntry.description}
                     </span>
                   </DetailSection>
@@ -552,20 +552,20 @@ export function OntologyManager() {
                 )}
                 {selectedEntry.version && (
                   <DetailSection label="Version">
-                    <span style={{ color: "#f0cdd3", fontSize: 12 }}>{selectedEntry.version}</span>
+                    <span style={{ color: "#602b34", fontSize: 12 }}>{selectedEntry.version}</span>
                   </DetailSection>
                 )}
                 {selectedEntry.loaded_at && (
                   <DetailSection label="Loaded at">
-                    <span style={{ color: "#f0cdd3", fontSize: 12 }}>
+                    <span style={{ color: "#602b34", fontSize: 12 }}>
                       {new Date(selectedEntry.loaded_at).toLocaleString()}
                     </span>
                   </DetailSection>
                 )}
                 <div style={statRowStyle}>
-                  <StatBlock value={selectedEntry.class_count} label="Classes" color="#d2a8ff" />
-                  <StatBlock value={selectedEntry.concept_count} label="Concepts" color="#9ee8d7" />
-                  <StatBlock value={selectedEntry.property_count} label="Properties" color="#ff7a45" />
+                  <StatBlock value={selectedEntry.class_count} label="Classes" color="#7c3aed" />
+                  <StatBlock value={selectedEntry.concept_count} label="Concepts" color="#0e7f66" />
+                  <StatBlock value={selectedEntry.property_count} label="Properties" color="#e86a2e" />
                 </div>
                 {selectedEntry.tags.length > 0 && (
                   <DetailSection label="Tags">
@@ -605,7 +605,7 @@ export function OntologyManager() {
 
 function DetailSection({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div style={{ borderTop: "1px solid rgba(255,255,255,0.05)", paddingTop: 10, paddingBottom: 2 }}>
+    <div style={{ borderTop: "1px solid rgba(28, 20, 24,0.05)", paddingTop: 10, paddingBottom: 2 }}>
       <div style={{ color: "#9c7a82", fontSize: 10, fontWeight: 700, textTransform: "uppercase" as const, letterSpacing: "0.07em", marginBottom: 4 }}>
         {label}
       </div>
@@ -616,7 +616,7 @@ function DetailSection({ label, children }: { label: string; children: React.Rea
 
 function StatBlock({ value, label, color }: { value: number; label: string; color: string }) {
   return (
-    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 2, padding: "10px 6px", background: "rgba(255,255,255,0.02)", borderRadius: 8, border: "1px solid rgba(255,255,255,0.05)" }}>
+    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 2, padding: "10px 6px", background: "rgba(28, 20, 24,0.02)", borderRadius: 8, border: "1px solid rgba(28, 20, 24,0.05)" }}>
       <span style={{ color, fontSize: 18, fontWeight: 800 }}>{value.toLocaleString()}</span>
       <span style={{ color: "#9c7a82", fontSize: 10 }}>{label}</span>
     </div>
@@ -630,7 +630,7 @@ const shellStyle: React.CSSProperties = {
   flexDirection: "column",
   width: "100%",
   height: "100%",
-  background: "#0a1525",
+  background: "#f7f7f8",
   overflow: "hidden",
 };
 
@@ -640,7 +640,7 @@ const toolbarStyle: React.CSSProperties = {
   gap: 10,
   padding: "12px 18px",
   borderBottom: "1px solid rgba(255,107,129,0.1)",
-  background: "rgba(5,12,22,0.72)",
+  background: "rgba(255, 255, 255,0.72)",
   flexWrap: "wrap",
   flexShrink: 0,
 };
@@ -660,7 +660,7 @@ const searchInputStyle: React.CSSProperties = {
   background: "transparent",
   border: "none",
   outline: "none",
-  color: "#fff0f2",
+  color: "#2d1619",
   fontSize: 12,
   width: "100%",
 };
@@ -677,13 +677,13 @@ const filterPillBase: React.CSSProperties = {
 
 const filterPillIdle: React.CSSProperties = {
   background: "transparent",
-  color: "#c99aa3",
+  color: "#aa485b",
   borderColor: "rgba(255,107,129,0.1)",
 };
 
 const filterPillActive: React.CSSProperties = {
   background: "rgba(255,45,75,0.14)",
-  color: "#fff0f2",
+  color: "#2d1619",
   borderColor: "rgba(255,107,129,0.26)",
 };
 
@@ -695,7 +695,7 @@ const toolBtnStyle: React.CSSProperties = {
   borderRadius: 8,
   border: "1px solid rgba(255,107,129,0.16)",
   background: "rgba(255,45,75,0.06)",
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 12,
   fontWeight: 600,
   cursor: "pointer",
@@ -703,7 +703,7 @@ const toolBtnStyle: React.CSSProperties = {
 
 const toolBtnActive: React.CSSProperties = {
   background: "rgba(255,45,75,0.16)",
-  color: "#fff0f2",
+  color: "#2d1619",
   borderColor: "rgba(255,107,129,0.28)",
 };
 
@@ -715,7 +715,7 @@ const primaryToolBtnStyle: React.CSSProperties = {
   borderRadius: 9,
   border: "1px solid rgba(255,45,75,0.3)",
   background: "linear-gradient(135deg, rgba(255,45,75,0.2), rgba(255,45,75,0.08))",
-  color: "#ff6b81",
+  color: "#d41736",
   fontSize: 12,
   fontWeight: 700,
   cursor: "pointer",
@@ -782,7 +782,7 @@ const rowMainStyle: React.CSSProperties = {
 };
 
 const rowNameStyle: React.CSSProperties = {
-  color: "#fff0f2",
+  color: "#2d1619",
   fontSize: 14,
   fontWeight: 700,
 };
@@ -825,7 +825,7 @@ const actionBtnStyle: React.CSSProperties = {
   borderRadius: 6,
   display: "grid",
   placeItems: "center",
-  color: "#c99aa3",
+  color: "#aa485b",
 };
 
 const rightPanelStyle: React.CSSProperties = {
@@ -834,7 +834,7 @@ const rightPanelStyle: React.CSSProperties = {
   display: "flex",
   flexDirection: "column",
   borderLeft: "1px solid rgba(255,107,129,0.1)",
-  background: "rgba(5,12,22,0.6)",
+  background: "rgba(255, 255, 255,0.6)",
   overflow: "hidden",
 };
 
@@ -848,7 +848,7 @@ const rightPanelHeaderStyle: React.CSSProperties = {
 };
 
 const rightPanelTitleStyle: React.CSSProperties = {
-  color: "#fff0f2",
+  color: "#2d1619",
   fontSize: 13,
   fontWeight: 700,
   overflow: "hidden",
@@ -859,7 +859,7 @@ const rightPanelTitleStyle: React.CSSProperties = {
 const closePanelBtnStyle: React.CSSProperties = {
   background: "transparent",
   border: "none",
-  color: "#c99aa3",
+  color: "#aa485b",
   cursor: "pointer",
   fontSize: 18,
   lineHeight: 1,
@@ -874,7 +874,7 @@ const browseBtnStyle: React.CSSProperties = {
   borderRadius: 7,
   border: "1px solid rgba(255,107,129,0.18)",
   background: "rgba(255,45,75,0.06)",
-  color: "#ff6b81",
+  color: "#d41736",
   fontSize: 11,
   fontWeight: 600,
   cursor: "pointer",
@@ -899,9 +899,9 @@ const statRowStyle: React.CSSProperties = {
 const tagChipStyle: React.CSSProperties = {
   padding: "3px 8px",
   borderRadius: 999,
-  background: "rgba(255,255,255,0.04)",
-  border: "1px solid rgba(255,255,255,0.08)",
-  color: "#c99aa3",
+  background: "rgba(28, 20, 24,0.04)",
+  border: "1px solid rgba(28, 20, 24,0.08)",
+  color: "#aa485b",
   fontSize: 11,
 };
 

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

@@ -36,11 +36,11 @@ interface EntityDetail {
 }
 
 const ENTITY_TYPE_COLORS: Record<string, string> = {
-  class: "#d2a8ff",
-  property: "#ff7a45",
-  individual: "#9ee8d7",
+  class: "#7c3aed",
+  property: "#e86a2e",
+  individual: "#0e7f66",
   concept: "#ff2d4b",
-  scheme: "#ff6b81",
+  scheme: "#d41736",
   unknown: "#9c7a82",
 };
 
@@ -110,12 +110,12 @@ function ResultRow({
         border: "1px solid",
         cursor: "pointer",
         transition: "160ms ease",
-        background: selected ? "rgba(255,45,75,0.1)" : "rgba(255,255,255,0.02)",
+        background: selected ? "rgba(255,45,75,0.1)" : "rgba(28, 20, 24,0.02)",
         borderColor: selected ? "rgba(255,107,129,0.24)" : "rgba(255,107,129,0.08)",
       }}
     >
       <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
-        <span style={{ color: "#fff0f2", fontSize: 13, fontWeight: 700, flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+        <span style={{ color: "#2d1619", fontSize: 13, fontWeight: 700, flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
           {result.label || result.uri}
         </span>
         <TypeBadge entityType={result.entity_type} />
@@ -124,7 +124,7 @@ function ResultRow({
         {result.uri}
       </div>
       {result.definition && (
-        <div style={{ color: "#c99aa3", fontSize: 12, lineHeight: 1.4, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" as const }}>
+        <div style={{ color: "#aa485b", fontSize: 12, lineHeight: 1.4, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" as const }}>
           {result.definition}
         </div>
       )}
@@ -211,8 +211,8 @@ function DetailPanel({
     <div style={detailPanelStyle}>
       <div style={detailHeaderStyle}>
         <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
-          <BookOpen size={14} color="#d2a8ff" />
-          <span style={{ color: "#fff0f2", fontSize: 13, fontWeight: 700, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+          <BookOpen size={14} color="#7c3aed" />
+          <span style={{ color: "#2d1619", fontSize: 13, fontWeight: 700, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
             Entity Detail
           </span>
         </div>
@@ -229,8 +229,8 @@ function DetailPanel({
 
       {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>
       )}
 
@@ -238,7 +238,7 @@ function DetailPanel({
         <div style={detailBodyStyle}>
           <div style={{ marginBottom: 14 }}>
             <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginBottom: 4 }}>
-              <h3 style={{ margin: 0, color: "#fff0f2", fontSize: 17, fontWeight: 800, letterSpacing: "-0.03em" }}>
+              <h3 style={{ margin: 0, color: "#2d1619", fontSize: 17, fontWeight: 800, letterSpacing: "-0.03em" }}>
                 {detail.label || detail.uri.split("/").pop()}
               </h3>
               <TypeBadge entityType={detail.entity_type} />
@@ -250,7 +250,7 @@ function DetailPanel({
 
           {detail.definition && (
             <DetailSection 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>
             </DetailSection>
@@ -258,7 +258,7 @@ function DetailPanel({
 
           {detail.instance_count > 0 && (
             <DetailSection label="Instances">
-              <span style={{ color: "#9ee8d7", fontSize: 14, fontWeight: 800 }}>
+              <span style={{ color: "#0e7f66", fontSize: 14, fontWeight: 800 }}>
                 {detail.instance_count.toLocaleString()}
               </span>
             </DetailSection>
@@ -271,7 +271,7 @@ function DetailPanel({
 
           {detail.source_ontology && (
             <DetailSection label="Source Ontology">
-              <span style={{ color: "#f0cdd3", fontSize: 12, fontFamily: "monospace" }}>
+              <span style={{ color: "#602b34", fontSize: 12, fontFamily: "monospace" }}>
                 {detail.source_ontology}
               </span>
             </DetailSection>
@@ -294,7 +294,7 @@ function DetailPanel({
 
 function DetailSection({ 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>
@@ -453,7 +453,7 @@ const searchInputStyle: React.CSSProperties = {
   background: "transparent",
   border: "none",
   outline: "none",
-  color: "#fff0f2",
+  color: "#2d1619",
   fontSize: 13,
 };
 
@@ -485,13 +485,13 @@ const typeFilterBtnBase: React.CSSProperties = {
 
 const typeFilterBtnIdle: React.CSSProperties = {
   background: "transparent",
-  color: "#c99aa3",
+  color: "#aa485b",
   borderColor: "rgba(255,107,129,0.1)",
 };
 
 const typeFilterBtnActive: React.CSSProperties = {
   background: "rgba(255,45,75,0.14)",
-  color: "#fff0f2",
+  color: "#2d1619",
   borderColor: "rgba(255,107,129,0.26)",
 };
 
@@ -523,7 +523,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",
 };
 
@@ -539,7 +539,7 @@ const detailHeaderStyle: React.CSSProperties = {
 const closeDetailBtnStyle: React.CSSProperties = {
   background: "transparent",
   border: "none",
-  color: "#c99aa3",
+  color: "#aa485b",
   cursor: "pointer",
   padding: 2,
   display: "grid",
@@ -570,7 +570,7 @@ const collapseHdrStyle: React.CSSProperties = {
   gap: 5,
   background: "transparent",
   border: "none",
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 12,
   fontWeight: 600,
   cursor: "pointer",

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

@@ -168,11 +168,11 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
   const getChangeIcon = (type: string) => {
     switch (type) {
       case "added":
-        return <Plus size={14} color="#4cc38a" />;
+        return <Plus size={14} color="#1f9d5f" />;
       case "removed":
-        return <Minus size={14} color="#ff6b6b" />;
+        return <Minus size={14} color="#e71313" />;
       case "modified":
-        return <Edit size={14} color="#ff7a45" />;
+        return <Edit size={14} color="#e86a2e" />;
       default:
         return null;
     }
@@ -181,15 +181,15 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
   const getStateIcon = (state: string) => {
     switch (state) {
       case "published":
-        return <CheckCircle size={20} color="#4cc38a" />;
+        return <CheckCircle size={20} color="#1f9d5f" />;
       case "approved":
         return <CheckCircle size={20} color="#ff2d4b" />;
       case "rejected":
-        return <XCircle size={20} color="#ff6b6b" />;
+        return <XCircle size={20} color="#e71313" />;
       case "proposed":
-        return <AlertCircle size={20} color="#ff7a45" />;
+        return <AlertCircle size={20} color="#e86a2e" />;
       default:
-        return <Clock size={20} color="#c99aa3" />;
+        return <Clock size={20} color="#aa485b" />;
     }
   };
 
@@ -197,7 +197,7 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
     display: "flex",
     flexDirection: "column",
     height: "100%",
-    background: "#0b0508",
+    background: "#ffffff",
     padding: "20px",
     overflow: "auto",
   };
@@ -213,7 +213,7 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
 
   const titleStyle: React.CSSProperties = {
     margin: 0,
-    color: "#fff0f2",
+    color: "#2d1619",
     fontSize: "20px",
     fontWeight: "700",
   };
@@ -227,7 +227,7 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
 
   const diffPanelStyle: React.CSSProperties = {
     flex: 1,
-    background: "rgba(12, 6, 9, 0.8)",
+    background: "rgba(255, 255, 255, 0.8)",
     borderRadius: "8px",
     border: "1px solid rgba(255, 107, 129, 0.12)",
     padding: "16px",
@@ -236,7 +236,7 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
 
   const commentsPanelStyle: React.CSSProperties = {
     width: "320px",
-    background: "rgba(12, 6, 9, 0.8)",
+    background: "rgba(255, 255, 255, 0.8)",
     borderRadius: "8px",
     border: "1px solid rgba(255, 107, 129, 0.12)",
     padding: "16px",
@@ -250,7 +250,7 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
     gap: "10px",
     padding: "10px 12px",
     borderRadius: "6px",
-    background: "rgba(6, 3, 5, 0.6)",
+    background: "rgba(255, 255, 255, 0.6)",
     marginBottom: "8px",
     cursor: "pointer",
     transition: "160ms ease",
@@ -264,7 +264,7 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
     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",
@@ -276,8 +276,8 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
     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",
     resize: "vertical",
     minHeight: "80px",
@@ -286,7 +286,7 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
   if (!proposal) {
     return (
       <div style={containerStyle}>
-        <div style={{ color: "#c99aa3", fontSize: "14px" }}>Loading proposal...</div>
+        <div style={{ color: "#aa485b", fontSize: "14px" }}>Loading proposal...</div>
       </div>
     );
   }
@@ -298,7 +298,7 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
           {getStateIcon(proposal.state)}
           <div>
             <h1 style={titleStyle}>{proposal.summary}</h1>
-            <div style={{ color: "#c99aa3", fontSize: "12px", marginTop: "4px" }}>
+            <div style={{ color: "#aa485b", fontSize: "12px", marginTop: "4px" }}>
               {proposal.author} • {new Date(proposal.created_at).toLocaleString()}
             </div>
           </div>
@@ -327,12 +327,12 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
 
       <div style={contentStyle}>
         <div style={diffPanelStyle}>
-          <h2 style={{ margin: "0 0 16px", color: "#fff0f2", fontSize: "14px", fontWeight: "600" }}>
+          <h2 style={{ margin: "0 0 16px", color: "#2d1619", fontSize: "14px", fontWeight: "600" }}>
             <GitMerge size={16} style={{ marginRight: "8px", verticalAlign: "middle" }} />
             Diff Viewer
           </h2>
           {diff.length === 0 ? (
-            <div style={{ color: "#c99aa3", fontSize: "13px" }}>No changes detected</div>
+            <div style={{ color: "#aa485b", fontSize: "13px" }}>No changes detected</div>
           ) : (
             diff.map((change, index) => (
               <div
@@ -345,10 +345,10 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
               >
                 {getChangeIcon(change.type)}
                 <div style={{ flex: 1 }}>
-                  <div style={{ color: "#fff0f2", fontSize: "13px", fontWeight: "600" }}>
+                  <div style={{ color: "#2d1619", fontSize: "13px", fontWeight: "600" }}>
                     {change.element}
                   </div>
-                  <div style={{ color: "#c99aa3", fontSize: "11px" }}>
+                  <div style={{ color: "#aa485b", fontSize: "11px" }}>
                     {change.type}
                   </div>
                 </div>
@@ -357,50 +357,50 @@ export function ProposalReview({ proposalId }: { proposalId: string }) {
           )}
 
           <div style={{ marginTop: "20px", paddingTop: "16px", borderTop: "1px solid rgba(255, 120, 140, 0.12)" }}>
-            <h3 style={{ margin: "0 0 12px", color: "#fff0f2", fontSize: "13px", fontWeight: "600" }}>
+            <h3 style={{ margin: "0 0 12px", color: "#2d1619", fontSize: "13px", fontWeight: "600" }}>
               Impact Analysis
             </h3>
-            <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(proposal.impact_analysis, null, 2)}
             </pre>
           </div>
 
           <div style={{ marginTop: "16px" }}>
-            <h3 style={{ margin: "0 0 12px", color: "#fff0f2", fontSize: "13px", fontWeight: "600" }}>
+            <h3 style={{ margin: "0 0 12px", color: "#2d1619", fontSize: "13px", fontWeight: "600" }}>
               SHACL Validation
             </h3>
-            <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(proposal.shacl_validation, null, 2)}
             </pre>
           </div>
         </div>
 
         <div style={commentsPanelStyle}>
-          <h2 style={{ margin: "0 0 16px", color: "#fff0f2", fontSize: "14px", fontWeight: "600" }}>
+          <h2 style={{ margin: "0 0 16px", color: "#2d1619", fontSize: "14px", fontWeight: "600" }}>
             <MessageSquare size={16} style={{ marginRight: "8px", verticalAlign: "middle" }} />
             Comments ({proposal.comments.length})
           </h2>
           <div style={{ flex: 1, overflow: "auto", marginBottom: "12px" }}>
             {proposal.comments.length === 0 ? (
-              <div style={{ color: "#c99aa3", fontSize: "13px" }}>No comments yet</div>
+              <div style={{ color: "#aa485b", fontSize: "13px" }}>No comments yet</div>
             ) : (
               proposal.comments.map((comment) => (
                 <div
                   key={comment.id}
                   style={{
                     padding: "10px",
-                    background: "rgba(6, 3, 5, 0.6)",
+                    background: "rgba(255, 255, 255, 0.6)",
                     borderRadius: "6px",
                     marginBottom: "8px",
                   }}
                 >
                   <div style={{ display: "flex", alignItems: "center", gap: "6px", marginBottom: "4px" }}>
-                    <User size={12} color="#c99aa3" />
-                    <span style={{ color: "#fff0f2", fontSize: "12px", fontWeight: "600" }}>
+                    <User size={12} color="#aa485b" />
+                    <span style={{ color: "#2d1619", fontSize: "12px", fontWeight: "600" }}>
                       {comment.author}
                     </span>
                   </div>
-                  <div style={{ color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>{comment.text}</div>
+                  <div style={{ color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>{comment.text}</div>
                   <div style={{ color: "#8f6d75", fontSize: "10px" }}>
                     {new Date(comment.created_at).toLocaleString()}
                   </div>