diff --git a/mockups/canvases/README.md b/mockups/canvases/README.md
index b0a304a1..fc5210ac 100644
--- a/mockups/canvases/README.md
+++ b/mockups/canvases/README.md
@@ -273,6 +273,28 @@ folder are invisible to it.
painted over five text classes without an error. `assets/art/` and
`assets/art-gen/` are committed; the eight `ref-*` boards are
gitignored, so a fresh clone has 13.
+- `flashcard-onboarding/`: the run to read when the only source is a **screen
+ recording**. Four onboarding screens of a flashcard app, from a clip posted
+ on X, in 13 boards across three rows: a token board, three evidence boards
+ for 28 tokens, an art board for 7 crops, the four replicas, and the video
+ frame behind each one column-for-column underneath. Mean absolute delta is
+ 6.17-7.05 levels (of 255), two to four times `duolingo-ios`', and the gap is
+ the medium: at 1.337 capture px per design pt a glyph is three pixels tall
+ through an H.264 encoder, so a sharp render scores an error the geometry
+ does not contain - the cropped hero art sits at 1.0-3.5 while the type zone
+ sits at 7.7-14.2 with every string inside 1.5pt of its reference box. Its
+ `README.md` carries the three findings that cost the most:
+ **`letter-spacing` inherits as a computed length**, so an `em` set on `body`
+ reaches a 36px title as body's own -0.4px and tracks it at a third of the
+ intent, which reads exactly like a display size that wants its own value;
+ the whole design is tracked at a single **-.025em**, proved by character
+ count rather than by width, which is also what told SF Pro from SF Pro
+ Rounded; and **LANCZOS undershoot** in the downscale step, which read as a
+ 20-level ink-core error until the resample became an area average. It also
+ prices the one deliberate deviation - the source's phone frame is a mockup
+ asset, with a 118 x 4.5 home indicator at bottom 2.5 - at exactly 1.00 delta
+ per screen. `assets/art/` is committed; the four `ref-*` boards are
+ gitignored, so a fresh clone has 9.
- `spotify-ios/`: the run to read when the brand face is unavailable and the
screens are mostly type. Five screens of the Spotify iOS app - the home
feed at two scroll positions, two full-screen promo modals and the Spotify
@@ -339,6 +361,33 @@ folder are invisible to it.
is worthless on grey, and that a blur which monotonically improves a band is
hiding a content defect rather than an antialiasing one. The 25 `ref-*`
boards are gitignored, so a fresh clone has 29.
+- `skillpath-ios/`: the run to read when the source is a **zooming** screen
+ recording, so there is no such thing as *the* capture scale. Five screens of
+ an unnamed gamified self-improvement app, from a clip posted on X, in 23
+ boards across three rows: six token boards and seven evidence boards for 73
+ tokens, the five replicas, and the video frame behind each one
+ column-for-column underneath. Those foundation boards are plural for a
+ reason worth borrowing: 73 rows is 4000px of table in a 980px artboard, and
+ `refkit shoot --check-overflow` only says so when you leave `--crop-phone`
+ off, and never says so at all about a table running off the *side*. Mean
+ absolute delta is 5.88-9.04 levels (of 255). Its `README.md` records the
+ three things that decided those numbers. **The device is 402 x 874, not the
+ 393 x 852 the rest of this repo uses** - an iPhone 17 Pro - and it was found
+ by scale agreement, where solving each frame's screen-inner rect against 402
+ x 874 makes its width and height scales agree to 0.07% against 0.34% for the
+ smaller frame. **The clip zooms, so every frame carries its own px-per-pt**
+ (1.01194 to 1.07985) and every one of the 59 rows in `probes.json` carries
+ its own `"pt"`, which is what `refkit batch` needs to replay them all in one
+ pass. And **the renderer's cap metrics are not the face's**: a probe of
+ eight font stacks came back byte-identical, so the boards are set in the
+ platform fallback, whose cap is 0.733 em and sits 0.350 x font-size below
+ the line box rather than SF Pro's 0.245 - inverting the nominal relation
+ instead of the measured one put every run on the board low by 3.3pt at
+ 31.5px and cost 1.50 delta on the busiest screen. All 20 type sizes are
+ fitted on ink width against a named probe rather than on cap height, which a
+ video frame inflates by 1-2pt; `CURRENT STREAK` read as 14px that way and
+ set 18% wide. `assets/art/` is committed for its 17 crops; the five `ref-*`
+ boards are gitignored, so a fresh clone has 18.
- `templates/`: the starting point, not a finished board. The four boards
every run produces (design tokens, evidence, one phone screen, one parked
reference) with placeholder values, generated from one list of tokens so
diff --git a/mockups/canvases/flashcard-onboarding/00-design-tokens.html b/mockups/canvases/flashcard-onboarding/00-design-tokens.html
new file mode 100644
index 00000000..b709d210
--- /dev/null
+++ b/mockups/canvases/flashcard-onboarding/00-design-tokens.html
@@ -0,0 +1,102 @@
+
+
+
+
+Flashcard Onboarding - Design Tokens
+
+
+
+
Flashcard Onboarding
Four onboarding screens, measured off a 1080 × 1350 video at 1.337 capture px per design pt. Every value below is a measurement; the row that justifies it is on 00b, and the probe that produced it is in probes.json.
SF Pro, not Rounded: the terminals on 'Create Account' are cut, not round, at 3x. Four measured strings run 3.3-5.2% narrower than system-ui, a 1.9-point spread that --f-tracking absorbs, against 2.5-7.1% and a 4.6-point spread for SF Pro Rounded
--f-tracking
-.025em
every string is narrower than its untracked setting by an amount that scales with character count, not with width: 5.0px over 13 gaps on the eyebrow and 12.8 over 35 on the subtitle, ratio .391 against .371 predicted by tracking and .533 by a narrower face. The four strings solve to -.0257, -.0244, -.0248 and -.0266em across 15px and 36px, so one figure covers the whole ramp. It has to be set on each rule: letter-spacing inherits as a computed length, so an em on body reaches a 36px title as body's own -.4px and tracks it at a third of the intent
--f-bg
#FFFFFF
flat census on c4 y700-760 is 100% #FDFDFD, but 2801 px elsewhere hit 255: the 2-level floor is H.264 flat-field quantization, not an off-white
--f-card
#FDFAF4
flat run c4 row 185, x 97.4..285.9 -- the warm panel behind the trophy
--f-track
#F4F4F4
flat run c1 col 120, y 770.2..787.4 and 800.9..824.8 -- the nav track
--f-pill-off
#C1C1C1
flat census inside the disabled back pill, 50.6% of 3221 flat px
--f-hairline
#EFEFEF
Login outline: c4 row 651 x 364.0..365.5, c4 col 40 y 623.3..625.5
--f-ink
#000000
ink core (darkest 2%) of the eyebrow, both title lines and the legal bold
--f-ink-mid
#3A3A3A
ink core of the Login label, c4
--f-ink-2
#7E7E7E
subtitle ink core #7D7D7D on c1 and c4, legal-line grey #7F7F7F; one token at the midpoint
One row per token. A token with no evidence is a guess.
--f-ink-inv
#FFFFFF
brightest 2% of the back arrow is #FEFEFE, on the same 2-level floor as bg
--f-accent
#F39D05
flat fill of the walked segment of the progress path, c2 and c3; the nodes themselves are 25pt across at 1.337 px/pt, too small for a census. Every amber element on a screen is cropped art, so this token is used only by the foundations boards
7 crops, cut from the four frames at the pt boxes in crops.json and placed back at the same numbers. Nothing here is generated and nothing here is redrawn: on 03 the Winner Board panel covers the medals behind it, so the medals cannot be recovered from any frame in the clip.
every screen with its chrome removed, so what is left is exactly what is an image
By continuing, you agree to our Terms of Use and Privacy Policy
+
+
diff --git a/mockups/canvases/flashcard-onboarding/README.md b/mockups/canvases/flashcard-onboarding/README.md
new file mode 100644
index 00000000..1548ef2c
--- /dev/null
+++ b/mockups/canvases/flashcard-onboarding/README.md
@@ -0,0 +1,189 @@
+# Flashcard onboarding
+
+The four-screen onboarding of a flashcard app, rebuilt from a screen
+recording posted by [@FarzadGodarz](https://x.com/FarzadGodarz/status/2096601915807187433).
+Three walkthrough pages and the sign-up screen, plus the token board, three
+evidence boards and the art board behind them. 13 boards, four of which park
+the source frame under its replica.
+
+| # | Board | What it shows |
+| --- | --- | --- |
+| 01 | `learn` | "Learn Anything, One Card at a Time", nav at step 1 |
+| 02 | `challenges` | "Take on Challenges, Earn Your Medals", step 2 |
+| 03 | `rankings` | "Climb the Global Rankings", step 3, Winner Board panel |
+| 04 | `master` | "Ready to Master It?", two buttons, legal line |
+| 00 | `design-tokens` | The 28 tokens, one `:root` shared by every board |
+| 00b–00d | `evidence` | What each token was measured on |
+| 00e | `art` | The seven crops, and where each one sits |
+
+A fresh clone builds the first nine of those. The four `ref-*` boards hold
+third-party video frames, so they are gitignored and `gen.py` skips them when
+`assets/refs/` is absent. `layout.json` still names them either way — the
+canvas drops a row entry whose file it cannot find, and a row that loses all
+of them, so a committed layout that mentions the references does not go dirty
+on a capture-less regeneration.
+
+## How close it lands
+
+Mean absolute delta against the source frames, whole 393 × 852 frame, phone
+crop, in levels of 255:
+
+| Screen | Δ | Screen | Δ |
+| --- | --- | --- | --- |
+| 01 Learn | 6.50 | 03 Rankings | 6.17 |
+| 02 Challenges | 6.64 | 04 Master | 7.05 |
+
+`refkit batch` replays all 30 Phase-1 probes against the renders: **13 colour
+probes at a mean Δmax of 0.9 and a worst case of 7**, and every edge scan
+within one source pixel. Nine of the 13 colour probes return an exact match.
+Three of the four box probes land within 1.5pt; the fourth is `sb-time`, which
+measures the source's clock and is deliberately no longer what the boards draw
+— see the chrome section below.
+
+These numbers are two to four times `duolingo-ios`', and the reason is the
+source, not the work. **A video frame is not a screenshot.** At 1.337 capture
+px per design pt every glyph is three pixels tall through an H.264 encoder,
+and a sharp render diffed against a soft frame scores an error the geometry
+does not contain. The zone breakdown says so: the hero art, which is cropped
+from the frame itself, sits at Δ 1.0–3.5, while the type zone sits at 7.7–14.2
+with every string matching the reference's ink box to within 1.5pt.
+
+Three structural items make up about 2.0 of each screen's score, all
+deliberate:
+
+- **The phone frame is the repo's, not the source's** — see below, 1.00.
+- **The status bar is the repo's too** — see below, 0.42.
+- **The rectangular crop keeps the bezel**, so the left and right 30pt of
+ every frame score 10.2 against a phone-cropped render's masked corners,
+ where the middle 333pt scores 5.5 to 6.5.
+
+## The face is SF Pro, and the whole design is tracked at -2.5%
+
+Called wrong twice before it was called right, and `refkit font` would not
+settle it (SF Pro Rounded 0.903, SF Pro 0.856). What settled it was width.
+
+At 3× the terminals on "Create Account" are **cut, not round**. Then the
+arithmetic: four strings across two sizes, ink width against the untracked
+setting of each candidate face.
+
+| String | size | ref | SF Pro | SF Pro Rounded |
+| --- | --- | --- | --- | --- |
+| `Ready to Master It?` | 36 | 299.9 | 311.7 | 321.7 |
+| `Learn Anything,` | 36 | 246.8 | 255.3 | 263.3 |
+| `Create an account and start learning` | 15 | 234.9 | 247.7 | 241.0 |
+| `SMART LEARNING` | 15 | 125.7 | 132.0 | 135.3 |
+
+SF Pro is uniformly 3.3–5.2% wide; SF Pro Rounded is 2.5–7.1% wide and
+inconsistent about it. A uniform residual is tracking; an inconsistent one is
+the wrong face.
+
+**The residual is tracking, and the test for that is character count.** A
+narrower face would shed width in proportion to the string's width; tracking
+sheds it in proportion to the number of gaps. Between the 13-gap eyebrow and
+the 35-gap subtitle at the same size, the observed reduction ratio is 0.391,
+against 0.371 predicted by tracking and 0.533 by a narrower face. Solved per
+string the four give -.0257, -.0244, -.0248 and -.0266em: **one figure,
+-.025em, across the whole ramp.**
+
+### The trap that hid it for three passes
+
+`letter-spacing` inherits as a **computed length**, not as a ratio. Setting
+`-.025em` on `body` computes against body's own 16px, and every child
+inherits the resulting **-0.4px** whatever its font-size. The 15px type
+looked right — -0.4px is within noise of the -0.375px it wanted — and the
+36px title got a third of its tracking, which read as "the title needs its
+own tighter value". Two rounds went into fitting a `--x-tracking-lg` that
+does not exist. Setting the same `var(--x-tracking)` on each type rule, so
+the `em` resolves at each element's own size, took the four screens from
+8.20/8.18/7.01/7.66 to **6.09/6.23/5.77/6.66** in one edit and deleted the
+second token.
+
+## Crop it, do not draw it
+
+Seven assets, listed in `crops.json`, cut from `assets/refs/cN.png` at a
+measured pt box, written to `assets/art/.png` and placed back by `art()`
+at the same numbers. 434 KB total.
+
+| id | what | size |
+| --- | --- | --- |
+| `01/02/03-hero` | the three hero illustrations, 365 × 474pt | 159/107/95 KB |
+| `01/02/03-path` | the progress path between the nav pills, 198 × 57pt | 7/9/11 KB |
+| `04-cup` | the trophy, 282 × 236pt | 54 KB |
+
+**Everything else is CSS**: both nav pills and their gradients, the track
+behind them, both arrows as inline SVG, the two buttons, all the type, and the
+whole status bar, island and home indicator, which come from the template.
+
+The heroes are cropped whole rather than rebuilt because screen 03 cannot be
+rebuilt at all — the Winner Board panel is a frosted overlay sitting on top of
+the medals, and what it covers is not on any frame in the clip. Cropping the
+three heroes to one rule keeps them consistent with it.
+
+## The chrome is the repo's, not the source's
+
+Measured off the frames:
+
+| | source | iOS / this repo |
+| --- | --- | --- |
+| Dynamic Island | 123 × 38.5 at top 8.6 | 125 × 36 at top 11 |
+| home indicator | 118.1 × 4.5 at bottom 2.5 | 139 × 5 at bottom 8 |
+
+Neither is close enough to be a rounding difference, and the two err in the
+same direction, so this is a designer's phone frame in the mockup rather than
+a real device. **The boards keep the repo's standard frame**, which every
+other canvas here uses, and that decision was priced rather than assumed:
+regenerating all four screens with the source's own numbers drops the tail
+band from Δ 49.0 to 22.6 and the status band from 16.8 to 13.9, for a
+**1.00 improvement in each screen's mean**. Consistency with the other
+canvases in this folder is worth one level.
+
+The status bar goes the same way, and for the same reason. The source's clock
+sits at ink top 20.2 centred on 60.2, and its right-hand cluster carries a
+fourth glyph between wifi and the battery that reads "32" — not an iOS bar
+either. The boards take `statusbar()`, the `.sb` rules and the inline-SVG
+glyph cluster **verbatim from `templates/gen.py`**, so the clock lands at ink
+top 23.2 centred on 71.2 and the cluster is the template's three glyphs. That
+costs a flat **0.42 per screen** — 6.08/6.22/5.75/6.63 became
+6.50/6.64/6.17/7.05, the same figure on all four — and it is why the `sb-time`
+probe no longer matches: its window ends at x 80 to stop short of the source's
+location arrow, and the repo's clock runs past it, so `batch` reports a clipped
+25.4 against the source's 32.2 rather than a narrow clock.
+
+## Defects in the source, kept
+
+- **Screen 04's buttons are not centred.** Both span x 12.5 to 365.8, so they
+ centre on 189.2 with a left margin of 12.5 and a right margin of 27.2,
+ while every text block on all four screens centres on 196.4. Replicated as
+ measured.
+- **Screens 02 and 03 look washed out**, and that is the design, not a
+ transition caught mid-fade. A 10 fps per-frame difference map over the whole
+ clip puts t = 1.50, 6.60, 12.00 and 17.60s each inside a still run of
+ half a second or more; the frosted Winner Board panel and the gradient-faded
+ list under it are painted that way.
+
+## Two measurement notes
+
+- **The white floor is #FDFDFD, not #FFFFFF.** A flat census of the page
+ ground returns 100% #FDFDFD, but 2801 pixels elsewhere in the same frame hit
+ 255. That is H.264 flat-field quantization across the whole capture, so `bg`
+ is `#FFFFFF` and every colour probe carries a systematic 2 levels against it.
+- **Downscale renders with an area average, not LANCZOS.** The verify loop
+ shoots at 3× and resamples to the capture's 525 × 1140. LANCZOS rings, and
+ the undershoot lands exactly where ink probes read: the Login label's ink
+ core came back #262626 against the reference's #3A3A3A, and the subtitle's
+ #6E6E6E against a #7E7E7E token, both of which read correctly on the
+ un-resampled 3× shot. Switching to `Image.BOX` took the 13 colour probes
+ from a mean Δmax of 4.6 and a worst case of 20 to **0.9 and 7**, and
+ improved the frame diff slightly as well.
+
+## Rebuilding
+
+```bash
+python3 mockups/canvases/flashcard-onboarding/gen.py
+refkit tokens mockups/canvases/flashcard-onboarding
+```
+
+`gen.py` is the only source of truth; the `NN-*.html` boards are its output.
+It re-cuts `assets/art/` from `assets/refs/` when the captures are present and
+leaves the committed crops alone when they are not, so the nine non-reference
+boards regenerate byte-identically from a fresh clone.
diff --git a/mockups/canvases/flashcard-onboarding/assets/art/01-hero.png b/mockups/canvases/flashcard-onboarding/assets/art/01-hero.png
new file mode 100644
index 00000000..fcbdb8d9
Binary files /dev/null and b/mockups/canvases/flashcard-onboarding/assets/art/01-hero.png differ
diff --git a/mockups/canvases/flashcard-onboarding/assets/art/01-path.png b/mockups/canvases/flashcard-onboarding/assets/art/01-path.png
new file mode 100644
index 00000000..ae3632de
Binary files /dev/null and b/mockups/canvases/flashcard-onboarding/assets/art/01-path.png differ
diff --git a/mockups/canvases/flashcard-onboarding/assets/art/02-hero.png b/mockups/canvases/flashcard-onboarding/assets/art/02-hero.png
new file mode 100644
index 00000000..a68075a1
Binary files /dev/null and b/mockups/canvases/flashcard-onboarding/assets/art/02-hero.png differ
diff --git a/mockups/canvases/flashcard-onboarding/assets/art/02-path.png b/mockups/canvases/flashcard-onboarding/assets/art/02-path.png
new file mode 100644
index 00000000..6804bc77
Binary files /dev/null and b/mockups/canvases/flashcard-onboarding/assets/art/02-path.png differ
diff --git a/mockups/canvases/flashcard-onboarding/assets/art/03-hero.png b/mockups/canvases/flashcard-onboarding/assets/art/03-hero.png
new file mode 100644
index 00000000..355813da
Binary files /dev/null and b/mockups/canvases/flashcard-onboarding/assets/art/03-hero.png differ
diff --git a/mockups/canvases/flashcard-onboarding/assets/art/03-path.png b/mockups/canvases/flashcard-onboarding/assets/art/03-path.png
new file mode 100644
index 00000000..d1e2b899
Binary files /dev/null and b/mockups/canvases/flashcard-onboarding/assets/art/03-path.png differ
diff --git a/mockups/canvases/flashcard-onboarding/assets/art/04-cup.png b/mockups/canvases/flashcard-onboarding/assets/art/04-cup.png
new file mode 100644
index 00000000..5fe9c846
Binary files /dev/null and b/mockups/canvases/flashcard-onboarding/assets/art/04-cup.png differ
diff --git a/mockups/canvases/flashcard-onboarding/crops.json b/mockups/canvases/flashcard-onboarding/crops.json
new file mode 100644
index 00000000..49a67989
--- /dev/null
+++ b/mockups/canvases/flashcard-onboarding/crops.json
@@ -0,0 +1,52 @@
+{
+ "_": "Art cut from assets/refs/cN.png at measured pt boxes, 1.337 px per pt. gen.py writes assets/art/.png and places each back at its own box, so an asset cannot drift from where it was measured. Everything else on these screens -- the type, the nav track, both pills, the arrows, the two buttons, the status bar clock -- is CSS.",
+ "01-hero": [
+ "c1",
+ 13.5,
+ 56.2,
+ 378.5,
+ 530.5
+ ],
+ "02-hero": [
+ "c2",
+ 13.5,
+ 56.2,
+ 378.5,
+ 530.5
+ ],
+ "03-hero": [
+ "c3",
+ 13.5,
+ 56.2,
+ 378.5,
+ 530.5
+ ],
+ "01-path": [
+ "c1",
+ 97.2,
+ 768.7,
+ 295.5,
+ 825.5
+ ],
+ "02-path": [
+ "c2",
+ 97.2,
+ 768.7,
+ 295.5,
+ 825.5
+ ],
+ "03-path": [
+ "c3",
+ 97.2,
+ 768.7,
+ 295.5,
+ 825.5
+ ],
+ "04-cup": [
+ "c4",
+ 58.0,
+ 172.0,
+ 340.0,
+ 408.0
+ ]
+}
diff --git a/mockups/canvases/flashcard-onboarding/gen.py b/mockups/canvases/flashcard-onboarding/gen.py
new file mode 100644
index 00000000..df71d9d6
--- /dev/null
+++ b/mockups/canvases/flashcard-onboarding/gen.py
@@ -0,0 +1,598 @@
+"""Emit mockups/canvases/flashcard-onboarding/ from four frames of a video.
+
+Four onboarding screens at 393 x 852 pt, cloned from a 1080 x 1350 H.264 clip
+of a flashcard app walkthrough. The phone's screen window inside that clip is
+525 x 1140 px, so the scale is 1.337 px per pt (525/393 = 1.3359, 1140/852 =
+1.3380, 0.16% apart), and every number below was read at that scale.
+
+Chrome is CSS -- type, the nav track, both pills, the arrows, the two buttons,
+the status bar clock. Illustration is cropped out of the frames at its own
+measured box: `crops.json` names each box, `cut()` writes assets/art/.png
+and `art()` places the back at the same numbers, so an asset cannot
+drift from where it was measured. See the README for what that costs here.
+
+ python3 mockups/canvases/flashcard-onboarding/gen.py
+
+Artboards are output. Edit this file, never the HTML.
+"""
+import base64
+import json
+from pathlib import Path
+
+OUT = Path(__file__).resolve().parent
+REFS_DIR = OUT / "assets" / "refs"
+ART_DIR = OUT / "assets" / "art"
+CROPS = {k: v for k, v in json.loads((OUT / "crops.json").read_text()).items()
+ if not k.startswith("_")}
+SCALE = 1.337 # capture px per design pt
+
+NAME = "Flashcard Onboarding"
+PAGE_NAME = "(example) " + NAME
+P = "f"
+
+# ---------------------------------------------------------------- tokens ----
+# (group, name, value, evidence). Every box below is design pt on the 525 x
+# 1140 crops in assets/refs, replayable from probes.json with --pt 1.337.
+TOKENS = [
+ ("Font", "font",
+ 'system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif',
+ "SF Pro, not Rounded: the terminals on 'Create Account' are cut, not round, "
+ "at 3x. Four measured strings run 3.3-5.2% narrower than system-ui, a "
+ "1.9-point spread that --x-tracking absorbs, against 2.5-7.1% and a "
+ "4.6-point spread for SF Pro Rounded"),
+ ("Font", "tracking", "-.025em",
+ "every string is narrower than its untracked setting by an amount that "
+ "scales with character count, not with width: 5.0px over 13 gaps on the "
+ "eyebrow and 12.8 over 35 on the subtitle, ratio .391 against .371 "
+ "predicted by tracking and .533 by a narrower face. The four strings solve "
+ "to -.0257, -.0244, -.0248 and -.0266em across 15px and 36px, so one "
+ "figure covers the whole ramp. It has to be set on each rule: "
+ "letter-spacing inherits as a computed length, so an em on body reaches a "
+ "36px title as body's own -.4px and tracks it at a third of the intent"),
+
+ ("Surface", "bg", "#FFFFFF",
+ "flat census on c4 y700-760 is 100% #FDFDFD, but 2801 px elsewhere hit 255: "
+ "the 2-level floor is H.264 flat-field quantization, not an off-white"),
+ ("Surface", "card", "#FDFAF4",
+ "flat run c4 row 185, x 97.4..285.9 -- the warm panel behind the trophy"),
+ ("Surface", "track", "#F4F4F4",
+ "flat run c1 col 120, y 770.2..787.4 and 800.9..824.8 -- the nav track"),
+ ("Surface", "pill-off", "#C1C1C1",
+ "flat census inside the disabled back pill, 50.6% of 3221 flat px"),
+
+ ("Line", "hairline", "#EFEFEF",
+ "Login outline: c4 row 651 x 364.0..365.5, c4 col 40 y 623.3..625.5"),
+
+ ("Ink", "ink", "#000000",
+ "ink core (darkest 2%) of the eyebrow, both title lines and the legal bold"),
+ ("Ink", "ink-mid", "#3A3A3A", "ink core of the Login label, c4"),
+ ("Ink", "ink-2", "#7E7E7E",
+ "subtitle ink core #7D7D7D on c1 and c4, legal-line grey #7F7F7F; "
+ "one token at the midpoint"),
+ ("Ink", "ink-inv", "#FFFFFF",
+ "brightest 2% of the back arrow is #FEFEFE, on the same 2-level floor as bg"),
+
+ ("Accent", "accent", "#F39D05",
+ "flat fill of the walked segment of the progress path, c2 and c3; the nodes "
+ "themselves are 25pt across at 1.337 px/pt, too small for a census. Every "
+ "amber element on a screen is cropped art, so this token is used only by "
+ "the foundations boards"),
+
+ ("Fill", "pill-dark",
+ "linear-gradient(180deg,#8A8A8A 0,#3C3C3C 6.8px,#141414 15.7px,"
+ "#0F0F0F 30px,#090909 41px,#040404 100%)",
+ "column profile c2 col 336 (next) and col 55 (back), y 768.7..825.5; the "
+ "two pills profile identically, so an enabled back pill is the same fill"),
+ ("Fill", "pill-grey",
+ "linear-gradient(180deg,#DADADA 0,#D2D2D2 4.5px,#C4C4C4 9.8px,"
+ "#C1C1C1 30px,#C1C1C1 100%)",
+ "column profile c1 col 55, y 768.7..825.5 -- back is disabled on 01 only"),
+ ("Fill", "btn-dark",
+ "linear-gradient(180deg,#8A8A8A 0,#3C3C3C 5px,#000000 12px,#000000 100%)",
+ "column profile c4 col 340, y 560.5..616.6 -- Create Account"),
+
+ ("Radius", "r-pill", "999px",
+ "by construction: both nav pills and both buttons are h/2 caps"),
+ ("Radius", "r-phone", "52px",
+ "circular stand-in for the 55pt continuous display corner"),
+
+ ("Type", "t-eyebrow", "600 15px/18px var(--x-font)",
+ "cap 11.2 at 573.7..584.9 on c1; 'SMART LEARNING' spans 125.7 tracked"),
+ ("Type", "t-title", "700 36px/42.3px var(--x-font)",
+ "flat cap 'R' 25.4 on c4 (25.4/0.7046 = 36.0); baselines 629.8 and 672.1"),
+ ("Type", "t-sub", "400 15px/18.7px var(--x-font)",
+ "flat cap 'E' 11.2 on c1 subtitle; line tops 688.1 and 706.8"),
+ ("Type", "t-btn", "600 20px/24px var(--x-font)",
+ "'Login' cap top 643.2 to descender 661.2 solves 20.0 at cap .7046 desc .213"),
+ ("Type", "t-legal", "400 13px/17.2px var(--x-font)",
+ "band 12.7 ascender-to-descender at 769.6..782.3, pitch 17.2"),
+ ("Type", "t-time", "590 17px/22px var(--x-font)",
+ "status bar digits 12.7 tall at 20.2..32.9, spanning 32.2 untracked -- "
+ "iOS chrome, so it opts out of --x-tracking"),
+
+ ("Metrics", "w", "393px", "iPhone 15/16 logical width"),
+ ("Metrics", "h", "852px", "iPhone 15/16 logical height"),
+ ("Metrics", "status", "54px", "iOS status bar, Dynamic Island devices"),
+ ("Metrics", "nav-y", "768.7px", "c1 col 336, the next pill's top edge"),
+ ("Metrics", "nav-h", "56.8px", "c1 col 336, 768.7..825.5"),
+]
+
+
+def _root():
+ """One :root block, byte-identical in every board. No `}` inside it:
+ refkit tokens reads it with a non-greedy regex."""
+ out, seen = [":root{"], None
+ for group, name, value, _ in TOKENS:
+ if group != seen:
+ out.append("" if seen else None)
+ out.append(" /* %s */" % group)
+ seen = group
+ out.append(" --x-%s:%s;" % (name, value))
+ return "\n".join(x for x in out if x is not None) + "\n}"
+
+
+TOKENS_CSS = _root()
+
+# ------------------------------------------------------------------ art ----
+def cut():
+ """Refresh assets/art/ from assets/refs/ at the boxes in crops.json."""
+ if not REFS_DIR.exists():
+ return # a fresh clone has no captures; art/ is committed
+ try:
+ from PIL import Image # noqa: local dep
+ except ImportError:
+ print("%-24s %6s (no Pillow; assets/art/ left as committed)"
+ % ("assets/art/", "-"))
+ return
+ ART_DIR.mkdir(parents=True, exist_ok=True)
+ src, n = {}, 0
+ for cid, (ref, x0, y0, x1, y1) in CROPS.items():
+ f = REFS_DIR / (ref + ".png")
+ if not f.exists():
+ continue
+ if ref not in src:
+ src[ref] = Image.open(f).convert("RGB")
+ box = tuple(round(v * SCALE) for v in (x0, y0, x1, y1))
+ src[ref].crop(box).save(ART_DIR / (cid + ".png"), optimize=True)
+ n += 1
+ print("%-24s %6d crops" % ("assets/art/", n))
+
+
+def _uri(cid):
+ f = ART_DIR / (cid + ".png")
+ return ("data:image/png;base64," + base64.b64encode(f.read_bytes()).decode()
+ if f.exists() else "")
+
+
+def art(cid):
+ """One , placed at the box it was measured from."""
+ _, x0, y0, x1, y1 = CROPS[cid]
+ return ('' % (_uri(cid), x0, y0, x1 - x0, y1 - y0))
+
+
+# ------------------------------------------------- placing type by its ink ----
+# Every type position in this folder was measured as a baseline, because a
+# baseline is the one thing a string of any content puts in the same place: an
+# ink top moves with the tallest glyph, and "Climb the Global" has no
+# descender where "Take on Challenges," has two. SF Pro Rounded reports hhea
+# ascender .952 and descender .213 per em, and a browser centres that
+# 1.165em content box in the line box, so:
+ASC, DESC = 0.952, 0.213
+
+
+def bt(baseline, fs, lh):
+ """The `top` that lands a single line's baseline where it was measured."""
+ return baseline - ((lh - (ASC + DESC) * fs) / 2 + ASC * fs)
+
+
+# ------------------------------------------------------------ phone frame ----
+BASE = """*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:var(--x-font);-webkit-font-smoothing:antialiased;
+ display:flex;justify-content:center;padding:24px}"""
+
+PHONE = """.phone{position:relative;flex:none;width:var(--x-w);height:var(--x-h);
+ border-radius:var(--x-r-phone);overflow:hidden;background:var(--x-bg);color:var(--x-ink);transform:translateZ(0);
+ box-shadow:0 0 0 11px #1D191A,0 0 0 12.5px #3A3735,0 24px 60px rgba(29,25,26,.28)}
+.sb{position:absolute;left:0;top:0;width:var(--x-w);height:var(--x-status);z-index:6}
+.sb .time{position:absolute;left:0;top:18.2px;width:142.4px;text-align:center;
+ font:var(--x-t-time)}
+.sb svg{position:absolute;display:block;fill:currentColor}
+.sb .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);
+ width:125px;height:36px;border-radius:20px;background:#000}
+.home{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
+ width:139px;height:5px;border-radius:3px;background:currentColor;z-index:6}
+img.a{position:absolute;display:block}"""
+
+# Cellular, wifi, battery at their measured status-bar positions, inheriting
+# currentColor so one call recolours the whole bar.
+SB_ICONS = (
+ ''
+ ''
+ '')
+
+# The repo's standard status bar, lifted from templates/gen.py, chrome and all.
+# The source's own bar differs -- the clock sits 2.5pt higher and the right-hand
+# cluster carries a fourth glyph reading "32" between wifi and the battery --
+# but the frame around a board is the repo's, not the source's, the same call
+# the Dynamic Island and the home indicator already make. See the README.
+def statusbar(colour="var(--x-ink)", time="9:41"):
+ return ('
' % (n, n, v)
+ for g in ("Surface", "Line", "Ink", "Accent", "Fill") for _, n, v, _ in _of(g))
+ radii = "".join(
+ '
%s
' % (v, v)
+ for _, n, v, _ in _of("Radius") if n != "r-phone")
+ type_ = "".join(
+ '
Grumpy wizards'
+ '--x-%s · %s
' % (n, n, v.split(" var")[0])
+ for _, n, v, _ in _of("Type"))
+ met = " ".join("--x-%s: %s" % (n, v) for _, n, v, _ in _of("Metrics"))
+ return page(NAME + " - Design Tokens",
+ '
%s
'
+ '
Four onboarding screens, measured off a 1080 × 1350 video '
+ 'at 1.337 capture px per design pt. Every value below is a '
+ 'measurement; the row that justifies it is on 00b, and the probe '
+ 'that produced it is in probes.json.
'
+ '
Colour
%s
'
+ '
Radius
%s
'
+ '
Type
%s'
+ '
Metrics
%s
'
+ % (NAME, swatches, radii, type_, met), SHEET)
+
+
+EV_ROWS = 10 # rows that fit the 478 x 980 box; the table splits past this
+ART_BOARD = "00%s-art" % "bcdefg"[-(-len(TOKENS) // EV_ROWS)] # after the last one
+
+
+def evidence_boards():
+ """The evidence table, split across as many boards as it needs. It is the
+ deliverable of Phase 1: trim the board count, never the rows."""
+ pages = [TOKENS[i:i + EV_ROWS] for i in range(0, len(TOKENS), EV_ROWS)]
+ for i, chunk in enumerate(pages):
+ rows = "".join(
+ '
--x-%s
%s
%s
'
+ % (n, v, e) for _, n, v, e in chunk)
+ of = " %d/%d" % (i + 1, len(pages)) if len(pages) > 1 else ""
+ yield ("00%s-evidence" % "bcdefg"[i],
+ page(NAME + " - Evidence" + of,
+ '
Evidence%s
'
+ '
One row per token. A token with no evidence is a guess.
'
+ '
%s
' % (of, rows), SHEET))
+
+
+# ------------------------------------------------------------ art board ----
+# The board that answers "which of this is a picture?". Every crop is declared
+# once as a background-image class and used twice: at its measured pt box on a
+# scaled-down phone, and again in the contact sheet.
+MINI_W = 100.0
+MINI_S = MINI_W / 393.0
+
+ART_BOARD_CSS = SHEET + """
+.rule{font:400 9px/13px ui-monospace,Menlo,monospace;color:var(--x-ink-2);
+ margin:-10px 0 13px}
+.minis{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:2px}
+.mini{position:relative;width:%.1fpx;height:%.1fpx;overflow:hidden;
+ border-radius:9px;border:1px solid var(--x-hairline);background:var(--x-bg)}
+.mini .in{position:absolute;left:0;top:0;width:393px;height:852px;
+ transform:scale(%.5f);transform-origin:0 0}
+.mini em{position:absolute;left:5px;bottom:4px;font-style:normal;
+ font:600 8px/11px ui-monospace,Menlo,monospace;color:var(--x-ink-mid);
+ background:rgba(255,255,255,.9);padding:1px 4px;border-radius:3px}
+b.i{display:block;background-repeat:no-repeat}
+.mini b.i{position:absolute;background-size:100%% 100%%}
+.cs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
+.cs figure{border:1px solid var(--x-hairline);border-radius:5px;padding:4px;
+ background:var(--x-bg)}
+.cs b.i{height:74px;background-size:contain;background-position:center}
+.cs figcaption{margin-top:3px;font:400 8px/11px ui-monospace,Menlo,monospace;
+ color:var(--x-ink-2)}
+.cs figcaption b{color:var(--x-ink-mid)}
+""" % (MINI_W, round(852 * MINI_S, 1), MINI_S)
+
+
+def art_classes():
+ """One background-image rule per crop, so each data URI is embedded once."""
+ return "".join(".i-%s{background-image:url(%s)}" % (c, _uri(c))
+ for c in CROPS if _uri(c))
+
+
+def tile(cid, style=""):
+ return '' % (cid, ' style="%s"' % style if style else "")
+
+
+def mini(ref, label):
+ """One screen scaled down, carrying its art and nothing else."""
+ ids = [c for c in CROPS if c.startswith(ref + "-")]
+ inner = "".join(
+ tile(c, "left:%.1fpx;top:%.1fpx;width:%.1fpx;height:%.1fpx"
+ % (CROPS[c][1], CROPS[c][2],
+ CROPS[c][3] - CROPS[c][1], CROPS[c][4] - CROPS[c][2]))
+ for c in ids)
+ # data-clip-ok: .in keeps its 393x852 layout box under the transform,
+ # so the overflow check sees a clip that is not one.
+ return ('
%s
'
+ '%s · %d
' % (inner, label, len(ids)))
+
+
+def art_board():
+ minis = "".join(mini(s[:2], s[3:]) for s, _, _ in SCREENS)
+ sheet_ = "".join(
+ '%s%s %s · %.0f×%.0f pt'
+ ''
+ % (tile(c), c, CROPS[c][0], CROPS[c][3] - CROPS[c][1],
+ CROPS[c][4] - CROPS[c][2])
+ for c in CROPS if _uri(c))
+ return page(
+ NAME + " - Art assets",
+ '
Art assets
'
+ '
%d crops, cut from the four frames at the pt boxes in '
+ 'crops.json and placed back at the same numbers. Nothing '
+ 'here is generated and nothing here is redrawn: on 03 the Winner Board '
+ 'panel covers the medals behind it, so the medals cannot be recovered '
+ 'from any frame in the clip.
'
+ '
every screen with its chrome removed, so what is left '
+ 'is exactly what is an image
'
+ '
%s
'
+ '
Every crop, in manifest order
'
+ '
%s
'
+ % (len(CROPS), minis, sheet_),
+ ART_BOARD_CSS + "\n" + art_classes())
+
+
+# --------------------------------------------------------------- screens ----
+# Every `top` below is bt() applied to a measured baseline, so the numbers in
+# the source read as the numbers in probes.json.
+SCREEN_CSS = """.c{position:absolute;left:0;width:var(--x-w);text-align:center;
+ letter-spacing:var(--x-tracking)}
+.eyebrow{font:var(--x-t-eyebrow)}
+.title{font:var(--x-t-title)}
+.sub{font:var(--x-t-sub);color:var(--x-ink-2)}
+
+.track{position:absolute;left:12.7px;top:769.5px;width:365.8px;height:55.3px;
+ border-radius:var(--x-r-pill);background:var(--x-track)}
+.pill{position:absolute;top:var(--x-nav-y);height:var(--x-nav-h);
+ border-radius:var(--x-r-pill);color:var(--x-ink-inv)}
+.pill.back{left:12.7px;width:84.5px;background:var(--x-pill-grey)}
+.pill.back.on{background:var(--x-pill-dark)}
+.pill.next{left:295.5px;width:83px;background:var(--x-pill-dark)}
+.pill svg{position:absolute;left:50%;top:21.9px;margin-left:-9.35px;
+ display:block;width:18.7px;height:14.2px}
+
+.btn{position:absolute;left:12.7px;width:352.8px;border-radius:var(--x-r-pill)}
+.btn1{top:560.5px;height:56.1px;background:var(--x-btn-dark)}
+.btn2{top:623.1px;height:56.1px;background:var(--x-bg);
+ border:1.5px solid var(--x-hairline)}
+.lbl{position:absolute;left:12.7px;width:352.8px;text-align:center;
+ letter-spacing:var(--x-tracking);
+ font:var(--x-t-btn)}
+.legal{font:var(--x-t-legal);color:var(--x-ink-2)}
+.legal b{font-weight:600;color:var(--x-ink)}"""
+
+ARROW = ('')
+ARROW_BACK = ARROW.replace('
