diff --git a/src/App.css b/src/App.css
index b15cda2..8a5f70a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,7 +6,7 @@
 
 body {
   margin: 0;
-  font-family: 'PolySans', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
   font-weight: var(--font-weight-regular);
   letter-spacing: var(--letter-spacing-normal);
   font-kerning: normal;
diff --git a/src/components/AIChatPanel.css b/src/components/AIChatPanel.css
index 569cadf..1f5d9b5 100644
--- a/src/components/AIChatPanel.css
+++ b/src/components/AIChatPanel.css
@@ -4,12 +4,13 @@
   right: 20px;
   bottom: 20px;
   width: 350px;
-  background-color: var(--color-background);
+  background-color: var(--color-white);
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-standard);
+  border-radius: var(--radius-card);
   display: flex;
   flex-direction: column;
   z-index: 100;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .chat-content {
@@ -18,43 +19,44 @@
   flex: 1;
   overflow: hidden;
   z-index: 20;
-  border-radius: var(--radius-standard);
-  background-color: var(--color-background);
+  border-radius: var(--radius-card);
+  background-color: var(--color-white);
 }
 
 .chat-header {
-  padding: 16px 20px;
+  padding: var(--space-7) var(--space-9);
   border-bottom: 1px solid var(--color-border-subtle);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-radius: var(--radius-standard) var(--radius-standard) 0 0;
+  border-radius: var(--radius-card) var(--radius-card) 0 0;
 }
 
 .chat-header h3 {
   margin: 0;
-  font-size: var(--font-size-heading-small);
+  font-size: var(--font-size-heading-3);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
+  font-feature-settings: "ss01", "ss02";
 }
 
 .header-left {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-4);
 }
 
 .header-right {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-4);
 }
 
 .new-chat-btn {
-  padding: 8px;
-  background-color: var(--color-surface-slate);
+  padding: var(--space-3);
+  background-color: var(--color-soft-gray);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-circle);
   cursor: pointer;
@@ -66,18 +68,20 @@
 }
 
 .new-chat-btn:hover {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-jelly-mint);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
+  border-color: var(--color-meta-blue);
 }
 
 .new-chat-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .history-btn {
-  padding: 8px;
-  background-color: var(--color-surface-slate);
+  padding: var(--space-3);
+  background-color: var(--color-soft-gray);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-circle);
   cursor: pointer;
@@ -89,19 +93,21 @@
 }
 
 .history-btn:hover {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-jelly-mint);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
+  border-color: var(--color-meta-blue);
 }
 
 .history-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .history-btn.active {
-  background-color: var(--color-jelly-mint);
-  border-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  border-color: var(--color-meta-blue);
+  color: var(--color-white);
 }
 
 .model-selector {
@@ -109,30 +115,31 @@
 }
 
 .model-select {
-  padding: 8px 12px;
-  background-color: var(--color-surface-slate);
-  border: 1px solid var(--color-border-subtle);
+  padding: var(--space-3) var(--space-5);
+  background-color: var(--color-soft-gray);
+  border: 1px solid var(--color-border-medium);
   border-radius: var(--radius-small);
   color: var(--color-text-primary);
-  font-size: var(--font-size-mono-timestamp);
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-size: var(--font-size-caption);
+  font-family: var(--font-family-primary);
+  letter-spacing: var(--letter-spacing-tighter);
   cursor: pointer;
   outline: none;
-  transition: border-color 0.15s ease;
+  transition: border-color 200ms ease, box-shadow 200ms ease;
 }
 
 .model-select:hover {
-  border-color: var(--color-jelly-mint);
+  border-color: var(--color-meta-blue);
 }
 
 .model-select:focus {
-  border-color: var(--color-jelly-mint);
+  border-color: hsl(214, 89%, 52%);
+  box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
 }
 
 .model-select:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
@@ -143,14 +150,15 @@
   width: 250px;
   height: 200px;
   transform: translateX(0);
