diff --git a/assets/css/index.css b/assets/css/index.css
index ddfacb6699..aadd48cb6b 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -40,13 +40,20 @@ section.prose {
 }
 
 .prose pre {
-  @apply bg-slate-900 rounded-lg;
+  @apply bg-stone-50 rounded-lg;
 }
 
 .prose pre > code {
   @apply bg-none font-monogeist;
 }
 
+/* Fix for plain code blocks (like the Lua script issue) without affecting syntax highlighting */
+.prose pre:not(.chroma),
+.prose pre:not(.chroma) code,
+.prose pre:not(.chroma) * {
+  color: #1e293b !important;
+}
+
 .prose h1 {
   @apply text-4xl break-words;
 }
@@ -76,7 +83,7 @@ section.prose {
 
 .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)),
 .prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)),
-.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) 
+.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *))
 {
   @apply my-0;
 }
@@ -264,11 +271,16 @@ select {
 }
 
 .redis-cli {
-  @apply font-mono bg-slate-900 h-80 overflow-y-scroll text-neutral-50 px-4 py-2 rounded-b-xl;
+  @apply font-mono bg-stone-50 h-80 overflow-y-scroll text-slate-800 px-4 py-2 rounded-b-xl;
 }
 
 .redis-cli > pre {
   white-space: pre-wrap;
+  color: #1e293b !important;
+}
+
+.redis-cli * {
+  color: #1e293b !important;
 }
 
 .prose .redis-cli {
@@ -276,7 +288,12 @@ select {
 }
 
 .prose .redis-cli > pre {
-  @apply text-neutral-50 bg-transparent m-0 p-0;
+  @apply text-slate-800 bg-transparent m-0 p-0;
+  color: #1e293b !important;
+}
+
+.prose .redis-cli * {
+  color: #1e293b !important;
 }
 
 .prose .redis-cli > .prompt {
@@ -302,7 +319,7 @@ select {
 }
 
 .star-rating {
-  @apply flex flex-row-reverse justify-around text-center text-xl items-center; 
+  @apply flex flex-row-reverse justify-around text-center text-xl items-center;
 }
 
 .star-rating input {
@@ -311,18 +328,18 @@ select {
 
 .star-rating label {
   @apply cursor-pointer text-white;
-  /* 
-    From  https://owumaro.github.io/text-stroke-generator/ 
+  /*
+    From  https://owumaro.github.io/text-stroke-generator/
     Currently, there is not great way to text-stroke that works across browsers
     Alternative is to replace star character with SVG
   */
-  text-shadow: 
-    rgb(92, 112, 122) 1px 0px 0px, 
-    rgb(92, 112, 122) 0.540302px 0.841471px 0px, 
-    rgb(92, 112, 122) -0.416147px 0.909297px 0px, 
-    rgb(92, 112, 122) -0.989993px 0.14112px 0px, 
-    rgb(92, 112, 122) -0.653644px -0.756803px 0px, 
-    rgb(92, 112, 122) 0.283662px -0.958924px 0px, 
+  text-shadow:
+    rgb(92, 112, 122) 1px 0px 0px,
+    rgb(92, 112, 122) 0.540302px 0.841471px 0px,
+    rgb(92, 112, 122) -0.416147px 0.909297px 0px,
+    rgb(92, 112, 122) -0.989993px 0.14112px 0px,
+    rgb(92, 112, 122) -0.653644px -0.756803px 0px,
+    rgb(92, 112, 122) 0.283662px -0.958924px 0px,
     rgb(92, 112, 122) 0.96017px -0.279416px 0px;
 }
 
@@ -333,7 +350,7 @@ select {
 .star-rating label:hover,
 .star-rating label:hover ~ label {
   @apply text-redis-red-500;
-}      
+}
 
 .codetabs .label {
   min-width: 2rem;
@@ -352,7 +369,7 @@ select {
 
 .codetabs .radiotab:checked + .label {
   @apply border-slate-900 not-italic;
-  @apply bg-slate-600 text-white pt-1 mt-2.5;
+  @apply bg-slate-900 text-white font-semibold pt-1 mt-2.5;
 
 }
 
@@ -372,7 +389,7 @@ select {
 }
 
 .cli-footer {
-  background-color: #282F43;
+  background-color: #f1f5f9;
   min-height: 32px;
 }
 
@@ -506,20 +523,22 @@ html {
 /* Chroma syntax highlighting
 /* Background */
 .bg {
-  @apply text-slate-50 bg-slate-900;
+  @apply text-slate-800 bg-stone-50;
 }
 
 /* PreWrapper */
 .chroma {
-  @apply p-4 overflow-x-auto text-slate-50 bg-slate-900 rounded-md;
+  @apply p-4 overflow-x-auto text-slate-800 bg-stone-50 rounded-md;
 }
 
+
+
 /* Other */
 .chroma .x {}
 
 /* Error */
 .chroma .err {
-  @apply text-red-600;
+  @apply text-red-700;
 }
 
 /* CodeLine */
@@ -546,19 +565,19 @@ html {
 
 /* LineHighlight */
 .chroma .hl {
-  @apply flex bg-indigo-900/80;
+  @apply flex bg-yellow-100/60;
 }
 
 code
 
 /* LineNumbersTable */
 .chroma .lnt {
-  @apply text-slate-400 whitespace-pre pl-2 pr-4;
+  @apply text-slate-500 whitespace-pre pl-2 pr-4;
 }
 
 /* LineNumbers */
 .chroma .ln {
-  @apply text-slate-400 whitespace-pre px-4;
+  @apply text-slate-500 whitespace-pre px-4;
 }
 
 .chroma .lntable tr {
@@ -572,37 +591,37 @@ code
 
 /* Keyword */
 .chroma .k {
-  @apply text-red-400;
+  @apply text-purple-700 font-medium;
 }
 
 /* KeywordConstant */
 .chroma .kc {
-  @apply text-blue-400;
+  @apply text-purple-600;
 }
 
 /* KeywordDeclaration */
 .chroma .kd {
-  @apply text-red-400;
+  @apply text-purple-700 font-medium;
 }
 
 /* KeywordNamespace */
 .chroma .kn {
-  @apply text-red-400;
+  @apply text-purple-700 font-medium;
 }
 
 /* KeywordPseudo */
 .chroma .kp {
-  @apply text-blue-400;
+  @apply text-purple-600;
 }
 
 /* KeywordReserved */
 .chroma .kr {
-  @apply text-red-400;
+  @apply text-purple-700 font-medium;
 }
 
 /* KeywordType */
 .chroma .kt {
-  @apply text-red-400;
+  @apply text-purple-700 font-medium;
 }
 
 /* Name */
@@ -619,32 +638,32 @@ code
 
 /* NameClass */
 .chroma .nc {
-  @apply text-orange-400 font-bold;
+  @apply text-amber-600 font-bold;
 }
 
 /* NameConstant */
 .chroma .no {
-  @apply text-blue-400 font-bold;
+  @apply text-purple-600 font-bold;
 }
 
 /* NameDecorator */
 .chroma .nd {
-  @apply text-purple-300 font-bold;
+  @apply text-green-600 font-bold;
 }
 
 /* NameEntity */
 .chroma .ni {
-  @apply text-orange-400;
+  @apply text-amber-600;
 }
 
 /* NameException */
 .chroma .ne {
-  @apply text-orange-400 font-bold;
+  @apply text-red-600 font-bold;
 }
 
 /* NameFunction */
 .chroma .nf {
-  @apply text-purple-300 font-bold;
+  @apply text-green-600 font-bold;
 }
 
 /* NameFunctionMagic */
@@ -652,12 +671,12 @@ code
 
 /* NameLabel */
 .chroma .nl {
-  @apply text-blue-400 font-bold;
+  @apply text-blue-600 font-bold;
 }
 
 /* NameNamespace */
 .chroma .nn {
-  @apply text-red-400;
+  @apply text-red-600;
 }
 
 /* NameOther */
@@ -665,17 +684,17 @@ code
 
 /* NameProperty */
 .chroma .py {
-  @apply text-blue-400;
+  @apply text-blue-600;
 }
 
 /* NameTag */
 .chroma .nt {
-  @apply text-green-400;
+  @apply text-green-700;
 }
 
 /* NameVariable */
 .chroma .nv {
-  @apply text-blue-400
+  @apply text-blue-600
 }
 
 /* NameVariableClass */
@@ -692,127 +711,127 @@ code
 
 /* Literal */
 .chroma .l {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralDate */
 .chroma .ld {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralString */
 .chroma .s {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralStringAffix */
 .chroma .sa {
-  @apply text-blue-400
+  @apply text-orange-600
 }
 
 /* LiteralStringBacktick */
 .chroma .sb {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralStringChar */
 .chroma .sc {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralStringDelimiter */
 .chroma .dl {
-  @apply text-blue-400
+  @apply text-orange-600
 }
 
 /* LiteralStringDoc */
 .chroma .sd {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralStringDouble */
 .chroma .s2 {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralStringEscape */
 .chroma .se {
-  @apply text-blue-400
+  @apply text-orange-600
 }
 
 /* LiteralStringHeredoc */
 .chroma .sh {
-  @apply text-blue-400
+  @apply text-orange-600
 }
 
 /* LiteralStringInterpol */
 .chroma .si {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralStringOther */
 .chroma .sx {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralStringRegex */
 .chroma .sr {
-  @apply text-blue-400
+  @apply text-orange-600
 }
 
 /* LiteralStringSingle */
 .chroma .s1 {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralStringSymbol */
 .chroma .ss {
-  @apply text-blue-400;
+  @apply text-orange-600;
 }
 
 /* LiteralNumber */
 .chroma .m {
-  @apply text-blue-400;
+  @apply text-purple-600;
 }
 
 /* LiteralNumberBin */
 .chroma .mb {
-  @apply text-blue-400;
+  @apply text-purple-600;
 }
 
 /* LiteralNumberFloat */
 .chroma .mf {
-  @apply text-blue-400;
+  @apply text-purple-600;
 }
 
 /* LiteralNumberHex */
 .chroma .mh {
-  @apply text-blue-400;
+  @apply text-purple-600;
 }
 
 /* LiteralNumberInteger */
 .chroma .mi {
-  @apply text-blue-400;
+  @apply text-purple-600;
 }
 
 /* LiteralNumberIntegerLong */
 .chroma .il {
-  @apply text-blue-400;
+  @apply text-purple-600;
 }
 
 /* LiteralNumberOct */
 .chroma .mo {
-  @apply text-blue-400;
+  @apply text-purple-600;
 }
 
 /* Operator */
 .chroma .o {
-  @apply text-red-400 font-bold;
+  @apply text-red-600 font-bold;
 }
 
 /* OperatorWord */
 .chroma .ow {
-  @apply text-red-400 font-bold;
+  @apply text-red-600 font-bold;
 }
 
 /* Punctuation */
@@ -820,39 +839,39 @@ code
 
 /* Comment */
 .chroma .c {
-  @apply text-slate-500;
+  @apply text-slate-600;
   font-style: italic
 }
 
 /* CommentHashbang */
 .chroma .ch {
-  @apply text-slate-500;
+  @apply text-slate-600;
   font-style: italic
 }
 
 /* CommentMultiline */
 .chroma .cm {
-  @apply text-slate-500 italic;
+  @apply text-slate-600 italic;
 }
 
 /* CommentSingle */
 .chroma .c1 {
-  @apply text-slate-500 italic;
+  @apply text-slate-600 italic;
 }
 
 /* CommentSpecial */
 .chroma .cs {
-  @apply text-slate-500 font-bold italic;
+  @apply text-slate-600 font-bold italic;
 }
 
 /* CommentPreproc */
 .chroma .cp {
-  @apply text-slate-500 font-bold italic;
+  @apply text-slate-600 font-bold italic;
 }
 
 /* CommentPreprocFile */
 .chroma .cpf {
-  @apply text-slate-500 font-bold italic;
+  @apply text-slate-600 font-bold italic;
 }
 
 /* Generic */
@@ -860,7 +879,7 @@ code
 
 /* GenericDeleted */
 .chroma .gd {
-  @apply text-red-300 bg-red-900;
+  @apply text-red-700 bg-red-100;
 }
 
 /* GenericEmph */
@@ -870,27 +889,27 @@ code
 
 /* GenericError */
 .chroma .gr {
-  @apply text-red-300;
+  @apply text-red-700;
 }
 
 /* GenericHeading */
 .chroma .gh {
-  @apply text-blue-400 font-bold;
+  @apply text-blue-600 font-bold;
 }
 
 /* GenericInserted */
 .chroma .gi {
-  @apply text-green-400 bg-green-900;
+  @apply text-green-700 bg-green-100;
 }
 
 /* GenericOutput */
 .chroma .go {
-  @apply text-slate-400;
+  @apply text-slate-600;
 }
 
 /* GenericPrompt */
 .chroma .gp {
-  @apply text-slate-400;
+  @apply text-slate-600;
 }
 
 /* GenericStrong */
@@ -900,12 +919,12 @@ code
 
 /* GenericSubheading */
 .chroma .gu {
-  @apply text-blue-400;
+  @apply text-blue-600;
 }
 
 /* GenericTraceback */
 .chroma .gt {
-  @apply text-red-400;
+  @apply text-red-600;
 }
 
 /* GenericUnderline */
@@ -915,7 +934,7 @@ code
 
 /* TextWhitespace */
 .chroma .w {
-  @apply text-slate-500;
+  @apply text-slate-600;
 }
 /* Safari input[type = radio] fix for tabs */
 input[type="radio"] {
@@ -971,6 +990,12 @@ code {
   @apply font-monogeist;
 }
 
+
+
+.command-syntax {
+  @apply bg-slate-100 text-slate-900 font-mono font-semibold px-4 py-3 rounded-lg border border-slate-200;
+}
+
 /* no-click turns off border and click event on small icons */
 a[href*="#no-click"], img[src*="#no-click"] {
   @apply border-none cursor-default pointer-events-none no-underline;
diff --git a/layouts/develop/list.html b/layouts/develop/list.html
index 71c7bb004d..86ac0a4d18 100644
--- a/layouts/develop/list.html
+++ b/layouts/develop/list.html
@@ -14,13 +14,13 @@ <h1>
         </h1>
 
         {{ with .Params.description }}<p class="text-lg -mt-5 mb-10">{{ . | markdownify }}</p>{{ end }}
-        
+
         <!-- In-page banner -->
         {{ if .Params.bannerText }}
           <!-- Banner params are in the current page's front matter -->
           {{ partial "banner-article.html" . }}
         {{ else }}
-          <!-- Iterate through the page's ancestors to determine if a 
+          <!-- Iterate through the page's ancestors to determine if a
             section-wide banner is enabled by a parent page's front matter -->
           {{ $ancestorDirs := slice }}
           {{ with .File }}
@@ -34,7 +34,7 @@ <h1>
             {{ $currPage = $currPage.Parent }}
           {{ end }}
         {{ end }}
-        
+
         <!-- Responsive CLI Display Block as Table -->
         {{ if strings.HasSuffix .RelPermalink "/develop/" }}
         <div class="overflow-x-auto">
@@ -58,12 +58,24 @@ <h1>
                   # <a href="/commands/">See all commands</a>
                 </td>
                 <td class="align-top p-4 w-full md:w-[60%]">
-                  <div class="bg-slate-900 rounded-xl shadow-lg shadow-slate-900/10 h-60 overflow-y-auto">
-                    <div class="border-b border-slate-700 rounded-t-xl px-4 py-3 w-full flex">
-                      {{ partial "icons/cli-circle" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
-                      {{ partial "icons/cli-triangle" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
-                      {{ partial "icons/cli-star" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
-                    </div>            
+                  <div class="bg-stone-50 rounded-xl shadow-lg shadow-slate-200/20 h-60 overflow-y-auto">
+                    <div class="bg-slate-100 border-b border-slate-300 rounded-t-xl px-4 py-3 w-full flex items-center">
+                      <svg class="shrink-0 h-5 w-5 mr-3" viewBox="0 0 156.0529938 144" xmlns="http://www.w3.org/2000/svg">
+                        <path class="st0" d="M147.670166,79.4482727c-10.7946014,13.6012039-22.452774,29.1454315-45.7691193,29.1454315
+                          c-20.8268356,0-28.5858765-18.3700104-29.1313019-33.2931824c4.5630417,9.6490479,13.4846115,17.4628525,27.4041672,17.1012802
+                          c26.7706146-0.8635712,45.1214371-25.0434799,45.1214371-47.0644722C145.2953491,18.9985008,125.6491776,0,91.5382309,0
+                          C67.1424255,0,36.9175415,9.2833586,17.0554714,23.9640179c-0.2158909,15.1124439,8.2038994,34.7586212,11.226387,32.5997009
+                          c17.21908-12.3804817,30.8731976-20.3501434,44.1166153-24.3462563C52.7944603,54.0785866,5.7588782,104.8391037,0,113.775116
+                          C0.6476762,121.9790115,10.7946024,144,15.7601204,144c1.5112438,0,2.8065968-0.8635712,4.3178406-2.3748169
+                          c14.1801453-15.9326324,25.7396469-30.2172928,36.0215034-43.985733
+                          c1.443779,20.1794739,11.366806,44.8493042,39.1089325,44.8493042c24.8275833,0,49.4392776-17.9190369,60.6656723-58.2908554
+                          C157.1694183,79.2323837,151.1244354,75.3463287,147.670166,79.4482727z M119.3883057,46.8485756
+                          c0,12.7376328-12.5217361,18.9985008-23.9640198,18.9985008c-6.1162338,0-10.8146286-1.6060638-14.5303345-3.6929359
+                          c6.8368607-10.3524857,13.6045761-20.9680939,20.8757477-32.3321533
+                          C114.5906143,31.9920292,119.3883057,39.1185226,119.3883057,46.8485756z" fill="#FF4438"/>
+                      </svg>
+
+                    </div>
                     <form class="redis-cli" typewriter>
                       <pre tabindex="0" class="whitespace-pre">
 PING
@@ -76,7 +88,7 @@ <h1>
           </table>
         </div>
         {{ end }}
-        
+
         {{ .Content }}
         {{ if not .Params.hideListLinks }}
           <nav>
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index caaee46967..a8e924bb88 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -3,7 +3,7 @@
     document.addEventListener("DOMContentLoaded", function () {
 
         // don't run script for tabbed code examples
-        if (!document.querySelector('.codetabs.cli.group.flex.justify-start.items-center.flex-wrap.box-border.rounded-lg.mt-0.mb-0.mx-auto.bg-slate-900')) {
+        if (!document.querySelector('.codetabs.cli.group.flex.justify-start.items-center.flex-wrap.box-border.rounded-lg.mt-0.mb-0.mx-auto.bg-stone-50')) {
             document.querySelectorAll('div.highlight').forEach(block => {
                 // Create a wrapper for the button and message
                 const wrapper = document.createElement('div');
@@ -16,7 +16,7 @@
                 // Create the copy button
                 const button = document.createElement('button');
                 button.innerHTML = `
-                <button class="clipboard-button text-neutral-400 hover:text-slate-100 bg-slate-600 relative h-7 w-7 p-1 rounded rounded-mx" title="Copy to clipboard">
+                <button class="clipboard-button text-slate-600 hover:text-slate-800 bg-slate-200 relative h-7 w-7 p-1 rounded rounded-mx" title="Copy to clipboard">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor">
                     <path d="M9 43.95q-1.2 0-2.1-.9-.9-.9-.9-2.1V10.8h3v30.15h23.7v3Zm6-6q-1.2 0-2.1-.9-.9-.9-.9-2.1v-28q0-1.2.9-2.1.9-.9 2.1-.9h22q1.2 0 2.1.9.9.9.9 2.1v28q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h22v-28H15v28Zm0 0v-28 28Z"></path>
                 </svg>
diff --git a/layouts/partials/tabs/wrapper.html b/layouts/partials/tabs/wrapper.html
index bf9c18e536..a19241a941 100644
--- a/layouts/partials/tabs/wrapper.html
+++ b/layouts/partials/tabs/wrapper.html
@@ -8,7 +8,7 @@
 {{ $showFooter := (.showFooter) }}
 
 <!-- spellchecker-disable -->
-<div class="codetabs cli group flex justify-start items-center flex-wrap box-border rounded-lg mt-0 mb-0 mx-auto bg-slate-900" id="{{ $id }}">
+<div class="codetabs cli group flex justify-start items-center flex-wrap box-border rounded-lg mt-0 mb-0 mx-auto bg-stone-50" id="{{ $id }}">
     {{ range $i, $tab := $tabs }}
         {{ $tid := printf "%s_%s" (replace (replace (index $tab "title") "#" "sharp") "." "") $id }}
         {{ $pid := printf "panel_%s" $tid }}
@@ -17,8 +17,8 @@
         <input tabindex="1" type="radio" name="{{ $id }}" id="{{ $tid }}" data-lang="{{ $dataLang }}" class="radiotab w-0 h-0"
                {{ if eq $i 0 }}checked{{ end }}
         />
-        <label class="justify-left label ml-1.5 pt-3.5 px-1 pb-1 cursor-pointer text-sm text-center bg-redis-ink-900
-        hover:text-redis-red-600  rounded rounded-mx transition duration-150 ease-in-out"
+        <label class="justify-left label ml-1.5 pt-3.5 px-1 pb-1 cursor-pointer text-sm text-center bg-slate-300 text-slate-900 font-medium
+        hover:text-redis-red-600 hover:bg-slate-400 rounded rounded-mx transition duration-150 ease-in-out"
                title="Open example" for="{{ $tid }}">
             {{ if eq (index $tab "title") "redis-cli" }}
                 {{ $cliName }}
@@ -29,7 +29,7 @@
 
         <div class="panel order-last hidden w-full mt-0 {{ if not $showFooter}}pb-8{{end}} relative" id="{{ $pid }}" role="tabpanel" tabindex="0" aria-labelledby="tab-{{ $id }}">
             {{ index $tab "content" }}
-            <button tabindex="1" class="clipboard-button text-neutral-400 hover:text-slate-100 bg-slate-600 absolute -top-8 right-10 h-7 w-7 mr-2 mt-2 p-1 rounded rounded-mx"
+            <button tabindex="1" class="clipboard-button text-slate-600 hover:text-slate-800 bg-slate-200 absolute -top-8 right-10 h-7 w-7 mr-2 mt-2 p-1 rounded rounded-mx"
                     title="Copy to clipboard" onclick="copyCodeToClipboard('#{{ $pid }}')">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor">
                     <path d="M9 43.95q-1.2 0-2.1-.9-.9-.9-.9-2.1V10.8h3v30.15h23.7v3Zm6-6q-1.2 0-2.1-.9-.9-.9-.9-2.1v-28q0-1.2.9-2.1.9-.9 2.1-.9h22q1.2 0 2.1.9.9.9.9 2.1v28q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h22v-28H15v28Zm0 0v-28 28Z"/>
@@ -39,7 +39,7 @@
                 </div>
             </button>
             {{ if or (ne (index $tab "title") "redis-cli") (lt (index $tab "limit") 100) }}
-            <button tabindex="1" class="visibility-button text-neutral-400 hover:text-slate-100 bg-slate-600 absolute -top-8 right-2 h-7 w-7 mr-2 mt-2 p-1 rounded rounded-mx"
+            <button tabindex="1" class="visibility-button text-slate-600 hover:text-slate-800 bg-slate-200 absolute -top-8 right-2 h-7 w-7 mr-2 mt-2 p-1 rounded rounded-mx"
                     title="Toggle visibility" aria-controls="{{ $pid }}" onclick="toggleVisibleLines(this)">
                 <svg id="visibility-off" class="hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor">
                     <path d="m31.45 27.05-2.2-2.2q1.3-3.55-1.35-5.9-2.65-2.35-5.75-1.2l-2.2-2.2q.85-.55 1.9-.8 1.05-.25 2.15-.25 3.55 0 6.025 2.475Q32.5 19.45 32.5 23q0 1.1-.275 2.175-.275 1.075-.775 1.875Zm6.45 6.45-2-2q2.45-1.8 4.275-4.025Q42 25.25 42.85 23q-2.5-5.55-7.5-8.775Q30.35 11 24.5 11q-2.1 0-4.3.4-2.2.4-3.45.95L14.45 10q1.75-.8 4.475-1.4Q21.65 8 24.25 8q7.15 0 13.075 4.075Q43.25 16.15 46 23q-1.3 3.2-3.35 5.85-2.05 2.65-4.75 4.65Zm2.9 11.3-8.4-8.25q-1.75.7-3.95 1.075T24 38q-7.3 0-13.25-4.075T2 23q1-2.6 2.775-5.075T9.1 13.2L2.8 6.9l2.1-2.15L42.75 42.6ZM11.15 15.3q-1.85 1.35-3.575 3.55Q5.85 21.05 5.1 23q2.55 5.55 7.675 8.775Q17.9 35 24.4 35q1.65 0 3.25-.2t2.4-.6l-3.2-3.2q-.55.25-1.35.375T24 31.5q-3.5 0-6-2.45T15.5 23q0-.75.125-1.5T16 20.15Zm15.25 7.1Zm-5.8 2.9Z"/>
@@ -51,14 +51,14 @@
             {{ end }}
 
             {{ if $showFooter }}
-            <div class="cli-footer flex items-center justify-between rounded-b-md bg-slate-900 mt-0 px-4 pt-0 mb-0 transition-opacity ease-in-out duration-300 opacity-0 invisible
+            <div class="cli-footer flex items-center justify-between rounded-b-md bg-stone-50 mt-0 px-4 pt-0 mb-0 transition-opacity ease-in-out duration-300 opacity-0 invisible
 group-hover:opacity-100 group-hover:visible">
             {{ if eq (index $tab "title") "redis-cli" }}
-                <div class="flex-1 text-xs text-white overflow-ellipsis">{{ $footerText }}</div>
+                <div class="flex-1 text-xs text-slate-800 overflow-ellipsis">{{ $footerText }}</div>
                 <div class="text-right">
-                    <a href="{{ $btnRIUrl }}" tabindex="1" class="rounded rounded-mx px-2 py-1 flex items-center text-white text-xs
-                    hover:text-white hover:bg-slate-600 hover:border-transparent focus:outline-none
-                    focus:ring-2 focus:white focus:border-slate-500" title="{{$btnRIText}}">
+                    <a href="{{ $btnRIUrl }}" tabindex="1" class="rounded rounded-mx px-2 py-1 flex items-center text-slate-800 text-xs
+                    hover:text-slate-800 hover:bg-slate-200 hover:border-transparent focus:outline-none
+                    focus:ring-2 focus:slate-800 focus:border-slate-500" title="{{$btnRIText}}">
                         <svg class="w-4 h-4 mr-1" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M2.26236 5.66895L1.21732 6.07172L7.00018 8.65693V7.79842L2.26236 5.66895Z" fill="#fca5a5"/>
                             <path d="M2.26236 8.02271L1.21732 8.42548L7.00018 11.0119V10.1516L2.26236 8.02271Z" fill="#fca5a5"/>
@@ -74,16 +74,16 @@
                 </div>
             {{ else }}
               <!--<a href='/docs/latest/develop/clients/{{ index $tab "quickstartSlug" }}/' tabindex="1" class="rounded rounded-mx px-3 py-1 text-white text-xs-->
-              <a href='{{ absURL (print "develop/clients/" (index $tab "quickstartSlug")) }}/' tabindex="1" class="rounded rounded-mx px-3 py-1 text-white text-xs
-                                hover:text-white hover:bg-slate-600 hover:border-transparent focus:outline-none
-                                focus:ring-2 focus:white focus:border-slate-500" title="{{$btnQuickStartText}}">
+              <a href='{{ absURL (print "develop/clients/" (index $tab "quickstartSlug")) }}/' tabindex="1" class="rounded rounded-mx px-3 py-1 text-slate-800 text-xs
+                                hover:text-slate-800 hover:bg-slate-200 hover:border-transparent focus:outline-none
+                                focus:ring-2 focus:slate-800 focus:border-slate-500" title="{{$btnQuickStartText}}">
                 {{ index $tab "title" }} {{ $btnQuickStartText }}
               </a>
               <div class="w-1/2"></div>
               <div class="flex-1 text-right">
-                <a href='{{ index $tab "sourceUrl" }}' tabindex="1" class="button text-neutral-400 hover:text-slate-100 h-6 w-6 p-1" title="Improve this code example">
+                <a href='{{ index $tab "sourceUrl" }}' tabindex="1" class="button text-slate-600 hover:text-slate-800 h-6 w-6 p-1" title="Improve this code example">
                   <svg width="18" height="16" viewBox="0 0 18 16" fill="github" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99953 1.43397e-06C7.09918 -0.000897921 5.26058 0.674713 3.81295 1.90585C2.36533 3.13699 1.40324 4.84324 1.09896 6.71907C0.794684 8.5949 1.1681 10.5178 2.15233 12.1434C3.13657 13.769 4.66734 14.9912 6.47053 15.591C6.87053 15.664 7.01653 15.417 7.01653 15.205C7.01653 15.015 7.00953 14.512 7.00553 13.845C4.78053 14.328 4.31053 12.772 4.31053 12.772C4.16325 12.2887 3.84837 11.8739 3.42253 11.602C2.69653 11.102 3.47753 11.116 3.47753 11.116C3.73043 11.1515 3.97191 11.2442 4.18365 11.3869C4.39539 11.5297 4.57182 11.7189 4.69953 11.94C4.80755 12.1377 4.95378 12.3119 5.12972 12.4526C5.30567 12.5933 5.50782 12.6976 5.72442 12.7595C5.94103 12.8214 6.16778 12.8396 6.39148 12.813C6.61519 12.7865 6.83139 12.7158 7.02753 12.605C7.06381 12.1992 7.24399 11.8197 7.53553 11.535C5.75953 11.335 3.89153 10.647 3.89153 7.581C3.88005 6.78603 4.17513 6.01716 4.71553 5.434C4.47318 4.74369 4.50322 3.98693 4.79953 3.318C4.79953 3.318 5.47053 3.103 6.99953 4.138C8.31074 3.77905 9.69432 3.77905 11.0055 4.138C12.5325 3.103 13.2055 3.318 13.2055 3.318C13.5012 3.9877 13.5294 4.74513 13.2845 5.435C13.8221 6.01928 14.114 6.78817 14.0995 7.582C14.0995 10.655 12.2285 11.332 10.4465 11.53C10.6375 11.724 10.7847 11.9566 10.8784 12.2123C10.972 12.4679 11.0099 12.7405 10.9895 13.012C10.9895 14.081 10.9795 14.944 10.9795 15.206C10.9795 15.42 11.1235 15.669 11.5295 15.591C13.3328 14.9911 14.8636 13.7689 15.8479 12.1432C16.8321 10.5175 17.2054 8.59447 16.901 6.71858C16.5966 4.84268 15.6343 3.13642 14.1865 1.90536C12.7387 0.674306 10.9 -0.0011359 8.99953 1.43397e-06Z" fill="white"/>
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99953 1.43397e-06C7.09918 -0.000897921 5.26058 0.674713 3.81295 1.90585C2.36533 3.13699 1.40324 4.84324 1.09896 6.71907C0.794684 8.5949 1.1681 10.5178 2.15233 12.1434C3.13657 13.769 4.66734 14.9912 6.47053 15.591C6.87053 15.664 7.01653 15.417 7.01653 15.205C7.01653 15.015 7.00953 14.512 7.00553 13.845C4.78053 14.328 4.31053 12.772 4.31053 12.772C4.16325 12.2887 3.84837 11.8739 3.42253 11.602C2.69653 11.102 3.47753 11.116 3.47753 11.116C3.73043 11.1515 3.97191 11.2442 4.18365 11.3869C4.39539 11.5297 4.57182 11.7189 4.69953 11.94C4.80755 12.1377 4.95378 12.3119 5.12972 12.4526C5.30567 12.5933 5.50782 12.6976 5.72442 12.7595C5.94103 12.8214 6.16778 12.8396 6.39148 12.813C6.61519 12.7865 6.83139 12.7158 7.02753 12.605C7.06381 12.1992 7.24399 11.8197 7.53553 11.535C5.75953 11.335 3.89153 10.647 3.89153 7.581C3.88005 6.78603 4.17513 6.01716 4.71553 5.434C4.47318 4.74369 4.50322 3.98693 4.79953 3.318C4.79953 3.318 5.47053 3.103 6.99953 4.138C8.31074 3.77905 9.69432 3.77905 11.0055 4.138C12.5325 3.103 13.2055 3.318 13.2055 3.318C13.5012 3.9877 13.5294 4.74513 13.2845 5.435C13.8221 6.01928 14.114 6.78817 14.0995 7.582C14.0995 10.655 12.2285 11.332 10.4465 11.53C10.6375 11.724 10.7847 11.9566 10.8784 12.2123C10.972 12.4679 11.0099 12.7405 10.9895 13.012C10.9895 14.081 10.9795 14.944 10.9795 15.206C10.9795 15.42 11.1235 15.669 11.5295 15.591C13.3328 14.9911 14.8636 13.7689 15.8479 12.1432C16.8321 10.5175 17.2054 8.59447 16.901 6.71858C16.5966 4.84268 15.6343 3.13642 14.1865 1.90536C12.7387 0.674306 10.9 -0.0011359 8.99953 1.43397e-06Z" fill="currentColor"/>
                   </svg>
                 </a>
               </div>
diff --git a/layouts/shortcodes/redis-cli.html b/layouts/shortcodes/redis-cli.html
index 9786349d44..b9a29f501e 100644
--- a/layouts/shortcodes/redis-cli.html
+++ b/layouts/shortcodes/redis-cli.html
@@ -1,8 +1,20 @@
-<div class="bg-slate-900 border-b border-slate-700 rounded-t-xl px-4 py-3 w-full flex">
-  {{ partial "icons/cli-circle" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
-  {{ partial "icons/cli-triangle" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
-  {{ partial "icons/cli-star" (dict "class" "shrink-0 h-[1.0625rem] w-[1.0625rem] fill-slate-50") }}
-</div>  
+<div class="bg-slate-100 border-b border-slate-300 rounded-t-xl px-4 py-3 w-full flex items-center">
+  <svg class="shrink-0 h-5 w-5 mr-3" viewBox="0 0 156.0529938 144" xmlns="http://www.w3.org/2000/svg">
+    <path class="st0" d="M147.670166,79.4482727c-10.7946014,13.6012039-22.452774,29.1454315-45.7691193,29.1454315
+      c-20.8268356,0-28.5858765-18.3700104-29.1313019-33.2931824c4.5630417,9.6490479,13.4846115,17.4628525,27.4041672,17.1012802
+      c26.7706146-0.8635712,45.1214371-25.0434799,45.1214371-47.0644722C145.2953491,18.9985008,125.6491776,0,91.5382309,0
+      C67.1424255,0,36.9175415,9.2833586,17.0554714,23.9640179c-0.2158909,15.1124439,8.2038994,34.7586212,11.226387,32.5997009
+      c17.21908-12.3804817,30.8731976-20.3501434,44.1166153-24.3462563C52.7944603,54.0785866,5.7588782,104.8391037,0,113.775116
+      C0.6476762,121.9790115,10.7946024,144,15.7601204,144c1.5112438,0,2.8065968-0.8635712,4.3178406-2.3748169
+      c14.1801453-15.9326324,25.7396469-30.2172928,36.0215034-43.985733
+      c1.443779,20.1794739,11.366806,44.8493042,39.1089325,44.8493042c24.8275833,0,49.4392776-17.9190369,60.6656723-58.2908554
+      C157.1694183,79.2323837,151.1244354,75.3463287,147.670166,79.4482727z M119.3883057,46.8485756
+      c0,12.7376328-12.5217361,18.9985008-23.9640198,18.9985008c-6.1162338,0-10.8146286-1.6060638-14.5303345-3.6929359
+      c6.8368607-10.3524857,13.6045761-20.9680939,20.8757477-32.3321533
+      C114.5906143,31.9920292,119.3883057,39.1185226,119.3883057,46.8485756z" fill="#FF4438"/>
+  </svg>
+
+</div>
 <form class="redis-cli overflow-y-auto max-h-80">
   {{- .Inner -}}
 </form>
\ No newline at end of file
diff --git a/static/images/icon_logo/Redis_Mark_Red_RGB.svg b/static/images/icon_logo/Redis_Mark_Red_RGB.svg
new file mode 100644
index 0000000000..ad593a83e1
--- /dev/null
+++ b/static/images/icon_logo/Redis_Mark_Red_RGB.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 156.0529938 144"
+	 style="enable-background:new 0 0 156.0529938 144;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF4438;}
+</style>
+<metadata>
+	<sfw  xmlns="&ns_sfw;">
+		<slices></slices>
+		<sliceSourceBounds  bottomLeftOrigin="true" height="144" width="156.0530246" x="0" y="-144"></sliceSourceBounds>
+	</sfw>
+</metadata>
+<path class="st0" d="M147.670166,79.4482727c-10.7946014,13.6012039-22.452774,29.1454315-45.7691193,29.1454315
+	c-20.8268356,0-28.5858765-18.3700104-29.1313019-33.2931824c4.5630417,9.6490479,13.4846115,17.4628525,27.4041672,17.1012802
+	c26.7706146-0.8635712,45.1214371-25.0434799,45.1214371-47.0644722C145.2953491,18.9985008,125.6491776,0,91.5382309,0
+	C67.1424255,0,36.9175415,9.2833586,17.0554714,23.9640179c-0.2158909,15.1124439,8.2038994,34.7586212,11.226387,32.5997009
+	c17.21908-12.3804817,30.8731976-20.3501434,44.1166153-24.3462563C52.7944603,54.0785866,5.7588782,104.8391037,0,113.775116
+	C0.6476762,121.9790115,10.7946024,144,15.7601204,144c1.5112438,0,2.8065968-0.8635712,4.3178406-2.3748169
+	c14.1801453-15.9326324,25.7396469-30.2172928,36.0215034-43.985733
+	c1.443779,20.1794739,11.366806,44.8493042,39.1089325,44.8493042c24.8275833,0,49.4392776-17.9190369,60.6656723-58.2908554
+	C157.1694183,79.2323837,151.1244354,75.3463287,147.670166,79.4482727z M119.3883057,46.8485756
+	c0,12.7376328-12.5217361,18.9985008-23.9640198,18.9985008c-6.1162338,0-10.8146286-1.6060638-14.5303345-3.6929359
+	c6.8368607-10.3524857,13.6045761-20.9680939,20.8757477-32.3321533
+	C114.5906143,31.9920292,119.3883057,39.1185226,119.3883057,46.8485756z"/>
+</svg>
diff --git a/syntax.css b/syntax.css
index fc2ec0a504..cd5e410ac8 100644
--- a/syntax.css
+++ b/syntax.css
@@ -1,85 +1,85 @@
-/* Background */ .bg { color: #f8f8f2; background-color: #272822 }
-/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #272822; }
+/* Background */ .bg { color: #334155; background-color: #fafaf9 }
+/* PreWrapper */ .chroma { color: #334155; background-color: #fafaf9; }
 /* Other */ .chroma .x {  }
-/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+/* Error */ .chroma .err { color: #b91c1c; background-color: #fef2f2 }
 /* CodeLine */ .chroma .cl {  }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineHighlight */ .chroma .hl { background-color: #fef3c7 }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64748b }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64748b }
 /* Line */ .chroma .line { display: flex; }
-/* Keyword */ .chroma .k { color: #66d9ef }
-/* KeywordConstant */ .chroma .kc { color: #66d9ef }
-/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
-/* KeywordNamespace */ .chroma .kn { color: #f92672 }
-/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
-/* KeywordReserved */ .chroma .kr { color: #66d9ef }
-/* KeywordType */ .chroma .kt { color: #66d9ef }
+/* Keyword */ .chroma .k { color: #7c3aed; font-weight: 500 }
+/* KeywordConstant */ .chroma .kc { color: #7c3aed }
+/* KeywordDeclaration */ .chroma .kd { color: #7c3aed; font-weight: 500 }
+/* KeywordNamespace */ .chroma .kn { color: #7c3aed; font-weight: 500 }
+/* KeywordPseudo */ .chroma .kp { color: #7c3aed }
+/* KeywordReserved */ .chroma .kr { color: #7c3aed; font-weight: 500 }
+/* KeywordType */ .chroma .kt { color: #7c3aed; font-weight: 500 }
 /* Name */ .chroma .n {  }
-/* NameAttribute */ .chroma .na { color: #a6e22e }
+/* NameAttribute */ .chroma .na {  }
 /* NameBuiltin */ .chroma .nb {  }
 /* NameBuiltinPseudo */ .chroma .bp {  }
-/* NameClass */ .chroma .nc { color: #a6e22e }
-/* NameConstant */ .chroma .no { color: #66d9ef }
-/* NameDecorator */ .chroma .nd { color: #a6e22e }
-/* NameEntity */ .chroma .ni {  }
-/* NameException */ .chroma .ne { color: #a6e22e }
-/* NameFunction */ .chroma .nf { color: #a6e22e }
+/* NameClass */ .chroma .nc { color: #d97706; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #7c3aed; font-weight: bold }
+/* NameDecorator */ .chroma .nd { color: #059669; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #d97706 }
+/* NameException */ .chroma .ne { color: #dc2626; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #059669; font-weight: bold }
 /* NameFunctionMagic */ .chroma .fm {  }
-/* NameLabel */ .chroma .nl {  }
-/* NameNamespace */ .chroma .nn {  }
-/* NameOther */ .chroma .nx { color: #a6e22e }
-/* NameProperty */ .chroma .py {  }
-/* NameTag */ .chroma .nt { color: #f92672 }
-/* NameVariable */ .chroma .nv {  }
+/* NameLabel */ .chroma .nl { color: #2563eb; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #dc2626 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py { color: #2563eb }
+/* NameTag */ .chroma .nt { color: #15803d }
+/* NameVariable */ .chroma .nv { color: #2563eb }
 /* NameVariableClass */ .chroma .vc {  }
 /* NameVariableGlobal */ .chroma .vg {  }
 /* NameVariableInstance */ .chroma .vi {  }
 /* NameVariableMagic */ .chroma .vm {  }
-/* Literal */ .chroma .l { color: #ae81ff }
-/* LiteralDate */ .chroma .ld { color: #e6db74 }
-/* LiteralString */ .chroma .s { color: #e6db74 }
-/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
-/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
-/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
-/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
-/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
-/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
-/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
-/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
-/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
-/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
-/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
-/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
-/* LiteralNumber */ .chroma .m { color: #ae81ff }
-/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
-/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
-/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
-/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
-/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
-/* Operator */ .chroma .o { color: #f92672 }
-/* OperatorWord */ .chroma .ow { color: #f92672 }
+/* Literal */ .chroma .l { color: #ea580c }
+/* LiteralDate */ .chroma .ld { color: #ea580c }
+/* LiteralString */ .chroma .s { color: #ea580c }
+/* LiteralStringAffix */ .chroma .sa { color: #ea580c }
+/* LiteralStringBacktick */ .chroma .sb { color: #ea580c }
+/* LiteralStringChar */ .chroma .sc { color: #ea580c }
+/* LiteralStringDelimiter */ .chroma .dl { color: #ea580c }
+/* LiteralStringDoc */ .chroma .sd { color: #ea580c }
+/* LiteralStringDouble */ .chroma .s2 { color: #ea580c }
+/* LiteralStringEscape */ .chroma .se { color: #ea580c }
+/* LiteralStringHeredoc */ .chroma .sh { color: #ea580c }
+/* LiteralStringInterpol */ .chroma .si { color: #ea580c }
+/* LiteralStringOther */ .chroma .sx { color: #ea580c }
+/* LiteralStringRegex */ .chroma .sr { color: #ea580c }
+/* LiteralStringSingle */ .chroma .s1 { color: #ea580c }
+/* LiteralStringSymbol */ .chroma .ss { color: #ea580c }
+/* LiteralNumber */ .chroma .m { color: #7c3aed }
+/* LiteralNumberBin */ .chroma .mb { color: #7c3aed }
+/* LiteralNumberFloat */ .chroma .mf { color: #7c3aed }
+/* LiteralNumberHex */ .chroma .mh { color: #7c3aed }
+/* LiteralNumberInteger */ .chroma .mi { color: #7c3aed }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #7c3aed }
+/* LiteralNumberOct */ .chroma .mo { color: #7c3aed }
+/* Operator */ .chroma .o { color: #dc2626; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #dc2626; font-weight: bold }
 /* Punctuation */ .chroma .p {  }
-/* Comment */ .chroma .c { color: #75715e }
-/* CommentHashbang */ .chroma .ch { color: #75715e }
-/* CommentMultiline */ .chroma .cm { color: #75715e }
-/* CommentSingle */ .chroma .c1 { color: #75715e }
-/* CommentSpecial */ .chroma .cs { color: #75715e }
-/* CommentPreproc */ .chroma .cp { color: #75715e }
-/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
+/* Comment */ .chroma .c { color: #475569; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #475569; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #475569; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #475569; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #475569; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #475569; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #475569; font-weight: bold; font-style: italic }
 /* Generic */ .chroma .g {  }
-/* GenericDeleted */ .chroma .gd { color: #f92672 }
+/* GenericDeleted */ .chroma .gd { color: #b91c1c; background-color: #fef2f2 }
 /* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericError */ .chroma .gr {  }
-/* GenericHeading */ .chroma .gh {  }
-/* GenericInserted */ .chroma .gi { color: #a6e22e }
-/* GenericOutput */ .chroma .go {  }
-/* GenericPrompt */ .chroma .gp {  }
+/* GenericError */ .chroma .gr { color: #b91c1c }
+/* GenericHeading */ .chroma .gh { color: #2563eb; font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #15803d; background-color: #f0fdf4 }
+/* GenericOutput */ .chroma .go { color: #475569 }
+/* GenericPrompt */ .chroma .gp { color: #475569 }
 /* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #75715e }
-/* GenericTraceback */ .chroma .gt {  }
-/* GenericUnderline */ .chroma .gl {  }
-/* TextWhitespace */ .chroma .w {  }
+/* GenericSubheading */ .chroma .gu { color: #2563eb }
+/* GenericTraceback */ .chroma .gt { color: #dc2626 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #475569 }