diff --git a/ai/ai-react-app/src/components/Common/FileUploader.module.css b/ai/ai-react-app/src/components/Common/FileUploader.module.css
index cff5645e8..cc84847cc 100644
--- a/ai/ai-react-app/src/components/Common/FileUploader.module.css
+++ b/ai/ai-react-app/src/components/Common/FileUploader.module.css
@@ -7,8 +7,8 @@
 
 .uploadButton {
   background-color: transparent;
-  color: var(--fb-gray-70);
-  border: 1px dashed var(--fb-gray-40);
+  color: var(--color-text-secondary);
+  border: 1px dashed var(--color-border-secondary);
   padding: 6px 12px;
   border-radius: 4px;
   cursor: pointer;
@@ -28,21 +28,21 @@
 }
 
 .uploadButton:hover:not(:disabled) {
-  background-color: var(--fb-gray-30);
-  border-color: var(--fb-gray-50);
-  color: var(--fb-gray-90);
+  background-color: var(--color-surface-tertiary);
+  border-color: var(--brand-gray-50);
+  color: var(--color-text-primary);
 }
 
 .uploadButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  color: var(--fb-gray-50);
-  border-color: var(--fb-gray-40);
+  color: var(--color-text-disabled);
+  border-color: var(--color-border-secondary);
 }
 
 .clearButton {
   background-color: transparent;
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
   border: none;
   padding: 0;
   width: 24px;
@@ -60,12 +60,12 @@
 }
 
 .clearButton:hover:not(:disabled) {
-  background-color: var(--fb-gray-40);
-  color: var(--fb-gray-90);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-primary);
 }
 
 .clearButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  color: var(--fb-gray-50);
-}
+  color: var(--color-text-disabled);
+}
\ No newline at end of file
diff --git a/ai/ai-react-app/src/components/Common/PromptInput.module.css b/ai/ai-react-app/src/components/Common/PromptInput.module.css
index 2f44d1977..781edcfca 100644
--- a/ai/ai-react-app/src/components/Common/PromptInput.module.css
+++ b/ai/ai-react-app/src/components/Common/PromptInput.module.css
@@ -14,9 +14,9 @@
 }
 
 .suggestionButton {
-  background-color: var(--fb-gray-30);
-  color: var(--fb-gray-80);
-  border: 1px solid var(--fb-gray-40);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-secondary);
   padding: 4px 10px;
   border-radius: 16px;
   cursor: pointer;
@@ -27,9 +27,9 @@
     color 0.15s ease;
 }
 .suggestionButton:hover:not(:disabled) {
-  background-color: var(--fb-gray-40);
-  border-color: var(--fb-gray-50);
-  color: var(--fb-gray-95);
+  background-color: var(--brand-gray-40);
+  border-color: var(--brand-gray-50);
+  color: var(--color-text-primary);
 }
 .suggestionButton:disabled {
   opacity: 0.5;
@@ -39,22 +39,22 @@
 .inputArea {
   display: flex;
   align-items: flex-end;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-primary);
   border-radius: 4px;
-  border: 1px solid var(--fb-gray-40);
+  border: 1px solid var(--color-border-secondary);
   padding: 4px 4px 4px 12px;
   transition: border-color 0.15s ease;
   box-sizing: border-box;
 }
 .inputArea:focus-within {
-  border-color: var(--google-blue);
+  border-color: var(--color-border-focus);
 }
 
 .promptTextarea {
   flex-grow: 1;
   background-color: transparent;
   border: none;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
   resize: none;
   outline: none;
   font-size: 0.875rem;
@@ -66,12 +66,12 @@
   margin-right: 8px;
 }
 .promptTextarea::placeholder {
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
 }
 
 .runButton {
-  background-color: var(--google-blue);
-  color: var(--fb-gray-100);
+  background-color: var(--color-surface-interactive);
+  color: var(--color-text-on-interactive);
   border: none;
   padding: 0 16px;
   border-radius: 4px;
@@ -86,11 +86,11 @@
   flex-shrink: 0;
 }
 .runButton:hover:not(:disabled) {
-  background-color: var(--google-blue-darker);
+  background-color: var(--color-surface-interactive-hover);
 }
 .runButton:disabled {
-  background-color: var(--fb-gray-30);
-  color: var(--fb-gray-50);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-disabled);
   cursor: not-allowed;
 }
 
