diff --git a/packages/graphiql-react/src/editor/style/auto-insertion.css b/packages/graphiql-react/src/editor/style/auto-insertion.css
index 9ce2ddb9757..bb988cbfc3e 100644
--- a/packages/graphiql-react/src/editor/style/auto-insertion.css
+++ b/packages/graphiql-react/src/editor/style/auto-insertion.css
@@ -13,6 +13,6 @@
 
   15%,
   85% {
-    background-color: hsla(var(--color-orche), 0.07);
+    background-color: hsla(var(--color-warning), 0.07);
   }
 }
diff --git a/packages/graphiql-react/src/editor/style/codemirror.css b/packages/graphiql-react/src/editor/style/codemirror.css
index 5e37b0261af..4f8c36da453 100644
--- a/packages/graphiql-react/src/editor/style/codemirror.css
+++ b/packages/graphiql-react/src/editor/style/codemirror.css
@@ -39,11 +39,11 @@
 
   /* OperationType, `fragment`, `on` */
   & .cm-keyword {
-    color: hsl(var(--color-pink));
+    color: hsl(var(--color-primary));
   }
   /* Name (OperationDefinition), FragmentName */
   & .cm-def {
-    color: hsl(var(--color-teal));
+    color: hsl(var(--color-tertiary));
   }
   /* Punctuator (except `$` and `@`) */
   & .cm-punctuation {
@@ -51,43 +51,43 @@
   }
   /* Variable */
   & .cm-variable {
-    color: hsl(var(--color-purple));
+    color: hsl(var(--color-secondary));
   }
   /* NamedType */
   & .cm-atom {
-    color: hsl(var(--color-teal));
+    color: hsl(var(--color-tertiary));
   }
   /* IntValue, FloatValue */
   & .cm-number {
-    color: hsl(var(--color-green));
+    color: hsl(var(--color-success));
   }
   /* StringValue */
   & .cm-string {
-    color: hsl(var(--color-orche));
+    color: hsl(var(--color-warning));
   }
   /* BooleanValue */
   & .cm-builtin {
-    color: hsl(var(--color-green));
+    color: hsl(var(--color-success));
   }
   /* EnumValue */
   & .cm-string-2 {
-    color: hsl(var(--color-purple));
+    color: hsl(var(--color-secondary));
   }
   /* Name (ObjectField, Argument) */
   & .cm-attribute {
-    color: hsl(var(--color-blue));
+    color: hsl(var(--color-info));
   }
   /* Name (Directive) */
   & .cm-meta {
-    color: hsl(var(--color-teal));
+    color: hsl(var(--color-tertiary));
   }
   /* Name (Alias, Field without Alias) */
   & .cm-property {
-    color: hsl(var(--color-blue));
+    color: hsl(var(--color-info));
   }
   /* Name (Field with Alias) */
   & .cm-qualifier {
-    color: hsl(var(--color-purple));
+    color: hsl(var(--color-secondary));
   }
   /* Comment */
   & .cm-comment {
@@ -99,7 +99,7 @@
   }
   /* Invalid characters */
   & .cm-invalidchar {
-    color: hsl(var(--color-red));
+    color: hsl(var(--color-error));
   }
 
   /* Cursor */
