COG-GTM · devin-ai-integration · Apr 17, 2026
diff --git a/public/index.html b/public/index.html
@@ -24,14 +24,10 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
       rel="stylesheet"
     />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
-      rel="stylesheet"
-    />
-    <title>Wordle</title>
+    <title>WORDLE // RETRO</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.module.scss b/src/App.module.scss
@@ -8,48 +8,89 @@
 }
 
 :root {
-  --color-absent: #405069;
-  --color-present: #e0c02b;
-  --color-correct: #31ad23;
-  --color-alert-success: #3fbf62;
-  --color-alert-error: #ea4e2c;
-  --color-toggle: #3fbf62;
-
-  --color-background: #fff;
-  --color-cell: #afadb0;
-  --color-key: #e3e3e3;
-  --color-key-text: #333;
-  --color-key-secondary: #4f4f4f;
-  --color-text-primary: #000;
-  --color-text-secondary: #333;
-  --color-icon: #333;
+  --color-absent: #3a3a5c;
+  --color-present: #d4a017;
+  --color-correct: #00ff41;
+  --color-alert-success: #00ff41;
+  --color-alert-error: #ff003c;
+  --color-toggle: #00ff41;
+
+  --color-background: #0a0a0a;
+  --color-cell: #1a1a2e;
+  --color-key: #1a1a2e;
+  --color-key-text: #00ff41;
+  --color-key-secondary: #00ff41;
+  --color-text-primary: #00ff41;
+  --color-text-secondary: #33cc33;
+  --color-icon: #00ff41;
+  --color-border: #00ff41;
+  --color-scanline: rgba(0, 255, 65, 0.03);
 
   [data-theme='dark'] {
-    --color-background: #191919;
-    --color-cell: #444444;
-    --color-key: #4f4f4f;
-    --color-key-text: #fff;
-    --color-key-secondary: #fff;
-    --color-text-primary: #fff;
-    --color-text-secondary: #adadad;
-    --color-icon: #fff;
+    --color-background: #0a0a0a;
+    --color-cell: #1a1a2e;
+    --color-key: #1a1a2e;
+    --color-key-text: #00ff41;
+    --color-key-secondary: #00ff41;
+    --color-text-primary: #00ff41;
+    --color-text-secondary: #33cc33;
+    --color-icon: #00ff41;
   }
 
   [data-mode='high-contrast'] {
-    --color-present: #06b6d4;
-    --color-correct: #f97316;
+    --color-present: #ff6ec7;
+    --color-correct: #00ffff;
   }
 }
 
 body {
   font-size: 62.5%;
-  font-family: 'Baloo 2', sans-serif;
+  font-family: 'Press Start 2P', monospace;
   background: var(--color-background);
-  color: #fff;
+  color: #00ff41;
   min-height: 100vh;
   scroll-behavior: smooth;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: none;
+  -moz-osx-font-smoothing: unset;
+  image-rendering: pixelated;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* CRT Scanline overlay */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    var(--color-scanline) 2px,
+    var(--color-scanline) 4px
+  );
+}
+
+/* CRT vignette effect */
+body::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9998;
+  background: radial-gradient(
+    ellipse at center,
+    transparent 60%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
 }
 
 .container {

diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss
@@ -10,18 +10,25 @@
 }
 
 .alert {
-  border-radius: 10px;
+  border: 2px solid;
+  border-radius: 0;
   padding: 0.5rem 0.75rem;
-  font-size: 1rem;
-  font-family: 'Poppins';
+  font-size: 0.6rem;
+  font-family: 'Press Start 2P', monospace;
   font-weight: 500;
   text-align: center;
+  color: #000;
+  text-shadow: none;
 }
 
 .success {
   background-color: var(--color-alert-success);
+  border-color: var(--color-alert-success);
+  box-shadow: 0 0 15px var(--color-alert-success);
 }
 
 .error {
   background-color: var(--color-alert-error);
+  border-color: var(--color-alert-error);
+  box-shadow: 0 0 15px var(--color-alert-error);
 }
diff --git a/src/components/Cell/Cell.module.scss b/src/components/Cell/Cell.module.scss
@@ -2,14 +2,20 @@
   width: 60px;
   height: 60px;
   background-color: var(--color-cell);
-  border-radius: 10px;
-  font-size: 2.6rem;
+  border: 2px solid var(--color-border);
+  border-radius: 0;
+  font-size: 1.8rem;
   font-weight: 700;
+  font-family: 'Press Start 2P', monospace;
   text-transform: uppercase;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: default;
