diff --git a/packages/graphiql-plugin-collections/src/index.css b/packages/graphiql-plugin-collections/src/index.css
index c6b31eeff79..c149029061b 100644
--- a/packages/graphiql-plugin-collections/src/index.css
+++ b/packages/graphiql-plugin-collections/src/index.css
@@ -12,7 +12,7 @@
 
 .graphiql-collections-status {
   padding: var(--px-4) var(--px-12);
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--accent-green));
 }
 
@@ -29,7 +29,7 @@
 .graphiql-collections-loading {
   padding: var(--px-8) var(--px-12);
   color: oklch(var(--fg-subtle));
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
 }
 
 .graphiql-collections-toolbar {
@@ -55,7 +55,7 @@
   padding: var(--px-4) var(--px-8);
   border-radius: var(--border-radius-4);
   color: oklch(var(--fg-subtle));
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
 }
 
 .graphiql-collections-action:hover {
@@ -126,7 +126,7 @@
 }
 
 .graphiql-collection-badge {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   background: oklch(var(--bg-subtle));
   padding: 0 var(--px-6);
@@ -134,7 +134,7 @@
 }
 
 .graphiql-collection-chevron {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   flex-shrink: 0;
 }
@@ -199,7 +199,7 @@
 
 .graphiql-collection-empty-hint {
   padding: var(--px-6) var(--px-12) var(--px-8) var(--px-20);
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   font-style: italic;
 }
@@ -264,7 +264,7 @@
 }
 
 .graphiql-collection-item-description {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   overflow: hidden;
   text-overflow: ellipsis;
@@ -294,7 +294,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--px-4);
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
 }
 
@@ -349,14 +349,14 @@
 }
 
 .graphiql-import-export-mode legend {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   margin-bottom: var(--px-4);
 }
 
 .graphiql-import-export-error {
   color: oklch(var(--accent-red));
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
 }
 
 /* Conflict dialog */
@@ -380,7 +380,7 @@
 
 .graphiql-conflict-review-hint-label {
   margin: 0;
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
 }
 
@@ -417,13 +417,13 @@
 }
 
 .graphiql-conflict-review-collection {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   white-space: nowrap;
 }
 
 .graphiql-conflict-review-hint {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   white-space: nowrap;
 }
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/argument.css b/packages/graphiql-plugin-doc-explorer/src/components/argument.css
index 7c80a917428..46992cba833 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/argument.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/argument.css
@@ -17,6 +17,6 @@
 }
 
 .graphiql-doc-explorer-argument-deprecation-label {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   font-weight: var(--font-weight-medium);
 }
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.css b/packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.css
index 32fe94a6d39..858012fc4ab 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.css
@@ -7,6 +7,6 @@
 }
 
 .graphiql-doc-explorer-deprecation-label {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   font-weight: var(--font-weight-medium);
 }
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/field-card.css b/packages/graphiql-plugin-doc-explorer/src/components/field-card.css
index 0129d1322e2..1764a2bff86 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/field-card.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/field-card.css
@@ -12,26 +12,26 @@
 
 .graphiql-doc-explorer-field-card-name {
   font-family: var(--font-family-mono);
-  font-size: 14px;
+  font-size: var(--font-size-mono);
   font-weight: 600;
   color: oklch(var(--accent-green-light));
 }
 
 .graphiql-doc-explorer-field-card-colon {
   font-family: var(--font-family-mono);
-  font-size: 14px;
+  font-size: var(--font-size-mono);
   color: oklch(var(--fg-muted));
 }
 
 .graphiql-doc-explorer-field-card-type {
   font-family: var(--font-family-mono);
-  font-size: 14px;
+  font-size: var(--font-size-mono);
   color: oklch(var(--fg-default));
 }
 
 .graphiql-doc-explorer-field-card-description {
   margin: 0 0 var(--px-6);
-  font-size: 12px;
+  font-size: var(--font-size-mono);
   color: oklch(var(--fg-muted));
   line-height: 17px;
 }
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/fields-list.css b/packages/graphiql-plugin-doc-explorer/src/components/fields-list.css
index f6ce5637b82..161b99d5c02 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/fields-list.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/fields-list.css
@@ -16,7 +16,7 @@
   border: none;
   cursor: pointer;
   color: oklch(var(--fg-subtle));
-  font-size: 10px;
+  font-size: var(--font-size-eyebrow);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -93,7 +93,7 @@
   align-items: baseline;
   gap: var(--px-6);
   font-family: var(--font-family-mono);
