feat(admin): move the brand accent to #DA5CC7 (#157)

admin/DESIGN-ALIGNMENT.md

@@ -1,19 +1,19 @@
 # Saddle — Design Alignment
 
 > **DECIDED (2026-08-25, Fahim):** Saddle has a brand palette, built on
-> **Saddle Violet `#6D3BF5`**. This **supersedes the 2026-07-04 monochrome
+> **`#DA5CC7`**. This **supersedes the 2026-07-04 monochrome
 > decision** kept below for history. The register is unchanged — calm, restrained,
-> Vercel/Geist — but the one accent is now violet instead of near-black.
-> **Roughly 85% of the interface stays black, white and gray; violet is the
+> Vercel/Geist — but the one accent is now the brand colour instead of near-black.
+> **Roughly 85% of the interface stays black, white and gray; the accent is the
 > remaining 15%.** Don't re-litigate this; do hold the line on the 85/15.
 
 ## The palette
 
 | Role | Name | Hex |
 |---|---|---|
-| Primary brand | Saddle Violet | `#6D3BF5` |
-| Hover / active | Deep Violet | `#5121C7` |
-| Soft background | Lavender Mist | `#F1ECFF` |
+| Primary brand | — | `#DA5CC7` |
+| Hover / active | — | `#A82595` |
+| Soft background | — | `#FDF4FC` |
 | Main text | Near Black | `#111111` |
 | Page background | Warm White | `#FBFBFA` |
 | Success / read-only | Lime | `#84CC16` |
@@ -30,8 +30,11 @@ portaled overlays render outside `.pp-app` and would otherwise lose every token.
 ## The rule that governs every color
 
 **Every color has a bright value for FILLS and a darker same-hue value for TEXT.**
-This is not a preference. Measured on white: violet is 5.84:1, but lime is 1.98,
-cyan 2.43 and coral 3.67 — none of them can carry a label. The DS mandates the
+This is not a preference. Measured on white the brand colour is **3.31:1** — enough
+to be seen, not enough to be read — and lime is 1.98, cyan 2.43, coral 3.67. None
+of them can carry a label, and none can be the ground under a white one. The
+readable step of the same hue does that: `#BD2BA7` for links and for the primary
+button, `#A82595` on hover. The DS mandates the
 same split for the accent (`--pp-accent` paints surfaces at 3:1;
 `--pp-accent-text` paints links and labels at 4.5:1, measured against the *tint*,
 not just white).
@@ -50,18 +53,18 @@ Three consequences worth knowing before you touch a status color:
   "blocked or failed" (a denied call, a connection error). They need opposite
   reactions from the reader — don't fold them together.
 
-## Where violet is allowed to land
+## Where the accent is allowed to land
 
 **Yes:** primary buttons · links · focus rings · the active nav row · the brand
 mark · the Cookbook-style accent bars · `tone="accent"` fills · selection states.
 
 **No:** card backgrounds, page bands, table headers, every icon, borders at large,
-section headings. If a screen has more than a few violet elements, remove some
-rather than softening the violet.
+section headings. If a screen has more than a few accented elements, remove some
+rather than softening the accent.
 
 **One deliberate deviation from the DS guide, recorded so it isn't "fixed" back:**
 the guide says *"Primary buttons are near-black (`--pp-action`), never the accent
-color."* Saddle's are violet. The cost was that `.pp-code--dark` reads
+color."* Saddle's carry the accent. The cost was that `.pp-code--dark` reads
 `--pp-code-bg` from `--pp-action` while hard-coding its border, muted and body
 colors, so `--pp-code-bg` is pinned back to near-black in `style.scss`. Code panels
 are deliberately **not** the button color.

admin/src/style.scss

@@ -2,10 +2,10 @@
  * Saddle admin styles — calm, modern, person-first.
  *
  * Powered by the PlugPress design system (@plugpress/ui). Saddle overrides the
- * shared --pp-* tokens below to carry its own brand (Saddle Violet), and every
+ * shared --pp-* tokens below to carry its own brand, and every
  * --s-* token then aliases one of those. Light-only (the design system dropped
  * dark mode in v0.2.0). See DESIGN-ALIGNMENT.md for the palette and the rules
- * that govern where violet is allowed to land.
+ * that govern where the accent is allowed to land.
  */
 
 // ---------------------------------------------------------------------------
@@ -52,25 +52,35 @@ body.pp-scope,
 
 	// Accent. --pp-accent paints surfaces and needs 3:1; --pp-accent-text
 	// paints links and labels and needs 4.5:1 measured against the TINT, not
