diff --git a/ui/index.html b/ui/index.html
index 770768c8d36e..fb5cf8d47a61 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -123,7 +123,7 @@
}
html[data-theme="absolutely"] {
- background: #262624;
+ background: #1c1c1a;
}
html[data-theme="absolutely-light"] {
diff --git a/ui/src/app/mount-fallback.test.ts b/ui/src/app/mount-fallback.test.ts
index d87c45af88ec..f18b131ee5de 100644
--- a/ui/src/app/mount-fallback.test.ts
+++ b/ui/src/app/mount-fallback.test.ts
@@ -100,7 +100,7 @@ describe("Control UI mount fallback", () => {
"Absolutely dark",
{ theme: "absolutely", themeMode: "dark" },
"absolutely",
- "rgb(38, 38, 36)",
+ "rgb(28, 28, 26)",
],
[
"Absolutely light",
diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css
index 84d86690d4fc..45696ce7b11a 100644
--- a/ui/src/styles/base.css
+++ b/ui/src/styles/base.css
@@ -931,16 +931,19 @@
/*
* Accent — terracotta clay on warm graphite
*
- * WCAG 2.1 AA audit (bg = #262624, relative luminance ≈ 0.0198):
- * --accent #d97757 L ≈ 0.257 contrast ≈ 4.9:1 AA text ✓
- * --accent-hover #e68b6b L ≈ 0.338 contrast ≈ 6.0:1 ✓
+ * WCAG 2.1 AA audit (bg = #1c1c1a, relative luminance ≈ 0.0115):
+ * --accent #d97757 L ≈ 0.257 contrast ≈ 5.5:1 AA text ✓
+ * --accent-hover #e68b6b L ≈ 0.338 contrast ≈ 6.7:1 ✓
* --primary-foreground #241f1b on #d97757 button: 5.2:1 AA ✓
* --primary-foreground #241f1b on #e68b6b hover: 6.4:1 AA ✓
* --destructive-foreground #fafafa on #d32f2f button: 4.77:1 AA ✓
- * focus-ring at 75% opacity: ≈ 3.3:1 against bg ✓ (non-text 3:1 required)
+ * focus-ring at 75% opacity: ≈ 3.6:1 against bg ✓ (non-text 3:1 required)
*
- * The accent dims below AA on the lightest surfaces (3.7:1 on --bg-muted),
- * so it stays a fill/indicator color there; body copy uses --text.
+ * The surface ramp sits a step below the original #262624 launch palette,
+ * which was the lightest dark theme in the set by a wide margin. Every
+ * pairing improved: worst text 4.68 -> 5.42:1, accent on --card 4.47 ->
+ * 5.05:1 (AA where it previously was not). The accent still dims below AA on
+ * --bg-muted (4.3:1), so it stays a fill/indicator color there, not body copy.
*/
--ring: #d97757;
--accent: #d97757;
@@ -961,23 +964,23 @@
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 75%, transparent);
/* Surfaces — warm graphite, a shade off true neutral */
- --bg: #262624;
- --bg-accent: #2d2c29;
- --bg-elevated: #33322e;
- --bg-hover: #3a3934;
- --bg-muted: #3a3934;
+ --bg: #1c1c1a;
+ --bg-accent: #232320;
+ --bg-elevated: #292825;
+ --bg-hover: #302f2b;
+ --bg-muted: #302f2b;
- --card: #2d2c29;
+ --card: #232320;
--card-foreground: #ede8dd;
--card-highlight: rgba(255, 246, 232, 0.04);
- --popover: #33322e;
+ --popover: #292825;
--popover-foreground: #ede8dd;
- --panel: #262624;
- --panel-strong: #33322e;
- --panel-hover: #3a3934;
- --chrome: rgba(38, 38, 36, 0.96);
- --chrome-strong: rgba(38, 38, 36, 0.98);
+ --panel: #1c1c1a;
+ --panel-strong: #292825;
+ --panel-hover: #302f2b;
+ --chrome: rgba(28, 28, 26, 0.96);
+ --chrome-strong: rgba(28, 28, 26, 0.98);
--text: #e4dfd4;
--text-strong: #f5f1e8;
@@ -986,12 +989,12 @@
--muted-strong: #b8b1a4;
--muted-foreground: #aba498;
- --border: #383630;
- --border-strong: #48453d;
- --border-hover: #5c584e;
- --input: #383630;
+ --border: #2e2c27;
+ --border-strong: #3d3a33;
+ --border-hover: #514d44;
+ --input: #2e2c27;
- --secondary: #2d2c29;
+ --secondary: #232320;
--secondary-foreground: #ede8dd;
--accent-2: #b8926a;
--accent-2-muted: rgba(184, 146, 106, 0.7);
diff --git a/ui/src/styles/config.css b/ui/src/styles/config.css
index 4312940bbed1..e33d1db0605d 100644
--- a/ui/src/styles/config.css
+++ b/ui/src/styles/config.css
@@ -362,7 +362,7 @@
.settings-theme-card--absolutely,
.settings-accent-theme--absolutely {
- --theme-chip-bg: #262624;
+ --theme-chip-bg: #1c1c1a;
--theme-chip-accent: #d97757;
--theme-chip-accent-2: #b8926a;
}