@@ -159,12 +159,12 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   padding: var(--px-4);
 }
 .CodeMirror-dialog input:focus {
-  outline: hsl(var(--color-pink)) solid 2px;
+  outline: hsl(var(--color-primary)) solid 2px;
 }
 
 /* Set the highlight color for search results */
 .cm-searching {
-  background-color: hsla(var(--color-orche), 0.07);
+  background-color: hsla(var(--color-warning), 0.07);
   /**
    * When cycling through search results, CodeMirror overlays the current 
    * selection with another element that has the .CodeMirror-selected class
diff --git a/packages/graphiql-react/src/editor/style/fold.css b/packages/graphiql-react/src/editor/style/fold.css
index 6dfbae43669..a9815e7c2a0 100644
--- a/packages/graphiql-react/src/editor/style/fold.css
+++ b/packages/graphiql-react/src/editor/style/fold.css
@@ -5,7 +5,7 @@
 }
 
 .CodeMirror-foldmarker {
-  background-color: hsl(var(--color-blue));
+  background-color: hsl(var(--color-info));
   border-radius: var(--border-radius-4);
   color: hsl(var(--color-base));
   font-family: inherit;
diff --git a/packages/graphiql-react/src/editor/style/hint.css b/packages/graphiql-react/src/editor/style/hint.css
index 6017d5d0766..27be02a3cb2 100644
--- a/packages/graphiql-react/src/editor/style/hint.css
+++ b/packages/graphiql-react/src/editor/style/hint.css
@@ -29,8 +29,8 @@
   }
 }
 li.CodeMirror-hint-active {
-  background: hsla(var(--color-pink), 0.1);
-  color: hsl(var(--color-pink));
+  background: hsla(var(--color-primary), 0.1);
+  color: hsl(var(--color-primary));
 }
 
 /* Sidebar with additional information */
diff --git a/packages/graphiql-react/src/editor/style/lint.css b/packages/graphiql-react/src/editor/style/lint.css
index 652470cd6ea..3ad987355f4 100644
--- a/packages/graphiql-react/src/editor/style/lint.css
+++ b/packages/graphiql-react/src/editor/style/lint.css
@@ -12,60 +12,60 @@
   background-position: 0 95%;
 }
 .cm-s-graphiql .CodeMirror-lint-mark-error {
-  color: hsl(var(--color-red));
+  color: hsl(var(--color-error));
 }
 .CodeMirror-lint-mark-error {
   background-image: linear-gradient(
       45deg,
       transparent 65%,
-      hsl(var(--color-red)) 80%,
+      hsl(var(--color-error)) 80%,
       transparent 90%
     ),
     linear-gradient(
       135deg,
       transparent 5%,
-      hsl(var(--color-red)) 15%,
+      hsl(var(--color-error)) 15%,
       transparent 25%
     ),
     linear-gradient(
       135deg,
       transparent 45%,
-      hsl(var(--color-red)) 55%,
+      hsl(var(--color-error)) 55%,
       transparent 65%
     ),
     linear-gradient(
       45deg,
       transparent 25%,
-      hsl(var(--color-red)) 35%,
+      hsl(var(--color-error)) 35%,
       transparent 50%
     );
 }
 .cm-s-graphiql .CodeMirror-lint-mark-warning {
-  color: hsl(var(--color-orche));
+  color: hsl(var(--color-warning));
 }
 .CodeMirror-lint-mark-warning {
   background-image: linear-gradient(
       45deg,
       transparent 65%,
-      hsl(var(--color-orche)) 80%,
+      hsl(var(--color-warning)) 80%,
       transparent 90%
     ),
     linear-gradient(
       135deg,
       transparent 5%,
-      hsl(var(--color-orche)) 15%,
+      hsl(var(--color-warning)) 15%,
       transparent 25%
     ),
     linear-gradient(
       135deg,
       transparent 45%,
-      hsl(var(--color-orche)) 55%,
+      hsl(var(--color-warning)) 55%,
       transparent 65%
     ),
     linear-gradient(
       45deg,
       transparent 25%,
-      hsl(var(--color-orche)) 35%,
+      hsl(var(--color-warning)) 35%,
       transparent 50%
     );
 }
@@ -88,8 +88,8 @@
   padding: 0;
 }
 .CodeMirror-lint-message-error {
-  color: hsl(var(--color-red));
+  color: hsl(var(--color-error));
 }
 .CodeMirror-lint-message-warning {
-  color: hsl(var(--color-orche));
+  color: hsl(var(--color-warning));
 }