@@ -103,9 +103,9 @@
 }
 
 .countButton {
-  background-color: var(--fb-gray-30);
-  color: var(--fb-gray-80);
-  border: 1px solid var(--fb-gray-40);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-secondary);
   padding: 4px 10px;
   border-radius: 4px;
   cursor: pointer;
@@ -118,20 +118,20 @@
   flex-shrink: 0;
 }
 .countButton:hover:not(:disabled) {
-  background-color: var(--fb-gray-40);
-  border-color: var(--fb-gray-50);
-  color: var(--fb-gray-95);
+  background-color: var(--brand-gray-40);
+  border-color: var(--brand-gray-50);
+  color: var(--color-text-primary);
 }
 .countButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  background-color: var(--fb-gray-20);
-  border-color: var(--fb-gray-30);
+  background-color: var(--color-surface-secondary);
+  border-color: var(--color-border-primary);
 }
 
 .tokenCountDisplay {
   font-size: 0.8125rem;
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   flex-grow: 1;
   text-align: right;
   min-height: 1.2em;
@@ -141,10 +141,10 @@
 }
 
 .tokenError {
-  color: var(--fb-error-text);
+  color: var(--color-error-text);
   font-style: italic;
 }
 .tokenPlaceholder {
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
   font-style: italic;
-}
+}
\ No newline at end of file
diff --git a/ai/ai-react-app/src/components/Common/ResponseDisplay.module.css b/ai/ai-react-app/src/components/Common/ResponseDisplay.module.css
index 4e455a77c..d9877936d 100644
--- a/ai/ai-react-app/src/components/Common/ResponseDisplay.module.css
+++ b/ai/ai-react-app/src/components/Common/ResponseDisplay.module.css
@@ -1,11 +1,11 @@
 .responseContainer {
   margin: 20px 24px;
   padding: 0;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
 }
 
 .responseTitle {
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   font-weight: 500;
   margin: 0 0 12px 0;
   padding-bottom: 0;
@@ -16,10 +16,10 @@
 }
 
 .responseOutput {
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-secondary);
   padding: 16px;
   border-radius: 4px;
-  border: 1px solid var(--fb-gray-30);
+  border: 1px solid var(--color-border-primary);
   min-height: 100px;
   margin-bottom: 16px;
   position: relative;
@@ -28,7 +28,7 @@
   font-family: "Roboto Mono", monospace;
   font-size: 0.875rem;
   line-height: 1.6;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
 }
 
 .responseText {
@@ -36,7 +36,7 @@
 }
 
 .placeholder {
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
   font-style: italic;
 }
 
@@ -50,7 +50,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--fb-gray-80);
+  color: var(--brand-gray-80);
   font-style: italic;
   border-radius: 4px;
   z-index: 1;
@@ -58,20 +58,20 @@
 
 .jsonDetails {
   margin-top: 16px;
-  border: 1px solid var(--fb-gray-40);
+  border: 1px solid var(--color-border-secondary);
   border-radius: 4px;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-secondary);
 }
 
 .jsonSummary {
   padding: 8px 12px;
   cursor: pointer;
-  background-color: var(--fb-gray-10);
+  background-color: transparent;
   border-radius: 4px 4px 0 0;
-  border-bottom: 1px solid var(--fb-gray-40);
+  border-bottom: 1px solid var(--color-border-secondary);
   outline: none;
   font-size: 0.8125rem;
-  color: var(--fb-gray-80);
+  color: var(--color-text-secondary);
   font-weight: 500;
   list-style: none;
 }