-  font-size: 12px;
+  font-size: var(--font-size-mono);
 }
 
 .graphiql-doc-explorer-field-row-name {
@@ -112,7 +112,7 @@
 
 /* Optional description */
 .graphiql-doc-explorer-field-row-desc {
-  font-size: 11px;
+  font-size: var(--font-size-small);
   color: oklch(var(--fg-subtle));
   line-height: 15px;
 }
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/search.css b/packages/graphiql-plugin-doc-explorer/src/components/search.css
index f2b2397b1a6..99539159602 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/search.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/search.css
@@ -116,7 +116,7 @@
 
 .graphiql-doc-explorer-search-divider {
   color: oklch(var(--fg-muted));
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   font-weight: var(--font-weight-medium);
   margin-top: var(--px-8);
   padding: var(--px-8) var(--px-12);
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/section.css b/packages/graphiql-plugin-doc-explorer/src/components/section.css
index 3cc72bb874a..88bf43fbae3 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/section.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/section.css
@@ -1,7 +1,7 @@
 .graphiql-doc-explorer-section-title {
   align-items: center;
   display: flex;
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   font-weight: var(--font-weight-medium);
   line-height: 1;
 
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/type-card.css b/packages/graphiql-plugin-doc-explorer/src/components/type-card.css
index fb491e401ef..a0b60235023 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/type-card.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/type-card.css
@@ -15,7 +15,7 @@
   background: oklch(var(--accent-blue) / 0.12);
   color: oklch(var(--accent-blue));
   font-family: var(--font-family-mono);
-  font-size: 10px;
+  font-size: var(--font-size-eyebrow);
   font-weight: 600;
   border-radius: var(--radius-sm);
   text-transform: uppercase;
@@ -25,7 +25,7 @@
 
 .graphiql-doc-explorer-type-card-name {
   font-family: var(--font-family-mono);
-  font-size: 14px;
+  font-size: var(--font-size-mono);
   font-weight: 600;
   color: oklch(var(--fg-strong));
   overflow-x: hidden;
@@ -35,7 +35,7 @@
 
 .graphiql-doc-explorer-type-card-description {
   margin: 0 0 var(--px-6);
-  font-size: 12px;
+  font-size: var(--font-size-mono);
   color: oklch(var(--fg-muted));
   line-height: 17px;
 }
@@ -47,7 +47,7 @@
   align-items: center;
   gap: var(--px-6);
   margin-top: var(--px-6);
-  font-size: 10.5px;
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
 }
 
diff --git a/packages/graphiql-plugin-history/src/style.css b/packages/graphiql-plugin-history/src/style.css
index 4e468244bbc..94455701f02 100644
--- a/packages/graphiql-plugin-history/src/style.css
+++ b/packages/graphiql-plugin-history/src/style.css
@@ -16,7 +16,7 @@
 .graphiql-history-empty {
   padding: var(--px-8) var(--px-12);
   color: oklch(var(--fg-subtle));
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
 }
 
 .graphiql-history-item {
diff --git a/packages/graphiql-react/src/components/method-pill/index.css b/packages/graphiql-react/src/components/method-pill/index.css
index 2cc06618b9d..e5ca2ee51ed 100644
--- a/packages/graphiql-react/src/components/method-pill/index.css
+++ b/packages/graphiql-react/src/components/method-pill/index.css
@@ -5,7 +5,7 @@
   padding: 1px 5px;
   border-radius: var(--radius-sm);
   font-family: var(--font-family-mono);
-  font-size: 9px;
+  font-size: var(--font-size-eyebrow);
   font-weight: 700;
   letter-spacing: 0.04em;
   line-height: 1.4;
diff --git a/packages/graphiql-react/src/components/panel-header/index.css b/packages/graphiql-react/src/components/panel-header/index.css
index da72c8e77bd..5209bd87b4f 100644
--- a/packages/graphiql-react/src/components/panel-header/index.css
+++ b/packages/graphiql-react/src/components/panel-header/index.css
@@ -17,7 +17,7 @@
   margin: 0;
   color: oklch(var(--fg-strong));
   font-family: var(--font-family);
-  font-size: 12px;
+  font-size: var(--font-size-mono);
   font-weight: 600;
   line-height: 1.3;
 }
diff --git a/packages/graphiql-react/src/components/response-header/index.css b/packages/graphiql-react/src/components/response-header/index.css
index fa1eb979ca4..ce20b1d70ae 100644
--- a/packages/graphiql-react/src/components/response-header/index.css
+++ b/packages/graphiql-react/src/components/response-header/index.css
@@ -14,7 +14,7 @@
   align-items: center;
   gap: var(--px-6);
   font-family: var(--font-family-mono);
-  font-size: 11.5px;
+  font-size: var(--font-size-mono);
   line-height: 1;
 }
 
@@ -47,7 +47,7 @@
 
 .graphiql-response-meta {
   font-family: var(--font-family-mono);
-  font-size: 11.5px;
+  font-size: var(--font-size-mono);
   color: oklch(var(--fg-muted));
   line-height: 1;
 }
@@ -118,7 +118,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--px-6);
-  font-size: 11.5px;
+  font-size: var(--font-size-small);
   line-height: 1;
   color: oklch(var(--fg-default));
 }
diff --git a/packages/graphiql-react/src/components/var-headers-strip/index.css b/packages/graphiql-react/src/components/var-headers-strip/index.css
index f8f33495ce3..3b50e8f090a 100644
--- a/packages/graphiql-react/src/components/var-headers-strip/index.css
+++ b/packages/graphiql-react/src/components/var-headers-strip/index.css
@@ -16,7 +16,7 @@
 
 .graphiql-var-hint {
   margin-left: auto;
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   white-space: nowrap;
 }
diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
index 1032d81e967..2bfdd430818 100644
--- a/packages/graphiql-react/src/style/root.css
+++ b/packages/graphiql-react/src/style/root.css
@@ -35,7 +35,6 @@
   /* Font */
   --font-family: 'Roboto', sans-serif;
   --font-family-mono: 'Fira Code', monospace;
-  --font-size-hint: calc(12rem / 16);
   --font-size-inline-code: calc(13rem / 16);
   --font-size-body: calc(15rem / 16);
   --font-size-h4: calc(18rem / 16);