diff --git a/packages/graphiql-react/src/explorer/components/argument.css b/packages/graphiql-react/src/explorer/components/argument.css
index e0dc9a3cc66..fc98985830f 100644
--- a/packages/graphiql-react/src/explorer/components/argument.css
+++ b/packages/graphiql-react/src/explorer/components/argument.css
@@ -5,14 +5,14 @@
 }
 
 .graphiql-doc-explorer-argument-name {
-  color: hsl(var(--color-purple));
+  color: hsl(var(--color-secondary));
 }
 
 .graphiql-doc-explorer-argument-deprecation {
-  background-color: hsla(var(--color-orche), 0.07);
-  border: 1px solid hsl(var(--color-orche));
+  background-color: hsla(var(--color-warning), 0.07);
+  border: 1px solid hsl(var(--color-warning));
   border-radius: var(--border-radius-4);
-  color: hsl(var(--color-orche));
+  color: hsl(var(--color-warning));
   padding: var(--px-8);
 }
 
diff --git a/packages/graphiql-react/src/explorer/components/default-value.css b/packages/graphiql-react/src/explorer/components/default-value.css
index f8e34cf2a17..59c2dcf2454 100644
--- a/packages/graphiql-react/src/explorer/components/default-value.css
+++ b/packages/graphiql-react/src/explorer/components/default-value.css
@@ -1,3 +1,3 @@
 .graphiql-doc-explorer-default-value {
-  color: hsl(var(--color-green));
+  color: hsl(var(--color-success));
 }
diff --git a/packages/graphiql-react/src/explorer/components/deprecation-reason.css b/packages/graphiql-react/src/explorer/components/deprecation-reason.css
index 677c403cd9c..a78bcaeab80 100644
--- a/packages/graphiql-react/src/explorer/components/deprecation-reason.css
+++ b/packages/graphiql-react/src/explorer/components/deprecation-reason.css
@@ -1,8 +1,8 @@
 .graphiql-doc-explorer-deprecation {
-  background-color: hsla(var(--color-orche), 0.07);
-  border: 1px solid hsl(var(--color-orche));
+  background-color: hsla(var(--color-warning), 0.07);
+  border: 1px solid hsl(var(--color-warning));
   border-radius: var(--px-4);
-  color: hsl(var(--color-orche));
+  color: hsl(var(--color-warning));
   padding: var(--px-8);
 }
 
diff --git a/packages/graphiql-react/src/explorer/components/directive.css b/packages/graphiql-react/src/explorer/components/directive.css
index 5b5e5521cfb..17783cac86b 100644
--- a/packages/graphiql-react/src/explorer/components/directive.css
+++ b/packages/graphiql-react/src/explorer/components/directive.css
@@ -1,3 +1,3 @@
 .graphiql-doc-explorer-directive {
-  color: hsl(var(--color-purple));
+  color: hsl(var(--color-secondary));
 }