-  background-color: var(--color-background);
+  background-color: var(--color-white);
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-standard);
+  border-radius: var(--radius-card);
   transition: transform 0.3s ease;
   z-index: 10;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .conversation-sidebar.visible {
@@ -159,15 +167,14 @@
 
 .conversation-sidebar h4 {
   margin: 0;
-  padding: 12px 16px;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  padding: var(--space-5) var(--space-7);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption-bold);
   font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
   color: var(--color-text-primary);
   border-bottom: 1px solid var(--color-border-subtle);
   flex-shrink: 0;
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .conversation-list {
@@ -176,7 +183,7 @@
 }
 
 .conversation-item {
-  padding: 10px 16px;
+  padding: var(--space-4) var(--space-7);
   cursor: pointer;
   transition: background-color 0.15s ease;
   border-bottom: 1px solid var(--color-border-subtle);
@@ -184,40 +191,41 @@
 }
 
 .conversation-item:hover {
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
 }
 
 .conversation-item:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .conversation-item.active {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
 }
 
 .conversation-title {
-  font-size: var(--font-size-body-relaxed);
+  font-size: var(--font-size-body);
   font-weight: var(--font-weight-medium);
-  margin-bottom: 4px;
+  margin-bottom: var(--space-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
 }
 
 .conversation-time {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
   color: var(--color-text-muted);
-  letter-spacing: var(--letter-spacing-mono-sm);
-  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .conversation-item.active .conversation-time {
-  color: var(--color-absolute-black);
+  color: var(--color-white);
+  opacity: 0.8;
 }
 
 .chat-main {
@@ -225,11 +233,11 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border-radius: var(--radius-standard) var(--radius-standard) 0 0;
+  border-radius: var(--radius-card) var(--radius-card) 0 0;
 }
 
 .bottom-model-selector {
-  padding: 0 16px 8px;
+  padding: 0 var(--space-7) var(--space-3);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -238,10 +246,10 @@
 .chat-messages {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
+  padding: var(--space-9);
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--space-7);
 }
 
 .message {
@@ -259,28 +267,29 @@
 
 .message-content {
   max-width: 80%;
-  padding: 12px 16px;
-  border-radius: var(--radius-standard);
-  font-size: var(--font-size-body-relaxed);
-  line-height: var(--line-height-body-relaxed);
+  padding: var(--space-5) var(--space-7);
+  border-radius: var(--radius-card);
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-body);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .message.user .message-content {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
-  border: 1px solid var(--color-jelly-mint);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
+  border: 1px solid var(--color-meta-blue);
 }
 
 .message.ai .message-content {
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-subtle);
 }
 
 .message.ai.loading .message-content {
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   color: var(--color-text-primary);
   opacity: 0.7;
   border: 1px solid var(--color-border-subtle);
@@ -289,7 +298,7 @@
 .loading-indicator {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-3);
 }
 
 .loading-indicator span {
@@ -310,8 +319,8 @@
 }
 
 .upload-progress {
-  padding: 12px 20px;
-  background-color: var(--color-surface-slate);
+  padding: var(--space-5) var(--space-9);
+  background-color: var(--color-soft-gray);
   border-bottom: 1px solid var(--color-border-subtle);
   color: var(--color-text-primary);
 }
@@ -320,43 +329,42 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 6px 0;
-  font-size: var(--font-size-body-relaxed);
+  padding: var(--space-3) 0;
+  font-size: var(--font-size-body);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
 }
 
 .upload-status {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
   color: var(--color-text-muted);
-  letter-spacing: var(--letter-spacing-mono-sm);
-  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .context-display {
-  padding: 12px 20px;
-  background-color: var(--color-surface-slate);
+  padding: var(--space-5) var(--space-9);
+  background-color: var(--color-soft-gray);
   border-bottom: 1px solid var(--color-border-subtle);
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-4);
 }
 
 .context-icon {
   font-size: 16px;
-  color: var(--color-jelly-mint);
+  color: var(--color-meta-blue);
 }
 
 .context-text {
   flex: 1;
-  font-size: var(--font-size-body-relaxed);
+  font-size: var(--font-size-body);
   color: var(--color-text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
 }
 
 .context-clear {
@@ -365,27 +373,29 @@
   color: var(--color-text-primary);
   font-size: 18px;
   cursor: pointer;
-  padding: 4px;
+  padding: var(--space-2);
   line-height: 1;
   transition: all 0.15s ease;
   border-radius: var(--radius-circle);
 }
 
 .context-clear:hover {
-  background-color: var(--color-primary-hover);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
 }
 
 .context-clear:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .chat-input {
-  padding: 16px;
+  padding: var(--space-7);
   border-top: 1px solid var(--color-border-subtle);
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--space-5);
 }
 
 .input-container {
@@ -395,27 +405,30 @@
 
 .chat-input textarea {
   width: 100%;
-  padding: 12px;
-  background-color: var(--color-surface-slate);
-  border: 1px solid var(--color-border-subtle);
+  padding: var(--space-5);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-border-medium);
   border-radius: var(--radius-small);
   color: var(--color-text-primary);
-  font-size: var(--font-size-body-relaxed);
+  font-size: var(--font-size-body);
   resize: none;
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
   height: 120px;
   padding-bottom: 50px;
   letter-spacing: var(--letter-spacing-normal);
-  transition: border-color 0.15s ease;
+  transition: border-color 200ms ease, box-shadow 200ms ease;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .chat-input textarea:focus {
   outline: none;
-  border-color: var(--color-jelly-mint);
+  border-color: hsl(214, 89%, 52%);
+  box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
 }
 
 .chat-input textarea:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
@@ -426,7 +439,7 @@
 .absolute-btn {
   position: absolute;
   bottom: 15px;
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-pill);
   cursor: pointer;
@@ -439,19 +452,21 @@
 }
 
 .absolute-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .absolute-btn.upload-btn {
   left: 12px;
-  padding: 8px;
+  padding: var(--space-3);
   border-radius: var(--radius-circle);
 }
 
 .absolute-btn.upload-btn:hover {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-jelly-mint);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
+  border-color: var(--color-meta-blue);
 }
 
 .absolute-btn.model-selector-btn {
@@ -463,45 +478,45 @@
 }
 
 .absolute-btn.model-selector-btn .model-select {
-  padding: 8px 12px;
-  background-color: var(--color-surface-slate);
-  border: 1px solid var(--color-border-subtle);
+  padding: var(--space-3) var(--space-5);
+  background-color: var(--color-soft-gray);
+  border: 1px solid var(--color-border-medium);
   border-radius: var(--radius-small);
   color: var(--color-text-primary);
-  font-size: var(--font-size-mono-timestamp);
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-size: var(--font-size-caption);
+  font-family: var(--font-family-primary);
+  letter-spacing: var(--letter-spacing-tighter);
   cursor: pointer;
   outline: none;
-  transition: border-color 0.15s ease;
+  transition: border-color 200ms ease, box-shadow 200ms ease;
 }
 
 .absolute-btn.send-btn {
   right: 12px;
-  padding: 8px 16px;
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
-  border-color: var(--color-jelly-mint);
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  padding: var(--space-3) var(--space-7);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
+  border-color: var(--color-meta-blue);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
+  transition: background 200ms ease, transform 150ms ease;
 }
 
 .absolute-btn.send-btn:hover:not(:disabled) {
-  background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
+  background-color: var(--color-meta-blue-hover);
+  transform: scale(1.05);
 }
 
 .absolute-btn.send-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .absolute-btn.send-btn:disabled {
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   border-color: var(--color-border-subtle);
   color: var(--color-text-muted);
   opacity: 0.6;
diff --git a/src/components/CanvasArea.css b/src/components/CanvasArea.css
index cebe337..164f2ae 100644
--- a/src/components/CanvasArea.css
+++ b/src/components/CanvasArea.css
@@ -18,17 +18,18 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
-  background-color: var(--color-background);
+  padding: var(--space-4);
+  background-color: var(--color-white);
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-standard);
+  border-radius: var(--radius-card);
   z-index: 100;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .toolbar-section {
   display: flex;
   align-items: center;
-  margin-right: 10px;
+  margin-right: var(--space-4);
 }
 
 .toolbar-section:last-child {
@@ -38,41 +39,43 @@
 .control-group {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-4);
 }
 
 .toolbar-btn {
-  padding: 8px 12px;
+  padding: var(--space-3) var(--space-5);
   border: 1px solid var(--color-border-subtle);
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   color: var(--color-text-primary);
-  border-radius: var(--radius-feature);
+  border-radius: var(--radius-pill);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: background 200ms ease, transform 150ms ease;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
 }
 
 .toolbar-btn:hover {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-jelly-mint);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
+  border-color: var(--color-meta-blue);
+  transform: scale(1.05);
 }
 
 .toolbar-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .toolbar-btn.active {
-  background-color: var(--color-jelly-mint);
-  border-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  border-color: var(--color-meta-blue);
+  color: var(--color-white);
 }
 
 .toolbar-btn:disabled {
@@ -81,16 +84,15 @@
 }
 
 .zoom-display {
-  padding: 0 8px;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  padding: 0 var(--space-3);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   opacity: 0.8;
   min-width: 50px;
   text-align: center;
-  letter-spacing: var(--letter-spacing-mono-sm);
-  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .zoom-value {
@@ -102,19 +104,19 @@
   width: 1px;
   height: 16px;
   background-color: var(--color-border-subtle);
-  margin: 0 8px;
+  margin: 0 var(--space-3);
 }
 
 .layout-toggle {
   display: flex;
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-feature);
+  border-radius: var(--radius-pill);
   overflow: hidden;
 }
 
 .toggle-btn {
-  padding: 8px 16px;
+  padding: var(--space-3) var(--space-7);
   border: none;
   background-color: transparent;
   color: var(--color-text-primary);
@@ -124,38 +126,38 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
 }
 
 .toggle-btn:hover {
-  background-color: var(--color-primary-hover);
-  color: var(--color-text-primary);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
   opacity: 1;
 }
 
 .toggle-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .toggle-btn.active {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
 }
 
 .viewport-selector {
   display: flex;
-  gap: 8px;
+  gap: var(--space-3);
 }
 
 .viewport-btn {
-  padding: 8px 12px;
+  padding: var(--space-3) var(--space-5);
   border: 1px solid var(--color-border-subtle);
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   color: var(--color-text-primary);
   opacity: 0.8;
   border-radius: var(--radius-circle);
@@ -164,28 +166,28 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono-sm);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption);
+  letter-spacing: var(--letter-spacing-tighter);
 }
 
 .viewport-btn:hover {
-  background-color: var(--color-primary-hover);
-  color: var(--color-text-primary);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
   opacity: 1;
-  border-color: var(--color-jelly-mint);
+  border-color: var(--color-meta-blue);
 }
 
 .viewport-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .viewport-btn.active {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
-  border-color: var(--color-jelly-mint);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
+  border-color: var(--color-meta-blue);
 }
 
 .viewport-btn:disabled {
@@ -210,8 +212,8 @@
   width: 100%;
   height: 100%;
   background-image:
-    linear-gradient(rgba(19, 19, 19, 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(19, 19, 19, 0.05) 1px, transparent 1px);
+    linear-gradient(rgba(28, 43, 51, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(28, 43, 51, 0.05) 1px, transparent 1px);
   background-size: 25px 25px;
   background-position: center center;
 }
@@ -222,21 +224,22 @@
 
 .design-frame {
   position: absolute;
-  background-color: var(--color-background);
+  background-color: var(--color-white);
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-standard);
+  border-radius: var(--radius-card);
   overflow: hidden;
   transition: all 0.15s ease;
   z-index: 10;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .design-frame:hover {
-  border-color: var(--color-jelly-mint);
+  border-color: var(--color-meta-blue);
 }
 
 .design-frame.selected {
-  border-color: var(--color-jelly-mint);
-  box-shadow: 0 0 0 2px rgba(60, 255, 208, 0.2);
+  border-color: var(--color-meta-blue);
+  box-shadow: 0 0 0 2px rgba(0, 100, 224, 0.2);
 }
 
 .design-frame.dragging {
@@ -249,74 +252,76 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
-  background-color: var(--color-surface-slate);
+  padding: var(--space-5) var(--space-7);
+  background-color: var(--color-soft-gray);
   border-bottom: 1px solid var(--color-border-subtle);
 }
 
 .frame-title {
-  font-size: var(--font-size-body-relaxed);
+  font-size: var(--font-size-body);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
 }
 
 .frame-title h4 {
   margin: 0;
-  font-size: var(--font-size-body-relaxed);
+  font-size: var(--font-size-body);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
+  font-feature-settings: "ss01", "ss02";
 }
 
 .frame-date {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
   color: var(--color-text-muted);
-  margin-top: 2px;
-  letter-spacing: var(--letter-spacing-mono-sm);
-  text-transform: uppercase;
+  margin-top: var(--space-2);
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .frame-actions {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-4);
 }
 
 .viewport-toggle {
   display: flex;
-  gap: 8px;
+  gap: var(--space-3);
 }
 
 .chat-actions {
   display: flex;
-  gap: 8px;
+  gap: var(--space-3);
 }
 
 .action-btn {
-  padding: 6px 10px;
+  padding: var(--space-2) var(--space-4);
   border: 1px solid var(--color-border-subtle);
-  background-color: var(--color-surface-slate);
-  border-radius: var(--radius-feature);
+  background-color: var(--color-soft-gray);
+  border-radius: var(--radius-pill);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: background 200ms ease, transform 150ms ease;
   color: var(--color-text-primary);
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption);
+  letter-spacing: var(--letter-spacing-tighter);
 }
 
 .action-btn:hover {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-jelly-mint);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
+  border-color: var(--color-meta-blue);
+  transform: scale(1.05);
 }
 
 .action-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
