canvases: grok-ios, fifteen Grok iOS screens with every icon a crop

mockups/canvases/README.md

@@ -224,6 +224,45 @@ declares a box other than the default 478 x 980.
   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.
+- `grok-ios/`: the run to read when the ask is that the icons match the
+  source exactly, and the one with two devices on one canvas. Fifteen
+  screens of the Grok iOS app - the Home Screen widget, two pages of the
+  widget guide, the Voice Settings sheet over the 3D companion scene, the
+  SuperGrok paywall, the Terms update, the SuperGrok home with its composer,
+  the voice picker on two voices, the Settings sheet at three scroll
+  positions, the Terms update signing out, the Introducing Grok Bot sheet
+  and the App Store page for Grok Bot. Twenty-six boards in three rows: a
+  token board, a type board and nine evidence boards for 167 tokens, the
+  fifteen replicas, and the capture of each parked underneath. Ten are
+  Mobbin captures of a 393pt phone at 2.2417 px/pt; five are native 1206 x
+  2622 captures of a 402pt phone at exactly 3 px/pt, rendered and scored on
+  their own grid with the template's status bar in place of the capture's.
+  Mean absolute delta is 0.27-1.41 on the three Mobbin screens that are
+  mostly crops or a drawn illustration, 9.53 on the Voice Settings sheet,
+  whose companion scene under the sheet is the one ground the capture does
+  not hold and is a gpt-image-2 edit with the sheet drawn over it, 5.77 on
+  the paywall (eighteen lines of white type over an inpainted hero),
+  0.80-0.95 on the three native white pages, 2.12 on the App Store page,
+  4.77 on the Grok Bot sheet, whose card wash and glass are drawn in CSS and
+  fitted by sweep, and 0.74-1.66 on the voice picker and the settings sheet,
+  which are flat grounds, white cards and crops. Every icon but three, 66 of
+  them, is a crop of the capture at its measured ink box rather than a
+  drawing, because a crop scores 0 by construction and most of the glyphs
+  are SF Symbols whose outlines cannot be redistributed; the three side
+  glyphs on the voice screen are SVGs in `assets/icons/`, traced against the
+  capture's coverage maps by request. Its `README.md` records the inpainting
+  that clears the type off the crops before they are cut (a Coons fill from
+  each box's own edges, and a card whose material is un-applied and
+  re-applied by CSS), the five alphas solved against those patched frames,
+  the shadows and the glass fitted by sweep, a colour cast on three of the Mobbin exports
+  taken out with a per-channel lookup before anything was sampled, and the
+  type sizes that are not on the iOS ladder because the widths said so -
+  including a title that measured as 400 at 42px by width and turned out to
+  be 500 at 40.5px by ink mass, which halved its band's delta. The widget
+  guide's illustration is the one picture that is drawn rather than cropped:
+  a phone in CSS on 03, and on 02 a sheet over it with the widget card as a
+  flat rectangle under one fitted `matrix3d`. The fifteen `ref-*` boards are
+  gitignored, so a fresh clone has 26.
 - `substack-ios/`: the run to read when a translucent bar sits over content
   the board does not control. Seven screens of the Substack iOS home feed - a
   note, the Keep reading toast, three notes in a row, your own just-published

mockups/canvases/grok-ios/00a-type-tokens.html