diff --git a/packages/graphiql-react/src/explorer/components/doc-explorer.css b/packages/graphiql-react/src/explorer/components/doc-explorer.css
index a4e87ba279e..bc652826f08 100644
--- a/packages/graphiql-react/src/explorer/components/doc-explorer.css
+++ b/packages/graphiql-react/src/explorer/components/doc-explorer.css
@@ -84,9 +84,9 @@ a.graphiql-doc-explorer-back {
 
 /* Error message */
 .graphiql-doc-explorer-error {
-  background-color: hsla(var(--color-red), 0.15);
-  border: 1px solid hsl(var(--color-red));
+  background-color: hsla(var(--color-error), 0.15);
+  border: 1px solid hsl(var(--color-error));
   border-radius: var(--border-radius-8);
-  color: hsl(var(--color-red));
+  color: hsl(var(--color-error));
   padding: var(--px-8) var(--px-12);
 }
diff --git a/packages/graphiql-react/src/explorer/components/field-link.css b/packages/graphiql-react/src/explorer/components/field-link.css
index c32763bcf22..ff377b0902b 100644
--- a/packages/graphiql-react/src/explorer/components/field-link.css
+++ b/packages/graphiql-react/src/explorer/components/field-link.css
@@ -1,5 +1,5 @@
 a.graphiql-doc-explorer-field-name {
-  color: hsl(var(--color-blue));
+  color: hsl(var(--color-info));
   text-decoration: none;
 
   &:hover {
@@ -7,6 +7,6 @@ a.graphiql-doc-explorer-field-name {
   }
 
   &:focus {
-    outline: hsl(var(--color-blue)) auto 1px;
+    outline: hsl(var(--color-info)) auto 1px;
   }
 }
diff --git a/packages/graphiql-react/src/explorer/components/schema-documentation.css b/packages/graphiql-react/src/explorer/components/schema-documentation.css
index a80fb212bcc..c4e690b4be0 100644
--- a/packages/graphiql-react/src/explorer/components/schema-documentation.css
+++ b/packages/graphiql-react/src/explorer/components/schema-documentation.css
@@ -1,3 +1,3 @@
 .graphiql-doc-explorer-root-type {
-  color: hsl(var(--color-blue));
+  color: hsl(var(--color-info));
 }
diff --git a/packages/graphiql-react/src/explorer/components/search.css b/packages/graphiql-react/src/explorer/components/search.css
index ae10b2fc894..70d87b78e63 100644
--- a/packages/graphiql-react/src/explorer/components/search.css
+++ b/packages/graphiql-react/src/explorer/components/search.css
@@ -82,15 +82,15 @@
 }
 
 .graphiql-doc-explorer-search-type {
-  color: hsl(var(--color-blue));
+  color: hsl(var(--color-info));
 }
 
 .graphiql-doc-explorer-search-field {
-  color: hsl(var(--color-orche));
+  color: hsl(var(--color-warning));
 }
 
 .graphiql-doc-explorer-search-argument {
-  color: hsl(var(--color-purple));
+  color: hsl(var(--color-secondary));
 }
 
 .graphiql-doc-explorer-search-divider {
diff --git a/packages/graphiql-react/src/explorer/components/type-documentation.css b/packages/graphiql-react/src/explorer/components/type-documentation.css
index 7f900f4e3aa..7f65c236ba5 100644
--- a/packages/graphiql-react/src/explorer/components/type-documentation.css
+++ b/packages/graphiql-react/src/explorer/components/type-documentation.css
@@ -7,5 +7,5 @@
 }
 
 .graphiql-doc-explorer-enum-value {
-  color: hsl(var(--color-blue));
+  color: hsl(var(--color-info));
 }
diff --git a/packages/graphiql-react/src/explorer/components/type-link.css b/packages/graphiql-react/src/explorer/components/type-link.css
index e534bb57003..afd2048462d 100644
--- a/packages/graphiql-react/src/explorer/components/type-link.css
+++ b/packages/graphiql-react/src/explorer/components/type-link.css
@@ -1,5 +1,5 @@
 a.graphiql-doc-explorer-type-name {
-  color: hsl(var(--color-orche));
+  color: hsl(var(--color-warning));
   text-decoration: none;
 
   &:hover {
@@ -7,6 +7,6 @@ a.graphiql-doc-explorer-type-name {
   }
 
   &:focus {
-    outline: hsl(var(--color-orche)) auto 1px;
+    outline: hsl(var(--color-warning)) auto 1px;
   }
 }
diff --git a/packages/graphiql-react/src/history/style.css b/packages/graphiql-react/src/history/style.css
index 3e7c989ee82..0e52715ced8 100644
--- a/packages/graphiql-react/src/history/style.css
+++ b/packages/graphiql-react/src/history/style.css
@@ -27,7 +27,7 @@
   }
 
   &.editable {
-    background-color: hsla(var(--color-pink), 0.1);
+    background-color: hsla(var(--color-primary), 0.1);
 
     & > input {
       background: transparent;
@@ -44,15 +44,15 @@
     }
 
     & > button {
-      color: hsl(var(--color-pink));
+      color: hsl(var(--color-primary));
       padding: 0 var(--px-10);
 
       &:active {
-        background-color: hsla(var(--color-pink), 0.15);
+        background-color: hsla(var(--color-primary), 0.15);
       }
 
       &:focus {
-        outline: hsl(var(--color-pink)) auto 1px;
+        outline: hsl(var(--color-primary)) auto 1px;
       }
 
       & > svg {
diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
index c406b4b2b1f..8b439406779 100644
--- a/packages/graphiql-react/src/style/root.css
+++ b/packages/graphiql-react/src/style/root.css
@@ -3,13 +3,13 @@
 .CodeMirror-lint-tooltip,
 reach-portal {
   /* Colors */
-  --color-pink: 320, 95%, 43%;
-  --color-purple: 242, 51%, 61%;
-  --color-blue: 208, 100%, 46%;
-  --color-orche: 36, 100%, 41%;
-  --color-red: 13, 93%, 58%;
-  --color-green: 158, 60%, 42%;
-  --color-teal: 188, 100%, 36%;
+  --color-primary: 320, 95%, 43%;
+  --color-secondary: 242, 51%, 61%;
+  --color-tertiary: 188, 100%, 36%;
+  --color-info: 208, 100%, 46%;
+  --color-success: 158, 60%, 42%;
+  --color-warning: 36, 100%, 41%;
+  --color-error: 13, 93%, 58%;
   --color-neutral: 219, 28%, 32%;
   --color-base: 219, 28%, 100%;
 
@@ -59,10 +59,13 @@ reach-portal {
   body:not(.graphiql-light) .CodeMirror-info,
   body:not(.graphiql-light) .CodeMirror-lint-tooltip,
   body:not(.graphiql-light) reach-portal {
-    --color-pink: 338, 100%, 67%;
-    --color-purple: 243, 100%, 77%;
-    --color-blue: 208, 100%, 72%;
-    --color-orche: 30, 100%, 80%;
+    --color-primary: 338, 100%, 67%;
+    --color-secondary: 243, 100%, 77%;
+    --color-tertiary: 188, 100%, 44%;
+    --color-info: 208, 100%, 72%;
+    --color-success: 158, 100%, 42%;
+    --color-warning: 30, 100%, 80%;
+    --color-error: 13, 100%, 58%;
     --color-neutral: 219, 29%, 78%;
     --color-base: 219, 29%, 18%;
   }
@@ -72,10 +75,13 @@ body.graphiql-dark .graphiql-container,
 body.graphiql-dark .CodeMirror-info,
 body.graphiql-dark .CodeMirror-lint-tooltip,
 body.graphiql-dark reach-portal {
-  --color-pink: 338, 100%, 67%;
-  --color-purple: 243, 100%, 77%;
-  --color-blue: 208, 100%, 72%;
-  --color-orche: 30, 100%, 80%;
+  --color-primary: 338, 100%, 67%;
+  --color-secondary: 243, 100%, 77%;
+  --color-tertiary: 188, 100%, 44%;
+  --color-info: 208, 100%, 72%;
+  --color-success: 158, 100%, 42%;
+  --color-warning: 30, 100%, 80%;
+  --color-error: 13, 100%, 58%;
   --color-neutral: 219, 29%, 78%;
   --color-base: 219, 29%, 18%;
 }
@@ -104,10 +110,10 @@ reach-portal {
   }
 
   & a {
-    color: hsl(var(--color-pink));
+    color: hsl(var(--color-primary));
 
     &:focus {
-      outline: hsl(var(--color-pink)) auto 1px;
+      outline: hsl(var(--color-primary)) auto 1px;
     }
   }
 }
diff --git a/packages/graphiql-react/src/toolbar/button.css b/packages/graphiql-react/src/toolbar/button.css
index a4d2d89c23b..44fb55d3e96 100644
--- a/packages/graphiql-react/src/toolbar/button.css
+++ b/packages/graphiql-react/src/toolbar/button.css
@@ -4,7 +4,7 @@ button.graphiql-toolbar-button {
   width: var(--toolbar-width);
 
   &.error {
-    background: hsla(var(--color-red), 0.15);
+    background: hsla(var(--color-error), 0.15);
   }
 
   & > svg {
diff --git a/packages/graphiql-react/src/toolbar/execute.css b/packages/graphiql-react/src/toolbar/execute.css
index b16627c6fc2..a954d4c42a4 100644
--- a/packages/graphiql-react/src/toolbar/execute.css
+++ b/packages/graphiql-react/src/toolbar/execute.css
@@ -3,7 +3,7 @@
 }
 
 .graphiql-execute-button {
-  background-color: hsl(var(--color-pink));
+  background-color: hsl(var(--color-primary));
   border: none;
   border-radius: var(--border-radius-8);
   cursor: pointer;
@@ -12,11 +12,11 @@
   width: var(--toolbar-width);
 
   &:active {
-    background-color: hsla(var(--color-pink), 0.8);
+    background-color: hsla(var(--color-primary), 0.8);
   }
 
   &:focus {
-    outline: hsla(var(--color-pink), 0.8) auto 1px;
+    outline: hsla(var(--color-primary), 0.8) auto 1px;
   }
 
   & > svg {
diff --git a/packages/graphiql-react/src/ui/button.css b/packages/graphiql-react/src/ui/button.css
index 3d4122bb6ee..40f99852f4a 100644
--- a/packages/graphiql-react/src/ui/button.css
+++ b/packages/graphiql-react/src/ui/button.css
@@ -30,9 +30,9 @@ button.graphiql-button {
   }
 
   &.graphiql-button-success {
-    background-color: hsla(var(--color-green), 0.15);
+    background-color: hsla(var(--color-success), 0.15);
   }
   &.graphiql-button-error {
-    background-color: hsla(var(--color-red), 0.15);
+    background-color: hsla(var(--color-error), 0.15);
   }
 }
diff --git a/packages/graphiql-react/src/ui/markdown.css b/packages/graphiql-react/src/ui/markdown.css
index f1af2b6d9d5..cc158ee5b5e 100644
--- a/packages/graphiql-react/src/ui/markdown.css
+++ b/packages/graphiql-react/src/ui/markdown.css
@@ -72,7 +72,7 @@
 .CodeMirror-hint-information-description,
 .CodeMirror-info .info-description {
   & a {
-    color: hsl(var(--color-pink));
+    color: hsl(var(--color-primary));
     text-decoration: none;
 
     &:hover {
@@ -99,17 +99,17 @@
 .CodeMirror-hint-information-deprecation-reason,
 .CodeMirror-info .info-deprecation {
   & a {
-    color: hsl(var(--color-orche));
+    color: hsl(var(--color-warning));
     text-decoration: underline;
   }
 
   & blockquote {
-    border-left: 1.5px solid hsl(var(--color-orche));
+    border-left: 1.5px solid hsl(var(--color-warning));
   }
 
   & code,
   & pre {
-    background-color: hsla(var(--color-orche), 0.15);
+    background-color: hsla(var(--color-warning), 0.15);
   }
 
   & > * {
@@ -129,10 +129,10 @@
 
 .CodeMirror-hint-information-deprecation,
 .CodeMirror-info .info-deprecation {
-  background-color: hsla(var(--color-orche), 0.07);
-  border: 1px solid hsl(var(--color-orche));
+  background-color: hsla(var(--color-warning), 0.07);
+  border: 1px solid hsl(var(--color-warning));
   border-radius: var(--border-radius-4);
-  color: hsl(var(--color-orche));
+  color: hsl(var(--color-warning));
   margin-top: var(--px-12);
   padding: var(--px-6) var(--px-8);
 }