@@ -333,50 +338,47 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
 }
 
 .placeholder-icon {
   font-size: 48px;
-  margin-bottom: 12px;
+  margin-bottom: var(--space-5);
   color: var(--color-text-muted);
 }
 
 .placeholder-name {
-  font-size: var(--font-size-body-relaxed);
+  font-size: var(--font-size-body);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
-  margin: 0 0 4px 0;
+  margin: 0 0 var(--space-2) 0;
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
 }
 
 .placeholder-meta {
   display: flex;
-  gap: 12px;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  gap: var(--space-5);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
   color: var(--color-text-muted);
-  letter-spacing: var(--letter-spacing-mono-sm);
-  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .placeholder-hint {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
   color: var(--color-text-muted);
-  margin-top: 8px;
-  letter-spacing: var(--letter-spacing-mono-sm);
-  text-transform: uppercase;
+  margin-top: var(--space-3);
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .viewport-info {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
   color: var(--color-text-muted);
-  margin-top: 4px;
-  letter-spacing: var(--letter-spacing-mono-sm);
-  text-transform: uppercase;
+  margin-top: var(--space-2);
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .selection-indicator {
@@ -385,8 +387,8 @@
   left: -2px;
   right: -2px;
   bottom: -2px;
-  border: 2px solid var(--color-jelly-mint);
-  border-radius: var(--radius-standard);
+  border: 2px solid var(--color-meta-blue);
+  border-radius: var(--radius-card);
   pointer-events: none;
   z-index: 10;
 }
@@ -397,42 +399,45 @@
   left: 50%;
   transform: translateX(-50%);
   display: flex;
-  gap: 8px;
+  gap: var(--space-3);
   z-index: 100;
 }
 
 .floating-action-btn {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 12px 28px;
-  background-color: var(--color-surface-slate);
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-9);
+  background-color: var(--color-soft-gray);
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-feature);
+  border-radius: var(--radius-pill);
   cursor: pointer;
-  transition: all 0.18s ease;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  transition: background 200ms ease, transform 150ms ease;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
   color: var(--color-text-primary);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .floating-action-btn:hover {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-jelly-mint);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
+  border-color: var(--color-meta-blue);
+  transform: scale(1.05);
 }
 
 .floating-action-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .floating-action-btn.success {
-  background-color: var(--color-jelly-mint);
-  border-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  border-color: var(--color-meta-blue);
+  color: var(--color-white);
 }
 
 .btn-icon {
@@ -442,11 +447,10 @@
 }
 
 .btn-text {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
   white-space: nowrap;
 }
 
@@ -457,60 +461,61 @@
 .copy-prompt-main-btn {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-3);
 }
 
 .copy-prompt-main-btn .dropdown-arrow {
   width: 12px;
   height: 12px;
-  margin-left: 4px;
+  margin-left: var(--space-2);
 }
 
 .copy-dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
-  margin-top: 8px;
-  background-color: var(--color-background);
+  margin-top: var(--space-3);
+  background-color: var(--color-white);
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-standard);
+  border-radius: var(--radius-card);
   min-width: 120px;
   z-index: 101;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .copy-dropdown-item {
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 10px 16px;
+  padding: var(--space-4) var(--space-7);
   background: none;
   border: none;
   cursor: pointer;
   transition: background-color 0.15s;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
   color: var(--color-text-primary);
   text-align: left;
 }
 
 .copy-dropdown-item:hover {
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
 }
 
 .copy-dropdown-item:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .copy-dropdown-item:first-child {
-  border-radius: var(--radius-standard) var(--radius-standard) 0 0;
+  border-radius: var(--radius-card) var(--radius-card) 0 0;
 }
 
 .copy-dropdown-item:last-child {
-  border-radius: 0 0 var(--radius-standard) var(--radius-standard);
+  border-radius: 0 0 var(--radius-card) var(--radius-card);
 }
 
 .connection-lines {
@@ -530,7 +535,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-background);
+  background-color: var(--color-white);
 }
 
 .loading-spinner {
@@ -540,18 +545,18 @@
 .spinner {
   width: 40px;
   height: 40px;
-  border: 4px solid var(--color-surface-slate);
-  border-top: 4px solid var(--color-jelly-mint);
+  border: 4px solid var(--color-soft-gray);
+  border-top: 4px solid var(--color-meta-blue);
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin: 0 auto 12px;
+  margin: 0 auto var(--space-5);
 }
 
 .spinner-small {
   width: 20px;
   height: 20px;
-  border: 3px solid var(--color-surface-slate);
-  border-top: 3px solid var(--color-jelly-mint);
+  border: 3px solid var(--color-soft-gray);
+  border-top: 3px solid var(--color-meta-blue);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -570,56 +575,58 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-background);
+  background-color: var(--color-white);
 }
 
 .error-message {
   text-align: center;
-  padding: 24px;
-  background-color: var(--color-background);
-  border-radius: var(--radius-standard);
+  padding: var(--space-9);
+  background-color: var(--color-white);
+  border-radius: var(--radius-card);
   border: 1px solid var(--color-border-subtle);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .error-message h3 {
-  margin: 0 0 12px 0;
-  font-size: var(--font-size-heading-small);
+  margin: 0 0 var(--space-5) 0;
+  font-size: var(--font-size-heading-3);
   font-weight: var(--font-weight-bold);
-  color: var(--color-verge-ultraviolet);
+  color: var(--color-error-red);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
+  font-feature-settings: "ss01", "ss02";
 }
 
 .error-message p {
-  margin: 0 0 16px 0;
-  font-size: var(--font-size-body-relaxed);
+  margin: 0 0 var(--space-7) 0;
+  font-size: var(--font-size-body);
   color: var(--color-text-secondary);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
 }
 
 .error-message button {
-  padding: 12px 28px;
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  padding: var(--space-4) var(--space-9);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
   border: none;
-  border-radius: var(--radius-feature);
+  border-radius: var(--radius-pill);
   cursor: pointer;
-  transition: all 0.18s ease;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  transition: background 200ms ease, transform 150ms ease;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
 }
 
 .error-message button:hover {
-  background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
+  background-color: var(--color-meta-blue-hover);
+  transform: scale(1.05);
 }
 
 .error-message button:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
@@ -632,51 +639,52 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-background);
+  background-color: var(--color-white);
 }
 
 .empty-state {
   text-align: center;
-  padding: 24px;
-  background-color: var(--color-background);
-  border-radius: var(--radius-standard);
+  padding: var(--space-9);
+  background-color: var(--color-white);
+  border-radius: var(--radius-card);
   border: 1px solid var(--color-border-subtle);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .empty-state h3 {
-  margin: 0 0 12px 0;
-  font-size: var(--font-size-heading-small);
+  margin: 0 0 var(--space-5) 0;
+  font-size: var(--font-size-heading-3);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
+  font-feature-settings: "ss01", "ss02";
 }
 
 .empty-state p {
   margin: 0;
-  font-size: var(--font-size-body-relaxed);
+  font-size: var(--font-size-body);
   color: var(--color-text-secondary);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
 }
 
 .empty-state code {
-  background-color: var(--color-surface-slate);
-  padding: 4px 8px;
+  background-color: var(--color-soft-gray);
+  padding: var(--space-2) var(--space-3);
   border-radius: var(--radius-small);
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
   color: var(--color-text-primary);
-  letter-spacing: var(--letter-spacing-mono);
-  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 @media (max-width: 768px) {
   .canvas-toolbar {
     flex-direction: column;
     align-items: flex-start;
-    gap: 12px;
-    padding: 12px;
+    gap: var(--space-5);
+    padding: var(--space-5);
   }
 
   .toolbar-section {
@@ -685,38 +693,39 @@
   }
 
   .control-group {
-    gap: 8px;
+    gap: var(--space-3);
   }
 
   .toolbar-btn {
-    padding: 10px 14px;
+    padding: var(--space-4) var(--space-6);
   }
 }
 
 .frame-toolbar {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background-color: var(--color-background);
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-5);
+  background-color: var(--color-white);
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-standard);
+  border-radius: var(--radius-card);
   transition: all 0.15s ease;
   position: absolute;
   top: 10px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1001;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .frame-toolbar:hover {
-  border-color: var(--color-jelly-mint);
+  border-color: var(--color-meta-blue);
 }
 
 .frame-toolbar .toolbar-btn {
-  padding: 8px;
+  padding: var(--space-3);
   border: 1px solid var(--color-border-subtle);
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   color: var(--color-text-primary);
   border-radius: var(--radius-circle);
   cursor: pointer;
@@ -729,12 +738,14 @@
 }
 
 .frame-toolbar .toolbar-btn:hover {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-jelly-mint);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
+  border-color: var(--color-meta-blue);
 }
 
 .frame-toolbar .toolbar-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
@@ -747,7 +758,7 @@
   width: 100%;
   height: 100%;
   border: none;
-  background: var(--color-canvas-white);
+  background: var(--color-white);
   border-radius: 0 0 var(--radius-small) var(--radius-small);
 }
 
@@ -763,13 +774,13 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: var(--color-canvas-white);
-  border: 1px solid var(--color-verge-ultraviolet);
+  background: var(--color-white);
+  border: 1px solid var(--color-meta-blue);
   border-radius: 0 0 var(--radius-small) var(--radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 20px;
+  padding: var(--space-9);
   box-sizing: border-box;
 }
 
@@ -790,7 +801,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--color-overlay-black);
+  background-color: var(--color-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -801,20 +812,19 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-3);
 }
 
 .drag-ready-hint span {
   font-size: 24px;
-  color: var(--color-jelly-mint);
+  color: var(--color-meta-blue);
 }
 
 .drag-ready-hint p {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption);
   color: var(--color-text-primary);
