diff --git a/src/components/AIChatPanel.css b/src/components/AIChatPanel.css
index cfad8fa..569cadf 100644
--- a/src/components/AIChatPanel.css
+++ b/src/components/AIChatPanel.css
@@ -37,6 +37,7 @@
   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;
 }
 
 .header-left {
@@ -114,7 +115,7 @@
   border-radius: var(--radius-small);
   color: var(--color-text-primary);
   font-size: var(--font-size-mono-timestamp);
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   cursor: pointer;
@@ -159,9 +160,9 @@
 .conversation-sidebar h4 {
   margin: 0;
   padding: 12px 16px;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   color: var(--color-text-primary);
@@ -204,10 +205,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   letter-spacing: var(--letter-spacing-normal);
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
 }
 
 .conversation-time {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-muted);
   letter-spacing: var(--letter-spacing-mono-sm);
@@ -262,6 +264,7 @@
   font-size: var(--font-size-body-relaxed);
   line-height: var(--line-height-body-relaxed);
   letter-spacing: var(--letter-spacing-normal);
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
 }
 
 .message.user .message-content {
@@ -320,10 +323,11 @@
   padding: 6px 0;
   font-size: var(--font-size-body-relaxed);
   letter-spacing: var(--letter-spacing-normal);
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
 }
 
 .upload-status {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-muted);
   letter-spacing: var(--letter-spacing-mono-sm);
@@ -352,6 +356,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   letter-spacing: var(--letter-spacing-normal);
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
 }
 
 .context-clear {
@@ -397,7 +402,7 @@
   color: var(--color-text-primary);
   font-size: var(--font-size-body-relaxed);
   resize: none;
-  font-family: inherit;
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
   height: 120px;
   padding-bottom: 50px;
   letter-spacing: var(--letter-spacing-normal);
@@ -464,7 +469,7 @@
   border-radius: var(--radius-small);
   color: var(--color-text-primary);
   font-size: var(--font-size-mono-timestamp);
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   cursor: pointer;
@@ -478,16 +483,16 @@
   background-color: var(--color-jelly-mint);
   color: var(--color-absolute-black);
   border-color: var(--color-jelly-mint);
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
 }
 
 .absolute-btn.send-btn:hover:not(:disabled) {
   background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
+  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
 }
 
 .absolute-btn.send-btn:focus-visible {
diff --git a/src/components/CanvasArea.css b/src/components/CanvasArea.css
index d0709f9..cebe337 100644
--- a/src/components/CanvasArea.css
+++ b/src/components/CanvasArea.css
@@ -52,9 +52,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
 }
@@ -82,9 +82,9 @@
 
 .zoom-display {
   padding: 0 8px;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   opacity: 0.8;
   min-width: 50px;
@@ -94,7 +94,7 @@
 }
 
 .zoom-value {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
 }
 
@@ -124,9 +124,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
 }
@@ -164,7 +164,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  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);
@@ -210,8 +210,8 @@
   width: 100%;
   height: 100%;
   background-image:
-    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+    linear-gradient(rgba(19, 19, 19, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(19, 19, 19, 0.05) 1px, transparent 1px);
   background-size: 25px 25px;
   background-position: center center;
 }
@@ -259,6 +259,7 @@
   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;
 }
 
 .frame-title h4 {
@@ -267,10 +268,11 @@
   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;
 }
 
 .frame-date {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-muted);
   margin-top: 2px;
@@ -302,7 +304,7 @@
   cursor: pointer;
   transition: all 0.15s ease;
   color: var(--color-text-primary);
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
@@ -346,12 +348,13 @@
   color: var(--color-text-primary);
   margin: 0 0 4px 0;
   letter-spacing: var(--letter-spacing-normal);
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
 }
 
 .placeholder-meta {
   display: flex;
   gap: 12px;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-muted);
   letter-spacing: var(--letter-spacing-mono-sm);
@@ -359,7 +362,7 @@
 }
 
 .placeholder-hint {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-muted);
   margin-top: 8px;
@@ -368,7 +371,7 @@
 }
 
 .viewport-info {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-muted);
   margin-top: 4px;
@@ -402,15 +405,15 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 20px;
+  padding: 12px 28px;
   background-color: var(--color-surface-slate);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-feature);
   cursor: pointer;
   transition: all 0.18s ease;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   color: var(--color-text-primary);