@@ -79,7 +79,7 @@
   display: none;
 }
 .jsonSummary:hover {
-  background-color: var(--fb-gray-30);
+  background-color: var(--color-surface-tertiary);
 }
 
 .jsonPre {
@@ -87,11 +87,11 @@
   margin: 0;
   font-family: "Roboto Mono", monospace;
   font-size: 0.8125rem;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
   white-space: pre-wrap;
   word-wrap: break-word;
-  background-color: var(--fb-gray-10);
+  background-color: transparent;
   border-radius: 0 0 4px 4px;
   max-height: 400px;
   overflow: auto;
-}
+}
\ No newline at end of file
diff --git a/ai/ai-react-app/src/components/Layout/LeftSidebar.module.css b/ai/ai-react-app/src/components/Layout/LeftSidebar.module.css
index 360af63e2..893a214ee 100644
--- a/ai/ai-react-app/src/components/Layout/LeftSidebar.module.css
+++ b/ai/ai-react-app/src/components/Layout/LeftSidebar.module.css
@@ -11,7 +11,7 @@
 .navButton {
   background-color: transparent;
   border: none;
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   padding: 8px 12px;
   text-align: left;
   width: 100%;
@@ -25,29 +25,29 @@
 }
 
 .navButton:hover {
-  background-color: var(--fb-gray-30);
-  color: var(--fb-gray-95);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-primary);
 }
 
 .navButton.active {
-  background-color: var(--fb-gray-30);
-  color: var(--fb-yellow);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-accent);
   font-weight: 500;
 }
 
 .navButton.active:hover {
-  background-color: var(--fb-gray-40);
+  background-color: var(--brand-gray-40);
 }
 
 .backendSelector {
   margin-top: 24px;
   padding: 0 12px;
-  border-top: 1px solid var(--fb-gray-30);
+  border-top: 1px solid var(--color-border-primary);
   padding-top: 16px;
 }
 
 .selectorTitle {
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   font-size: 0.75rem;
   font-weight: 500;
   margin: 0 0 8px 0;
@@ -63,11 +63,11 @@
   display: flex;
   align-items: center;
   font-size: 0.875rem;
-  color: var(--fb-gray-80);
+  color: var(--color-text-primary);
   cursor: pointer;
 }
 
 .radioGroup input[type="radio"] {
   margin-right: 8px;
-  accent-color: var(--google-blue);
-}
+  accent-color: var(--brand-google-blue);
+}
\ No newline at end of file
diff --git a/ai/ai-react-app/src/components/Layout/MainLayout.module.css b/ai/ai-react-app/src/components/Layout/MainLayout.module.css
index 6a9ce4b3e..9ba5f39f3 100644
--- a/ai/ai-react-app/src/components/Layout/MainLayout.module.css
+++ b/ai/ai-react-app/src/components/Layout/MainLayout.module.css
@@ -2,8 +2,8 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background-color: var(--fb-gray-10);
-  color: var(--fb-gray-90);
+  background-color: var(--color-surface-primary);
+  color: var(--color-text-primary);
   overflow: hidden;
 }
 
@@ -16,15 +16,15 @@
 .leftSidebar {
   width: 240px;
   flex-shrink: 0;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-primary);
   padding-top: 16px;
   overflow-y: auto;
-  border-right: 1px solid var(--fb-gray-30);
+  border-right: 1px solid var(--color-border-primary);
 }
 
 .centerContent {
   flex-grow: 1;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-primary);
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -33,7 +33,7 @@
 .rightSidebar {
   width: 300px;
   flex-shrink: 0;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-primary);
   overflow-y: auto;
