From 62299c9714e6a4df6e442d58467ef4734ddc5613 Mon Sep 17 00:00:00 2001
From: Evan <evanpelle@gmail.com>
Date: Sat, 25 Apr 2026 13:53:21 -0600
Subject: [PATCH] standardize UI colors to fit brand guidelines (#3754)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

We have brand colors:

<img width="738" height="900" alt="Screenshot 2026-04-25 at 12 52 29 PM"
src="https://github.com/user-attachments/assets/aac69e87-91f2-4c3f-9f1e-f69f48f5943e"
/>

So update the homepage & in-game UI to use those colors:

<img width="1185" height="946" alt="Screenshot 2026-04-25 at 12 51
06 PM"
src="https://github.com/user-attachments/assets/89a0b12c-2db1-43d4-9500-fcf405c0f7ff"
/>

Also updated buttons to use the o-button element

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan
---
 src/client/AccountModal.ts                    |  27 ++---
 src/client/FlagInput.ts                       |   2 +-
 src/client/FlagInputModal.ts                  |  11 +-
 src/client/GameModeSelector.ts                |  26 ++---
 src/client/GameStartingModal.ts               |   2 +-
 src/client/HelpModal.ts                       |   2 +-
 src/client/HostLobbyModal.ts                  |  15 +--
 src/client/JoinLobbyModal.ts                  |  22 ++--
 src/client/LanguageModal.ts                   |   2 +-
 src/client/PatternInput.ts                    |   4 +-
 src/client/SinglePlayerModal.ts               |  11 +-
 src/client/Store.ts                           |   6 +-
 src/client/TerritoryPatternsModal.ts          |  11 +-
 src/client/TroubleshootingModal.ts            |  10 +-
 src/client/UserSettingModal.ts                |   4 +-
 src/client/components/DesktopNavBar.ts        |  29 +++--
 src/client/components/FluentSlider.ts         |   6 +-
 src/client/components/GameConfigSettings.ts   |   6 +-
 .../components/IOSAddToHomeScreenBanner.ts    |  12 +-
 src/client/components/LobbyPlayerView.ts      |   4 +-
 src/client/components/MobileNavBar.ts         |   2 +-
 src/client/components/NewsBox.ts              |   2 +-
 src/client/components/PlayPage.ts             |   6 +-
 src/client/components/RankedModal.ts          |   2 +-
 src/client/components/ToggleInputCard.ts      |   4 +-
 .../components/baseComponents/Button.ts       | 104 +++++++++++++-----
 .../baseComponents/ranking/PlayerRow.ts       |   2 +-
 .../baseComponents/ranking/RankingControls.ts |   2 +-
 .../baseComponents/setting/SettingSlider.ts   |   8 +-
 .../baseComponents/stats/GameList.ts          |   2 +-
 src/client/components/map/MapDisplay.ts       |   2 +-
 src/client/components/map/MapPicker.ts        |   6 +-
 src/client/graphics/layers/AttacksDisplay.ts  |  12 +-
 src/client/graphics/layers/ControlPanel.ts    |  12 +-
 .../graphics/layers/PlayerInfoOverlay.ts      |  18 +--
 src/client/graphics/layers/ReplayPanel.ts     |   2 +-
 src/client/graphics/layers/SpawnTimer.ts      |   7 +-
 src/client/graphics/layers/WinModal.ts        |  35 +++---
 src/client/styles.css                         |  33 +++++-
 src/client/styles/components/button.css       |  88 ---------------
 src/client/styles/core/variables.css          |  21 ++--
 src/client/styles/layout/header.css           |   2 +-
 42 files changed, 289 insertions(+), 295 deletions(-)
 delete mode 100644 src/client/styles/components/button.css

diff --git a/src/client/AccountModal.ts b/src/client/AccountModal.ts
index a1375f12d..6992a47e4 100644
--- a/src/client/AccountModal.ts
+++ b/src/client/AccountModal.ts
@@ -241,12 +241,12 @@ export class AccountModal extends BaseModal {
 
   private renderLogoutButton(): TemplateResult {
     return html`
-      <button
-        @click="${this.handleLogout}"
-        class="px-6 py-2 text-sm font-bold text-white uppercase tracking-wider bg-red-600/80 hover:bg-red-600 border border-red-500/50 rounded-lg transition-all shadow-lg hover:shadow-red-900/40"
-      >
-        ${translateText("account_modal.log_out")}
-      </button>
+      <o-button
+        variant="danger"
+        size="md"
+        translationKey="account_modal.log_out"
+        @click=${this.handleLogout}
+      ></o-button>
     `;
   }
 
@@ -318,19 +318,20 @@ export class AccountModal extends BaseModal {
                   name="email"
                   .value="${this.email}"
                   @input="${this.handleEmailInput}"
-                  class="w-full pl-4 pr-12 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/20 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all font-medium hover:bg-white/10"
+                  class="w-full pl-4 pr-12 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/20 focus:outline-none focus:ring-2 focus:ring-malibu-blue/50 focus:border-malibu-blue/50 transition-all font-medium hover:bg-white/10"
                   placeholder="${translateText(
                     "account_modal.email_placeholder",
                   )}"
                   required
                 />
               </div>
-              <button
-                @click="${this.handleSubmit}"
-                class="w-full px-6 py-3 text-sm font-bold text-white uppercase tracking-wider bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 rounded-xl transition-all shadow-lg hover:shadow-blue-900/40 border border-white/5"
-              >
-                ${translateText("account_modal.get_magic_link")}
-              </button>
+              <o-button
+                variant="primary"
+                width="block"
+                size="md"
+                translationKey="account_modal.get_magic_link"
+                @click=${this.handleSubmit}
+              ></o-button>
             </div>
           </div>
 
diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts
index c156dbc53..423c8608a 100644
--- a/src/client/FlagInput.ts
+++ b/src/client/FlagInput.ts
@@ -73,7 +73,7 @@ export class FlagInput extends LitElement {
     return html`
       <button
         id="flag-input"
-        class="flag-btn p-0 m-0 border-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] hover:brightness-[1.08] active:brightness-[0.95] rounded-lg overflow-hidden"
+        class="flag-btn p-0 m-0 border-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-surface hover:brightness-[1.08] active:brightness-[0.95] rounded-lg overflow-hidden"
         title=${buttonTitle}
         @click=${this.onInputClick}
       >
diff --git a/src/client/FlagInputModal.ts b/src/client/FlagInputModal.ts
index 9da509207..7d33a2240 100644
--- a/src/client/FlagInputModal.ts
+++ b/src/client/FlagInputModal.ts
@@ -149,15 +149,16 @@ export class FlagInputModal extends BaseModal {
           </div>
         </div>
         <div class="flex justify-center py-3 shrink-0">
-          <button
-            class="no-crazygames px-4 py-2 text-sm font-bold uppercase tracking-wider rounded-lg bg-blue-600 hover:bg-blue-700 text-white cursor-pointer transition-colors"
+          <o-button
+            class="no-crazygames"
+            variant="primary"
+            size="sm"
+            translationKey="main.store"
             @click=${() => {
               this.close();
               window.showPage?.("page-item-store");
             }}
-          >
-            ${translateText("main.store")}
-          </button>
+          ></o-button>
         </div>
 
         <div
diff --git a/src/client/GameModeSelector.ts b/src/client/GameModeSelector.ts
index 3ed313913..07c6d0feb 100644
--- a/src/client/GameModeSelector.ts
+++ b/src/client/GameModeSelector.ts
@@ -28,7 +28,7 @@ import {
   translateText,
 } from "./Utils";
 
-const CARD_BG = "bg-sky-950";
+const CARD_BG = "bg-surface";
 
 @customElement("game-mode-selector")
 export class GameModeSelector extends LitElement {
@@ -120,7 +120,7 @@ export class GameModeSelector extends LitElement {
           ${this.renderSmallActionCard(
             translateText("main.solo"),
             this.openSinglePlayerModal,
-            "bg-[#0073b7] hover:bg-sky-500 active:bg-sky-700",
+            "bg-malibu-blue hover:bg-aquarius active:bg-malibu-blue/80",
           )}
         </div>
         <!-- Create/ranked/join: mobile only, below solo -->
@@ -128,19 +128,19 @@ export class GameModeSelector extends LitElement {
           ${this.renderSmallActionCard(
             translateText("main.create"),
             this.openHostLobby,
-            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
+            "bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
           )}
           ${!crazyGamesSDK.isOnCrazyGames()
             ? this.renderSmallActionCard(
                 translateText("mode_selector.ranked_title"),
                 this.openRankedMenu,
-                "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
+                "bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
               )
             : html`<div class="invisible"></div>`}
           ${this.renderSmallActionCard(
             translateText("main.join"),
             this.openJoinLobby,
-            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
+            "bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
           )}
         </div>
         <!-- iOS Add to Home Screen banner -->
@@ -192,7 +192,7 @@ export class GameModeSelector extends LitElement {
           ${this.renderSmallActionCard(
             translateText("main.solo"),
             this.openSinglePlayerModal,
-            "bg-[#0073b7] hover:bg-sky-500 active:bg-sky-700",
+            "bg-malibu-blue hover:bg-aquarius active:bg-malibu-blue/80",
           )}
         </div>
         <!-- Bottom row: create + ranked + join (desktop only) -->
@@ -200,19 +200,19 @@ export class GameModeSelector extends LitElement {
           ${this.renderSmallActionCard(
             translateText("main.create"),
             this.openHostLobby,
-            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
+            "bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
           )}
           ${!crazyGamesSDK.isOnCrazyGames()
             ? this.renderSmallActionCard(
                 translateText("mode_selector.ranked_title"),
                 this.openRankedMenu,
-                "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
+                "bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
               )
             : html`<div class="invisible"></div>`}
           ${this.renderSmallActionCard(
             translateText("main.join"),
             this.openJoinLobby,
-            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
+            "bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
           )}
         </div>
       </div>
@@ -253,7 +253,7 @@ export class GameModeSelector extends LitElement {
     return html`
       <button
         @click=${onClick}
-        class="flex items-center justify-center w-full h-full rounded-lg ${bgClass} transition-colors text-sm lg:text-base font-medium text-white uppercase tracking-wider text-center"
+        class="flex items-center justify-center w-full h-full rounded-lg ${bgClass} transition-all duration-200 text-sm lg:text-base font-medium text-white uppercase tracking-wider text-center"
       >
         ${title}
       </button>
@@ -299,7 +299,7 @@ export class GameModeSelector extends LitElement {
     return html`
       <button
         @click=${() => this.validateAndJoin(lobby)}
-        class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] bg-sky-950"
+        class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] bg-surface"
       >
         <!-- Image clipped separately so overflow-hidden doesn't block absolute children -->
         <div
@@ -325,7 +325,7 @@ export class GameModeSelector extends LitElement {
                 ${modifierLabels.map(
                   (label) =>
                     html`<span
-                      class="px-2 py-1 rounded text-xs font-bold uppercase tracking-widest bg-[#0073b7] text-white shadow-[0_0_6px_rgba(14,165,233,0.35)]"
+                      class="px-2 py-1 rounded text-xs font-bold uppercase tracking-widest bg-malibu-blue text-white shadow-[var(--shadow-malibu-blue-pill)]"
                       >${label}</span
                     >`,
                 )}
@@ -335,7 +335,7 @@ export class GameModeSelector extends LitElement {
             <span
               class="text-xs font-bold tracking-widest ${timeDisplayUppercase
                 ? "uppercase"
-                : "normal-case"} bg-[#0073b7] text-white px-2 py-1 rounded"
+                : "normal-case"} bg-malibu-blue text-white px-2 py-1 rounded"
               >${timeDisplay}</span
             >
           </div>
diff --git a/src/client/GameStartingModal.ts b/src/client/GameStartingModal.ts
index feff2ab03..2c64f377f 100644
--- a/src/client/GameStartingModal.ts
+++ b/src/client/GameStartingModal.ts
@@ -33,7 +33,7 @@ export class GameStartingModal extends LitElement {
           href="https://github.com/openfrontio/OpenFrontIO/blob/main/CREDITS.md"
           target="_blank"
           rel="noopener noreferrer"
-          class="block mb-4 text-lg font-medium tracking-wider uppercase text-sky-400 no-underline transition-colors duration-200 hover:text-sky-300"
+          class="block mb-4 text-lg font-medium tracking-wider uppercase text-malibu-blue no-underline transition-colors duration-200 hover:text-aquarius"
           >${translateText("game_starting_modal.credits")}</a
         >
         <p class="text-base text-white/40 mb-4">
diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts
index c58a588fd..ab2e0d943 100644
--- a/src/client/HelpModal.ts
+++ b/src/client/HelpModal.ts
@@ -155,7 +155,7 @@ export class HelpModal extends BaseModal {
               </p>
               <button
                 id="troubleshooting-button"
-                class="hover:bg-white/5 px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+                class="hover:bg-white/5 px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
                 data-page="page-troubleshooting"
                 @click="${this.openTroubleshooting}"
                 data-i18n="main.go_to_troubleshooting"
diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index 7c83a0e93..be9eb3806 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -404,15 +404,16 @@ export class HostLobbyModal extends BaseModal {
 
         <!-- Player List / footer -->
         <div class="p-6 pt-4 border-t border-white/10 bg-black/20 shrink-0">
-          <button
-            class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-[#0073b7] hover:bg-sky-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0 disabled:transform-none"
-            @click=${this.startGame}
-            ?disabled=${this.clients.length < 2}
-          >
-            ${this.clients.length === 1
+          <o-button
+            variant="primary"
+            width="block"
+            size="lg"
+            .title=${this.clients.length === 1
               ? translateText("host_modal.waiting")
               : translateText("host_modal.start")}
-          </button>
+            ?disable=${this.clients.length < 2}
+            @click=${this.startGame}
+          ></o-button>
         </div>
       </div>
     `;
diff --git a/src/client/JoinLobbyModal.ts b/src/client/JoinLobbyModal.ts
index 5e06fd959..dea832b87 100644
--- a/src/client/JoinLobbyModal.ts
+++ b/src/client/JoinLobbyModal.ts
@@ -160,7 +160,7 @@ export class JoinLobbyModal extends BaseModal {
                 class="p-6 lg:p-6 border-t border-white/10 bg-black/20 shrink-0"
               >
                 <button
-                  class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-[#0073b7] hover:bg-sky-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0 disabled:transform-none"
+                  class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-malibu-blue hover:bg-aquarius disabled:opacity-50 disabled:cursor-not-allowed rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0 disabled:transform-none"
                   disabled
                 >
                   ${translateText("private_lobby.joined_waiting")}
@@ -240,13 +240,12 @@ export class JoinLobbyModal extends BaseModal {
                 @keyup=${this.handleChange}
                 class="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all font-mono text-sm tracking-wider"
               />
-              <button
-                @click=${this.pasteFromClipboard}
-                class="px-4 py-3 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 rounded-xl transition-all group"
-                title=${translateText("common.paste")}
-              >
-                <svg
-                  class="text-white/60 group-hover:text-white transition-colors"
+              <o-button
+                variant="ghost"
+                size="md"
+                iconPosition="only"
+                .title=${translateText("common.paste")}
+                .icon=${html`<svg
                   stroke="currentColor"
                   fill="currentColor"
                   stroke-width="0"
@@ -258,12 +257,13 @@ export class JoinLobbyModal extends BaseModal {
                   <path
                     d="M 15 3 C 13.742188 3 12.847656 3.890625 12.40625 5 L 5 5 L 5 28 L 13 28 L 13 30 L 27 30 L 27 14 L 25 14 L 25 5 L 17.59375 5 C 17.152344 3.890625 16.257813 3 15 3 Z M 15 5 C 15.554688 5 16 5.445313 16 6 L 16 7 L 19 7 L 19 9 L 11 9 L 11 7 L 14 7 L 14 6 C 14 5.445313 14.445313 5 15 5 Z M 7 7 L 9 7 L 9 11 L 21 11 L 21 7 L 23 7 L 23 14 L 13 14 L 13 26 L 7 26 Z M 15 16 L 25 16 L 25 28 L 15 28 Z"
                   ></path>
-                </svg>
-              </button>
+                </svg>`}
+                @click=${this.pasteFromClipboard}
+              ></o-button>
             </div>
             <o-button
               title=${translateText("private_lobby.join_lobby")}
-              block
+              width="block"
               submit
             ></o-button>
           </div>
diff --git a/src/client/LanguageModal.ts b/src/client/LanguageModal.ts
index 4fd2651e4..1bc9b3da0 100644
--- a/src/client/LanguageModal.ts
+++ b/src/client/LanguageModal.ts
@@ -58,7 +58,7 @@ export class LanguageModal extends BaseModal {
                 buttonClasses +=
                   " animate-pulse font-bold text-white border-2 border-dashed border-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.2)] bg-gradient-to-r from-red-600 via-yellow-600 via-green-600 via-blue-600 to-purple-600";
               } else if (isActive) {
-                buttonClasses += " bg-blue-500/20 border-blue-500/50";
+                buttonClasses += " bg-malibu-blue/20 border-malibu-blue/50";
               } else {
                 buttonClasses +=
                   " bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20";
diff --git a/src/client/PatternInput.ts b/src/client/PatternInput.ts
index 398158eb8..d36cf6a8e 100644
--- a/src/client/PatternInput.ts
+++ b/src/client/PatternInput.ts
@@ -111,7 +111,7 @@ export class PatternInput extends LitElement {
       return html`
         <button
           id="pattern-input"
-          class="pattern-btn m-0 p-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] rounded-lg overflow-hidden"
+          class="pattern-btn m-0 p-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 bg-surface rounded-lg overflow-hidden"
           disabled
         >
           <span
@@ -131,7 +131,7 @@ export class PatternInput extends LitElement {
     return html`
       <button
         id="pattern-input"
-        class="pattern-btn m-0 p-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] hover:brightness-[1.08] active:brightness-[0.95] rounded-lg overflow-hidden"
+        class="pattern-btn m-0 p-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-surface hover:brightness-[1.08] active:brightness-[0.95] rounded-lg overflow-hidden"
         title=${buttonTitle}
         @click=${this.onInputClick}
       >
diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts
index 038d8b52e..682be4d04 100644
--- a/src/client/SinglePlayerModal.ts
+++ b/src/client/SinglePlayerModal.ts
@@ -348,12 +348,13 @@ export class SinglePlayerModal extends BaseModal {
                 ${translateText("single_modal.options_changed_no_achievements")}
               </div>`
             : null}
-          <button
+          <o-button
+            variant="primary"
+            width="block"
+            size="lg"
+            translationKey="single_modal.start"
             @click=${this.startGame}
-            class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-[#0073b7] hover:bg-sky-500 rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0"
-          >
-            ${translateText("single_modal.start")}
-          </button>
+          ></o-button>
         </div>
       </div>
     `;
diff --git a/src/client/Store.ts b/src/client/Store.ts
index 39ee0dc03..f4e80b444 100644
--- a/src/client/Store.ts
+++ b/src/client/Store.ts
@@ -52,7 +52,7 @@ export class StoreModal extends BaseModal {
         <button
           class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
             .activeTab === "packs"
-            ? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+            ? "bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
             : "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
           @click=${() => (this.activeTab = "packs")}
         >
@@ -61,7 +61,7 @@ export class StoreModal extends BaseModal {
         <button
           class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
             .activeTab === "patterns"
-            ? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+            ? "bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
             : "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
           @click=${() => (this.activeTab = "patterns")}
         >
@@ -70,7 +70,7 @@ export class StoreModal extends BaseModal {
         <button
           class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
             .activeTab === "flags"
-            ? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+            ? "bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
             : "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
           @click=${() => (this.activeTab = "flags")}
         >
diff --git a/src/client/TerritoryPatternsModal.ts b/src/client/TerritoryPatternsModal.ts
index 4c87c1f5f..605b24013 100644
--- a/src/client/TerritoryPatternsModal.ts
+++ b/src/client/TerritoryPatternsModal.ts
@@ -149,15 +149,16 @@ export class TerritoryPatternsModal extends BaseModal {
           </div>
         </div>
         <div class="flex justify-center py-3 shrink-0">
-          <button
-            class="no-crazygames px-4 py-2 text-sm font-bold uppercase tracking-wider rounded-lg bg-blue-600 hover:bg-blue-700 text-white cursor-pointer transition-colors"
+          <o-button
+            class="no-crazygames"
+            variant="primary"
+            size="sm"
+            translationKey="main.store"
             @click=${() => {
               this.close();
               window.showPage?.("page-item-store");
             }}
-          >
-            ${translateText("main.store")}
-          </button>
+          ></o-button>
         </div>
         <div
           class="flex-1 overflow-y-auto px-3 pb-3 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent mr-1"
diff --git a/src/client/TroubleshootingModal.ts b/src/client/TroubleshootingModal.ts
index 30bb6da3c..46a783113 100644
--- a/src/client/TroubleshootingModal.ts
+++ b/src/client/TroubleshootingModal.ts
@@ -46,12 +46,12 @@ export class TroubleshootingModal extends BaseModal {
               >
               / ${translateText("troubleshooting.title")}
             </span>
-            <button
-              class="hover:bg-white/5 px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+            <o-button
+              variant="primary"
+              size="sm"
+              translationKey="common.copy"
               @click=${this.copyDiagnostics}
-            >
-              ${translateText("common.copy")}
-            </button>
+            ></o-button>
           </div>`,
           onBack: () => this.close(),
           ariaLabel: translateText("common.back"),
diff --git a/src/client/UserSettingModal.ts b/src/client/UserSettingModal.ts
index 30da04355..1d599ad0d 100644
--- a/src/client/UserSettingModal.ts
+++ b/src/client/UserSettingModal.ts
@@ -335,7 +335,7 @@ export class UserSettingModal extends BaseModal {
             <button
               class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
                 .activeTab === "basic"
-                ? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+                ? "bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
                 : "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
               @click=${() => (this.activeTab = "basic")}
             >
@@ -344,7 +344,7 @@ export class UserSettingModal extends BaseModal {
             <button
               class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
                 .activeTab === "keybinds"
-                ? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+                ? "bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
                 : "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
               @click=${() => (this.activeTab = "keybinds")}
             >
diff --git a/src/client/components/DesktopNavBar.ts b/src/client/components/DesktopNavBar.ts
index c9d0a32c5..af220e04c 100644
--- a/src/client/components/DesktopNavBar.ts
+++ b/src/client/components/DesktopNavBar.ts
@@ -53,12 +53,17 @@ export class DesktopNavBar extends LitElement {
         class="hidden lg:flex w-full bg-zinc-900/90 backdrop-blur-md items-center justify-center gap-8 py-4 shrink-0 z-50 relative"
       >
         <div class="flex flex-col items-center justify-center">
-          <div class="h-8 text-[#0073b7]">
-            <img
-              src=${assetUrl("images/OpenFrontLogo.svg")}
-              alt="OpenFront"
-              class="h-full w-auto"
-            />
+          <div class="h-8">
+            <span
+              class="block h-full aspect-[1364/259] bg-malibu-blue"
+              style="-webkit-mask: url(${assetUrl(
+                "images/OpenFrontLogo.svg",
+              )}) no-repeat center / contain; mask: url(${assetUrl(
+                "images/OpenFrontLogo.svg",
+              )}) no-repeat center / contain;"
+              role="img"
+              aria-label="OpenFront"
+            ></span>
           </div>
           <div
             id="game-version"
@@ -68,7 +73,7 @@ export class DesktopNavBar extends LitElement {
         <button
           class="nav-menu-item ${currentPage === "page-play"
             ? "active"
-            : ""} text-white/70 hover:text-[#0073b7]  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
+            : ""} text-white/70 hover:text-malibu-blue  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
           data-page="page-play"
           data-i18n="main.play"
         ></button>
@@ -77,7 +82,7 @@ export class DesktopNavBar extends LitElement {
           <button
             class="nav-menu-item ${currentPage === "page-news"
               ? "active"
-              : ""} text-white/70 hover:text-[#0073b7]  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
+              : ""} text-white/70 hover:text-malibu-blue  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
             data-page="page-news"
             data-i18n="main.news"
             @click=${this._notifications.onNewsClick}
@@ -97,7 +102,7 @@ export class DesktopNavBar extends LitElement {
           <button
             class="nav-menu-item ${currentPage === "page-item-store"
               ? "active"
-              : ""} text-white/70 hover:text-[#0073b7]  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
+              : ""} text-white/70 hover:text-malibu-blue  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
             data-page="page-item-store"
             data-i18n="main.store"
             @click=${this._notifications.onStoreClick}
@@ -114,18 +119,18 @@ export class DesktopNavBar extends LitElement {
             : ""}
         </div>
         <button
-          class="nav-menu-item text-white/70 hover:text-[#0073b7]  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
+          class="nav-menu-item text-white/70 hover:text-malibu-blue  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
           data-page="page-settings"
           data-i18n="main.settings"
         ></button>
         <button
-          class="nav-menu-item text-white/70 hover:text-[#0073b7]  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
+          class="nav-menu-item text-white/70 hover:text-malibu-blue  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
           data-page="page-leaderboard"
           data-i18n="main.leaderboard"
         ></button>
         <div class="relative">
           <button
-            class="nav-menu-item text-white/70 hover:text-[#0073b7]  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
+            class="nav-menu-item text-white/70 hover:text-malibu-blue  font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
             data-page="page-help"
             data-i18n="main.help"
             @click=${this._notifications.onHelpClick}
diff --git a/src/client/components/FluentSlider.ts b/src/client/components/FluentSlider.ts
index c45dc967f..1a026135e 100644
--- a/src/client/components/FluentSlider.ts
+++ b/src/client/components/FluentSlider.ts
@@ -86,12 +86,12 @@ export class FluentSlider extends LitElement {
           .max=${this.max}
           .step=${this.step}
           .valueAsNumber=${this.value}
-          style="background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ${percentage}%, rgba(255, 255, 255, 0.15) ${percentage}%, rgba(255, 255, 255, 0.15) 100%); background-size: 100% 6px; background-repeat: no-repeat; background-position: center; border-radius: 9999px;"
+          style="background: linear-gradient(to right, var(--color-malibu-blue) 0%, var(--color-malibu-blue) ${percentage}%, rgba(255, 255, 255, 0.15) ${percentage}%, rgba(255, 255, 255, 0.15) 100%); background-size: 100% 6px; background-repeat: no-repeat; background-position: center; border-radius: 9999px;"
           class="w-full h-6 p-0 m-0 bg-transparent appearance-none cursor-pointer focus:outline-none 
                  [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:h-[6px] [&::-webkit-slider-runnable-track]:cursor-pointer [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:transition-colors
-                 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_rgba(59,130,246,0.2)] [&::-webkit-slider-thumb]:transition-all active:[&::-webkit-slider-thumb]:scale-110 active:[&::-webkit-slider-thumb]:shadow-[0_0_0_6px_rgba(59,130,246,0.3)]
+                 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-malibu-blue [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-[var(--shadow-malibu-blue-ring-sm)] [&::-webkit-slider-thumb]:transition-all active:[&::-webkit-slider-thumb]:scale-110 active:[&::-webkit-slider-thumb]:shadow-[var(--shadow-malibu-blue-ring-lg)]
                  [&::-moz-range-track]:w-full [&::-moz-range-track]:h-[6px] [&::-moz-range-track]:cursor-pointer [&::-moz-range-track]:bg-transparent [&::-moz-range-track]:rounded-full [&::-moz-range-track]:transition-colors
-                 [&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:shadow-[0_0_0_4px_rgba(59,130,246,0.2)] [&::-moz-range-thumb]:transition-all active:[&::-moz-range-thumb]:scale-110 active:[&::-moz-range-thumb]:shadow-[0_0_0_6px_rgba(59,130,246,0.3)]"
+                 [&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-malibu-blue [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:shadow-[var(--shadow-malibu-blue-ring-sm)] [&::-moz-range-thumb]:transition-all active:[&::-moz-range-thumb]:scale-110 active:[&::-moz-range-thumb]:shadow-[var(--shadow-malibu-blue-ring-lg)]"
           @input=${this.handleSliderInput}
           @change=${this.handleSliderChange}
         />
diff --git a/src/client/components/GameConfigSettings.ts b/src/client/components/GameConfigSettings.ts
index bd34dea83..39184d267 100644
--- a/src/client/components/GameConfigSettings.ts
+++ b/src/client/components/GameConfigSettings.ts
@@ -24,7 +24,7 @@ import "./FluentSlider";
 import "./map/MapPicker";
 
 const ACTIVE_CARD =
-  "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.2)]";
+  "bg-malibu-blue/20 border-malibu-blue/50 shadow-[var(--shadow-malibu-blue)]";
 const INACTIVE_CARD =
   "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20";
 
@@ -317,8 +317,8 @@ export class GameConfigSettings extends LitElement {
       <div class=${this.sectionGapClass}>
         ${renderSection(
           MAP_ICON,
-          "text-blue-400",
-          "bg-blue-500/20",
+          "text-aquarius",
+          "bg-malibu-blue/20",
           "map.map",
           html`<map-picker
             .selectedMap=${settings.map.selected}
diff --git a/src/client/components/IOSAddToHomeScreenBanner.ts b/src/client/components/IOSAddToHomeScreenBanner.ts
index 2d7924e0f..999d3dbac 100644
--- a/src/client/components/IOSAddToHomeScreenBanner.ts
+++ b/src/client/components/IOSAddToHomeScreenBanner.ts
@@ -96,14 +96,14 @@ export class IOSAddToHomeScreenBanner extends LitElement {
             <ol class="flex flex-col gap-3 text-sm text-slate-200">
               <li class="flex items-start gap-3">
                 <span
-                  class="shrink-0 w-6 h-6 rounded-full bg-[#0073b7] flex items-center justify-center text-white font-bold text-xs"
+                  class="shrink-0 w-6 h-6 rounded-full bg-malibu-blue flex items-center justify-center text-white font-bold text-xs"
                   >1</span
                 >
                 <span>${translateText("ios_banner.step_share")}</span>
               </li>
               <li class="flex items-start gap-3">
                 <span
-                  class="shrink-0 w-6 h-6 rounded-full bg-[#0073b7] flex items-center justify-center text-white font-bold text-xs"
+                  class="shrink-0 w-6 h-6 rounded-full bg-malibu-blue flex items-center justify-center text-white font-bold text-xs"
                   >2</span
                 >
                 <span
@@ -117,7 +117,7 @@ export class IOSAddToHomeScreenBanner extends LitElement {
               </li>
               <li class="flex items-start gap-3">
                 <span
-                  class="shrink-0 w-6 h-6 rounded-full bg-[#0073b7] flex items-center justify-center text-white font-bold text-xs"
+                  class="shrink-0 w-6 h-6 rounded-full bg-malibu-blue flex items-center justify-center text-white font-bold text-xs"
                   >3</span
                 >
                 <span>${translateText("ios_banner.step_open")}</span>
@@ -125,7 +125,7 @@ export class IOSAddToHomeScreenBanner extends LitElement {
             </ol>
 
             <button
-              class="w-full py-2.5 rounded-lg bg-[#0073b7] hover:bg-sky-500 active:bg-sky-700 text-white font-semibold transition-colors"
+              class="w-full py-2.5 rounded-lg bg-malibu-blue hover:bg-aquarius active:bg-malibu-blue/80 text-white font-semibold transition-colors"
               @click=${this.closeGuide}
             >
               ${translateText("ios_banner.got_it")}
@@ -154,7 +154,7 @@ export class IOSAddToHomeScreenBanner extends LitElement {
         <div class="flex gap-3 items-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="shrink-0 w-8 h-8 text-[#0073b7]"
+            class="shrink-0 w-8 h-8 text-malibu-blue"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -171,7 +171,7 @@ export class IOSAddToHomeScreenBanner extends LitElement {
 
         <div class="flex flex-col gap-1.5">
           <button
-            class="w-full py-1.5 rounded-lg bg-[#0073b7] hover:bg-sky-500 active:bg-sky-700 text-white font-semibold text-sm transition-colors"
+            class="w-full py-1.5 rounded-lg bg-malibu-blue hover:bg-aquarius active:bg-malibu-blue/80 text-white font-semibold text-sm transition-colors"
             @click=${this.openGuide}
           >
             ${translateText("ios_banner.how")}
diff --git a/src/client/components/LobbyPlayerView.ts b/src/client/components/LobbyPlayerView.ts
index e7208c3ee..5dcd3eef0 100644
--- a/src/client/components/LobbyPlayerView.ts
+++ b/src/client/components/LobbyPlayerView.ts
@@ -126,7 +126,7 @@ export class LobbyTeamView extends LitElement {
             return html`<div
               class="px-2 py-1 rounded-sm mb-1 text-xs text-white border
                 ${this.isCurrentPlayer(client)
-                ? "bg-[#0073b7]/20 border-sky-500/40"
+                ? "bg-malibu-blue/20 border-sky-500/40"
                 : "bg-gray-700/70 border-transparent"}"
             >
               ${displayName}
@@ -242,7 +242,7 @@ export class LobbyTeamView extends LitElement {
                   return html` <div
                     class="px-2 py-1 rounded-sm text-xs flex items-center justify-between border
                       ${this.isCurrentPlayer(p)
-                      ? "bg-[#0073b7]/20 border-sky-500/40"
+                      ? "bg-malibu-blue/20 border-sky-500/40"
                       : "bg-gray-700/70 border-transparent"}"
                   >
                     <span class="truncate text-white">${displayName}</span>
diff --git a/src/client/components/MobileNavBar.ts b/src/client/components/MobileNavBar.ts
index 110be7e8a..5a6217478 100644
--- a/src/client/components/MobileNavBar.ts
+++ b/src/client/components/MobileNavBar.ts
@@ -73,7 +73,7 @@ export class MobileNavBar extends LitElement {
       >
         <!-- Logo + Menu -->
         <div
-          class="flex flex-col text-[#0073b7] mb-[clamp(1rem,2vh,2rem)] ml-[clamp(0.2rem,0.4vw,0.4vh)]"
+          class="flex flex-col text-malibu-blue mb-[clamp(1rem,2vh,2rem)] ml-[clamp(0.2rem,0.4vw,0.4vh)]"
         >
           <div class="flex flex-col items-center gap-2">
             <img
diff --git a/src/client/components/NewsBox.ts b/src/client/components/NewsBox.ts
index f9ad6e05e..42b7982b3 100644
--- a/src/client/components/NewsBox.ts
+++ b/src/client/components/NewsBox.ts
@@ -115,7 +115,7 @@ export class NewsBox extends LitElement {
 
     return html`
       <div
-        class="px-2 py-2 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] border-y border-white/10 lg:border-y-0 lg:rounded-xl lg:p-3"
+        class="px-2 py-2 bg-surface border-y border-white/10 lg:border-y-0 lg:rounded-xl lg:p-3"
       >
         <div class="flex items-center gap-3">
           <span
diff --git a/src/client/components/PlayPage.ts b/src/client/components/PlayPage.ts
index 79c51e1cc..ef33aa100 100644
--- a/src/client/components/PlayPage.ts
+++ b/src/client/components/PlayPage.ts
@@ -19,7 +19,7 @@ export class PlayPage extends LitElement {
 
         <!-- Mobile: Fixed top bar -->
         <div
-          class="lg:hidden fixed left-0 right-0 top-0 z-40 pt-[env(safe-area-inset-top)] bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] border-b border-white/10"
+          class="lg:hidden fixed left-0 right-0 top-0 z-40 pt-[env(safe-area-inset-top)] bg-surface border-b border-white/10"
         >
           <div
             class="grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center h-14 px-2 gap-2"
@@ -50,7 +50,7 @@ export class PlayPage extends LitElement {
             </button>
 
             <div
-              class="col-start-2 flex items-center justify-center text-[#0073b7] min-w-0"
+              class="col-start-2 flex items-center justify-center text-malibu-blue min-w-0"
             >
               <img
                 src=${assetUrl("images/OpenFrontLogo.svg")}
@@ -79,7 +79,7 @@ export class PlayPage extends LitElement {
 
           <!-- Username: left col -->
           <div
-            class="px-2 py-2 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] border-y border-white/10 overflow-visible lg:flex lg:items-center lg:gap-x-2 lg:h-[60px] lg:p-3 lg:relative lg:z-20 lg:border-y-0 lg:rounded-xl"
+            class="px-2 py-2 bg-surface border-y border-white/10 overflow-visible lg:flex lg:items-center lg:gap-x-2 lg:h-[60px] lg:p-3 lg:relative lg:z-20 lg:border-y-0 lg:rounded-xl"
           >
             <div class="flex items-center gap-2 min-w-0 w-full">
               <username-input
diff --git a/src/client/components/RankedModal.ts b/src/client/components/RankedModal.ts
index 9e37b7bdc..cc10defa8 100644
--- a/src/client/components/RankedModal.ts
+++ b/src/client/components/RankedModal.ts
@@ -128,7 +128,7 @@ export class RankedModal extends BaseModal {
     return html`
       <button
         @click=${onClick}
-        class="flex flex-col w-full h-28 sm:h-32 rounded-2xl bg-[color-mix(in_oklab,var(--frenchBlue)_70%,black)] border-0 transition-transform hover:scale-[1.02] active:scale-[0.98] p-6 items-center justify-center gap-3"
+        class="flex flex-col w-full h-28 sm:h-32 rounded-2xl bg-surface border-0 transition-transform hover:scale-[1.02] active:scale-[0.98] p-6 items-center justify-center gap-3"
       >
         <div class="flex flex-col items-center gap-1 text-center">
           <h3
diff --git a/src/client/components/ToggleInputCard.ts b/src/client/components/ToggleInputCard.ts
index 6628ea0be..b6b816db2 100644
--- a/src/client/components/ToggleInputCard.ts
+++ b/src/client/components/ToggleInputCard.ts
@@ -3,11 +3,11 @@ import { customElement, property } from "lit/decorators.js";
 import { translateText } from "../Utils";
 
 const ACTIVE_CARD =
-  "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.2)]";
+  "bg-malibu-blue/20 border-malibu-blue/50 shadow-[var(--shadow-malibu-blue)]";
 const INACTIVE_CARD =
   "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20";
 const INPUT_CLASS =
-  "w-full text-center rounded bg-black/60 text-white text-sm font-bold border border-white/20 focus:outline-none focus:border-blue-500 p-1 my-1";
+  "w-full text-center rounded bg-black/60 text-white text-sm font-bold border border-white/20 focus:outline-none focus:border-malibu-blue p-1 my-1";
 const CARD_LABEL_CLASS =
   "text-xs uppercase font-bold tracking-wider leading-tight break-words hyphens-auto";
 
diff --git a/src/client/components/baseComponents/Button.ts b/src/client/components/baseComponents/Button.ts
index 6f9747e62..6d9f7bb8e 100644
--- a/src/client/components/baseComponents/Button.ts
+++ b/src/client/components/baseComponents/Button.ts
@@ -1,51 +1,99 @@
-import { LitElement, html } from "lit";
+import { LitElement, TemplateResult, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { translateText } from "../../Utils";
 
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+type ButtonWidth = "auto" | "block" | "blockDesktop" | "fill";
+type IconPosition = "left" | "right" | "only";
+
 @customElement("o-button")
 export class OButton extends LitElement {
-  @property({ type: String }) title = "";
-  @property({ type: String }) translationKey = "";
-  @property({ type: Boolean }) secondary = false;
-  @property({ type: Boolean }) block = false;
-  @property({ type: Boolean }) blockDesktop = false;
+  @property() title = "";
+  @property() translationKey = "";
+  @property() variant: ButtonVariant = "primary";
+  @property() size: ButtonSize = "md";
+  @property() width: ButtonWidth = "auto";
+  @property() iconPosition: IconPosition = "left";
+  @property({ attribute: false }) icon?: TemplateResult;
   @property({ type: Boolean }) disable = false;
-  @property({ type: Boolean }) fill = false;
   @property({ type: Boolean }) submit = false;
-  private static readonly BASE_CLASS =
-    "bg-[#0073b7] hover:bg-sky-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg whitespace-normal break-words leading-tight overflow-hidden relative";
 
   createRenderRoot() {
     return this;
   }
 
-  private getButtonClasses(): Record<string, boolean> {
-    return {
-      [OButton.BASE_CLASS]: true,
-      "w-full block": this.block,
-      "h-full w-full flex items-center justify-center": this.fill,
-      "lg:w-auto lg:inline-block":
-        !this.block && !this.blockDesktop && !this.fill,
-      "lg:w-1/2 lg:mx-auto lg:block": this.blockDesktop,
-      "bg-gray-700 text-gray-100 hover:bg-gray-600": this.secondary,
-      "disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none disabled:bg-gray-600":
-        this.disable,
-    };
+  private readonly BASE =
+    "font-bold uppercase tracking-wider rounded-xl border border-transparent " +
+    "transition-all duration-300 transform hover:-translate-y-px " +
+    "outline-none text-center whitespace-normal break-words leading-tight overflow-hidden relative " +
+    "disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:opacity-70";
+
+  private variantClasses(): string {
+    switch (this.variant) {
+      case "primary":
+        return "bg-malibu-blue hover:bg-aquarius text-white disabled:bg-gray-600 disabled:text-gray-300";
+      case "secondary":
+        return "bg-gray-700 hover:bg-gray-600 text-white disabled:bg-gray-800 disabled:text-gray-400";
+      case "danger":
+        return "bg-red-600 hover:bg-red-500 text-white disabled:bg-red-900 disabled:text-gray-300";
+      case "ghost":
+        return "bg-transparent hover:bg-white/10 text-malibu-blue disabled:text-gray-500 disabled:hover:bg-transparent";
+    }
+  }
+
+  private sizeClasses(): string {
+    if (this.iconPosition === "only") {
+      switch (this.size) {
+        case "sm":
+          return "w-8 h-8 text-sm";
+        case "md":
+          return "w-10 h-10 text-base";
+        case "lg":
+          return "w-12 h-12 text-lg";
+      }
+    }
+    switch (this.size) {
+      case "sm":
+        return "py-1.5 px-3 text-sm";
+      case "md":
+        return "py-3 px-4 text-base lg:text-lg";
+      case "lg":
+        return "py-4 px-6 text-lg lg:text-xl";
+    }
+  }
+
+  private widthClasses(): string {
+    switch (this.width) {
+      case "auto":
+        return "inline-flex items-center justify-center gap-2";
+      case "block":
+        return "flex w-full items-center justify-center gap-2";
+      case "blockDesktop":
+        return "flex w-full items-center justify-center gap-2 lg:w-1/2 lg:mx-auto";
+      case "fill":
+        return "flex w-full h-full items-center justify-center gap-2";
+    }
   }
 
   render() {
+    const label =
+      this.translationKey === ""
+        ? this.title
+        : translateText(this.translationKey);
+    const iconOnly = this.iconPosition === "only";
+    const classes = `${this.BASE} ${this.variantClasses()} ${this.sizeClasses()} ${this.widthClasses()}`;
+
     return html`
       <button
-        class=${classMap(this.getButtonClasses())}
+        class=${classes}
         ?disabled=${this.disable}
         type=${this.submit ? "submit" : "button"}
+        aria-label=${iconOnly ? label : nothing}
       >
-        <span class="block min-w-0">
-          ${this.translationKey === ""
-            ? this.title
-            : translateText(this.translationKey)}
-        </span>
+        ${this.icon && this.iconPosition !== "right" ? this.icon : nothing}
+        ${iconOnly ? nothing : html`<span class="min-w-0">${label}</span>`}
+        ${this.icon && this.iconPosition === "right" ? this.icon : nothing}
       </button>
     `;
   }
diff --git a/src/client/components/baseComponents/ranking/PlayerRow.ts b/src/client/components/baseComponents/ranking/PlayerRow.ts
index b954de0e3..9276defe2 100644
--- a/src/client/components/baseComponents/ranking/PlayerRow.ts
+++ b/src/client/components/baseComponents/ranking/PlayerRow.ts
@@ -240,7 +240,7 @@ export class PlayerRow extends LitElement {
   private renderTag(tag: string) {
     return html`
       <div
-        class="px-2.5 py-1 rounded bg-blue-500/10 border border-blue-500/20 text-blue-300 font-bold text-xs tracking-wide group-hover:bg-blue-500/20 transition-colors"
+        class="px-2.5 py-1 rounded bg-malibu-blue/10 border border-malibu-blue/20 text-aquarius font-bold text-xs tracking-wide group-hover:bg-malibu-blue/20 transition-colors"
       >
         ${tag}
       </div>
diff --git a/src/client/components/baseComponents/ranking/RankingControls.ts b/src/client/components/baseComponents/ranking/RankingControls.ts
index 527681c7f..13cd7f33a 100644
--- a/src/client/components/baseComponents/ranking/RankingControls.ts
+++ b/src/client/components/baseComponents/ranking/RankingControls.ts
@@ -64,7 +64,7 @@ export class RankingControls extends LitElement {
     return html`
       <button
         class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest hover:text-white hover:bg-white/5 border ${active
-          ? "bg-blue-500/20 text-blue-400 border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+          ? "bg-malibu-blue/20 text-aquarius border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
           : "text-white/40 border-transparent"}"
         @click=${() => this.onSort(type)}
       >
diff --git a/src/client/components/baseComponents/setting/SettingSlider.ts b/src/client/components/baseComponents/setting/SettingSlider.ts
index 17f7434a5..071cdc2d4 100644
--- a/src/client/components/baseComponents/setting/SettingSlider.ts
+++ b/src/client/components/baseComponents/setting/SettingSlider.ts
@@ -70,11 +70,11 @@ export class SettingSlider extends LitElement {
             <input
               type="range"
               class="flex-1 w-auto appearance-none h-2 bg-transparent rounded outline-none 
-              [&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,#3b82f6_0%,#3b82f6_var(--fill),rgba(255,255,255,0.1)_var(--fill),rgba(255,255,255,0.1)_100%)]
-              [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_rgba(59,130,246,0.2)] [&::-webkit-slider-thumb]:transition-all active:[&::-webkit-slider-thumb]:scale-110 active:[&::-webkit-slider-thumb]:shadow-[0_0_0_6px_rgba(59,130,246,0.3)]
+              [&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,var(--color-malibu-blue)_0%,var(--color-malibu-blue)_var(--fill),rgba(255,255,255,0.1)_var(--fill),rgba(255,255,255,0.1)_100%)]
+              [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-malibu-blue [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-[var(--shadow-malibu-blue-ring-sm)] [&::-webkit-slider-thumb]:transition-all active:[&::-webkit-slider-thumb]:scale-110 active:[&::-webkit-slider-thumb]:shadow-[var(--shadow-malibu-blue-ring-lg)]
               [&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded [&::-moz-range-track]:bg-white/10
-              [&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded [&::-moz-range-progress]:bg-blue-500
-              [&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:shadow-[0_0_0_4px_rgba(59,130,246,0.2)] [&::-moz-range-thumb]:transition-all active:[&::-moz-range-thumb]:scale-110 active:[&::-moz-range-thumb]:shadow-[0_0_0_6px_rgba(59,130,246,0.3)]"
+              [&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded [&::-moz-range-progress]:bg-malibu-blue
+              [&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-malibu-blue [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:shadow-[var(--shadow-malibu-blue-ring-sm)] [&::-moz-range-thumb]:transition-all active:[&::-moz-range-thumb]:scale-110 active:[&::-moz-range-thumb]:shadow-[var(--shadow-malibu-blue-ring-lg)]"
               min=${this.min}
               max=${this.max}
               .value=${String(this.value)}
diff --git a/src/client/components/baseComponents/stats/GameList.ts b/src/client/components/baseComponents/stats/GameList.ts
index 111ef013b..93c509419 100644
--- a/src/client/components/baseComponents/stats/GameList.ts
+++ b/src/client/components/baseComponents/stats/GameList.ts
@@ -46,7 +46,7 @@ export class GameList extends LitElement {
               >
                 <div class="flex items-center gap-4">
                   <button
-                    class="p-2 bg-blue-500/20 rounded-lg text-blue-400"
+                    class="p-2 bg-malibu-blue/20 rounded-lg text-aquarius"
                     @click=${() => this.onViewGame?.(game.gameId)}
                   >
                     <svg
diff --git a/src/client/components/map/MapDisplay.ts b/src/client/components/map/MapDisplay.ts
index 3cf5782af..5e83687d2 100644
--- a/src/client/components/map/MapDisplay.ts
+++ b/src/client/components/map/MapDisplay.ts
@@ -86,7 +86,7 @@ export class MapDisplay extends LitElement {
         @keydown="${this.handleKeydown}"
         class="w-full h-full p-3 flex flex-col items-center justify-between rounded-xl border cursor-pointer transition-all duration-200 active:scale-95 gap-3 group ${this
           .selected
-          ? "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.3)]"
+          ? "bg-malibu-blue/20 border-malibu-blue/50 shadow-[var(--shadow-malibu-blue-strong)]"
           : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1"}"
       >
         ${this.isLoading
diff --git a/src/client/components/map/MapPicker.ts b/src/client/components/map/MapPicker.ts
index 2ad8da146..ea1105337 100644
--- a/src/client/components/map/MapPicker.ts
+++ b/src/client/components/map/MapPicker.ts
@@ -125,7 +125,7 @@ export class MapPicker extends LitElement {
               class="px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all active:scale-95 ${this
                 .showAllMaps
                 ? "text-white/60 hover:text-white"
-                : "bg-blue-500/20 text-blue-100 shadow-[0_0_12px_rgba(59,130,246,0.2)]"}"
+                : "bg-malibu-blue/20 text-white shadow-[var(--shadow-malibu-blue-soft)]"}"
               @click=${() => (this.showAllMaps = false)}
             >
               ${translateText("map.featured")}
@@ -136,7 +136,7 @@ export class MapPicker extends LitElement {
               aria-selected=${this.showAllMaps}
               class="px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all active:scale-95 ${this
                 .showAllMaps
-                ? "bg-blue-500/20 text-blue-100 shadow-[0_0_12px_rgba(59,130,246,0.2)]"
+                ? "bg-malibu-blue/20 text-white shadow-[var(--shadow-malibu-blue-soft)]"
                 : "text-white/60 hover:text-white"}"
               @click=${() => (this.showAllMaps = true)}
             >
@@ -160,7 +160,7 @@ export class MapPicker extends LitElement {
               type="button"
               class="w-full h-full p-3 flex flex-col items-center justify-between rounded-xl border cursor-pointer transition-all duration-200 active:scale-95 gap-3 group ${this
                 .useRandomMap
-                ? "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.3)]"
+                ? "bg-malibu-blue/20 border-malibu-blue/50 shadow-[var(--shadow-malibu-blue-strong)]"
                 : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1"}"
               @click=${this.handleSelectRandomMap}
             >
diff --git a/src/client/graphics/layers/AttacksDisplay.ts b/src/client/graphics/layers/AttacksDisplay.ts
index 3fe621226..d745b6bd6 100644
--- a/src/client/graphics/layers/AttacksDisplay.ts
+++ b/src/client/graphics/layers/AttacksDisplay.ts
@@ -283,7 +283,7 @@ export class AttacksDisplay extends LitElement implements Layer {
               > `,
             onClick: async () => this.attackWarningOnClick(attack),
             className:
-              "text-left text-sky-400 inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
+              "text-left text-aquarius inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
             translate: false,
           })}
           ${!attack.retreating
@@ -293,7 +293,7 @@ export class AttacksDisplay extends LitElement implements Layer {
                 className: "ml-auto text-left shrink-0",
                 disabled: attack.retreating,
               })
-            : html`<span class="ml-auto truncate text-blue-400"
+            : html`<span class="ml-auto truncate text-aquarius"
                 >(${translateText("events_display.retreating")}...)</span
               >`}
         </div>
@@ -319,7 +319,7 @@ export class AttacksDisplay extends LitElement implements Layer {
               ><span class="ml-1">${renderTroops(landAttack.troops)}</span>
               ${translateText("help_modal.ui_wilderness")}`,
             className:
-              "text-left text-sky-400 inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
+              "text-left text-aquarius inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
             translate: false,
           })}
           ${!landAttack.retreating
@@ -329,7 +329,7 @@ export class AttacksDisplay extends LitElement implements Layer {
                 className: "ml-auto text-left shrink-0",
                 disabled: landAttack.retreating,
               })
-            : html`<span class="ml-auto truncate text-blue-400"
+            : html`<span class="ml-auto truncate text-aquarius"
                 >(${translateText("events_display.retreating")}...)</span
               >`}
         </div>
@@ -374,7 +374,7 @@ export class AttacksDisplay extends LitElement implements Layer {
               >`,
             onClick: () => this.eventBus.emit(new GoToUnitEvent(boat)),
             className:
-              "text-left text-blue-400 inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
+              "text-left text-aquarius inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
             translate: false,
           })}
           ${!boat.retreating()
@@ -384,7 +384,7 @@ export class AttacksDisplay extends LitElement implements Layer {
                 className: "ml-auto text-left shrink-0",
                 disabled: boat.retreating(),
               })
-            : html`<span class="ml-auto truncate text-blue-400"
+            : html`<span class="ml-auto truncate text-aquarius"
                 >(${translateText("events_display.retreating")}...)</span
               >`}
         </div>
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index f5ae86a93..1bc72d3f5 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -158,13 +158,13 @@ export class ControlPanel extends LitElement implements Layer {
         <div class="h-full flex">
           ${greenPercent > 0
             ? html`<div
-                class="h-full bg-sky-700 transition-[width] duration-200"
+                class="h-full bg-malibu-blue transition-[width] duration-200"
                 style="width: ${greenPercent}%;"
               ></div>`
             : ""}
           ${orangePercent > 0
             ? html`<div
-                class="h-full bg-[#0073b7] transition-[width] duration-200"
+                class="h-full bg-aquarius transition-[width] duration-200"
                 style="width: ${orangePercent}%;"
               ></div>`
             : ""}
@@ -213,13 +213,13 @@ export class ControlPanel extends LitElement implements Layer {
         <div class="h-full flex">
           ${greenPercent > 0
             ? html`<div
-                class="h-full bg-sky-700 transition-[width] duration-200"
+                class="h-full bg-malibu-blue transition-[width] duration-200"
                 style="width: ${greenPercent}%;"
               ></div>`
             : ""}
           ${orangePercent > 0
             ? html`<div
-                class="h-full bg-[#0073b7] transition-[width] duration-200"
+                class="h-full bg-aquarius transition-[width] duration-200"
                 style="width: ${orangePercent}%;"
               ></div>`
             : ""}
@@ -326,7 +326,7 @@ export class ControlPanel extends LitElement implements Layer {
           .value=${String(Math.round(this.attackRatio * 100))}
           @input=${(e: Event) => this.handleRatioSliderInput(e)}
           @pointerup=${(e: Event) => this.handleRatioSliderPointerUp(e)}
-          class="flex-1 h-1.5 accent-blue-500 cursor-pointer"
+          class="flex-1 h-1.5 accent-aquarius cursor-pointer"
         />
       </div>
     `;
@@ -373,7 +373,7 @@ export class ControlPanel extends LitElement implements Layer {
             .value=${String(Math.round(this.attackRatio * 100))}
             @input=${(e: Event) => this.handleRatioSliderInput(e)}
             @pointerup=${(e: Event) => this.handleRatioSliderPointerUp(e)}
-            class="w-full h-1.5 accent-blue-500 cursor-pointer"
+            class="w-full h-1.5 accent-aquarius cursor-pointer"
           />
         </div>
       </div>
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index 3d5e55ad0..515ad5edb 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -322,18 +322,18 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
             <div
               class="flex flex-1 flex-col items-center justify-center text-xs font-bold ${attackingTroops >
               0
-                ? "text-sky-400"
+                ? "text-aquarius"
                 : "text-white/40"} drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]"
               translate="no"
             >
               <span class="flex items-center gap-px leading-none text-xs"
-                ><img
-                  src=${soldierIcon}
-                  class="w-2.5 h-2.5"
-                  style="${attackingTroops > 0
-                    ? "filter: brightness(0) saturate(100%) invert(62%) sepia(80%) saturate(500%) hue-rotate(175deg) brightness(100%); opacity:1"
-                    : "filter: brightness(0) invert(1); opacity:0.4"}"
-                />↑</span
+                ><span
+                  class="w-2.5 h-2.5 inline-block"
+                  style="background-color: ${attackingTroops > 0
+                    ? "var(--color-aquarius)"
+                    : "rgba(255,255,255,0.4)"}; -webkit-mask: url(${soldierIcon}) no-repeat center / contain; mask: url(${soldierIcon}) no-repeat center / contain;"
+                ></span
+                >↑</span
               >
               <span class="tabular-nums leading-none text-sm mt-0.5"
                 >${renderTroops(attackingTroops)}</span
@@ -429,7 +429,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
             : ""}
           ${orangePercent > 0
             ? html`<div
-                class="h-full bg-[#0073b7] transition-[width] duration-200"
+                class="h-full bg-malibu-blue transition-[width] duration-200"
                 style="width: ${orangePercent}%;"
               ></div>`
             : ""}
diff --git a/src/client/graphics/layers/ReplayPanel.ts b/src/client/graphics/layers/ReplayPanel.ts
index fdef51510..ea48bbb60 100644
--- a/src/client/graphics/layers/ReplayPanel.ts
+++ b/src/client/graphics/layers/ReplayPanel.ts
@@ -98,7 +98,7 @@ export class ReplayPanel extends LitElement implements Layer {
 
   private renderSpeedButton(value: ReplaySpeedMultiplier, label: string) {
     const backgroundColor =
-      this._replaySpeedMultiplier === value ? "bg-blue-400" : "";
+      this._replaySpeedMultiplier === value ? "bg-malibu-blue" : "";
 
     return html`
       <button
diff --git a/src/client/graphics/layers/SpawnTimer.ts b/src/client/graphics/layers/SpawnTimer.ts
index 7f44eaa87..2030e22b5 100644
--- a/src/client/graphics/layers/SpawnTimer.ts
+++ b/src/client/graphics/layers/SpawnTimer.ts
@@ -18,7 +18,10 @@ export class SpawnTimer extends LitElement implements Layer {
 
   private ratios = [0];
   private _barVisible = false;
-  private colors = ["rgba(0, 128, 255, 0.7)", "rgba(0, 0, 0, 0.5)"];
+  private colors = [
+    "rgb(from var(--color-malibu-blue) r g b / 0.7)",
+    "rgba(0, 0, 0, 0.5)",
+  ];
 
   private isVisible = false;
 
@@ -43,7 +46,7 @@ export class SpawnTimer extends LitElement implements Layer {
       this.ratios = [
         this.game.ticks() / this.game.config().numSpawnPhaseTurns(),
       ];
-      this.colors = ["rgba(0, 128, 255, 0.7)"];
+      this.colors = ["rgb(from var(--color-malibu-blue) r g b / 0.7)"];
     } else {
       this.ratios = [];
       this.colors = [];
diff --git a/src/client/graphics/layers/WinModal.ts b/src/client/graphics/layers/WinModal.ts
index 8e8d85fd7..2c42b5679 100644
--- a/src/client/graphics/layers/WinModal.ts
+++ b/src/client/graphics/layers/WinModal.ts
@@ -73,30 +73,33 @@ export class WinModal extends LitElement implements Layer {
             ? "flex justify-between gap-2.5"
             : "hidden"}"
         >
-          <button
+          <o-button
+            variant="primary"
+            width="block"
+            class="flex-1"
+            translationKey="win_modal.exit"
             @click=${this._handleExit}
-            class="flex-1 px-3 py-3 text-base cursor-pointer bg-blue-500/60 text-white border-0 rounded-sm transition-all duration-200 hover:bg-blue-500/80 hover:-translate-y-px active:translate-y-px"
-          >
-            ${translateText("win_modal.exit")}
-          </button>
+          ></o-button>
           ${this.isRankedGame
             ? html`
-                <button
+                <o-button
+                  variant="primary"
+                  width="block"
+                  class="flex-1"
+                  translationKey="win_modal.requeue"
                   @click=${this._handleRequeue}
-                  class="flex-1 px-3 py-3 text-base cursor-pointer bg-purple-600 text-white border-0 rounded-sm transition-all duration-200 hover:bg-purple-500 hover:-translate-y-px active:translate-y-px"
-                >
-                  ${translateText("win_modal.requeue")}
-                </button>
+                ></o-button>
               `
             : null}
-          <button
-            @click=${this.hide}
-            class="flex-1 px-3 py-3 text-base cursor-pointer bg-blue-500/60 text-white border-0 rounded-sm transition-all duration-200 hover:bg-blue-500/80 hover:-translate-y-px active:translate-y-px"
-          >
-            ${this.game?.myPlayer()?.isAlive()
+          <o-button
+            variant="primary"
+            width="block"
+            class="flex-1"
+            .title=${this.game?.myPlayer()?.isAlive()
               ? translateText("win_modal.keep")
               : translateText("win_modal.spectate")}
-          </button>
+            @click=${this.hide}
+          ></o-button>
         </div>
       </div>
     `;
diff --git a/src/client/styles.css b/src/client/styles.css
index 08bbc3ba6..3e1db2116 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -5,7 +5,32 @@
 
 @theme {
   --default-ring-width: 3px;
-  --default-ring-color: var(text-[#0073b7]);
+  --default-ring-color: var(--color-malibu-blue);
+
+  /* Openfront.io brand palette — see Openfront_Brand_Guidelines.pdf §4 */
+  --color-malibu-blue: #0084d1;
+  --color-aquarius: #3fa9f5;
+  --color-dawn-blue: #cccccc;
+  --color-bright-white: #ffffff;
+
+  /* Openfront Masters sub-brand */
+  --color-cyber-yellow: #ffd700;
+  --color-limestone: #999999;
+
+  /* Background & decorative — not for standalone UI use */
+  --color-deep-navy: #0a1628;
+  --color-hex-cyan: #00c8ff;
+  --color-frame-orange: #f97316;
+
+  /* App-specific surface colors */
+  --color-surface: #0a1628;
+
+  --shadow-malibu-blue: 0 0 15px rgba(0, 132, 209, 0.2);
+  --shadow-malibu-blue-soft: 0 0 12px rgba(0, 132, 209, 0.2);
+  --shadow-malibu-blue-strong: 0 0 15px rgba(0, 132, 209, 0.3);
+  --shadow-malibu-blue-pill: 0 0 6px rgba(0, 132, 209, 0.35);
+  --shadow-malibu-blue-ring-sm: 0 0 0 4px rgba(0, 132, 209, 0.2);
+  --shadow-malibu-blue-ring-lg: 0 0 0 6px rgba(0, 132, 209, 0.3);
 }
 
 @layer base {
@@ -113,7 +138,7 @@ body {
   padding: 15px 20px;
   font-size: 16px;
   cursor: pointer;
-  background-color: #0073b7;
+  background-color: var(--color-malibu-blue);
   color: white;
   border: none;
   border-radius: 8px;
@@ -123,7 +148,7 @@ body {
 }
 
 .start-game-button:not(:disabled):hover {
-  background-color: #0073b7;
+  background-color: var(--color-aquarius);
 }
 
 .start-game-button:disabled {
@@ -580,7 +605,7 @@ label.option-card:hover {
 /* News Button Notification */
 news-button .active button {
   position: relative;
-  border-color: #0073b7 !important;
+  border-color: var(--color-malibu-blue) !important;
   border-width: 2px !important;
   box-shadow:
     0 0 0 1px rgba(37, 99, 235, 0.5),
diff --git a/src/client/styles/components/button.css b/src/client/styles/components/button.css
deleted file mode 100644
index 5ee0eb2a1..000000000
--- a/src/client/styles/components/button.css
+++ /dev/null
@@ -1,88 +0,0 @@
-.c-button {
-  background: var(--primaryColor);
-  color: #fff;
-  cursor: pointer;
-  outline: none;
-  display: inline-block;
-  font-size: 16px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border: 1px solid transparent;
-  text-align: center;
-  padding: 0.8rem 1rem;
-  border-radius: 0.75rem;
-  transition: var(--transition);
-
-  @media (min-width: 1024px) {
-    font-size: 18px;
-  }
-}
-
-.c-button:hover,
-.c-button:active,
-.c-button:focus {
-  background: var(--primaryColorHover);
-  transition: var(--transition);
-  transform: translateY(-1px);
-}
-
-.c-button:disabled {
-  background: var(--primaryColorDisabled);
-  opacity: 0.7;
-  cursor: not-allowed;
-  transition: var(--transition);
-}
-
-.c-button--secondary {
-  background: var(--secondaryColor);
-  color: var(--fontColor);
-}
-
-.c-button--secondary:hover,
-.c-button--secondary:active,
-.c-button--secondary:focus {
-  background: var(--secondaryColorHover);
-}
-
-.c-button--block {
-  display: block;
-  width: 100%;
-}
-
-.c-button--blockDesktop {
-  display: block;
-  width: 100%;
-
-  @media (min-width: 1024px) {
-    width: auto;
-    margin: 0 auto;
-  }
-}
-
-.dark .c-button {
-  background: var(--primaryColorDark);
-  color: var(--fontColorLight);
-}
-
-.dark .c-button:hover,
-.dark .c-button:active,
-.dark .c-button:focus {
-  background: var(--primaryColorHoverDark);
-}
-
-.dark .c-button:disabled {
-  background: var(--primaryColorDisabledDark);
-  opacity: 0.7;
-}
-
-.dark .c-button--secondary {
-  background: var(--secondaryColorDark);
-  color: var(--fontColorDark);
-}
-
-.dark .c-button--secondary:hover,
-.dark .c-button--secondary:active,
-.dark .c-button--secondary:focus {
-  background: var(--secondaryColorHoverDark);
-}
diff --git a/src/client/styles/core/variables.css b/src/client/styles/core/variables.css
index 6ed17b5d6..eb803871b 100644
--- a/src/client/styles/core/variables.css
+++ b/src/client/styles/core/variables.css
@@ -7,33 +7,26 @@
   --fontColor: #202020;
   --fontColorLight: #fff;
 
-  /* Palette: Deep French Blue / Muted Cyan / Black / Forest Teal */
-  --frenchBlue: #1f3a70; /* Deeper French Blue */
-  --cyanBlue: #0f6ca3; /* Muted Cyan secondary */
-  --tealAccent: #1f6c5a; /* Darker Teal accent */
-
-  --primaryColor: var(--frenchBlue);
-  --primaryColorHover: var(--tealAccent);
+  --primaryColorHover: var(--color-malibu-blue);
   --primaryColorDisabled: linear-gradient(
     to right,
     rgb(74, 74, 74),
     rgb(61, 61, 61)
   );
-  --secondaryColor: var(--cyanBlue);
-  --secondaryColorHover: var(--cyanBlue);
+  --secondaryColor: var(--color-malibu-blue);
+  --secondaryColorHover: var(--color-aquarius);
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
-  --primaryColorDark: var(--frenchBlue);
-  --primaryColorHoverDark: var(--tealAccent);
+  --primaryColorHoverDark: var(--color-malibu-blue);
   --primaryColorDisabledDark: #4b5563;
-  --secondaryColorDark: var(--tealAccent);
-  --secondaryColorHoverDark: var(--frenchBlue);
+  --secondaryColorDark: var(--color-malibu-blue);
+  --secondaryColorHoverDark: var(--color-aquarius);
   --fontColorDark: #f3f4f6;
 
   /* Achievements */
   --medal-easy: #cd7f32;
   --medal-medium: #c0c0c0;
-  --medal-hard: #ffd700;
+  --medal-hard: var(--color-cyber-yellow);
   --medal-impossible: #d32f2f;
   --medal-custom: #2196f3;
 }
diff --git a/src/client/styles/layout/header.css b/src/client/styles/layout/header.css
index e753d12ec..5d2ada7c5 100644
--- a/src/client/styles/layout/header.css
+++ b/src/client/styles/layout/header.css
@@ -30,6 +30,6 @@
 }
 
 .l-header__highlightText {
-  color: #0073b7;
+  color: var(--color-malibu-blue);
   font-weight: 700;
 }