@@ -439,9 +442,9 @@
 }
 
 .btn-text {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   white-space: nowrap;
@@ -484,9 +487,9 @@
   border: none;
   cursor: pointer;
   transition: background-color 0.15s;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   color: var(--color-text-primary);
@@ -584,6 +587,7 @@
   font-weight: var(--font-weight-bold);
   color: var(--color-verge-ultraviolet);
   letter-spacing: var(--letter-spacing-normal);
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
 }
 
 .error-message p {
@@ -591,26 +595,27 @@
   font-size: var(--font-size-body-relaxed);
   color: var(--color-text-secondary);
   letter-spacing: var(--letter-spacing-normal);
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
 }
 
 .error-message button {
-  padding: 10px 24px;
+  padding: 12px 28px;
   background-color: var(--color-jelly-mint);
   color: var(--color-absolute-black);
   border: none;
   border-radius: var(--radius-feature);
   cursor: pointer;
   transition: all 0.18s ease;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
 }
 
 .error-message button:hover {
   background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
+  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
 }
 
 .error-message button:focus-visible {
@@ -644,6 +649,7 @@
   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;
 }
 
 .empty-state p {
@@ -651,13 +657,14 @@
   font-size: var(--font-size-body-relaxed);
   color: var(--color-text-secondary);
   letter-spacing: var(--letter-spacing-normal);
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
 }
 
 .empty-state code {
   background-color: var(--color-surface-slate);
   padding: 4px 8px;
   border-radius: var(--radius-small);
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-mono);
@@ -740,7 +747,7 @@
   width: 100%;
   height: 100%;
   border: none;
-  background: var(--color-pure-white);
+  background: var(--color-canvas-white);
   border-radius: 0 0 var(--radius-small) var(--radius-small);
 }
 
@@ -756,7 +763,7 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: var(--color-pure-white);
+  background: var(--color-canvas-white);
   border: 1px solid var(--color-verge-ultraviolet);
   border-radius: 0 0 var(--radius-small) var(--radius-small);
   display: flex;
@@ -803,7 +810,7 @@
 }
 
 .drag-ready-hint p {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-mono);
@@ -851,10 +858,11 @@
   color: var(--color-text-primary);
   margin: 8px 0 4px;
   letter-spacing: var(--letter-spacing-normal);
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
 }
 
 .frame-error-content small {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-muted);
   letter-spacing: var(--letter-spacing-mono-sm);
@@ -919,7 +927,7 @@
 }
 
 .frame-status {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-micro);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
@@ -941,9 +949,9 @@
   padding: 2px 6px;
   background-color: var(--color-surface-slate);
   border-radius: var(--radius-small);
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-micro);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
   letter-spacing: var(--letter-spacing-mono);
   text-transform: uppercase;
   color: var(--color-text-muted);
diff --git a/src/components/ContextModal.css b/src/components/ContextModal.css
index fbd05ce..9d3fa52 100644
--- a/src/components/ContextModal.css
+++ b/src/components/ContextModal.css
@@ -38,6 +38,7 @@
   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;
 }
 
 .context-modal-close {
@@ -84,9 +85,9 @@
 }
 
 .form-group label {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   color: var(--color-text-primary);
@@ -97,7 +98,7 @@
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-small);
   font-size: var(--font-size-body-relaxed);
-  font-family: inherit;
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
   outline: none;
   transition: border-color 0.15s ease;
   background-color: var(--color-surface-slate);
@@ -123,7 +124,7 @@
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-small);
   font-size: var(--font-size-body-relaxed);
-  font-family: inherit;
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
   resize: none;
   outline: none;
   transition: border-color 0.15s ease;
@@ -158,11 +159,11 @@
   background-color: var(--color-surface-slate);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-subtle);
-  padding: 10px 24px;
+  padding: 12px 28px;
   border-radius: var(--radius-feature);
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   cursor: pointer;
@@ -187,11 +188,11 @@
   background-color: var(--color-jelly-mint);
   color: var(--color-absolute-black);
   border: none;