@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Grok iOS - Type Tokens</title>
+<style>
+:root{
+  /* Font */
+  --k-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
+
+  /* Surface */
+  --k-ground:#D5D5D5;
+  --k-card:#FFFFFF;
+  --k-well:#E5E5E5;
+  --k-dim:#CBCBCB;
+  --k-sheet:#F6F6F6;
+  --k-illo-frame:#AAAAAA;
+  --k-illo-screen:#FAFAFA;
+  --k-illo-tile:#DDDDDD;
+  --k-illo-scrim:rgba(0,0,0,.12);
+  --k-illo-grabber:#CCCCCC;
+  --k-night:#010101;
+  --k-skip:#121212;
+  --k-material:rgba(255,255,255,.067);
+  --k-disc:rgba(255,255,255,.17);
+  --k-price:#131313;
+  --k-plan-lo:#282828;
+  --k-plan-hi:#333536;
+  --k-free-bg:#341A0E;
+  --k-scrim-btn:rgba(0,0,0,.32);
+  --k-glass:rgba(255,255,255,.09);
+  --k-grabber:rgba(255,255,255,.35);
+  --k-sheet-v:rgba(0,0,0,.40);
+  --k-side-ink:#CDCECF;
+  --k-voice-pill:#767676;
+  --k-rec:#F09540;
+  --k-page:#FFFFFF;
+  --k-chip:#F5F5F5;
+  --k-composer:#FEFEFE;
+  --k-ctl:#F4F3F4;
+  --k-btn:#000000;
+  --k-scrim-sheet:rgba(0,0,0,.19);
+  --k-glass-sheet:rgba(255,255,255,.5);
+  --k-grabber-pro:#A4A4A6;
+  --k-store-dim:#BDBFBC;
+  --k-store-disc:#FAFAFA;
+  --k-store-pill:#EEEEEF;
+  --k-card-blue:#80BEFD;
+  --k-card-pale:#E8F3FE;
+
+  /* Line */
+  --k-material-line:rgba(255,255,255,.16);
+  --k-price-line:#252525;
+  --k-plan-line:rgba(255,255,255,.17);
+  --k-composer-shadow:rgba(0,0,0,.07);
+  --k-composer-line:#F9F9F9;
+  --k-sheet-line:rgba(0,0,0,.45);
+  --k-store-rule:#E7E7E8;
+  --k-illo-card-shadow:rgba(0,0,0,.24);
+  --k-row-line:rgba(255,255,255,.10);
+  --k-illo-sheet-shadow:rgba(0,0,0,.12);
+
+  /* Ink */
+  --k-ink:#000000;
+  --k-ink-inv:#FFFFFF;
+  --k-mute:#A9A9A9;
+  --k-skip-ink:#BBBBBB;
+  --k-foot:#838383;
+  --k-free-ink:#E07D54;
+  --k-dots:#C5C5C5;
+  --k-copy-mute:#7F7F7F;
+  --k-placeholder:#7E7E7E;
+  --k-sheet-copy:#5B5B5B;
+  --k-store-mute:#8A8A8D;
+  --k-store-val:#8E8E92;
+  --k-store-label:#B1B1B4;
+  --k-store-link:#0088FF;
+  --k-store-pill-ink:#CFCFD1;
+  --k-illo-label:#333333;
+  --k-illo-sub:#5A5A5A;
+
+  /* Radius */
+  --k-r-phone:52px;
+  --k-r-widget:27px;
+  --k-r-card:26px;
+  --k-r-sheet:30px;
+  --k-r-illo:53.5px;
+  --k-r-illo-tile:14.3px;
+  --k-r-illo-sheet:26.8px;
+  --k-r-illo-card:22px;
+  --k-r-sheet-v:35px;
+  --k-r-row:13px;
+  --k-r-feat:32px;
+  --k-r-price:18px;
+  --k-r-plan:15px;
+  --k-r-chip:22px;
+  --k-r-composer:28px;
+  --k-r-sheet-pro:36px;
+  --k-r-store:38px;
+  --k-r-card:18px;
+  --k-r-tip:14px;
+  --k-r-pill:999px;
+
+  /* Type */
+  --k-t-time:600 15px/20px var(--k-font);
+  --k-t-widget:600 19.5px/24px var(--k-font);
+  --k-t-h:600 17px/22px var(--k-font);
+  --k-t-body:400 17px/22px var(--k-font);
+  --k-t-feat:400 17.5px/22px var(--k-font);
+  --k-t-row:400 16.5px/21px var(--k-font);
+  --k-t-sheet:600 16px/21px var(--k-font);
+  --k-t-h1:500 40.5px/50px var(--k-font);
+  --k-t-h2:600 20px/25px var(--k-font);
+  --k-t-sub:400 13.25px/18px var(--k-font);
+  --k-t-plan:600 15px/20px var(--k-font);
+  --k-t-unit:400 15.4px/20px var(--k-font);
+  --k-t-price:700 20px/26px var(--k-font);
+  --k-t-free:700 12.5px/14px var(--k-font);
+  --k-t-title:600 21px/26px var(--k-font);
+  --k-t-copy:400 14px/19px var(--k-font);
+  --k-t-link:400 16.75px/22px var(--k-font);
+  --k-t-btn:600 15.5px/20px var(--k-font);
+  --k-t-hdr:600 22px/28px var(--k-font);
+  --k-t-chip:500 14px/20px var(--k-font);
+  --k-t-ask:400 16px/21px var(--k-font);
+  --k-t-ctl:400 14px/18px var(--k-font);
+  --k-t-speak:600 14.5px/18px var(--k-font);
+  --k-t-sheet-h:600 18.2px/22px var(--k-font);
+  --k-t-sheet-copy:400 15.25px/20px var(--k-font);
+  --k-t-card:500 36.5px/44px var(--k-font);
+  --k-t-store-h:700 21px/26px var(--k-font);
+  --k-t-store-title:600 21px/26px var(--k-font);
+  --k-t-store-sub:400 14px/19px var(--k-font);
+  --k-t-store-label:600 11px/13px var(--k-font);
+  --k-t-store-val:700 21px/25px var(--k-font);
+  --k-t-store-small:400 11.5px/14px var(--k-font);
+  --k-t-store-bundle:400 16px/19px var(--k-font);
+  --k-t-store-body:400 14px/19px var(--k-font);
+  --k-t-store-btn:600 13px/16px var(--k-font);
+  --k-t-illo-label:500 11.5px/14px var(--k-font);
+  --k-t-illo-title:600 21.25px/26px var(--k-font);
+  --k-t-illo-sub:400 11.25px/15px var(--k-font);
+  --k-t-illo-pill:600 15.5px/20px var(--k-font);
+
+  /* Metrics */
+  --k-w:393px;
+  --k-h:852px;
+  --k-status:54px;
+  --k-gutter:16px;
+  --k-gutter-w:20px;
+  --k-tap:44px;
+  --k-sheet-top:59px;
+  --k-sheet-top-v:403.6px;
+  --k-widget:162.4px;
+  --k-disc:40px;
+  --k-w-pro:402px;
+  --k-h-pro:874px;
+  --k-sheet-v-blur:4px;
+  --k-illo-stroke:10px;
+  --k-status-pro:59px;
+
+  /* Font */
+  --k-mono:ui-monospace,"SF Mono",Menlo,monospace;
+
+  /* Surface */
+  --k-voice-sheet:#EDEDEE;
+  --k-nav-well:#C8C8C9;
+  --k-avatar:#F0F0F0;
+  --k-toggle-off:#C5C4C7;
+
+  /* Line */
+  --k-card-line:#EAEAEA;
+  --k-voice-shadow:rgba(0,0,0,.11);
+
+  /* Ink */
+  --k-voice-sub:#5E5E5E;
+  --k-dot-off:#A6A3A7;
+  --k-voice-btn:#090709;
+  --k-section-ink:#787878;
+  --k-sec-ink:#7C7C7C;
+  --k-danger:#BE484C;
+  --k-version-ink:#C2C2C2;
+
+  /* Radius */
+  --k-r-voice:37.5px;
+  --k-r-modal:39.5px;
+  --k-r-group:25.5px;
+
+  /* Type */
+  --k-t-nav:500 16px/22px var(--k-font);
+  --k-t-voice:600 16.25px/21px var(--k-font);
+  --k-t-mail:400 15.9px/20px var(--k-font);
+  --k-t-section:600 15px/20px var(--k-font);
+  --k-t-voice-sub:400 16px/21px var(--k-font);
+  --k-t-hint:400 14.25px/18px var(--k-font);
+  --k-t-version:400 11.65px/16px var(--k-mono);
+
+  /* Metrics */
+  --k-row-s:52px;
+  --k-sheet-blur:19px;
+  --k-sheet-top-s:58.7px;
+}
+
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:var(--k-font);-webkit-font-smoothing:antialiased;
+  display:flex;justify-content:center;padding:24px}
+.phone{position:relative;flex:none;width:var(--k-w);height:var(--k-h);
+  border-radius:var(--k-r-phone);overflow:hidden;background:var(--k-card);color:var(--k-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:100%;height:var(--k-status);z-index:6}
+.sb .time{position:absolute;left:0;top:18.2px;width:142.4px;text-align:center;font:var(--k-t-time)}
+.sb .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);
+  width:125px;height:36px;border-radius:20px;background:#000}
+.sb .rec{position:absolute;left:215px;top:26.8px;width:5.8px;height:5.8px;border-radius:50%;background:var(--k-rec)}
+.sb svg{position:absolute;display:block;fill:currentColor}
+/* iOS picks the indicator colour against the wallpaper: measure it per screen */
+.home{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
+  width:139px;height:5px;border-radius:3px;background:currentColor;z-index:6}
+body{padding:0;background:#FFF;color:var(--k-ink)}
+.sheet{width:478px;height:980px;padding:14px 20px 8px;overflow:hidden}
+h1{font:600 17px/22px var(--k-font);margin-bottom:2px}
+header p{font:400 10.5px/13.5px var(--k-font);color:var(--k-foot);margin-bottom:4px}
+h2{font:600 9px/12px var(--k-font);letter-spacing:.8px;text-transform:uppercase;
+  color:var(--k-foot);margin:5px 0 3px}
+.grid{column-count:2;column-gap:12px}
+.sw{display:flex;align-items:center;gap:5px;height:10.2px;break-inside:avoid;white-space:nowrap}
+.sw .chip{width:16px;height:9px;flex:none;border-radius:3px;border:1px solid var(--k-well);background-color:#888}
+.sw b{font:600 7.5px/10.5px ui-monospace,Menlo,monospace}
+.sw i{font:400 7.5px/10.5px ui-monospace,Menlo,monospace;color:var(--k-foot);font-style:normal}
+.foot{display:flex;gap:28px;align-items:flex-start;margin-top:4px}
+.foot h2{margin-top:0}
+.rad{display:flex;gap:6px;flex-wrap:wrap;width:250px}
+.rb{width:36px;height:22px;background:var(--k-sheet);border:1px solid var(--k-well)}
+.rad em{display:block;margin-top:2px;font:400 8.5px/11px var(--k-font);
+  color:var(--k-foot);font-style:normal;text-align:center}
+.ty{column-count:3;column-gap:12px}
+.tr{break-inside:avoid;border-bottom:1px solid var(--k-well)}
+.tr span{display:block;white-space:nowrap;overflow:hidden;line-height:1}
+.tr em{display:block;font:400 7px/9px ui-monospace,Menlo,monospace;
+  color:var(--k-foot);font-style:normal;white-space:nowrap}
+.met{font:400 8px/9.5px ui-monospace,Menlo,monospace;color:var(--k-ink);white-space:nowrap}
+table.ev{width:100%;border-collapse:collapse}
+table.ev td{vertical-align:top;padding:2.5px 6px 2.5px 0;
+  border-bottom:1px solid var(--k-well);font:400 8.5px/11px var(--k-font)}
+td.t,td.v{font-family:ui-monospace,Menlo,monospace;white-space:nowrap}
+td.t{color:#0A60FF}
+td.v{color:var(--k-ink);max-width:150px;overflow:hidden;text-overflow:ellipsis}
+td.e{color:var(--k-foot)}</style>
+</head>
+<body>
+<div class="sheet"><header><h1>Grok iOS type</h1><p>Every size is fitted to a measured width on the board, so several are off the iOS ladder. The evidence rows carry the widths.</p></header><div class="ty"><div class="tr"><span style="font:var(--k-t-time)">Grok</span><em>--k-t-time &middot; 600 15px/20px</em></div><div class="tr"><span style="font:var(--k-t-widget)">Grok</span><em>--k-t-widget &middot; 600 19.5px/24px</em></div><div class="tr"><span style="font:var(--k-t-h)">Grok</span><em>--k-t-h &middot; 600 17px/22px</em></div><div class="tr"><span style="font:var(--k-t-body)">Grok</span><em>--k-t-body &middot; 400 17px/22px</em></div><div class="tr"><span style="font:var(--k-t-feat)">Grok</span><em>--k-t-feat &middot; 400 17.5px/22px</em></div><div class="tr"><span style="font:var(--k-t-row)">Grok</span><em>--k-t-row &middot; 400 16.5px/21px</em></div><div class="tr"><span style="font:var(--k-t-sheet)">Grok</span><em>--k-t-sheet &middot; 600 16px/21px</em></div><div class="tr"><span style="font:var(--k-t-h1)">Grok</span><em>--k-t-h1 &middot; 500 40.5px/50px</em></div><div class="tr"><span style="font:var(--k-t-h2)">Grok</span><em>--k-t-h2 &middot; 600 20px/25px</em></div><div class="tr"><span style="font:var(--k-t-sub)">Grok</span><em>--k-t-sub &middot; 400 13.25px/18px</em></div><div class="tr"><span style="font:var(--k-t-plan)">Grok</span><em>--k-t-plan &middot; 600 15px/20px</em></div><div class="tr"><span style="font:var(--k-t-unit)">Grok</span><em>--k-t-unit &middot; 400 15.4px/20px</em></div><div class="tr"><span style="font:var(--k-t-price)">Grok</span><em>--k-t-price &middot; 700 20px/26px</em></div><div class="tr"><span style="font:var(--k-t-free)">Grok</span><em>--k-t-free &middot; 700 12.5px/14px</em></div><div class="tr"><span style="font:var(--k-t-title)">Grok</span><em>--k-t-title &middot; 600 21px/26px</em></div><div class="tr"><span style="font:var(--k-t-copy)">Grok</span><em>--k-t-copy &middot; 400 14px/19px</em></div><div class="tr"><span style="font:var(--k-t-link)">Grok</span><em>--k-t-link &middot; 400 16.75px/22px</em></div><div class="tr"><span style="font:var(--k-t-btn)">Grok</span><em>--k-t-btn &middot; 600 15.5px/20px</em></div><div class="tr"><span style="font:var(--k-t-hdr)">Grok</span><em>--k-t-hdr &middot; 600 22px/28px</em></div><div class="tr"><span style="font:var(--k-t-chip)">Grok</span><em>--k-t-chip &middot; 500 14px/20px</em></div><div class="tr"><span style="font:var(--k-t-ask)">Grok</span><em>--k-t-ask &middot; 400 16px/21px</em></div><div class="tr"><span style="font:var(--k-t-ctl)">Grok</span><em>--k-t-ctl &middot; 400 14px/18px</em></div><div class="tr"><span style="font:var(--k-t-speak)">Grok</span><em>--k-t-speak &middot; 600 14.5px/18px</em></div><div class="tr"><span style="font:var(--k-t-sheet-h)">Grok</span><em>--k-t-sheet-h &middot; 600 18.2px/22px</em></div><div class="tr"><span style="font:var(--k-t-sheet-copy)">Grok</span><em>--k-t-sheet-copy &middot; 400 15.25px/20px</em></div><div class="tr"><span style="font:var(--k-t-card)">Grok</span><em>--k-t-card &middot; 500 36.5px/44px</em></div><div class="tr"><span style="font:var(--k-t-store-h)">Grok</span><em>--k-t-store-h &middot; 700 21px/26px</em></div><div class="tr"><span style="font:var(--k-t-store-title)">Grok</span><em>--k-t-store-title &middot; 600 21px/26px</em></div><div class="tr"><span style="font:var(--k-t-store-sub)">Grok</span><em>--k-t-store-sub &middot; 400 14px/19px</em></div><div class="tr"><span style="font:var(--k-t-store-label)">Grok</span><em>--k-t-store-label &middot; 600 11px/13px</em></div><div class="tr"><span style="font:var(--k-t-store-val)">Grok</span><em>--k-t-store-val &middot; 700 21px/25px</em></div><div class="tr"><span style="font:var(--k-t-store-small)">Grok</span><em>--k-t-store-small &middot; 400 11.5px/14px</em></div><div class="tr"><span style="font:var(--k-t-store-bundle)">Grok</span><em>--k-t-store-bundle &middot; 400 16px/19px</em></div><div class="tr"><span style="font:var(--k-t-store-body)">Grok</span><em>--k-t-store-body &middot; 400 14px/19px</em></div><div class="tr"><span style="font:var(--k-t-store-btn)">Grok</span><em>--k-t-store-btn &middot; 600 13px/16px</em></div><div class="tr"><span style="font:var(--k-t-illo-label)">Grok</span><em>--k-t-illo-label &middot; 500 11.5px/14px</em></div><div class="tr"><span style="font:var(--k-t-illo-title)">Grok</span><em>--k-t-illo-title &middot; 600 21.25px/26px</em></div><div class="tr"><span style="font:var(--k-t-illo-sub)">Grok</span><em>--k-t-illo-sub &middot; 400 11.25px/15px</em></div><div class="tr"><span style="font:var(--k-t-illo-pill)">Grok</span><em>--k-t-illo-pill &middot; 600 15.5px/20px</em></div><div class="tr"><span style="font:var(--k-t-nav)">Grok</span><em>--k-t-nav &middot; 500 16px/22px</em></div><div class="tr"><span style="font:var(--k-t-voice)">Grok</span><em>--k-t-voice &middot; 600 16.25px/21px</em></div><div class="tr"><span style="font:var(--k-t-mail)">Grok</span><em>--k-t-mail &middot; 400 15.9px/20px</em></div><div class="tr"><span style="font:var(--k-t-section)">Grok</span><em>--k-t-section &middot; 600 15px/20px</em></div><div class="tr"><span style="font:var(--k-t-voice-sub)">Grok</span><em>--k-t-voice-sub &middot; 400 16px/21px</em></div><div class="tr"><span style="font:var(--k-t-hint)">Grok</span><em>--k-t-hint &middot; 400 14.25px/18px</em></div><div class="tr"><span style="font:var(--k-t-version)">Grok</span><em>--k-t-version &middot; 400 11.65px/16px</em></div></div></div>
+</body>
+</html>