feat(design-systems): declare what to write instead, rather than what not to

Milestone #254 step 6, first half (#2295) — and this reframes the task rather
than answering it. The operator's call:

  "in this case we should declare what should be used in place of pure white,
   it's not a prohibition it's what should be used in its place."

None of the three options on the table (a constraints record / the panel reads
both sources / negative token rows) was right, because all three kept the
prohibition as a KIND OF THING. It isn't one. "Pure white is never text" is the
shadow cast by a positive fact — text is Parchment — and a design system that
stores what things ARE has no row for a ban because it never needed one.

So `design_tokens` gains `supersedes`: the literal values this token should be
written instead of. `--color-text-on-action` supersedes `#fff` / `#ffffff`. Same
fact as the rule, stated forwards, and now actionable — a finding can say what
to write rather than only objecting.

It has to be DECLARED, not derived, and that is the crux: `#fff` and Parchment
`#E8E4D8` are different colours, so no value-matching check could ever have
connected them. That mismatch is precisely why the prohibition looked
unrepresentable until it was turned around.

`supersedes` cascades on EMPTINESS rather than on None. A child overriding a
colour says nothing about which literals it replaces, and blanking the family's
declaration there would silently disarm the check for every app that customises
the token — while a child that states its own list replaces it wholesale.

Two things this deliberately does NOT do:

  - It does not feed the drift panel. Superseded literals live in component CSS,
    which `designDrift.ts` cannot see and already documents as a blind spot.
    This is input for the source lint (#2277). Declaring it with nothing
    consuming it yet is honest; wiring it to a panel that cannot check it would
    not be.
  - It does not remove the panel's `prohibited_color` arm yet — that happens
    when the panel is repointed at a resolved system, which needs #2288 first.

The declaration also exposes a missing token: most of the 67 hardcoded
`color: #fff` (#2275) are text on a coloured action button, and the system has
no token for that role at all. Every view hardcodes it. Declaring the token that
was never there is the first real output of the operator's framing.

frontend/src/views/DesignSystemsView.vue

@@ -245,6 +245,10 @@ const tokenGroup = ref("");
 const tokenPurpose = ref("");
 /** Mode/value pairs, edited as a list so a token can carry any number of modes. */
 const tokenModes = ref<{ mode: string; value: string }[]>([{ mode: "base", value: "" }]);
+/** Literals this token should be written instead of, comma-separated in the
+ *  form. Kept as one text field rather than a repeater: it is a short list of
+ *  literals, and a row-per-value UI would cost more than it explains. */
+const tokenSupersedes = ref("");
 const savingToken = ref(false);
 const editingTokenId = ref<number | null>(null);
 
@@ -253,6 +257,7 @@ function resetTokenForm() {
   tokenGroup.value = "";
   tokenPurpose.value = "";
   tokenModes.value = [{ mode: "base", value: "" }];
+  tokenSupersedes.value = "";
   editingTokenId.value = null;
   showAddToken.value = false;
 }
@@ -262,6 +267,7 @@ function startEditToken(token: DesignToken) {
   tokenName.value = token.name;
   tokenGroup.value = token.group_name ?? "";
   tokenPurpose.value = token.purpose ?? "";
+  tokenSupersedes.value = (token.supersedes ?? []).join(", ");
   const entries = Object.entries(token.value_by_mode);
   tokenModes.value = entries.length
     ? entries.map(([mode, value]) => ({ mode, value }))
@@ -288,6 +294,10 @@ async function submitToken() {
       value_by_mode: collectModes(),
       group_name: tokenGroup.value.trim() || null,
       purpose: tokenPurpose.value.trim() || null,
+      supersedes: tokenSupersedes.value
+        .split(",")
+        .map((v) => v.trim())
+        .filter(Boolean),
     };
     if (editingTokenId.value !== null) {
       await updateDesignToken(editingTokenId.value, body);
@@ -555,6 +565,20 @@ function isColourish(value: string): boolean {
                 </div>
               </div>
 
+              <div class="field">
+                <label class="field-label" for="token-supersedes">Use instead of</label>
+                <input
+                  id="token-supersedes" v-model="tokenSupersedes" class="input mono" type="text"
+                  placeholder="#fff, #ffffff"
+                />
+                <p class="field-hint">
+                  Literal values that should be written as this token instead —
+                  comma separated. This is where a rule like "pure white is never
+                  text" belongs: not as a prohibition, but as the thing to write
+                  in its place. Checked by the source lint, not by this page.
+                </p>
+              </div>
+
               <fieldset class="modes">
                 <legend class="field-label">Values by mode</legend>
                 <p class="field-hint">
@@ -613,7 +637,12 @@ function isColourish(value: string): boolean {
                     <code>{{ value }}</code>
                   </span>
                 </span>
-                <span class="token-meta">{{ token.purpose || token.group_name || "" }}</span>
+                <span class="token-meta">
+                  {{ token.purpose || token.group_name || "" }}
+                  <span v-if="token.supersedes.length" class="supersedes">
+                    instead of {{ token.supersedes.join(", ") }}
+                  </span>
+                </span>
                 <span class="token-actions">
                   <button class="btn-ghost btn-small" @click="startEditToken(token)">Edit</button>
                   <button class="btn-ghost btn-small" @click="removeToken(token)">
@@ -647,6 +676,9 @@ function isColourish(value: string): boolean {
                     <div class="resolved-head">
                       <code class="token-name">{{ token.name }}</code>
                       <span v-if="token.purpose" class="token-meta">{{ token.purpose }}</span>
+                      <span v-if="token.supersedes.length" class="supersedes">
+                        instead of {{ token.supersedes.join(", ") }}
+                      </span>
                     </div>
 
                     <!-- One badge only when every mode agrees on its source. -->
@@ -1034,6 +1066,12 @@ function isColourish(value: string): boolean {
   gap: 0.35rem;
 }
 
+.supersedes {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
 .mode-chip {
   display: inline-flex;
   align-items: center;