-  border-left: 1px solid var(--fb-gray-30);
-}
+  border-left: 1px solid var(--color-border-primary);
+}
\ No newline at end of file
diff --git a/ai/ai-react-app/src/components/Layout/RightSidebar.module.css b/ai/ai-react-app/src/components/Layout/RightSidebar.module.css
index 044e1b2ee..cd98fb8bf 100644
--- a/ai/ai-react-app/src/components/Layout/RightSidebar.module.css
+++ b/ai/ai-react-app/src/components/Layout/RightSidebar.module.css
@@ -1,28 +1,28 @@
 .rightSidebarContainer {
   padding: 24px;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: 16px;
   font-size: 0.875rem;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-primary);
   overflow-y: auto;
 }
 
 .sectionTitle {
-  color: var(--fb-gray-80);
+  color: var(--color-text-primary);
   font-weight: 500;
   margin: 0 0 16px 0;
   padding-bottom: 12px;
-  border-bottom: 1px solid var(--fb-gray-30);
+  border-bottom: 1px solid var(--color-border-primary);
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 .subSectionTitle {
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   font-weight: 500;
   margin: 16px 0 12px 0;
   font-size: 0.8125rem;
@@ -37,7 +37,7 @@
 .controlGroup label {
   display: block;
   margin-bottom: 8px;
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   font-size: 0.8125rem;
   font-weight: 500;
 }
@@ -48,9 +48,9 @@
 .controlGroup textarea {
   width: 100%;
   padding: 8px 12px;
-  background-color: var(--fb-gray-10);
-  border: 1px solid var(--fb-gray-40);
-  color: var(--fb-gray-90);
+  background-color: var(--color-surface-primary);
+  border: 1px solid var(--color-border-secondary);
+  color: var(--color-text-primary);
   border-radius: 4px;
   box-sizing: border-box;
   font-size: 0.875rem;
@@ -61,18 +61,18 @@
 .controlGroup select:hover,
 .controlGroup input:not([type="range"]):hover,
 .controlGroup textarea:hover {
-  border-color: var(--fb-gray-50);
+  border-color: var(--brand-gray-50);
 }
 .controlGroup select:focus,
 .controlGroup input:not([type="range"]):focus,
 .controlGroup textarea:focus {
-  border-color: var(--google-blue);
-  background-color: var(--fb-gray-10);
+  border-color: var(--color-border-focus);
+  background-color: var(--color-surface-primary);
   outline: none;
 }
 .controlGroup input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 30px var(--fb-gray-10) inset !important;
-  -webkit-text-fill-color: var(--fb-gray-90) !important;
+  -webkit-box-shadow: 0 0 0 30px var(--color-surface-primary) inset !important;
+  -webkit-text-fill-color: var(--color-text-primary) !important;
 }
 
 .controlGroup input[type="range"] {
@@ -80,7 +80,7 @@
   height: 4px;
   cursor: pointer;
   appearance: none;
-  background: var(--fb-gray-40);
+  background: var(--color-border-secondary);
   outline: none;
   border-radius: 2px;
   padding: 0;
@@ -90,23 +90,23 @@
   appearance: none;
   width: 14px;
   height: 14px;
-  background: var(--fb-gray-80);
+  background: var(--color-text-primary);
   border-radius: 50%;
   cursor: pointer;
 }
 .controlGroup input[type="range"]::-moz-range-thumb {
   width: 14px;
   height: 14px;
-  background: var(--fb-gray-80);
+  background: var(--color-text-primary);
   border-radius: 50%;
   cursor: pointer;
   border: none;
 }
 .controlGroup input[type="range"]:active::-webkit-slider-thumb {
-  background: var(--fb-gray-90);
+  background: var(--brand-gray-90);
 }
 .controlGroup input[type="range"]:active::-moz-range-thumb {
-  background: var(--fb-gray-90);
+  background: var(--brand-gray-90);
 }
 
 .controlGroup textarea {
@@ -117,17 +117,17 @@
 .temperatureDisplay {
   text-align: right;
   font-size: 0.8125rem;
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
   margin-top: 6px;
 }
 
 .tokenDisplay {
-  background-color: var(--fb-gray-10);
-  border: 1px solid var(--fb-gray-40);
+  background-color: var(--color-surface-primary);
+  border: 1px solid var(--color-border-secondary);
   padding: 8px 12px;
   border-radius: 4px;
   font-size: 0.8125rem;
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   text-align: right;
   font-family: "Roboto Mono", monospace;
 }
@@ -140,7 +140,7 @@
   min-height: 30px;
 }
 .toggleGroup label:first-child {
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   font-size: 0.875rem;
   padding-right: 10px;
 }
@@ -166,7 +166,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--fb-gray-40);
+  background-color: var(--color-border-secondary);
   transition: 0.2s;
   border-radius: 7px;
 }
@@ -178,33 +178,33 @@
   width: 20px;
   left: -2px;
   bottom: -3px;