+  color: #fff;
+  text-shadow: 0 0 8px currentColor;
+  box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.05),
+    0 0 5px rgba(0, 255, 65, 0.1);
 }
 
 .fill {
@@ -60,50 +66,60 @@
   0% {
     transform: rotateX(0deg);
     background-color: var(--color-cell);
+    border-color: var(--color-border);
   }
   50% {
     background-color: var(--color-cell);
   }
   50.5% {
     background-color: var(--color-absent);
+    border-color: var(--color-absent);
   }
   100% {
     transform: rotateX(180deg);
     background-color: var(--color-absent);
+    border-color: var(--color-absent);
   }
 }
 
 @keyframes revealPresentCell {
   0% {
     transform: rotateX(0deg);
     background-color: var(--color-cell);
+    border-color: var(--color-border);
   }
   50% {
     background-color: var(--color-cell);
   }
   50.5% {
     background-color: var(--color-present);
+    border-color: var(--color-present);
   }
   100% {
     transform: rotateX(180deg);
     background-color: var(--color-present);
+    border-color: var(--color-present);
   }
 }
 
 @keyframes revealCorrectCell {
   0% {
     transform: rotateX(0deg);
     background-color: var(--color-cell);
+    border-color: var(--color-border);
   }
   50% {
     background-color: var(--color-cell);
   }
   50.5% {
     background-color: var(--color-correct);
+    border-color: var(--color-correct);
   }
   100% {
     transform: rotateX(180deg);
     background-color: var(--color-correct);
+    border-color: var(--color-correct);
+    box-shadow: 0 0 15px var(--color-correct);
   }
 }
 
@@ -120,6 +136,6 @@
   .cell {
     width: 55px;
     height: 55px;
-    font-size: 2.4rem;
+    font-size: 1.6rem;
   }
 }
diff --git a/src/components/Grid/Grid.module.scss b/src/components/Grid/Grid.module.scss
@@ -9,8 +9,8 @@
 .row {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  grid-gap: 10px;
-  margin: 0.25rem;
+  grid-gap: 6px;
+  margin: 0.2rem;
 }
 
 .jiggle {

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -13,7 +13,7 @@ const Header = ({
           <BsInfoCircle size="1.6rem" color="var(--color-icon)" />
         </button>
       </div>
-      <h1>WORDLE</h1>
+      <h1>WORDLE &#x25B6;</h1>
       <div>
         <button onClick={() => setIsStatsModalOpen(true)}>
           <BsBarChart size="1.6rem" color="var(--color-icon)" />

diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -1,12 +1,38 @@
 header {
   display: flex;
   justify-content: space-between;
+  border-bottom: 2px solid var(--color-border);
+  padding-bottom: 0.5rem;
 }
 
 h1 {
-  font-size: 2.3rem;
+  font-size: 1.6rem;
   margin-left: 2.5rem;
   color: var(--color-text-primary);
+  text-shadow: 0 0 10px var(--color-text-primary),
+    0 0 20px var(--color-text-primary), 0 0 40px var(--color-text-primary);
+  letter-spacing: 0.3rem;
+  animation: titleFlicker 3s infinite alternate;
+}
+
+@keyframes titleFlicker {
+  0%,
+  95%,
+  100% {
+    opacity: 1;
+  }
+  96% {
+    opacity: 0.8;
+  }
+  97% {
+    opacity: 1;
+  }
+  98% {
+    opacity: 0.6;
+  }
+  99% {
+    opacity: 1;
+  }
 }
 
 button {
@@ -15,10 +41,15 @@ button {
   background: none;
   outline: none;
   border: none;
+  transition: filter 0.2s;
+
+  &:hover {
+    filter: drop-shadow(0 0 6px var(--color-icon));
+  }
 }
 
 @media screen and (max-width: 480px) {
   h1 {
-    font-size: 2rem;
+    font-size: 1.2rem;
   }
 }
diff --git a/src/components/InfoModal/InfoModal.module.scss b/src/components/InfoModal/InfoModal.module.scss
@@ -1,20 +1,22 @@
 h3 {
-  font-size: 1rem;
+  font-size: 0.55rem;
   font-weight: 300;
-  margin-bottom: 1.5rem;
+  font-family: 'Press Start 2P', monospace;
+  line-height: 1.6;
+  margin-bottom: 1.2rem;
   color: var(--color-text-secondary);
 }
 
 .row {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  grid-gap: 10px;
+  grid-gap: 6px;
   margin-bottom: 0.25rem;
 }
 
 @media screen and (max-width: 480px) {
   h3 {
-    font-size: 0.9rem;
-    margin-bottom: 1rem;
+    font-size: 0.5rem;
+    margin-bottom: 0.8rem;
   }
 }