-  padding: 10px 24px;
+  padding: 12px 28px;
   border-radius: var(--radius-feature);
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   cursor: pointer;
@@ -200,7 +201,7 @@
 
 .context-modal-submit:hover {
   background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
+  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
 }
 
 .context-modal-submit:focus-visible {
diff --git a/src/components/SideBar.css b/src/components/SideBar.css
index b1d2d7b..bda0070 100644
--- a/src/components/SideBar.css
+++ b/src/components/SideBar.css
@@ -52,9 +52,9 @@
 }
 
 .menu-label {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   opacity: 0;
@@ -64,7 +64,7 @@
   top: 50%;
   transform: translateY(-50%);
   background-color: var(--color-surface-slate);
-  color: var(--color-hazard-white);
+  color: var(--color-primary-text);
   padding: 10px 16px;
   border-radius: var(--radius-standard);
   border: 1px solid var(--color-border-subtle);
@@ -122,6 +122,7 @@
   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;
 }
 
 .note-modal-close {
@@ -163,11 +164,11 @@
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-small);
   font-size: var(--font-size-body-relaxed);
-  font-family: inherit;
+  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
   resize: none;
   outline: none;
   transition: border-color 0.15s ease;
-  background-color: var(--color-background);
+  background-color: var(--color-surface-slate);
   color: var(--color-text-primary);
   letter-spacing: var(--letter-spacing-normal);
 }
@@ -190,15 +191,15 @@
 }
 
 .note-modal-submit {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  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);
   border: none;
-  padding: 10px 24px;
+  padding: 12px 28px;
   border-radius: var(--radius-feature);
   cursor: pointer;
   transition: all 0.18s ease;
@@ -209,7 +210,7 @@
 
 .note-modal-submit:hover {
   background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
+  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
 }
 
 .note-modal-submit:focus-visible {
@@ -228,11 +229,11 @@
   top: 50%;
   transform: translateY(-50%);
   background-color: var(--color-surface-slate);
-  color: var(--color-hazard-white);
+  color: var(--color-primary-text);
   padding: 12px 16px;
   border-radius: var(--radius-standard);
   border: 1px solid var(--color-border-subtle);
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
@@ -300,6 +301,7 @@
   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;
 }
 
 .resource-modal-close {
@@ -354,9 +356,9 @@
 
 .resource-section h4 {
   margin: 0 0 12px 0;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   color: var(--color-text-primary);
@@ -382,7 +384,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-subtle);
@@ -399,7 +401,7 @@
   padding: 10px 14px;
   background-color: var(--color-surface-slate);
   border-radius: var(--radius-small);
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-subtle);
@@ -420,7 +422,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-subtle);
@@ -428,15 +430,15 @@
 }
 
 .upload-btn {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  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);
   border: none;
-  padding: 10px 24px;
+  padding: 12px 28px;
   border-radius: var(--radius-feature);
   cursor: pointer;
   transition: all 0.18s ease;
@@ -445,7 +447,7 @@
 
 .upload-btn:hover {
   background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
+  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
 }
 
 .upload-btn:focus-visible {
diff --git a/src/components/TopBar.css b/src/components/TopBar.css
index 1c90d42..5bf52f2 100644
--- a/src/components/TopBar.css
+++ b/src/components/TopBar.css
@@ -8,8 +8,9 @@
   align-items: center;
   z-index: 100;
   background-color: var(--color-background);
-  border-bottom: 1px solid var(--color-border-subtle);
-  padding: 0 24px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-standard);
+  padding: 0 8px;
 }
 
 .top-bar-left {
@@ -18,10 +19,10 @@
 }
 
 .verge-wordmark {
-  font-family: 'Manuka', Impact, Helvetica, sans-serif;
+  font-family: 'Anton', Impact, Helvetica, sans-serif;
   font-size: var(--font-size-tertiary-display);
-  font-weight: var(--font-weight-black);
-  color: var(--color-hazard-white);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-primary-text);
   letter-spacing: var(--letter-spacing-tight-hero);
   line-height: var(--line-height-display);
   margin: 0;
@@ -34,10 +35,10 @@
 }
 
 .nav-link {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-hazard-white);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary-text);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
   text-decoration: none;