-  letter-spacing: var(--letter-spacing-mono);
-  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-tighter);
 }
 
 .frame-loading-overlay {
@@ -823,7 +833,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(19, 19, 19, 0.8);
+  background-color: rgba(28, 43, 51, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -836,7 +846,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -845,39 +855,38 @@
 
 .frame-error-content {
   text-align: center;
-  padding: 16px;
+  padding: var(--space-7);
 }
 
 .frame-error-content span {
   font-size: 32px;
-  color: var(--color-verge-ultraviolet);
+  color: var(--color-error-red);
 }
 
 .frame-error-content p {
-  font-size: var(--font-size-body-relaxed);
+  font-size: var(--font-size-body);
   color: var(--color-text-primary);
-  margin: 8px 0 4px;
+  margin: var(--space-3) 0 var(--space-2);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
 }
 
 .frame-error-content small {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
   color: var(--color-text-muted);
-  letter-spacing: var(--letter-spacing-mono-sm);
-  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .frame-viewport-controls {
   display: flex;
-  gap: 6px;
+  gap: var(--space-2);
 }
 
 .frame-viewport-btn {
-  padding: 6px;
+  padding: var(--space-2);
   border: 1px solid var(--color-border-subtle);
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   border-radius: var(--radius-circle);
   cursor: pointer;
   transition: all 0.15s ease;
@@ -889,25 +898,27 @@
 }
 
 .frame-viewport-btn:hover {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-jelly-mint);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
+  border-color: var(--color-meta-blue);
 }
 
 .frame-viewport-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .frame-viewport-btn.active {
-  background-color: var(--color-jelly-mint);
-  border-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  border-color: var(--color-meta-blue);
+  color: var(--color-white);
 }
 
 .frame-viewport-indicator {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-2);
 }
 
 .global-indicator {
@@ -923,36 +934,34 @@
 .frame-meta {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-2);
 }
 
 .frame-status {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-micro);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .frame-status.loading {
-  color: var(--color-jelly-mint);
+  color: var(--color-meta-blue);
 }
 
 .frame-status.error {
-  color: var(--color-verge-ultraviolet);
+  color: var(--color-error-red);
 }
 
 .frame-status.loaded {
-  color: var(--color-jelly-mint);
+  color: var(--color-success-green);
 }
 
 .file-type {
-  padding: 2px 6px;
-  background-color: var(--color-surface-slate);
+  padding: var(--space-1) var(--space-3);
+  background-color: var(--color-soft-gray);
   border-radius: var(--radius-small);
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-micro);
+  font-family: var(--font-family-secondary);
+  font-size: var(--font-size-small);
   font-weight: var(--font-weight-bold);
-  letter-spacing: var(--letter-spacing-mono);
-  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-normal);
   color: var(--color-text-muted);
 }
diff --git a/src/components/ContextModal.css b/src/components/ContextModal.css
index 9d3fa52..7745eb2 100644
--- a/src/components/ContextModal.css
+++ b/src/components/ContextModal.css
@@ -4,7 +4,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--color-overlay-black);
+  background-color: var(--color-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,8 +12,8 @@
 }
 
 .context-modal {
-  background-color: var(--color-background);
-  border-radius: var(--radius-standard);
+  background-color: var(--color-white);
+  border-radius: var(--radius-card);
   border: 1px solid var(--color-border-subtle);
   width: 400px;
   max-width: 90%;
@@ -22,10 +22,11 @@
   flex-direction: column;
   position: relative;
   z-index: 1001;
+  box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .context-modal-header {
-  padding: 24px;
+  padding: var(--space-9);
   border-bottom: 1px solid var(--color-border-subtle);
   display: flex;
   align-items: center;
@@ -34,11 +35,12 @@
 
 .context-modal-header h3 {
   margin: 0;
-  font-size: var(--font-size-heading-small);
+  font-size: var(--font-size-heading-3);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
+  font-feature-settings: "ss01", "ss02";
 }
 
 .context-modal-close {
@@ -58,16 +60,17 @@
 }
 
 .context-modal-close:hover {
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
 }
 
 .context-modal-close:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .context-modal-body {
-  padding: 24px;
+  padding: var(--space-9);
   flex: 1;
   overflow-y: auto;
 }
@@ -75,43 +78,44 @@
 .context-form {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--space-7);
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-3);
 }
 
 .form-group label {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption-bold);
   font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
   color: var(--color-text-primary);
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .form-input {
-  padding: 12px 14px;
-  border: 1px solid var(--color-border-subtle);
+  padding: var(--space-5) var(--space-6);
+  border: 1px solid var(--color-border-medium);
   border-radius: var(--radius-small);
-  font-size: var(--font-size-body-relaxed);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-size: var(--font-size-body);
+  font-family: var(--font-family-primary);
   outline: none;
-  transition: border-color 0.15s ease;
-  background-color: var(--color-surface-slate);
+  transition: border-color 200ms ease, box-shadow 200ms ease;
+  background-color: var(--color-white);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
 }
 
 .form-input:focus {
-  border-color: var(--color-jelly-mint);
+  border-color: hsl(214, 89%, 52%);
+  box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
 }
 
 .form-input:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
@@ -120,26 +124,28 @@
 }
 
 .form-textarea {
-  padding: 12px 14px;
-  border: 1px solid var(--color-border-subtle);
+  padding: var(--space-5) var(--space-6);
+  border: 1px solid var(--color-border-medium);
   border-radius: var(--radius-small);
-  font-size: var(--font-size-body-relaxed);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-size: var(--font-size-body);
+  font-family: var(--font-family-primary);
   resize: none;
   outline: none;
-  transition: border-color 0.15s ease;
+  transition: border-color 200ms ease, box-shadow 200ms ease;
   min-height: 120px;
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-white);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
 }
 
 .form-textarea:focus {
-  border-color: var(--color-jelly-mint);
+  border-color: hsl(214, 89%, 52%);
+  box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
 }
 
 .form-textarea:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
@@ -148,68 +154,71 @@
 }
 
 .context-modal-footer {
-  padding: 24px;
+  padding: var(--space-9);
   border-top: 1px solid var(--color-border-subtle);
   display: flex;
   justify-content: flex-end;
-  gap: 12px;
+  gap: var(--space-5);
 }
 
 .context-modal-cancel {
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-subtle);
-  padding: 12px 28px;
-  border-radius: var(--radius-feature);
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  padding: var(--space-4) var(--space-9);
+  border-radius: var(--radius-pill);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
   cursor: pointer;
-  transition: all 0.18s ease;
+  transition: background 200ms ease, transform 150ms ease;
 }
 
 .context-modal-cancel:hover {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-jelly-mint);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
+  transform: scale(1.05);
 }
 
 .context-modal-cancel:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .context-modal-cancel:active {
   opacity: 0.9;
+  transform: scale(0.95);
 }
 
 .context-modal-submit {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
   border: none;
-  padding: 12px 28px;
-  border-radius: var(--radius-feature);
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  padding: var(--space-4) var(--space-9);
+  border-radius: var(--radius-pill);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
   cursor: pointer;
-  transition: all 0.18s ease;
+  transition: background 200ms ease, transform 150ms ease;
 }
 
 .context-modal-submit:hover {
-  background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
+  background-color: var(--color-meta-blue-hover);
+  transform: scale(1.05);
 }
 
 .context-modal-submit:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .context-modal-submit:active {
-  background-color: var(--color-dim-gray);
+  background-color: var(--color-meta-blue-pressed);
+  transform: scale(0.9);
   opacity: 0.5;
 }
diff --git a/src/components/SideBar.css b/src/components/SideBar.css
index bda0070..bf940be 100644
--- a/src/components/SideBar.css
+++ b/src/components/SideBar.css
@@ -3,26 +3,27 @@
   top: 100px;
   left: 20px;
   width: 48px;
