Redesign UI color system: neutral ink chrome, sources own the chroma

The light lavender theme carried its color in decoration -- four colored
background blobs, a conic-gradient brand mark, gradient-clipped wordmark,
a four-color animated button, a spinning conic empty mark, and a five-color
spectrum rail. All of that competed with the only color on screen that
carries meaning: which source a story came from.

- One indigo-slate ink ramp (bg / surface / line / ink) carries every neutral
  surface; the only saturated hues are the three sources, used strictly as
  signals -- filter pill, card spine, source chip, timestamp, feed health.
- Rule for every filled state: bright fill, deep ink type. Source tokens kept
  in sync between :root and View::sourceColor().
- Signature "signal bars": a CSS brand mark of three ascending bars in the
  source hues, and the header rail re-cut into three wire segments that double
  as the palette legend. The empty state reuses the mark, unlit and static.
- Bootstrap switched to data-bs-theme="dark" with matching form controls,
  alerts, and focus rings; --ink-faint recalibrated so small text clears
  WCAG 4.5:1 on every surface. Reduced-motion behavior unchanged.
- README documents the two rules next to View::sourceColor().
This commit is contained in:
Harwinder Sekhon
2026-10-08 11:59:01 -04:00
parent aa31507ff5
commit 20f4fd7095
5 changed files with 219 additions and 135 deletions
+4 -4
View File
@@ -34,10 +34,10 @@ final class View
public static function sourceColor(string $source): string
{
return match ($source) {
'youtube' => '#ff1f4b',
'reddit' => '#ff6a00',
'rt' => '#00c389',
default => '#6a3dff',
'youtube' => '#ff3b5c',
'reddit' => '#ff7a2f',
'rt' => '#1fcb93',
default => '#f1f3f7',
};
}