@@ -61,7 +62,7 @@
 }
 
 .search-icon {
-  color: var(--color-hazard-white);
+  color: var(--color-primary-text);
   font-size: 20px;
   cursor: pointer;
   transition: color 0.15s ease;
@@ -74,15 +75,16 @@
 .chat-session {
   display: flex;
   align-items: center;
+  margin-left: 10px;
 }
 
 .chat-btn {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family: 'Space Mono', Courier New, Courier, monospace;
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
-  padding: 10px 20px;
+  padding: 8px 12px;
   border-radius: var(--radius-feature);
   transition: all 0.18s ease;
   background-color: var(--color-surface-slate);
@@ -93,7 +95,7 @@
 .chat-btn:hover {
   background-color: var(--color-primary-hover);
   color: var(--color-absolute-black);
-  box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
+  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
 }
 
 .chat-btn.active {
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 79b69dd..a6fbd36 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -12,12 +12,12 @@ const TopBar = ({ onToggleChat, isChatVisible }: TopBarProps) => {
       <div className="action-buttons">
         <button className="btn btn-primary">新建项目</button>
         <button className="btn btn-secondary">保存</button>
-        <button className="btn btn-secondary">导出</button>
-        <button className="btn btn-secondary">设置</button>
+        <button className="btn btn-tertiary">导出</button>
+        <button className="btn btn-tertiary">设置</button>
       </div>
       <div className='chat-session'>
         <button 
-          className={`btn btn-secondary chat-btn ${isChatVisible ? 'active' : ''}`} 
+          className={`btn btn-tertiary chat-btn ${isChatVisible ? 'active' : ''}`} 
           onClick={onToggleChat}
           title={isChatVisible ? '隐藏聊天面板' : '显示聊天面板'}
         >
diff --git a/src/index.css b/src/index.css
index 9f35018..fb9d939 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
 :root {
-  font-family: 'PolySans', Helvetica, Arial, sans-serif;
+  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -11,58 +11,58 @@
   /* Primary (Brand Hazards) */
   --color-jelly-mint: #3cffd0;
   --color-verge-ultraviolet: #5200ff;
-  
+
   /* Secondary & Accent */
   --color-console-mint-border: #309875;
   --color-deep-link-blue: #3860be;
   --color-focus-cyan: #1eaedb;
   --color-purple-rule: #3d00bf;
-  
+  --color-dim-gray: #8c8c8c;
+
   /* Surface & Background */
-  --color-canvas-black: #131313;
-  --color-surface-slate: #2d2d2d;
-  --color-image-frame: #313131;
+  --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;
-  
+
   /* Neutrals & Text */
-  --color-primary-text: #ffffff;
-  --color-secondary-text: #949494;
-  --color-muted-text: #e9e9e9;
-  --color-inverted-text: #131313;
-  
+  --color-primary-text: #131313;
+  --color-secondary-text: #6a6a6a;
+  --color-muted-text: #8c8c8c;
+  --color-inverted-text: #ffffff;
+
   /* Semantic & Accent */
   --color-focus-ring: #1eaedb;
-  --color-overlay-black: rgba(0, 0, 0, 0.33);
-  --color-dim-gray: #8c8c8c;
-  
+  --color-overlay-black: rgba(19, 19, 19, 0.1);
+
   /* 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-secondary-text);
-  
+  --color-text-placeholder: var(--color-muted-text);
+
   /* Background Colors */
-  --color-background: var(--color-canvas-black);
-  --color-surface: var(--color-canvas-black);
+  --color-background: var(--color-canvas-white);
+  --color-surface: var(--color-canvas-white);
   --color-secondary-background: var(--color-surface-slate);
-  
+
   /* Border Colors */
-  --color-border-subtle: var(--color-hazard-white);
+  --color-border-subtle: rgba(19, 19, 19, 0.1);
   --color-border-medium: var(--color-jelly-mint);
   --color-border-strong: var(--color-verge-ultraviolet);
-  
+
   /* Link Colors */
-  --color-link-default: var(--color-hazard-white);
+  --color-link-default: var(--color-primary-text);
   --color-link-hover: var(--color-deep-link-blue);
-  --color-focus-ring: var(--color-focus-cyan);
-  
+
   /* Button Colors */
   --color-primary: var(--color-jelly-mint);
-  --color-primary-hover: rgba(255, 255, 255, 0.2);
+  --color-primary-hover: rgba(60, 255, 208, 0.3);
   --color-button-background: var(--color-surface-slate);
-  --color-button-hover: rgba(255, 255, 255, 0.2);
-  
+  --color-button-hover: rgba(19, 19, 19, 0.2);
+
   /* Border Radius */
   --radius-small: 2px;
   --radius-image: 3px;
@@ -73,19 +73,19 @@
   --radius-outlined: 40px;
   --radius-pill: 9999px;
   --radius-circle: 50%;
-  
+
   /* Spacing */
   --spacing-unit: 8px;
-  
+
   /* Letter Spacing */
-  --letter-spacing-tight-hero: 1.07px;
-  --letter-spacing-tight-section: 0.32px;
+  --letter-spacing-tight-hero: 1px;
+  --letter-spacing-tight-section: -0.3px;
   --letter-spacing-tight-subheading: -0.16px;
   --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;
@@ -93,19 +93,19 @@
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-black: 900;
-  
+
   /* Font Sizes */
-  --font-size-hero: 6.69rem; /* 107px */
-  --font-size-secondary-display: 5.63rem; /* 90px */
+  --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: 2.00rem; /* 32px */
-  --font-size-heading-medium: 1.50rem; /* 24px */
-  --font-size-heading-small: 1.25rem; /* 20px */
+  --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: 1.00rem; /* 16px */
-  --font-size-body-relaxed: 1.00rem; /* 16px */
+  --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 */
@@ -114,77 +114,65 @@
   --font-size-meta-nano: 0.63rem; /* 10px */
   --font-size-mono-button: 0.75rem; /* 12px */
   --font-size-mono-timestamp: 0.69rem; /* 11px */
-  
+
   /* Line Heights */
-  --line-height-display: 0.80;
-  --line-height-headline: 1.00;
-  --line-height-heading-wide: 1.10;
-  --line-height-light-capitalized: 1.20;
-  --line-height-all-caps-xl: 1.10;
-  --line-height-body-relaxed: 1.60;
-  --line-height-inline-label: 1.20;
-  --line-height-body-compact: 1.60;
-  --line-height-eyebrow-all-caps: 1.30;
-  --line-height-tag-label: 1.20;
-  --line-height-caption-micro: 1.20;
-  --line-height-meta-nano: 1.40;
-  --line-height-mono-button: 2.00;
-  --line-height-mono-timestamp: 1.20;
+  --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;
 }
 
 /* Font Face Definitions */
-@font-face {
-  font-family: 'Manuka';
-  src: local('Impact'), local('Helvetica');
-  font-weight: 900;
-  font-style: normal;
-}
+@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");
 
 @font-face {
-  font-family: 'PolySans';
-  src: local('Helvetica'), local('Arial');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'PolySans';
-  src: local('Helvetica'), local('Arial');
+  font-family: "Anton";
+  src: url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'PolySans';
-  src: local('Helvetica'), local('Arial');
+  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: 'PolySans';
-  src: local('Helvetica'), local('Arial');
+  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: 'PolySans Mono';
-  src: local('Courier New'), local('Courier');
-  font-weight: 500;
+  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: 'PolySans Mono';
-  src: local('Courier New'), local('Courier');
-  font-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'FK Roman Standard';
-  src: local('Georgia');
+  font-family: "Newsreader";
+  src: url("https://fonts.googleapis.com/css2?family=Newsreader:wght@400&display=swap");
   font-weight: 400;
   font-style: normal;
 }
@@ -201,8 +189,10 @@ body {
   min-height: 100vh;
   background-color: var(--color-background);
   color: var(--color-text-primary);
-  transition: background-color 0.3s ease, color 0.3s ease;
-  font-family: 'PolySans', Helvetica, Arial, sans-serif;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
   font-weight: var(--font-weight-regular);
   letter-spacing: var(--letter-spacing-normal);
 }
@@ -224,7 +214,7 @@ select {
   font-weight: var(--font-weight-regular);
   letter-spacing: var(--letter-spacing-normal);
   border: 1px solid var(--color-border-subtle);
-  background-color: var(--color-background);
+  background-color: var(--color-surface-slate);
   color: var(--color-text-primary);
   border-radius: var(--radius-small);
   padding: 8px 12px;
@@ -268,25 +258,30 @@ select:focus {
 
 /* Button Styles */
 .btn {
-  padding: 10px 24px;
+  padding: 12px 28px;
   border-radius: var(--radius-feature);
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   letter-spacing: var(--letter-spacing-mono);
   text-transform: uppercase;
   transition: all 0.18s ease;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family:
+    "Space Mono",
+    Courier New,
+    Courier,
+    monospace;
 }
 
 .btn-primary {
   background-color: var(--color-jelly-mint);
   color: var(--color-absolute-black);
   border: none;
+  border-radius: var(--radius-feature);
 }
 
 .btn-primary:hover {
   background-color: var(--color-primary-hover);
-  box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
+  box-shadow: 0px 0px 0px 1px var(--color-console-mint-border);
   color: var(--color-absolute-black);
 }
 
@@ -305,23 +300,24 @@ select:focus {
 }
 
 .btn-secondary {
-  background-color: var(--color-surface-slate);
-  color: var(--color-muted-text);
+  background-color: var(--color-primary-text);
+  color: var(--color-hazard-white);
   border: none;
+  border-radius: var(--radius-feature);
 }
 
 .btn-secondary:hover {
-  background-color: var(--color-primary-hover);
-  color: var(--color-absolute-black);
+  background-color: rgba(19, 19, 19, 0.2);
+  color: var(--color-primary-text);
   box-shadow: 0px 0px 0px 1px var(--color-dim-gray);
 }
 
 .btn-tertiary {
   background-color: transparent;
-  color: var(--color-jelly-mint);
-  border: 1px solid var(--color-jelly-mint);
+  color: var(--color-console-mint-border);
+  border: 1px solid var(--color-console-mint-border);
   border-radius: var(--radius-outlined);
-  padding: 10px 20px;
+  padding: 12px 24px;
 }
 
 .btn-tertiary:hover {
@@ -341,6 +337,23 @@ select:focus {
   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;
+}
+
 /* Card Styles */
 .card {
   background-color: var(--color-background);
@@ -357,11 +370,23 @@ select:focus {
 .card-accent {
   background-color: var(--color-jelly-mint);
   color: var(--color-absolute-black);
-  border: none;
+  border: 1px solid var(--color-console-mint-border);
   border-radius: var(--radius-standard);
   padding: 24px;
 }
 
+.card-feature {
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-feature);
+  padding: 32px;
+  transition: all 0.15s ease;
+}
+
+.card-feature:hover {
+  border-color: var(--color-jelly-mint);
+}
+
 /* Link Styles */
 a {
   color: var(--color-link-default);
@@ -371,73 +396,85 @@ a {
 
 a:hover {
   color: var(--color-link-hover);
+  text-decoration: none;
 }
 
 /* Typography Classes */
-.text-manuka {
-  font-family: 'Manuka', Impact, Helvetica, sans-serif;
-  font-weight: var(--font-weight-black);
+.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-polysans {
-  font-family: 'PolySans', Helvetica, Arial, sans-serif;
+.text-space-grotesk {
+  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
 }
 
-.text-polysans-mono {
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+.text-space-mono {
+  font-family:
+    "Space Mono",
+    Courier New,
+    Courier,
+    monospace;
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-mono);
 }
 
-.text-fk-roman {
-  font-family: 'FK Roman Standard', Georgia, serif;
+.text-newsreader {
+  font-family: "Newsreader", Georgia, serif;
 }
 
 /* Utility Classes */
 .text-hero {
   font-size: var(--font-size-hero);
-  font-weight: var(--font-weight-black);
+  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-black);
+  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-black);
+  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-regular);
+  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 {
@@ -446,26 +483,30 @@ a:hover {
   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-regular);
+  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);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-body-relaxed);
+  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
 }
 
 .text-inline-label {
@@ -473,12 +514,14 @@ a:hover {
   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;
 }
 
 .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 {
@@ -487,6 +530,7 @@ a:hover {
   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 {
@@ -495,6 +539,7 @@ a:hover {
   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 {
@@ -503,6 +548,7 @@ a:hover {
   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 {
@@ -511,22 +557,39 @@ a:hover {
   line-height: var(--line-height-meta-nano);
   letter-spacing: var(--letter-spacing-mono);
   text-transform: uppercase;
+  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
 }
 
 .text-mono-button {
   font-size: var(--font-size-mono-button);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
   line-height: var(--line-height-mono-button);
   letter-spacing: var(--letter-spacing-mono);
   text-transform: uppercase;
-  font-family: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family:
+    "Space Mono",
+    Courier New,
+    Courier,
+    monospace;
 }
 
 .text-mono-timestamp {
   font-size: var(--font-size-mono-timestamp);
-  font-weight: var(--font-weight-medium);
+  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: 'PolySans Mono', Courier New, Courier, monospace;
+  font-family:
+    "Space Mono",
+    Courier New,
+    Courier,
+    monospace;
+}
+
+.text-serif-body {
+  font-size: var(--font-size-body-relaxed);
+  font-weight: var(--font-weight-regular);
+  line-height: 1.3;
+  letter-spacing: var(--letter-spacing-tight-subheading);
+  font-family: "Newsreader", Georgia, serif;
 }