-  background-color: var(--color-background);
+  background-color: var(--color-white);
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-standard);
+  border-radius: var(--radius-card);
   display: flex;
   flex-direction: column;
   z-index: 100;
   transition: width 0.3s ease;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .menu-items {
-  padding: 20px 0;
+  padding: var(--space-9) 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-3);
 }
 
 .menu-item {
   display: flex;
   align-items: center;
-  padding: 10px 0;
+  padding: var(--space-4) 0;
   cursor: pointer;
   transition: all 0.15s ease;
   color: var(--color-text-primary);
@@ -30,47 +31,48 @@
 }
 
 .menu-item:hover {
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
 }
 
 .menu-item:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .menu-item.active {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
 }
 
 .menu-icon {
   font-size: 20px;
-  margin: 0 14px;
+  margin: 0 var(--space-5);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .menu-label {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-tighter);
   opacity: 0;
   visibility: hidden;
   position: absolute;
   left: 48px;
   top: 50%;
   transform: translateY(-50%);
-  background-color: var(--color-surface-slate);
-  color: var(--color-primary-text);
-  padding: 10px 16px;
-  border-radius: var(--radius-standard);
+  background-color: var(--color-soft-gray);
+  color: var(--color-text-primary);
+  padding: var(--space-4) var(--space-7);
+  border-radius: var(--radius-card);
   border: 1px solid var(--color-border-subtle);
   white-space: nowrap;
   transition: all 0.3s ease;
   z-index: 101;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .menu-item:hover .menu-label {
@@ -84,7 +86,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--color-overlay-black);
+  background-color: var(--color-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -92,8 +94,8 @@
 }
 
 .note-modal {
-  background-color: var(--color-background);
-  border-radius: var(--radius-standard);
+  background-color: var(--color-white);
+  border-radius: var(--radius-card);
   border: 1px solid var(--color-border-subtle);
   width: 400px;
   max-width: 90%;
@@ -102,6 +104,7 @@
   flex-direction: column;
   position: relative;
   z-index: 1001;
+  box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .note-modal-position {
@@ -109,7 +112,7 @@
 }
 
 .note-modal-header {
-  padding: 24px;
+  padding: var(--space-9);
   border-bottom: 1px solid var(--color-border-subtle);
   display: flex;
   align-items: center;
@@ -118,11 +121,12 @@
 
 .note-modal-header h3 {
   margin: 0;
-  font-size: var(--font-size-heading-small);
+  font-size: var(--font-size-heading-3);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
+  font-feature-settings: "ss01", "ss02";
 }
 
 .note-modal-close {
@@ -142,16 +146,17 @@
 }
 
 .note-modal-close:hover {
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
 }
 
 .note-modal-close:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .note-modal-body {
-  padding: 24px;
+  padding: var(--space-9);
   flex: 1;
   position: relative;
 }
@@ -160,30 +165,32 @@
   width: 100%;
   height: 100%;
   min-height: 120px;
-  padding: 12px;
-  border: 1px solid var(--color-border-subtle);
+  padding: var(--space-5);
+  border: 1px solid var(--color-border-medium);
   border-radius: var(--radius-small);
-  font-size: var(--font-size-body-relaxed);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-size: var(--font-size-body);
+  font-family: var(--font-family-primary);
   resize: none;
   outline: none;
-  transition: border-color 0.15s ease;
-  background-color: var(--color-surface-slate);
+  transition: border-color 200ms ease, box-shadow 200ms ease;
+  background-color: var(--color-white);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
 }
 
 .note-modal-textarea:focus {
-  border-color: var(--color-jelly-mint);
+  border-color: hsl(214, 89%, 52%);
+  box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
 }
 
 .note-modal-textarea:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .note-modal-footer {
-  padding: 24px;
+  padding: var(--space-9);
   border-top: 1px solid var(--color-border-subtle);
   display: flex;
   justify-content: flex-end;
@@ -191,35 +198,36 @@
 }
 
 .note-modal-submit {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
   border: none;
-  padding: 12px 28px;
-  border-radius: var(--radius-feature);
+  padding: var(--space-4) var(--space-9);
+  border-radius: var(--radius-pill);
   cursor: pointer;
-  transition: all 0.18s ease;
+  transition: background 200ms ease, transform 150ms ease;
   position: absolute;
-  bottom: 12px;
-  right: 12px;
+  bottom: var(--space-5);
+  right: var(--space-5);
 }
 
 .note-modal-submit:hover {
-  background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
+  background-color: var(--color-meta-blue-hover);
+  transform: scale(1.05);
 }
 
 .note-modal-submit:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .note-modal-submit:active {
-  background-color: var(--color-dim-gray);
+  background-color: var(--color-meta-blue-pressed);
+  transform: scale(0.9);
   opacity: 0.5;
 }
 
@@ -228,18 +236,18 @@
   left: 100%;
   top: 50%;
   transform: translateY(-50%);
-  background-color: var(--color-surface-slate);
-  color: var(--color-primary-text);
-  padding: 12px 16px;
-  border-radius: var(--radius-standard);
+  background-color: var(--color-soft-gray);
+  color: var(--color-text-primary);
+  padding: var(--space-5) var(--space-7);
+  border-radius: var(--radius-card);
   border: 1px solid var(--color-border-subtle);
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption);
+  letter-spacing: var(--letter-spacing-tighter);
   white-space: nowrap;
   z-index: 101;
   animation: fadeInOut 3s ease-in-out;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 @keyframes fadeInOut {
@@ -267,7 +275,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--color-overlay-black);
+  background-color: var(--color-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -275,8 +283,8 @@
 }
 
 .resource-modal {
-  background-color: var(--color-background);
-  border-radius: var(--radius-standard);
+  background-color: var(--color-white);
+  border-radius: var(--radius-card);
   border: 1px solid var(--color-border-subtle);
   width: 600px;
   max-width: 90%;
@@ -285,10 +293,11 @@
   flex-direction: column;
   position: relative;
   z-index: 1001;
+  box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .resource-modal-header {
-  padding: 24px;
+  padding: var(--space-9);
   border-bottom: 1px solid var(--color-border-subtle);
   display: flex;
   align-items: center;
@@ -297,11 +306,12 @@
 
 .resource-modal-header h3 {
   margin: 0;
-  font-size: var(--font-size-heading-small);
+  font-size: var(--font-size-heading-3);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
-  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
+  font-feature-settings: "ss01", "ss02";
 }
 
 .resource-modal-close {
@@ -321,31 +331,32 @@
 }
 
 .resource-modal-close:hover {
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-soft-gray);
 }
 
 .resource-modal-close:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .resource-modal-body {
-  padding: 24px;
+  padding: var(--space-9);
   flex: 1;
   overflow-y: auto;
 }
 
 .resource-row {
   display: flex;
-  gap: 20px;
-  margin-bottom: 20px;
+  gap: var(--space-9);
+  margin-bottom: var(--space-9);
 }
 
 .resource-section {
   flex: 1;
-  background-color: var(--color-surface-slate);
-  border-radius: var(--radius-standard);
-  padding: 16px;
+  background-color: var(--color-soft-gray);
+  border-radius: var(--radius-card);
+  padding: var(--space-7);
   border: 1px solid var(--color-border-subtle);
 }
 
@@ -355,107 +366,110 @@
 }
 
 .resource-section h4 {
-  margin: 0 0 12px 0;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  margin: 0 0 var(--space-5) 0;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption-bold);
   font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
   color: var(--color-text-primary);
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .resource-display {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--space-5);
 }
 
 .logo-display {
   display: flex;
-  gap: 12px;
+  gap: var(--space-5);
   flex-wrap: wrap;
 }
 
 .logo-placeholder {
   width: 60px;
   height: 60px;
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-white);
   border-radius: var(--radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
-  color: var(--color-text-primary);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
   border: 1px solid var(--color-border-subtle);
-  letter-spacing: var(--letter-spacing-mono);
+  letter-spacing: var(--letter-spacing-tighter);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .font-display {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-3);
 }
 
 .font-item {
-  padding: 10px 14px;
-  background-color: var(--color-surface-slate);
+  padding: var(--space-4) var(--space-5);
+  background-color: var(--color-white);
   border-radius: var(--radius-small);
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-subtle);
-  letter-spacing: var(--letter-spacing-mono);
+  letter-spacing: var(--letter-spacing-tighter);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .image-display {
   display: flex;
-  gap: 12px;
+  gap: var(--space-5);
   flex-wrap: wrap;
 }
 
 .image-placeholder {
   width: 80px;
   height: 80px;
-  background-color: var(--color-surface-slate);
+  background-color: var(--color-white);
   border-radius: var(--radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
-  color: var(--color-text-primary);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
   border: 1px solid var(--color-border-subtle);
-  letter-spacing: var(--letter-spacing-mono);
+  letter-spacing: var(--letter-spacing-tighter);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .upload-btn {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
   border: none;
-  padding: 12px 28px;
-  border-radius: var(--radius-feature);
+  padding: var(--space-4) var(--space-9);
+  border-radius: var(--radius-pill);
   cursor: pointer;
-  transition: all 0.18s ease;
+  transition: background 200ms ease, transform 150ms ease;
   align-self: flex-start;
 }
 
 .upload-btn:hover {
-  background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
+  background-color: var(--color-meta-blue-hover);
+  transform: scale(1.05);
 }
 
 .upload-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .upload-btn:active {
-  background-color: var(--color-dim-gray);
+  background-color: var(--color-meta-blue-pressed);
+  transform: scale(0.9);
   opacity: 0.5;
 }
diff --git a/src/components/TopBar.css b/src/components/TopBar.css
index 5bf52f2..499c6dc 100644
--- a/src/components/TopBar.css
+++ b/src/components/TopBar.css
@@ -2,15 +2,17 @@
   position: absolute;
   top: 20px;
   right: 20px;
-  height: 60px;
+  height: 56px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
   z-index: 100;
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-standard);
-  padding: 0 8px;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-cta-gray-border);
+  border-radius: var(--radius-pill);
+  padding: 0 var(--space-7);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
 
 .top-bar-left {
@@ -18,58 +20,58 @@
   align-items: center;
 }
 
-.verge-wordmark {
-  font-family: 'Anton', Impact, Helvetica, sans-serif;
-  font-size: var(--font-size-tertiary-display);
-  font-weight: var(--font-weight-regular);
-  color: var(--color-primary-text);
-  letter-spacing: var(--letter-spacing-tight-hero);
-  line-height: var(--line-height-display);
+.meta-wordmark {
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-heading-3);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  letter-spacing: var(--letter-spacing-normal);
+  line-height: var(--line-height-heading-3);
   margin: 0;
+  font-feature-settings: "ss01", "ss02";
 }
 
 .top-bar-center {
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: var(--space-9);
 }
 
 .nav-link {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-primary-text);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-body-compact);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
   text-decoration: none;
   transition: all 0.15s ease;