-	// just white. Deep Violet clears 7.60 on Lavender Mist.
-	--pp-accent: #6d3bf5; // Saddle Violet
-	--pp-accent-hover: #5121c7; // Deep Violet
-	--pp-accent-text: #5121c7;
-	--pp-accent-tint: #f1ecff; // Lavender Mist
-	--pp-accent-muted: rgba( 109, 59, 245, 0.12 );
+	// just white.
+	//
+	// The brand colour is 3.31:1 on white: comfortably enough to be SEEN, not
+	// enough to be READ. So it is the fill everywhere a fill belongs — dots,
+	// the focus ring, the active nav row, bar fills — and the darker step of
+	// the same hue carries every label. The violet this replaced cleared both
+	// at 5.84, which made the two tokens nearly interchangeable and hid how
+	// load-bearing the split is; here it is doing real work.
+	--pp-accent: #da5cc7; // the brand colour, exactly as given
+	--pp-accent-hover: #a82595;
+	--pp-accent-text: #bd2ba7; // 4.99 on the page, 4.80 on the tint
+	--pp-accent-tint: #fdf4fc;
+	--pp-accent-muted: rgba( 218, 92, 199, 0.12 );
 	--pp-on-accent: #ffffff;
 
 	// Primary buttons. The DS guide reserves these for near-black and says the
 	// accent is for links and nav only; Saddle deviates deliberately (Fahim,
-	// 2026-08-25 — see DESIGN-ALIGNMENT.md). White on violet is 5.84:1.
-	--pp-action: #6d3bf5;
-	--pp-action-hover: #5121c7;
+	// 2026-08-25 — see DESIGN-ALIGNMENT.md). They take the readable step, not
+	// the brand colour itself: white on #da5cc7 is 3.31:1, which is a button
+	// label people cannot read. White on this is 5.16.
+	--pp-action: #bd2ba7;
+	--pp-action-hover: #a82595;
 	--pp-on-action: #ffffff;
 
 	// --pp-focus is NOT part of the accent contract: it is a separate literal
 	// in ui.css that no accent file touches, which is why Saddle shipped a
-	// monochrome accent with a WordPress-blue focus ring until now.
-	--pp-focus: #6d3bf5;
+	// monochrome accent with a WordPress-blue focus ring until #153. A ring is
+	// a mark, so it takes the brand colour.
+	--pp-focus: #da5cc7;
 
 	// Status. These paint MARKS — status dots, rings, small fills — so each has
 	// to clear 3:1 on a white card to be seen at all. The brand palette's lime
@@ -127,8 +137,9 @@ body.pp-scope,
 }
 
 // Code panels read --pp-code-bg from --pp-action, but hard-code their border,
-// muted and body colors — so a violet action token would leave 35 CodeBlock /
-// Snippet instances violet-backed with muted text at 2.26:1. Pin the ground
+// muted and body colors — so an accent-coloured action token would leave 35
+// CodeBlock / Snippet instances on that ground with muted text far below AA.
+// Pin the ground
 // back to near-black: code blocks look exactly as they did, and stop being
 // coupled to the button color. Upstream fix belongs in plugpress-ui.
 .pp-code--dark {

languages/saddle.pot

@@ -9,7 +9,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2026-08-25T07:55:24+00:00\n"
+"POT-Creation-Date: 2026-08-25T11:16:42+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.12.0\n"
 "X-Domain: saddle\n"

readme.txt

@@ -143,7 +143,7 @@ If you happen to have the separate MCP Adapter plugin active, Saddle notices and
 
 = 1.0.0 =
 * Initial public release.
-* Saddle's screens have a look of their own now — a violet accent on a warm, near-white background, squarer corners and flatter surfaces. About 85% of it is still black, white and grey; the colour is saved for the few things worth pointing at.
+* Saddle's screens have a look of their own now — a pink accent on a warm, near-white background, squarer corners and flatter surfaces. About 85% of it is still black, white and grey; the colour is saved for the few things worth pointing at.
 * The sidebar is one plain list instead of three labelled sections, and two items say what they do rather than what they are called: Guidance is now Instructions, and Connections is now Apps. Your bookmarks and links still work.
 * The Dashboard opens with a sentence telling you what your AI can do right now, instead of four boxes of numbers. The counts moved to one quiet line underneath, and the box that used to show a dash when there was nothing to report is gone.
 * Removed the Cookbook screen.