-  background-color: var(--fb-gray-80);
+  background-color: var(--color-text-primary);
   transition: 0.2s;
   border-radius: 50%;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 input:checked + .slider {
-  background-color: var(--google-blue);
+  background-color: var(--brand-google-blue);
 }
 
 input:checked + .slider:before {
   transform: translateX(20px);
-  background-color: var(--fb-gray-95);
+  background-color: var(--brand-gray-100);
 }
 
 .toggleGroup input:disabled + .slider {
-  background-color: var(--fb-gray-30) !important;
+  background-color: var(--color-border-primary) !important;
   cursor: not-allowed;
 }
 .toggleGroup input:disabled + .slider:before {
-  background-color: var(--fb-gray-50) !important;
+  background-color: var(--color-text-disabled) !important;
   cursor: not-allowed;
   box-shadow: none;
 }
 .toggleGroup.disabledText label:first-child,
 .toggleGroup label input:disabled ~ span {
-  color: var(--fb-gray-50);
+  color: var(--color-text-disabled);
   cursor: not-allowed;
 }
 .toggleGroup input:disabled ~ span {
@@ -221,13 +221,13 @@ input:checked + .slider:before {
   cursor: pointer;
   outline: none;
   font-weight: 500;
-  color: var(--fb-gray-70);
+  color: var(--color-text-secondary);
   font-size: 0.875rem;
   list-style: none;
   position: relative;
 }
 .advancedSettings summary:hover {
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
 }
 .advancedSettings summary::-webkit-details-marker {
   display: none;
@@ -238,7 +238,7 @@ input:checked + .slider:before {
   margin-right: 8px;
   font-size: 0.7em;
   transition: transform 0.2s ease-out;
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
 }
 .advancedSettings details[open] summary::before {
   transform: rotate(90deg);
@@ -246,10 +246,10 @@ input:checked + .slider:before {
 
 .advancedSettings .advancedContent {
   padding: 16px 0 0 0;
-  border-top: 1px solid var(--fb-gray-30);
+  border-top: 1px solid var(--color-border-primary);
   margin-top: 8px;
 }
 .advancedSettings .controlGroup label {
   font-weight: 400;
-  color: var(--fb-gray-70);
-}
+  color: var(--color-text-secondary);
+}
\ No newline at end of file
diff --git a/ai/ai-react-app/src/components/Layout/TopBar.module.css b/ai/ai-react-app/src/components/Layout/TopBar.module.css
index ad4804e69..5be38c666 100644
--- a/ai/ai-react-app/src/components/Layout/TopBar.module.css
+++ b/ai/ai-react-app/src/components/Layout/TopBar.module.css
@@ -4,9 +4,9 @@
   align-items: center;
   height: 50px;
   padding: 0 24px;
-  background-color: var(--fb-gray-10);
-  border-bottom: 1px solid var(--fb-gray-30);
-  color: var(--fb-gray-90);
+  background-color: var(--color-surface-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+  color: var(--color-text-primary);
   flex-shrink: 0;
 }
 
@@ -25,5 +25,5 @@
 .title {
   font-size: 1rem;
   font-weight: 500;
-  color: var(--fb-gray-80);
-}
+  color: var(--color-text-secondary);
+}
\ No newline at end of file
diff --git a/ai/ai-react-app/src/components/Specific/ChatMessage.module.css b/ai/ai-react-app/src/components/Specific/ChatMessage.module.css
index 6adb2ff8c..041f38b68 100644
--- a/ai/ai-react-app/src/components/Specific/ChatMessage.module.css
+++ b/ai/ai-react-app/src/components/Specific/ChatMessage.module.css
@@ -27,16 +27,16 @@
 }
 
 .messageContainer.user .messageBubble {
-  background-color: var(--fb-gray-40);
-  color: var(--fb-gray-95);
-  border-color: var(--fb-gray-50);
+  background-color: var(--brand-google-blue);
+  color: var(--color-text-on-interactive);
+  border-color: var(--brand-google-blue-darker);
   border-bottom-right-radius: 4px;
 }
 
 .messageContainer.model .messageBubble {
-  background-color: var(--fb-gray-10);
-  color: var(--fb-gray-90);
-  border-color: var(--fb-gray-30);
+  background-color: var(--color-surface-secondary);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-primary);
   border-bottom-left-radius: 4px;
 }
 
@@ -47,3 +47,70 @@
   white-space: pre-wrap;
   word-wrap: break-word;
 }