-  padding: 8px 0;
+  padding: var(--space-3) 0;
   position: relative;
 }
 
 .nav-link:hover {
-  color: var(--color-deep-link-blue);
+  color: var(--color-link-hover);
+  text-decoration: underline;
 }
 
 .nav-link.active {
-  box-shadow: 0px -1px 0px 0px inset var(--color-jelly-mint);
+  box-shadow: 0px -2px 0px 0px inset var(--color-meta-blue);
 }
 
 .top-bar-right {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: var(--space-7);
 }
 
 .search-icon {
-  color: var(--color-primary-text);
+  color: var(--color-text-primary);
   font-size: 20px;
   cursor: pointer;
   transition: color 0.15s ease;
 }
 
 .search-icon:hover {
-  color: var(--color-deep-link-blue);
+  color: var(--color-link-hover);
 }
 
 .chat-session {
@@ -79,38 +81,38 @@
 }
 
 .chat-btn {
-  font-family: 'Space Mono', Courier New, Courier, monospace;
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
-  padding: 8px 12px;
-  border-radius: var(--radius-feature);
-  transition: all 0.18s ease;
-  background-color: var(--color-surface-slate);
-  color: var(--color-muted-text);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
+  padding: var(--space-4) var(--space-7);
+  border-radius: var(--radius-pill);
+  transition: background 200ms ease, transform 150ms ease;
+  background-color: var(--color-soft-gray);
+  color: var(--color-text-secondary);
   border: none;
 }
 
 .chat-btn:hover {
-  background-color: var(--color-primary-hover);
-  color: var(--color-absolute-black);
-  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
+  transform: scale(1.05);
 }
 
 .chat-btn.active {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
 }
 
 .chat-btn:focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .action-buttons {
   display: flex;
-  gap: 12px;
+  gap: var(--space-5);
   align-items: center;
 }
 
diff --git a/src/index.css b/src/index.css
index fb9d939..c482cb1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,4 @@
 :root {
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -8,173 +7,163 @@
 }
 
 :root {
-  /* Primary (Brand Hazards) */
-  --color-jelly-mint: #3cffd0;
-  --color-verge-ultraviolet: #5200ff;
+  /* Primary */
+  --color-meta-blue: #0064E0;
+  --color-meta-blue-hover: #0143B5;
+  --color-meta-blue-pressed: #004BB9;
+  --color-meta-blue-light: #47A5FA;
+  --color-facebook-blue: #1877F2;
 
   /* Secondary & Accent */
-  --color-console-mint-border: #309875;
-  --color-deep-link-blue: #3860be;
-  --color-focus-cyan: #1eaedb;
-  --color-purple-rule: #3d00bf;
-  --color-dim-gray: #8c8c8c;
+  --color-ray-ban-red: #D6311F;
+  --color-oculus-purple: #A121CE;
+  --color-work-purple: #6441D2;
+  --color-portal-blue: #1B365D;
+  --color-portal-hero-blue: #C8E4E8;
+  --color-portal-light-blue: #ADD4E0;
 
   /* Surface & Background */
-  --color-canvas-white: #ffffff;
-  --color-surface-slate: #f2f2f2;
-  --color-surface-slate-2: #e6e6e6;
-  --color-image-frame: #d4d4d4;
-  --color-hazard-white: #ffffff;
-  --color-absolute-black: #000000;
+  --color-white: #FFFFFF;
+  --color-soft-gray: #F1F4F7;
+  --color-warm-gray: #F7F8FA;
+  --color-web-wash: #F0F2F5;
+  --color-linen: #F2F0E6;
+  --color-baby-blue: #E8F3FF;
+  --color-near-black: #1C1E21;
+  --color-oculus-light: #181A1B;
+  --color-oculus-dark: #000000;
+  --color-overlay: rgba(0, 0, 0, 0.6);
 
   /* Neutrals & Text */
-  --color-primary-text: #131313;
-  --color-secondary-text: #6a6a6a;
-  --color-muted-text: #8c8c8c;
-  --color-inverted-text: #ffffff;
+  --color-primary-text: #050505;
+  --color-dark-charcoal: #1C2B33;
+  --color-icon-secondary: #465A69;
+  --color-secondary-text: #65676B;
+  --color-slate-gray: #5D6C7B;
+  --color-section-header: #4B4C4F;
+  --color-button-text-gray: #444950;
+  --color-disabled-text: #BCC0C4;
+  --color-cta-disabled-text: #8595A4;
+  --color-divider: #CED0D4;
+  --color-divider-gray: #DEE3E9;
+  --color-cta-gray-border: #CBD2D9;
+  --color-dark-gray-border: #909396;
 
   /* Semantic & Accent */
-  --color-focus-ring: #1eaedb;
-  --color-overlay-black: rgba(19, 19, 19, 0.1);
+  --color-success-green: #31A24C;
+  --color-store-success: #007D1E;
+  --color-error-red: #E41E3F;
+  --color-store-error: #C80A28;
+  --color-warning-amber: #F7B928;
+  --color-positive-bg: rgba(36, 228, 0, 0.15);
+  --color-error-bg: rgba(255, 123, 145, 0.15);
+  --color-warning-bg: rgba(255, 226, 0, 0.15);
+  --color-info-bg: rgba(0, 145, 255, 0.15);
+
+  /* Base Color Spectrum (FDS) */
+  --color-cherry: #F3425F;
+  --color-grape: #9360F7;
+  --color-lime: #45BD62;
+  --color-seafoam: #54C7EC;
+  --color-teal: #2ABBA7;
+  --color-tomato: #FB724B;
+  --color-pink: #FF66BF;
 
   /* Text Colors */
-  --color-text-primary: var(--color-primary-text);
-  --color-text-secondary: var(--color-secondary-text);
-  --color-text-muted: var(--color-muted-text);
-  --color-text-placeholder: var(--color-muted-text);
+  --color-text-primary: var(--color-dark-charcoal);
+  --color-text-secondary: var(--color-slate-gray);
+  --color-text-muted: var(--color-secondary-text);
+  --color-text-placeholder: var(--color-secondary-text);
 
   /* Background Colors */
-  --color-background: var(--color-canvas-white);
-  --color-surface: var(--color-canvas-white);
-  --color-secondary-background: var(--color-surface-slate);
+  --color-background: var(--color-white);
+  --color-surface: var(--color-white);
+  --color-secondary-background: var(--color-soft-gray);
 
   /* Border Colors */
-  --color-border-subtle: rgba(19, 19, 19, 0.1);
-  --color-border-medium: var(--color-jelly-mint);
-  --color-border-strong: var(--color-verge-ultraviolet);
+  --color-border-subtle: var(--color-divider-gray);
+  --color-border-medium: var(--color-divider);
+  --color-border-strong: var(--color-dark-gray-border);
 
   /* Link Colors */
-  --color-link-default: var(--color-primary-text);
-  --color-link-hover: var(--color-deep-link-blue);
+  --color-link-default: var(--color-meta-blue);
+  --color-link-hover: var(--color-meta-blue-hover);
 
   /* Button Colors */
-  --color-primary: var(--color-jelly-mint);
-  --color-primary-hover: rgba(60, 255, 208, 0.3);
-  --color-button-background: var(--color-surface-slate);
-  --color-button-hover: rgba(19, 19, 19, 0.2);
+  --color-primary: var(--color-meta-blue);
+  --color-primary-hover: var(--color-meta-blue-hover);
+  --color-primary-pressed: var(--color-meta-blue-pressed);
+  --color-button-background: var(--color-soft-gray);
+  --color-button-hover: rgba(70, 90, 105, 0.7);
 
   /* Border Radius */
-  --radius-small: 2px;
-  --radius-image: 3px;
-  --radius-nested: 4px;
-  --radius-standard: 20px;
+  --radius-small: 8px;
+  --radius-card: 20px;
   --radius-feature: 24px;
-  --radius-promotional: 30px;
-  --radius-outlined: 40px;
-  --radius-pill: 9999px;
+  --radius-pill: 100px;
   --radius-circle: 50%;
 
   /* Spacing */
   --spacing-unit: 8px;
+  --space-1: 1px;
+  --space-2: 4px;
+  --space-3: 8px;
+  --space-4: 10px;
+  --space-5: 12px;
+  --space-6: 14px;
+  --space-7: 16px;
+  --space-8: 18px;
+  --space-9: 24px;
+  --space-10: 32px;
+  --space-11: 40px;
+  --space-12: 48px;
+  --space-13: 64px;
+  --space-14: 80px;
 
   /* Letter Spacing */
-  --letter-spacing-tight-hero: 1px;
-  --letter-spacing-tight-section: -0.3px;
-  --letter-spacing-tight-subheading: -0.16px;
+  --letter-spacing-tight: -0.16px;
+  --letter-spacing-tighter: -0.14px;
   --letter-spacing-normal: normal;
-  --letter-spacing-wide: 1.9px;
-  --letter-spacing-mono: 1.5px;
-  --letter-spacing-mono-sm: 1.1px;
 
   /* Font Weights */
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
-  --font-weight-semibold: 600;
   --font-weight-bold: 700;
-  --font-weight-black: 900;
 
   /* Font Sizes */
-  --font-size-hero: 6.5rem; /* 104px */
-  --font-size-secondary-display: 4.5rem; /* 72px */
-  --font-size-tertiary-display: 3.75rem; /* 60px */
-  --font-size-large-headline: 2.13rem; /* 34px */
-  --font-size-heading-wide: 2rem; /* 32px */
-  --font-size-heading-medium: 1.5rem; /* 24px */
-  --font-size-heading-small: 1.19rem; /* 19px */
-  --font-size-light-capitalized: 1.19rem; /* 19px */
-  --font-size-all-caps-xl: 1.13rem; /* 18px */
-  --font-size-bold-body: 1rem; /* 16px */
-  --font-size-body-relaxed: 1rem; /* 16px */
-  --font-size-inline-label: 0.94rem; /* 15px */
-  --font-size-body-compact: 0.81rem; /* 13px */
-  --font-size-eyebrow-all-caps: 0.75rem; /* 12px */
-  --font-size-tag-label: 0.75rem; /* 12px */
-  --font-size-caption-micro: 0.69rem; /* 11px */
-  --font-size-meta-nano: 0.63rem; /* 10px */
-  --font-size-mono-button: 0.75rem; /* 12px */
-  --font-size-mono-timestamp: 0.69rem; /* 11px */
+  --font-size-display-1: 64px;
+  --font-size-display-2: 48px;
+  --font-size-heading-1: 36px;
+  --font-size-heading-2: 28px;
+  --font-size-heading-3: 18px;
+  --font-size-body: 18px;
+  --font-size-body-compact: 16px;
+  --font-size-caption-bold: 14px;
+  --font-size-caption: 14px;
+  --font-size-small: 12px;
+  --font-size-button: 14px;
 
   /* Line Heights */
-  --line-height-display: 0.95;
-  --line-height-headline: 1;
-  --line-height-heading-wide: 1;
-  --line-height-light-capitalized: 1.2;
-  --line-height-all-caps-xl: 1.4;
-  --line-height-body-relaxed: 1.6;
-  --line-height-inline-label: 1.2;
-  --line-height-body-compact: 1.6;
-  --line-height-eyebrow-all-caps: 1.3;
-  --line-height-tag-label: 1.2;
-  --line-height-caption-micro: 1.2;
-  --line-height-meta-nano: 1.4;
-  --line-height-mono-button: 2;
-  --line-height-mono-timestamp: 1.2;
+  --line-height-display-1: 1.16;
+  --line-height-display-2: 1.17;
+  --line-height-heading-1: 1.28;
+  --line-height-heading-2: 1.21;
+  --line-height-heading-3: 1.44;
+  --line-height-body: 1.44;
+  --line-height-body-compact: 1.50;
+  --line-height-caption: 1.43;
+  --line-height-small: 1.33;
+  --line-height-button: 1.43;
 }
 
 /* Font Face Definitions */
