UX sprint U2: design-spec.md, screen catalogue, strings.csv (owner approved)

Kalas (muted) design spec with final tokens, components and every screen S-1 to
S-22 in all states; 80-frame screen catalogue with 155 PNGs in docs/ux/screens/;
strings.csv with D-017 module prefixes (558 rows, en and sv); colour tokens
renamed to the landed contract names slate and amber; fixed category ids;
proposed-decisions.md with the final §9.7 hex values and UX-9. Supersedes
tokens.md, components.md, screens.md and the U1 Kalas PNGs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U2TeboHB8AtnzTrt3bWFzY

docs/ux/directions/export-png.sh

@@ -1,6 +1,7 @@
 #!/usr/bin/env bash
 # Export every phone frame of one direction to <dir>/png/<frame-id>.png at 2x.
-# Usage: docs/ux/directions/export-png.sh docs/ux/directions/<n>-<slug> [frame-id ...]
+# Usage: [OUT_DIR=<dir>] docs/ux/directions/export-png.sh docs/ux/directions/<n>-<slug> [frame-id ...]
+# OUT_DIR (optional) is where the PNGs go; default <dir>/png.
 # Needs Google Chrome (macOS path below or CHROME=...). The page must implement ?list=1 and ?frame=<id>.
 set -euo pipefail
 dir="$(cd "$1" && pwd)"; shift
@@ -13,8 +14,9 @@ if [ "$#" -gt 0 ]; then ids=("$@"); else
     | sed -n '/<pre id="frame-list">/,/<\/pre>/p' | sed -e 's/<[^>]*>//g' | grep -v '^[[:space:]]*$')
 fi
 [ "${#ids[@]}" -gt 0 ] || { echo "no frames listed by $page?list=1" >&2; exit 1; }
-mkdir -p "$dir/png"
+out="${OUT_DIR:-$dir/png}"
+mkdir -p "$out"
 for id in "${ids[@]}"; do
-  run --window-size=411,891 --force-device-scale-factor=2 --screenshot="$dir/png/$id.png" "$page?frame=$id"
+  run --window-size=411,891 --force-device-scale-factor=2 --screenshot="$out/$id.png" "$page?frame=$id"
 done
-echo "exported ${#ids[@]} frames to $dir/png"
+echo "exported ${#ids[@]} frames to $out"