+
+.sourcesSection {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-secondary);
+  font-size: 0.8rem;
+}
+
+.searchEntryPoint {
+  margin-bottom: 8px;
+}
+.searchEntryPoint p {
+  margin: 0 0 4px 0;
+}
+.searchEntryPoint a {
+  color: var(--brand-google-blue);
+  text-decoration: none;
+}
+.searchEntryPoint a:hover {
+  text-decoration: underline;
+}
+
+.sourcesTitle {
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  margin: 0 0 4px 0;
+  font-size: 0.8rem;
+}
+
+.sourcesList {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.sourceItem {
+  margin-bottom: 4px;
+}
+
+.sourceItem a {
+  color: var(--brand-google-blue);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.sourceItem a:hover {
+  text-decoration: underline;
+}
+
+.highlightedSegment {
+  background-color: rgba(
+    var(--google-blue-rgb),
+    0.15
+  );
+  padding: 1px 0;
+  border-radius: 2px;
+  cursor: default;
+}
+
+.sourceSuperscript {
+  font-size: 0.7em;
+  vertical-align: super;
+  color: var(--brand-google-blue);
+  margin-left: 2px;
+  font-weight: bold;
+  user-select: none;
+}
diff --git a/ai/ai-react-app/src/index.css b/ai/ai-react-app/src/index.css
index 051b3a985..c05c0becc 100644
--- a/ai/ai-react-app/src/index.css
+++ b/ai/ai-react-app/src/index.css
@@ -1,33 +1,56 @@
 :root {
-  --fb-gray-0: #000000;
-  --fb-gray-10: #121212;
-  --fb-gray-20: #303030;
-  --fb-gray-30: #474747;
-  --fb-gray-40: #5e5e5e;
-  --fb-gray-50: #757575;
-  --fb-gray-60: #8f8f8f;
-  --fb-gray-70: #ababab;
-  --fb-gray-80: #c7c7c7;
-  --fb-gray-90: #e3e3e3;
-  --fb-gray-95: #f2f2f2;
-  --fb-gray-99: #fdfcfb;
-  --fb-gray-100: #ffffff;
-
-  --fb-yellow: #ffc400;
-  --fb-orange: #ff9100;
-  --fb-red: #dd2c00;
-
-  --google-blue: #4285f4;
-  --google-blue-darker: #1b66c9;
-  --google-blue-focus: #8ab4f8;
-
-  --fb-error-bg: rgba(221, 44, 0, 0.1);
-  --fb-error-text: #f79489;
-  --fb-error-border: rgba(221, 44, 0, 0.4);
-
-  --fb-warning-bg: rgba(255, 145, 0, 0.1);
-  --fb-warning-text: #ffcc80;
-  --fb-warning-border: rgba(255, 145, 0, 0.4);
+  --brand-gray-0: #000000;
+  --brand-gray-10: #1f1f1f;
+  --brand-gray-20: #303030;
+  --brand-gray-30: #474747;
+  --brand-gray-40: #5e5e5e;
+  --brand-gray-50: #757575;
+  --brand-gray-60: #8f8f8f;
+  --brand-gray-70: #ababab;
+  --brand-gray-80: #c7c7c7;
+  --brand-gray-90: #e3e3e3;
+  --brand-gray-95: #f2f2f2;
+  --brand-gray-99: #fdfcfb;
+  --brand-gray-100: #ffffff;
+
+  --brand-firebase-yellow: #ffc400;
+  --brand-firebase-orange: #ff9100;
+  --brand-firebase-red: #dd2c00;
+  --brand-android-green: #c6ff00;
+  --brand-gemini-pink: #fdadee;
+  --brand-google-blue: #4285f4;
+  --brand-google-blue-darker: #1b66c9;
+  --brand-google-blue-focus: #8ab4f8;
+  --brand-google-cloud-green: #34a853;
+
+  /* Surfaces */
+  --color-surface-primary: var(--brand-gray-10); /* Main page background */
+  --color-surface-secondary: var(--brand-gray-20); /* Cards, message bubbles */
+  --color-surface-tertiary: var(--brand-gray-30); /* Hover states, subtle backgrounds */
+  --color-surface-interactive: var(--brand-google-blue); /* Primary buttons */
+  --color-surface-interactive-hover: var(--brand-google-blue-darker);
+
+  /* Text */
+  --color-text-primary: var(--brand-gray-90); /* Main text */
+  --color-text-secondary: var(--brand-gray-70); /* Sub-headings, labels */
+  --color-text-placeholder: var(--brand-gray-60);
+  --color-text-disabled: var(--brand-gray-50);
+  --color-text-on-interactive: var(--brand-gray-100); /* Text on blue buttons */
+  --color-text-accent: var(--brand-firebase-yellow); /* Active nav item */
+
+  /* Borders */
+  --color-border-primary: var(--brand-gray-30);
+  --color-border-secondary: var(--brand-gray-40);
+  --color-border-focus: var(--brand-google-blue);
+
+  /* States */
+  --color-error-bg: rgba(221, 44, 0, 0.2);
+  --color-error-text: #f28b82;
+  --color-error-border: rgba(221, 44, 0, 0.5);
+
+  --color-warning-bg: rgba(255, 145, 0, 0.2);
+  --color-warning-text: #ffd180;
+  --color-warning-border: rgba(255, 145, 0, 0.5);
 }
 
 *,
@@ -38,14 +61,15 @@
 
 html,
 body {
+  color-scheme: light dark;
   margin: 0;
   padding: 0;
   height: 100%;
 }
 
 body {
-  background-color: var(--fb-gray-10);
-  color: var(--fb-gray-90);
+  background-color: var(--color-surface-primary);
+  color: var(--color-text-primary);
   font-family:
     "Roboto",
     -apple-system,
@@ -72,7 +96,7 @@ body {
 }
 
 *:focus-visible {
-  outline: 2px solid var(--google-blue-focus);
+  outline: 2px solid var(--brand-google-blue-focus);
   outline-offset: 1px;
 }
 
@@ -85,3 +109,32 @@ textarea {
   font-weight: inherit;
   color: inherit;
 }
+
+@media (prefers-color-scheme: light) {
+  :root {
+    /* Surfaces */
+    --color-surface-primary: var(--brand-gray-100);
+    --color-surface-secondary: var(--brand-gray-95);
+    --color-surface-tertiary: var(--brand-gray-90);
+    --color-surface-interactive-hover: #185abc;
+
+    /* Text */
+    --color-text-primary: var(--brand-gray-40);
+    --color-text-secondary: var(--brand-gray-50);
+    --color-text-placeholder: var(--brand-gray-60);
+    --color-text-disabled: var(--brand-gray-70);
+
+    /* Borders */
+    --color-border-primary: var(--brand-gray-80);
+    --color-border-secondary: var(--brand-gray-90);
+
+    /* States */
+    --color-error-bg: #fce8e6;
+    --color-error-text: #c5221f;
+    --color-error-border: #f9ab9f;
+
+    --color-warning-bg: #fff0e2;
+    --color-warning-text: #b06000;
+    --color-warning-border: #fdd6b4;
+  }
+}
\ No newline at end of file
diff --git a/ai/ai-react-app/src/views/ChatView.module.css b/ai/ai-react-app/src/views/ChatView.module.css
index b14f84165..3cd62863f 100644
--- a/ai/ai-react-app/src/views/ChatView.module.css
+++ b/ai/ai-react-app/src/views/ChatView.module.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-primary);
 }
 
 .chatHistory {
@@ -16,7 +16,7 @@
 
 .emptyChat {
   text-align: center;
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
   margin-top: 40px;
   font-style: italic;
 }
@@ -29,8 +29,8 @@
   padding: 8px 14px;
   border-radius: 16px;
   border-bottom-left-radius: 4px;
-  background-color: var(--fb-gray-10);
-  border: 1px solid var(--fb-gray-30);
+  background-color: var(--color-surface-secondary);
+  border: 1px solid var(--color-border-primary);
   align-items: center;
   min-height: 1em;
 }
@@ -38,7 +38,7 @@
   display: inline-block;
   width: 6px;
   height: 6px;
-  background-color: var(--fb-gray-60);
+  background-color: var(--color-text-placeholder);
   border-radius: 50%;
   margin: 0 2px;
   animation: bounce 1.4s infinite ease-in-out both;
@@ -66,9 +66,9 @@
 }
 
 .errorMessage {
-  background-color: var(--fb-error-bg);
-  color: var(--fb-error-text);
-  border: 1px solid var(--fb-error-border);
+  background-color: var(--color-error-bg);
+  color: var(--color-error-text);
+  border: 1px solid var(--color-error-border);
   padding: 10px 16px;
   border-radius: 4px;
   margin: 10px 0;
@@ -79,9 +79,9 @@
 .jsonDetails {
   margin-top: 4px;
   margin-bottom: 8px;
-  border: 1px solid var(--fb-gray-40);
+  border: 1px solid var(--color-border-secondary);
   border-radius: 4px;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-secondary);
   max-width: 80%;
   margin-left: 0;
   margin-right: auto;
@@ -89,11 +89,11 @@
 .jsonSummary {
   padding: 6px 12px;
   cursor: pointer;
-  background-color: var(--fb-gray-10);
-  border-bottom: 1px solid var(--fb-gray-40);
+  background-color: transparent;
+  border-bottom: 1px solid var(--color-border-secondary);
   outline: none;
   font-size: 0.8125rem;
-  color: var(--fb-gray-80);
+  color: var(--color-text-secondary);
   font-weight: 500;
   list-style: none;
 }
@@ -101,17 +101,17 @@
   display: none;
 }
 .jsonSummary:hover {
-  background-color: var(--fb-gray-30);
+  background-color: var(--color-surface-tertiary);
 }
 .jsonDetails pre {
   padding: 12px 16px;
   margin: 0;
   font-family: "Roboto Mono", monospace;
   font-size: 0.8125rem;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
   white-space: pre-wrap;
   word-wrap: break-word;
-  background-color: var(--fb-gray-10);
+  background-color: transparent;
   border-radius: 0 0 4px 4px;
   max-height: 300px;
   overflow: auto;
@@ -119,8 +119,8 @@
 
 .inputAreaContainer {
   flex-shrink: 0;
-  background-color: var(--fb-gray-10);
-  border-top: 1px solid var(--fb-gray-30);
+  background-color: var(--color-surface-primary);
+  border-top: 1px solid var(--color-border-primary);
   padding: 16px 24px;
   display: flex;
   flex-direction: column;
@@ -129,4 +129,4 @@
 
 .fileUploaderContainer {
   max-width: 250px;
-}
+}
\ No newline at end of file
diff --git a/ai/ai-react-app/src/views/ImagenView.module.css b/ai/ai-react-app/src/views/ImagenView.module.css
index d6e878620..a1f2c7243 100644
--- a/ai/ai-react-app/src/views/ImagenView.module.css
+++ b/ai/ai-react-app/src/views/ImagenView.module.css
@@ -2,15 +2,15 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-primary);
 }
 
 .errorMessage {
-  color: var(--fb-error-text);
+  color: var(--color-error-text);
   margin: 10px 24px;
   padding: 10px 16px;
-  background-color: var(--fb-error-bg);
-  border: 1px solid var(--fb-error-border);
+  background-color: var(--color-error-bg);
+  border: 1px solid var(--color-error-border);
   border-radius: 4px;
   white-space: pre-wrap;
   font-size: 0.875rem;
@@ -35,8 +35,8 @@
     border-right: none;
     border-bottom: none;
     box-shadow: none;
-    border-top: 1px solid var(--fb-gray-30);
-    background-color: var(--fb-gray-10);
+    border-top: 1px solid var(--color-border-primary);
+    background-color: var(--color-surface-primary);
   }
 }
 
@@ -49,7 +49,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: var(--fb-gray-90);
+  color: var(--color-text-primary);
   width: 100%;
   flex-grow: 1;
 }
@@ -57,14 +57,14 @@
 .loading,
 .placeholder {
   font-style: italic;
-  color: var(--fb-gray-60);
+  color: var(--color-text-placeholder);
   margin: 20px 0;
 }
 
 .filteredReason {
-  color: var(--fb-warning-text);
-  background-color: var(--fb-warning-bg);
-  border: 1px solid var(--fb-warning-border);
+  color: var(--color-warning-text);
+  background-color: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-border);
   padding: 8px 16px;
   border-radius: 4px;
   margin-bottom: 16px;
@@ -86,9 +86,9 @@
 }
 
 .imageWrapper {
-  border: 1px solid var(--fb-gray-30);
+  border: 1px solid var(--color-border-primary);
   padding: 4px;
-  background-color: var(--fb-gray-10);
+  background-color: var(--color-surface-primary);
   border-radius: 4px;
   box-sizing: border-box;
   display: flex;
@@ -102,4 +102,4 @@
   height: auto;
   display: block;
   border-radius: 2px;
-}
+}
\ No newline at end of file