-@import url("https://fonts.googleapis.com/css2?family=Anton&family=Newsreader:wght@400&family=Space+Grotesk:wght@300;500;700&family=Space+Mono:wght@700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
 
-@font-face {
-  font-family: "Anton";
-  src: url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Space Grotesk";
-  src: url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap");
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Space Grotesk";
-  src: url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap");
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Space Grotesk";
-  src: url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap");
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Space Mono";
-  src: url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap");
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Newsreader";
-  src: url("https://fonts.googleapis.com/css2?family=Newsreader:wght@400&display=swap");
-  font-weight: 400;
-  font-style: normal;
+/* Using Montserrat as fallback for Optimistic VF */
+:root {
+  --font-family-primary: 'Optimistic VF', 'Montserrat', Helvetica, Arial, sans-serif;
+  --font-family-secondary: Helvetica, Arial, sans-serif;
 }
 
 * {
@@ -192,19 +181,19 @@ body {
   transition:
     background-color 0.3s ease,
     color 0.3s ease;
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-primary);
   font-weight: var(--font-weight-regular);
   letter-spacing: var(--letter-spacing-normal);
 }
 
 button {
   font-family: inherit;
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--letter-spacing-normal);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
   cursor: pointer;
   border: none;
   outline: none;
-  transition: all 0.18s ease;
+  transition: background 200ms ease, transform 150ms ease;
 }
 
 input,
@@ -213,29 +202,31 @@ select {
   font-family: inherit;
   font-weight: var(--font-weight-regular);
   letter-spacing: var(--letter-spacing-normal);
-  border: 1px solid var(--color-border-subtle);
-  background-color: var(--color-surface-slate);
+  border: 1px solid var(--color-border-medium);
+  background-color: var(--color-white);
   color: var(--color-text-primary);
   border-radius: var(--radius-small);
   padding: 8px 12px;
-  transition: border-color 0.15s ease;
+  transition: border-color 200ms ease, box-shadow 200ms ease;
 }
 
 input:focus,
 textarea:focus,
 select:focus {
-  border-color: var(--color-jelly-mint);
+  border-color: hsl(214, 89%, 52%);
   outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 100, 224, 0.1);
 }
 
 :focus-visible {
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 ::selection {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
 }
 
 ::-webkit-scrollbar {
@@ -244,7 +235,7 @@ select:focus {
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--color-surface-slate);
+  background: var(--color-soft-gray);
 }
 
 ::-webkit-scrollbar-thumb {
@@ -253,138 +244,96 @@ select:focus {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-muted-text);
+  background: var(--color-slate-gray);
 }
 
 /* Button Styles */
 .btn {
-  padding: 12px 28px;
-  border-radius: var(--radius-feature);
-  font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: var(--letter-spacing-mono);
-  text-transform: uppercase;
-  transition: all 0.18s ease;
-  font-family:
-    "Space Mono",
-    Courier New,
-    Courier,
-    monospace;
+  padding: var(--space-4) var(--space-9);
+  border-radius: var(--radius-pill);
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-tighter);
+  transition: background 200ms ease, transform 150ms ease;
+  font-family: var(--font-family-primary);
 }
 
 .btn-primary {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue);
+  color: var(--color-white);
   border: none;
-  border-radius: var(--radius-feature);
+  border-radius: var(--radius-pill);
 }
 
 .btn-primary:hover {
-  background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
-  color: var(--color-absolute-black);
+  background-color: var(--color-meta-blue-hover);
+  transform: scale(1.1);
 }
 
 .btn-primary:active {
-  background-color: var(--color-dim-gray);
+  background-color: var(--color-meta-blue-pressed);
+  transform: scale(0.9);
   opacity: 0.5;
-  box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
 }
 
 .btn-primary:focus-visible {
-  background-color: var(--color-focus-cyan);
-  color: var(--color-hazard-white);
-  border: 1px solid var(--color-verge-ultraviolet);
-  outline: 1px solid var(--color-focus-ring);
+  outline: 3px ring var(--color-meta-blue);
+  outline: auto 2px var(--color-meta-blue);
   outline-offset: 2px;
 }
 
 .btn-secondary {
-  background-color: var(--color-primary-text);
-  color: var(--color-hazard-white);
-  border: none;
-  border-radius: var(--radius-feature);
+  background-color: transparent;
+  color: rgba(28, 43, 51, 0.5);
+  border: 2px solid rgba(10, 19, 23, 0.12);
+  border-radius: var(--radius-pill);
+  padding: var(--space-4) var(--space-9);
 }
 
 .btn-secondary:hover {
-  background-color: rgba(19, 19, 19, 0.2);
-  color: var(--color-primary-text);
-  box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
+  background-color: var(--color-button-hover);
+  color: var(--color-white);
 }
 
-.btn-tertiary {
+.btn-ghost {
   background-color: transparent;
-  color: var(--color-console-mint-border);
-  border: 1px solid var(--color-console-mint-border);
-  border-radius: var(--radius-outlined);
-  padding: 12px 24px;
+  color: #385898;
+  border-radius: 24px;
+  padding: var(--space-2) var(--space-5);
 }
 
-.btn-tertiary:hover {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
-}
-
-.btn-outlined-ultraviolet {
-  background-color: transparent;
-  color: var(--color-verge-ultraviolet);
-  border: 1px solid var(--color-verge-ultraviolet);
-  border-radius: var(--radius-promotional);
-}
-
-.btn-outlined-ultraviolet:hover {
-  background-color: var(--color-verge-ultraviolet);
-  color: var(--color-hazard-white);
-}
-
-.btn-pill-tag {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
-  border: none;
-  border-radius: var(--radius-standard);
-  padding: 6px 14px;
-  font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: var(--letter-spacing-mono);
-  text-transform: uppercase;
-  font-family:
-    "Space Mono",
-    Courier New,
-    Courier,
-    monospace;
+.btn-disabled {
+  background-color: var(--color-divider-gray);
+  color: var(--color-cta-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 /* Card Styles */
 .card {
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-standard);
-  padding: 24px;
-  transition: all 0.15s ease;
+  background-color: var(--color-white);
+  border-radius: var(--radius-card);
+  padding: var(--space-4) var(--space-9);
+  transition: transform 300ms ease, box-shadow 300ms ease;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .card:hover {
-  border-color: var(--color-jelly-mint);
-}
-
-.card-accent {
-  background-color: var(--color-jelly-mint);
-  color: var(--color-absolute-black);
-  border: 1px solid var(--color-console-mint-border);
-  border-radius: var(--radius-standard);
-  padding: 24px;
+  transform: translateY(-2px);
+  box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .card-feature {
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border-subtle);
+  background-color: var(--color-white);
   border-radius: var(--radius-feature);
-  padding: 32px;
-  transition: all 0.15s ease;
+  padding: var(--space-10);
+  transition: transform 300ms ease, box-shadow 300ms ease;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 .card-feature:hover {
-  border-color: var(--color-jelly-mint);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
 }
 
 /* Link Styles */
@@ -396,200 +345,334 @@ a {
 
 a:hover {
   color: var(--color-link-hover);
-  text-decoration: none;
+  text-decoration: underline;
 }
 
 /* Typography Classes */
-.text-anton {
-  font-family: "Anton", Impact, Helvetica, sans-serif;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-display);
-  letter-spacing: var(--letter-spacing-tight-hero);
-}
-
-.text-space-grotesk {
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-space-mono {
-  font-family:
-    "Space Mono",
-    Courier New,
-    Courier,
-    monospace;
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-mono);
-}
-
-.text-newsreader {
-  font-family: "Newsreader", Georgia, serif;
-}
-
-/* Utility Classes */
-.text-hero {
-  font-size: var(--font-size-hero);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-display);
-  letter-spacing: var(--letter-spacing-tight-hero);
-  font-family: "Anton", Impact, Helvetica, sans-serif;
-}
-
-.text-secondary-display {
-  font-size: var(--font-size-secondary-display);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-display);
-  font-family: "Anton", Impact, Helvetica, sans-serif;
-}
-
-.text-tertiary-display {
-  font-size: var(--font-size-tertiary-display);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-display);
-  font-family: "Anton", Impact, Helvetica, sans-serif;
-}
-
-.text-large-headline {
-  font-size: var(--font-size-large-headline);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-headline);
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-heading-wide {
-  font-size: var(--font-size-heading-wide);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-heading-wide);
-  letter-spacing: var(--letter-spacing-tight-section);
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-heading-medium {
-  font-size: var(--font-size-heading-medium);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-headline);
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-heading-small {
-  font-size: var(--font-size-heading-small);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-headline);
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-light-capitalized {
-  font-size: var(--font-size-light-capitalized);
-  font-weight: var(--font-weight-light);
-  line-height: var(--line-height-light-capitalized);
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-all-caps-xl {
-  font-size: var(--font-size-all-caps-xl);
-  font-weight: var(--font-weight-light);
-  line-height: var(--line-height-all-caps-xl);
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-bold-body {
-  font-size: var(--font-size-bold-body);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-headline);
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-body-relaxed {
-  font-size: var(--font-size-body-relaxed);
+.text-display-1 {
+  font-size: var(--font-size-display-1);
   font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-body-relaxed);
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
+  line-height: var(--line-height-display-1);
+  font-family: var(--font-family-primary);
+  font-feature-settings: "ss01", "ss02";
 }
 
-.text-inline-label {
-  font-size: var(--font-size-inline-label);
+.text-display-2 {
+  font-size: var(--font-size-display-2);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-display-2);
+  font-family: var(--font-family-primary);
+  font-feature-settings: "ss01", "ss02";
+}
+
+.text-heading-1 {
+  font-size: var(--font-size-heading-1);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-heading-1);
+  font-family: var(--font-family-primary);
+}
+
+.text-heading-2 {
+  font-size: var(--font-size-heading-2);
+  font-weight: var(--font-weight-light);
+  line-height: var(--line-height-heading-2);
+  font-family: var(--font-family-primary);
+}
+
+.text-heading-3 {
+  font-size: var(--font-size-heading-3);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading-3);
+  font-family: var(--font-family-primary);
+  font-feature-settings: "ss01", "ss02";
+}
+
+.text-body {
+  font-size: var(--font-size-body);
   font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-inline-label);
-  letter-spacing: var(--letter-spacing-tight-subheading);
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
+  line-height: var(--line-height-body);
+  font-family: var(--font-family-primary);
+  color: var(--color-text-secondary);
 }
 
 .text-body-compact {
   font-size: var(--font-size-body-compact);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-body-compact);
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-eyebrow-all-caps {
-  font-size: var(--font-size-eyebrow-all-caps);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-eyebrow-all-caps);
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-tag-label {
-  font-size: var(--font-size-tag-label);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-tag-label);
-  letter-spacing: var(--letter-spacing-mono);
-  text-transform: uppercase;
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-caption-micro {
-  font-size: var(--font-size-caption-micro);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-caption-micro);
-  letter-spacing: var(--letter-spacing-mono-sm);
-  text-transform: uppercase;
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
-}
-
-.text-meta-nano {
-  font-size: var(--font-size-meta-nano);
   font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-meta-nano);
-  letter-spacing: var(--letter-spacing-mono);
-  text-transform: uppercase;
-  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
+  line-height: var(--line-height-body-compact);
+  letter-spacing: var(--letter-spacing-tight);
+  font-family: var(--font-family-primary);
 }
 
-.text-mono-button {
-  font-size: var(--font-size-mono-button);
+.text-caption-bold {
+  font-size: var(--font-size-caption-bold);
   font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-mono-button);
-  letter-spacing: var(--letter-spacing-mono);
-  text-transform: uppercase;
-  font-family:
-    "Space Mono",
-    Courier New,
-    Courier,
-    monospace;
+  line-height: var(--line-height-caption);
+  font-family: var(--font-family-primary);
 }
 
-.text-mono-timestamp {
-  font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-mono-timestamp);
-  letter-spacing: var(--letter-spacing-mono-sm);
-  text-transform: uppercase;
-  font-family:
-    "Space Mono",
-    Courier New,
-    Courier,
-    monospace;
-}
-
-.text-serif-body {
-  font-size: var(--font-size-body-relaxed);
+.text-caption {
+  font-size: var(--font-size-caption);
   font-weight: var(--font-weight-regular);
-  line-height: 1.3;
-  letter-spacing: var(--letter-spacing-tight-subheading);
-  font-family: "Newsreader", Georgia, serif;
+  line-height: var(--line-height-caption);
+  letter-spacing: var(--letter-spacing-tighter);
+  font-family: var(--font-family-primary);
+  color: var(--color-text-secondary);
+}
+
+.text-small {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-small);
+  font-family: var(--font-family-secondary);
+  color: var(--color-text-secondary);
+}
+
+.text-button {
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-button);
+  letter-spacing: var(--letter-spacing-tighter);
+  font-family: var(--font-family-primary);
+}
+
+/* Utility Classes */
+.container {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 var(--space-9);
+}
+
+.section {
+  padding: var(--space-13) 0;
+}
+
+.section-compact {
+  padding: var(--space-12) 0;
+}
+
+.section-hero {
+  padding: var(--space-14) 0;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-3 {
+  gap: var(--space-3);
+}
+
+.gap-4 {
+  gap: var(--space-4);
+}
+
+.gap-5 {
+  gap: var(--space-5);
+}
+
+.gap-6 {
+  gap: var(--space-6);
+}
+
+.gap-7 {
+  gap: var(--space-7);
+}
+
+.gap-8 {
+  gap: var(--space-8);
+}
+
+.gap-9 {
+  gap: var(--space-9);
+}
+
+.mt-3 {
+  margin-top: var(--space-3);
+}
+
+.mt-4 {
+  margin-top: var(--space-4);
+}
+
+.mt-5 {
+  margin-top: var(--space-5);
+}
+
+.mt-6 {
+  margin-top: var(--space-6);
+}
+
+.mt-7 {
+  margin-top: var(--space-7);
+}
+
+.mt-8 {
+  margin-top: var(--space-8);
+}
+
+.mt-9 {
+  margin-top: var(--space-9);
+}
+
+.mt-10 {
+  margin-top: var(--space-10);
+}
+
+.mb-3 {
+  margin-bottom: var(--space-3);
+}
+
+.mb-4 {
+  margin-bottom: var(--space-4);
+}
+
+.mb-5 {
+  margin-bottom: var(--space-5);
+}
+
+.mb-6 {
+  margin-bottom: var(--space-6);
+}
+
+.mb-7 {
+  margin-bottom: var(--space-7);
+}
+
+.mb-8 {
+  margin-bottom: var(--space-8);
+}
+
+.mb-9 {
+  margin-bottom: var(--space-9);
+}
+
+.mb-10 {
+  margin-bottom: var(--space-10);
+}
+
+/* Responsive Classes */
+@media (max-width: 1440px) {
+  .container {
+    max-width: 1200px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .container {
+    max-width: 960px;
+  }
+  
+  .text-display-1 {
+    font-size: var(--font-size-display-2);
+  }
+  
+  .section-hero {
+    padding: var(--space-13) 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    max-width: 100%;
+    padding: 0 var(--space-7);
+  }
+  
+  .text-display-1 {
+    font-size: var(--font-size-heading-1);
+  }
+  
+  .text-display-2 {
+    font-size: var(--font-size-heading-1);
+  }
+  
+  .section {
+    padding: var(--space-12) 0;
+  }
+  
+  .section-hero {
+    padding: var(--space-11) 0;
+  }
+}
+
+/* Image Treatment */
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.img-hero {
+  width: 100%;
+  aspect-ratio: 21/9;
+  object-fit: cover;
+}
+
+.img-card {
+  width: 100%;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  border-radius: var(--radius-card) var(--radius-card) 0 0;
+}
+
+/* Gradient Overlays */
+.gradient-overlay {
+  position: relative;
+}
+
+.gradient-overlay::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 50%;
+  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6));
+  border-radius: 0 0 var(--radius-card) var(--radius-card);
+}
+
+/* Frosted Glass Effect */
+.frosted-glass {
+  background: rgba(241, 244, 247, 0.8);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* Elevation Levels */
+.elevation-1 {
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+}
+
+.elevation-2 {
+  box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
+}
+
+/* Glimmer Loading State */
+.glimmer {
+  background: #979A9F;
+  border-radius: var(--radius-small);
+  animation: glimmer 1000ms steps(2) infinite;
+}
+
+@keyframes glimmer {
+  0% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1.0;
+  }
 }