Skip to content

Commit 2d018cf

Browse files
Jing-yilinclaude
Jing-yilin
and
claude
authored
instagram-ios: eight user-profile screens, measured (#79)
* instagram-ios: eight user-profile screens, measured A six-phase clone-prototype run against eight Mobbin captures of the Instagram iOS profile: one account at the top of its scroll and scrolled until the tab bar sticks, its Reels, Reposts and Tagged tabs, a private account, and two verified profiles. Ten committed boards -- a token board and an evidence board for 36 tokens, then the eight replicas -- from one gen.py, plus probes.json (23 probes) and crops.json (74 boxes) as the measurement behind them. Mean absolute delta against the captures is 5.06-7.82 levels whole-frame and 1.85-4.79 below the status bar; about three of those levels are the Dynamic Island Mobbin strips and this repo's shared status bar draws. Two things worth the next run's time. The story ring is an angular sweep, not a linear one -- twelve samples at 30 degrees round c01's ring do not mirror about any axis, which a linear gradient on a circle always does -- and the four tab glyphs are eight, because an active tab is a different drawing rather than a recolour. Settling the second needed stroke widths solved on coverage against the core ink level rather than against 255, and per-row solves in place of a threshold bbox, which biases black shapes wider than grey ones. Only photography is cropped. The two brand-mark avatars are the original 1080 and 720 px files from the profile API, and the grid badges and reels view counts set over the crops are inpainted out and redrawn live. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * instagram-ios: twelve icons are Instagram's own drawings, not traces The whole IGDS set ships as IGDS*Icon.react modules inside the JS the logged-out instagram.com shell loads. verified, threads, tab-reels, tab-reels-on, badge-play, badge-carousel, badge-pin, bell, link, more, chevron-down and chevron-left are now those paths verbatim. icon() injects preserveAspectRatio="none", so each file's viewBox is the glyph's ink box rather than the module's design grid -- `more` is 15.07 x 3.07 of ink on a 24 x 24 grid and would otherwise land at 13% of height. The boxes are measured by rasterizing each candidate, because arcs and stroked polylines cannot be read off a `d` string. Every board improves: whole-frame 5.06-7.77 against 5.06-7.82, and 1.84-4.73 below the status bar against 1.85-4.79. IGDSLockOutline96Icon is a different drawing (a padlock inside a circle board 06 draws in CSS, and 38.4 x 49.33 of padlock against the capture's 40.67 x 50.67); it cost 06 0.18 levels and was reverted. The grid, tagged and crown tab glyphs, threads-note and the plain eye are not in the logged-out bundle set at all, so those 11 stay traces. Also splits the evidence table in two: at EV_ROWS 40 the single board clipped its own sheet by 55px, which --check-overflow had been reporting and which hid three rows of evidence. 18 rows a board fits. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * instagram-ios: the Threads note glyph is Threads' own drawing instagram.com's 202 icon modules carry nothing for the Threads row's second glyph -- no Barcelona, thread, comment or note name draws it. threads.com's logged-out profile page names 489 bundles, 466 of which instagram.com never loads, and ThreadsCommentsOutline24Icon there is the drawing exactly: a back bubble knocked out by the front one, tail bottom-right. The trace it replaces drew the back bubble as a closed ring fused into the front one, a different picture rather than a rougher one. Its ink is square on a 24 grid and the capture's span is 14.67 x 13.33 pt, so this is the one glyph that ships stretched, measured off c01 and c08 rather than inherited. 08 goes 6.44 -> 6.42 whole-frame, 3.31 -> 3.29 below the status bar; 01 is unchanged at 7.77 / 4.73. refkit tokens, refkit batch and --check-overflow are all unchanged. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * instagram-ios: three review fixes -- layout, brand provenance, verify block layout.json is the same three rows whether or not the reference boards were built. They need assets/refs/, which is gitignored, so a clean clone builds none of them, and a row written only when they exist rewrote the committed file on every such run -- generator and output out of sync on a fresh checkout. The canvas already drops a layout entry whose file is missing, and a row that empties out with it, so the row can just always be written. Checked by regenerating a copy of the folder with assets/refs/ removed: 11 boards, and a byte-identical layout.json. assets/brand/ is 516 px square, not the 1080 and 720 the README and brand() both claimed. Those are the sizes the profile API serves and the files are an exact Lanczos resample of them, which is twice what an 86pt circle needs at 3x and small enough to inline in two boards -- so the provenance is what was wrong, not the choice. Said so in all three places. The verify block shot only 01-profile, and the probe set also names 02-grid-scrolled, 06-private and 08-agnezmo; `batch --against` exits non-zero on a missing render, so the advertised replay could not finish. It now shoots all four and runs clean: 13 colour probes mean 3.2, 8 box probes mean |dw| 0.52. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
1 parent 69da8e1 commit 2d018cf

117 files changed

Lines changed: 2547 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎mockups/canvases/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,40 @@ declares a box other than the default 478 x 980.
293293
or two thirds of a point, were worth more than the blur fit and the compose
294294
glyph together. The seven `ref-*` boards are gitignored, so a fresh clone
295295
has 10.
296+
- `instagram-ios/`: the run to read when eight screens are one app's own
297+
profile at eight states. Eight user-profile screens of the Instagram iOS app
298+
- one account at the top of its scroll and scrolled until the tab bar sticks,
299+
the same account's Reels, Reposts and Tagged tabs, a private account, and two
300+
verified profiles - in 11 boards across three rows: a token board and two
301+
evidence boards for 36 tokens, the eight replicas, and the Mobbin capture of
302+
each column-for-column underneath. Mean absolute delta against those captures
303+
is 5.06-7.77 levels (of 255) whole-frame and 1.84-4.73 below the status bar,
304+
where about three of those levels are one fixed thing on all eight boards:
305+
Mobbin strips the Dynamic Island and these boards draw one, because the
306+
status bar is copied from `templates/` byte for byte. Its `README.md` records
307+
that the story ring is an **angular** sweep, not a linear one - twelve samples
308+
at 30 degrees round c01's ring do not mirror about any axis, which a linear
309+
gradient on a circle always does - and that the four tab glyphs are really
310+
eight, because an active tab is a different drawing rather than a recolour. It
311+
also records the two measurement techniques that settled them: solving a
312+
stroke width on coverage against the **core** ink level rather than against
313+
255, which reads a grey stroke 43% narrow if you get it wrong, and a per-row
314+
solve in place of a threshold bbox, which biases black shapes wider than grey
315+
ones. And it names three defects as the source's: the active-tab underline is
316+
40pt wide on four captures and 64 on the other four, c08's fifth highlight
317+
label is not centred on its circle, and the reels scrim is baked into the
318+
photographs. Only photography is cropped (74 boxes); the two brand-mark
319+
avatars are the 1080 and 720 px files from the profile API resampled to 516,
320+
not crops of the captures, and the
321+
grid badges and view counts set over the crops are inpainted out and redrawn
322+
live. Thirteen of the 23 SVGs are Meta's own drawings rather than traces,
323+
pulled out of the `IGDS*Icon.react` modules in the JS bundles the logged-out
324+
instagram.com shell loads, plus one the Threads row needs that only
325+
threads.com carries - which is also where that README records the rule that
326+
makes them usable: `icon()` sets `preserveAspectRatio="none"`, so what ships
327+
has to be the path's **ink box**, never the module's design grid.
328+
`assets/art/`, `assets/brand/` and `assets/icons/` are committed; the eight
329+
`ref-*` boards are gitignored, so a fresh clone has 11.
296330
- `apple-app-store/`: the run to read when the source is native iPhone 16 Pro
297331
screenshots rather than Mobbin or Figma. Nine screens of the iOS 26 App
298332
Store - five tab roots, three sheets and a system alert - in 23 boards

‎mockups/canvases/instagram-ios/00-design-tokens.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Instagram - Design Tokens</title>
6+
<style>
7+
:root{
8+
/* Font */
9+
--ig-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
10+
11+
/* Surface */
12+
--ig-bg:#FFFFFF;
13+
--ig-fill:#F1F2F6;
14+
15+
/* Line */
16+
--ig-hairline:#DADADA;
17+
--ig-ring:#DDDEE2;
18+
19+
/* Ink */
20+
--ig-ink:#0E0F13;
21+
--ig-ink-2:#6E7074;
22+
--ig-ink-inv:#FFFFFF;
23+
24+
/* Accent */
25+
--ig-accent:#4A5DF6;
26+
--ig-link:#3846C7;
27+
--ig-verified:#3F96F4;
28+
--ig-sub:#7339F5;
29+
--ig-story:conic-gradient(#E731A3 0deg,#D52BBD 30deg,#D32CCB 60deg,#E433A1 90deg,#EB335A 120deg,#E95F20 150deg,#EEA837 180deg,#F7CE43 210deg,#F4D243 240deg,#F0A63B 270deg,#EE6329 300deg,#EB3260 330deg,#E731A3 360deg);
30+
31+
/* Radius */
32+
--ig-r-btn:8px;
33+
--ig-r-phone:52px;
34+
35+
/* Type */
36+
--ig-t-nav:700 20px/24px var(--ig-font);
37+
--ig-t-stat:600 16px/20px var(--ig-font);
38+
--ig-t-body:400 14px/18px var(--ig-font);
39+
--ig-t-bodys:600 14px/18px var(--ig-font);
40+
--ig-t-cap:400 12px/15px var(--ig-font);
41+
--ig-t-caps:600 12px/15px var(--ig-font);
42+
--ig-t-title:700 24px/29px var(--ig-font);
43+
--ig-t-note:400 15px/18px var(--ig-font);
44+
--ig-t-time:590 17px/22px var(--ig-font);
45+
46+
/* Metrics */
47+
--ig-w:393px;
48+
--ig-h:852px;
49+
--ig-status:54px;
50+
--ig-gutter:16px;
51+
--ig-col:123px;
52+
--ig-avatar:86px;
53+
--ig-btn:32px;
54+
--ig-hl:64px;
55+
--ig-tile:130.33px;
56+
--ig-pitch:131.33px;
57+
--ig-row:174.67px;
58+
--ig-reel:232.67px;
59+
}
60+
61+
*{box-sizing:border-box;margin:0;padding:0}
62+
body{font-family:var(--ig-font);-webkit-font-smoothing:antialiased;
63+
display:flex;justify-content:center;padding:24px}
64+
.phone{position:relative;flex:none;width:var(--ig-w);height:var(--ig-h);
65+
border-radius:var(--ig-r-phone);overflow:hidden;background:var(--ig-bg);color:var(--ig-ink);transform:translateZ(0);
66+
box-shadow:0 0 0 11px #1D191A,0 0 0 12.5px #3A3735,0 24px 60px rgba(29,25,26,.28)}
67+
.sb{position:absolute;left:0;top:0;width:var(--ig-w);height:var(--ig-status);z-index:6}
68+
.sb .time{position:absolute;left:0;top:18.2px;width:142.4px;text-align:center;font:var(--ig-t-time)}
69+
.sb .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);
70+
width:125px;height:36px;border-radius:20px;background:#000}
71+
.sb svg{position:absolute;display:block;fill:currentColor}
72+
/* iOS picks the indicator colour against the wallpaper: measure it per screen */
73+
.home{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
74+
width:139px;height:5px;border-radius:3px;background:currentColor;z-index:6}
75+
body{padding:0;background:var(--ig-bg);color:var(--ig-ink)}
76+
.sheet{width:478px;height:980px;padding:20px;overflow:hidden}
77+
h1{font:600 17px/22px var(--ig-font);margin-bottom:2px}
78+
header p{font:400 11px/15px var(--ig-font);color:var(--ig-ink-2);margin-bottom:14px}
79+
h2{font:600 9px/12px var(--ig-font);letter-spacing:.8px;text-transform:uppercase;
80+
color:var(--ig-ink-2);margin:12px 0 5px}
81+
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
82+
.sw .chip{height:26px;border-radius:6px;border:1px solid var(--ig-ring)}
83+
.sw b{display:block;margin-top:3px;font:600 8.5px/11px ui-monospace,Menlo,monospace}
84+
.sw i{display:block;font:400 8px/11px ui-monospace,Menlo,monospace;
85+
color:var(--ig-ink-2);font-style:normal;word-break:break-all}
86+
.rad{display:flex;gap:9px}
87+
.rb{width:44px;height:26px;background:var(--ig-fill);border:1px solid var(--ig-ring)}
88+
.rad em{display:block;margin-top:2px;font:400 8.5px/11px var(--ig-font);
89+
color:var(--ig-ink-2);font-style:normal;text-align:center}
90+
.tr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
91+
padding-bottom:2px;border-bottom:1px solid var(--ig-hairline)}
92+
.tr span{white-space:nowrap;overflow:hidden}
93+
.tr em{font:400 8px/11px ui-monospace,Menlo,monospace;color:var(--ig-ink-2);
94+
font-style:normal;white-space:nowrap;flex:none}
95+
.met{font:400 9px/13px ui-monospace,Menlo,monospace;color:var(--ig-ink-2)}
96+
table.ev{width:100%;border-collapse:collapse}
97+
table.ev td{vertical-align:top;padding:2.5px 6px 2.5px 0;
98+
border-bottom:1px solid var(--ig-hairline);font:400 8.5px/11px var(--ig-font)}
99+
td.t,td.v{font-family:ui-monospace,Menlo,monospace;white-space:nowrap}
100+
td.t{color:var(--ig-accent)}
101+
td.v{color:var(--ig-ink-2);max-width:150px;overflow:hidden;text-overflow:ellipsis}
102+
td.e{color:var(--ig-ink-2)}</style>
103+
</head>
104+
<body>
105+
<div class="sheet"><header><h1>Instagram</h1><p>Sampled off eight iPhone 16 Pro captures at 3.0 capture px per design pt. Every value has a row on the evidence board.</p></header><h2>Colour</h2><div class="grid"><div class="sw"><div class="chip" style="background:var(--ig-bg)"></div><b>--ig-bg</b><i>#FFFFFF</i></div><div class="sw"><div class="chip" style="background:var(--ig-fill)"></div><b>--ig-fill</b><i>#F1F2F6</i></div><div class="sw"><div class="chip" style="background:var(--ig-hairline)"></div><b>--ig-hairline</b><i>#DADADA</i></div><div class="sw"><div class="chip" style="background:var(--ig-ring)"></div><b>--ig-ring</b><i>#DDDEE2</i></div><div class="sw"><div class="chip" style="background:var(--ig-ink)"></div><b>--ig-ink</b><i>#0E0F13</i></div><div class="sw"><div class="chip" style="background:var(--ig-ink-2)"></div><b>--ig-ink-2</b><i>#6E7074</i></div><div class="sw"><div class="chip" style="background:var(--ig-ink-inv)"></div><b>--ig-ink-inv</b><i>#FFFFFF</i></div><div class="sw"><div class="chip" style="background:var(--ig-accent)"></div><b>--ig-accent</b><i>#4A5DF6</i></div><div class="sw"><div class="chip" style="background:var(--ig-link)"></div><b>--ig-link</b><i>#3846C7</i></div><div class="sw"><div class="chip" style="background:var(--ig-verified)"></div><b>--ig-verified</b><i>#3F96F4</i></div><div class="sw"><div class="chip" style="background:var(--ig-sub)"></div><b>--ig-sub</b><i>#7339F5</i></div><div class="sw"><div class="chip" style="background:var(--ig-story)"></div><b>--ig-story</b><i>conic-gradient(#E731A3 0deg,#D52BBD 30deg,#D32CCB 60deg,#E433A1 90deg,#EB335A 120deg,#E95F20 150deg,#EEA837 180deg,#F7CE43 210deg,#F4D243 240deg,#F0A63B 270deg,#EE6329 300deg,#EB3260 330deg,#E731A3 360deg)</i></div></div><h2>Radius</h2><div class="rad"><div><div class="rb" style="border-radius:8px"></div><em>8px</em></div></div><h2>Type</h2><div class="tr"><span style="font:var(--ig-t-nav)">Grumpy wizards</span><em>--ig-t-nav &middot; 700 20px/24px</em></div><div class="tr"><span style="font:var(--ig-t-stat)">Grumpy wizards</span><em>--ig-t-stat &middot; 600 16px/20px</em></div><div class="tr"><span style="font:var(--ig-t-body)">Grumpy wizards</span><em>--ig-t-body &middot; 400 14px/18px</em></div><div class="tr"><span style="font:var(--ig-t-bodys)">Grumpy wizards</span><em>--ig-t-bodys &middot; 600 14px/18px</em></div><div class="tr"><span style="font:var(--ig-t-cap)">Grumpy wizards</span><em>--ig-t-cap &middot; 400 12px/15px</em></div><div class="tr"><span style="font:var(--ig-t-caps)">Grumpy wizards</span><em>--ig-t-caps &middot; 600 12px/15px</em></div><div class="tr"><span style="font:var(--ig-t-title)">Grumpy wizards</span><em>--ig-t-title &middot; 700 24px/29px</em></div><div class="tr"><span style="font:var(--ig-t-note)">Grumpy wizards</span><em>--ig-t-note &middot; 400 15px/18px</em></div><div class="tr"><span style="font:var(--ig-t-time)">Grumpy wizards</span><em>--ig-t-time &middot; 590 17px/22px</em></div><h2>Metrics</h2><div class="met">--ig-w: 393px<br>--ig-h: 852px<br>--ig-status: 54px<br>--ig-gutter: 16px<br>--ig-col: 123px<br>--ig-avatar: 86px<br>--ig-btn: 32px<br>--ig-hl: 64px<br>--ig-tile: 130.33px<br>--ig-pitch: 131.33px<br>--ig-row: 174.67px<br>--ig-reel: 232.67px</div></div>
106+
</body>
107+
</html>

‎mockups/canvases/instagram-ios/00b-evidence.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Instagram - Evidence 1/2</title>
6+
<style>
7+
:root{
8+
/* Font */
9+
--ig-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
10+
11+
/* Surface */
12+
--ig-bg:#FFFFFF;
13+
--ig-fill:#F1F2F6;
14+
15+
/* Line */
16+
--ig-hairline:#DADADA;
17+
--ig-ring:#DDDEE2;
18+
19+
/* Ink */
20+
--ig-ink:#0E0F13;
21+
--ig-ink-2:#6E7074;
22+
--ig-ink-inv:#FFFFFF;
23+
24+
/* Accent */
25+
--ig-accent:#4A5DF6;
26+
--ig-link:#3846C7;
27+
--ig-verified:#3F96F4;
28+
--ig-sub:#7339F5;
29+
--ig-story:conic-gradient(#E731A3 0deg,#D52BBD 30deg,#D32CCB 60deg,#E433A1 90deg,#EB335A 120deg,#E95F20 150deg,#EEA837 180deg,#F7CE43 210deg,#F4D243 240deg,#F0A63B 270deg,#EE6329 300deg,#EB3260 330deg,#E731A3 360deg);
30+
31+
/* Radius */
32+
--ig-r-btn:8px;
33+
--ig-r-phone:52px;
34+
35+
/* Type */
36+
--ig-t-nav:700 20px/24px var(--ig-font);
37+
--ig-t-stat:600 16px/20px var(--ig-font);
38+
--ig-t-body:400 14px/18px var(--ig-font);
39+
--ig-t-bodys:600 14px/18px var(--ig-font);
40+
--ig-t-cap:400 12px/15px var(--ig-font);
41+
--ig-t-caps:600 12px/15px var(--ig-font);
42+
--ig-t-title:700 24px/29px var(--ig-font);
43+
--ig-t-note:400 15px/18px var(--ig-font);
44+
--ig-t-time:590 17px/22px var(--ig-font);
45+
46+
/* Metrics */
47+
--ig-w:393px;
48+
--ig-h:852px;
49+
--ig-status:54px;
50+
--ig-gutter:16px;
51+
--ig-col:123px;
52+
--ig-avatar:86px;
53+
--ig-btn:32px;
54+
--ig-hl:64px;
55+
--ig-tile:130.33px;
56+
--ig-pitch:131.33px;
57+
--ig-row:174.67px;
58+
--ig-reel:232.67px;
59+
}
60+
61+
*{box-sizing:border-box;margin:0;padding:0}
62+
body{font-family:var(--ig-font);-webkit-font-smoothing:antialiased;
63+
display:flex;justify-content:center;padding:24px}
64+
.phone{position:relative;flex:none;width:var(--ig-w);height:var(--ig-h);
65+
border-radius:var(--ig-r-phone);overflow:hidden;background:var(--ig-bg);color:var(--ig-ink);transform:translateZ(0);
66+
box-shadow:0 0 0 11px #1D191A,0 0 0 12.5px #3A3735,0 24px 60px rgba(29,25,26,.28)}
67+
.sb{position:absolute;left:0;top:0;width:var(--ig-w);height:var(--ig-status);z-index:6}
68+
.sb .time{position:absolute;left:0;top:18.2px;width:142.4px;text-align:center;font:var(--ig-t-time)}
69+
.sb .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);
70+
width:125px;height:36px;border-radius:20px;background:#000}
71+
.sb svg{position:absolute;display:block;fill:currentColor}
72+
/* iOS picks the indicator colour against the wallpaper: measure it per screen */
73+
.home{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
74+
width:139px;height:5px;border-radius:3px;background:currentColor;z-index:6}
75+
body{padding:0;background:var(--ig-bg);color:var(--ig-ink)}
76+
.sheet{width:478px;height:980px;padding:20px;overflow:hidden}
77+
h1{font:600 17px/22px var(--ig-font);margin-bottom:2px}
78+
header p{font:400 11px/15px var(--ig-font);color:var(--ig-ink-2);margin-bottom:14px}
79+
h2{font:600 9px/12px var(--ig-font);letter-spacing:.8px;text-transform:uppercase;
80+
color:var(--ig-ink-2);margin:12px 0 5px}
81+
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
82+
.sw .chip{height:26px;border-radius:6px;border:1px solid var(--ig-ring)}
83+
.sw b{display:block;margin-top:3px;font:600 8.5px/11px ui-monospace,Menlo,monospace}
84+
.sw i{display:block;font:400 8px/11px ui-monospace,Menlo,monospace;
85+
color:var(--ig-ink-2);font-style:normal;word-break:break-all}
86+
.rad{display:flex;gap:9px}
87+
.rb{width:44px;height:26px;background:var(--ig-fill);border:1px solid var(--ig-ring)}
88+
.rad em{display:block;margin-top:2px;font:400 8.5px/11px var(--ig-font);
89+
color:var(--ig-ink-2);font-style:normal;text-align:center}
90+
.tr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
91+
padding-bottom:2px;border-bottom:1px solid var(--ig-hairline)}
92+
.tr span{white-space:nowrap;overflow:hidden}
93+
.tr em{font:400 8px/11px ui-monospace,Menlo,monospace;color:var(--ig-ink-2);
94+
font-style:normal;white-space:nowrap;flex:none}
95+
.met{font:400 9px/13px ui-monospace,Menlo,monospace;color:var(--ig-ink-2)}
96+
table.ev{width:100%;border-collapse:collapse}
97+
table.ev td{vertical-align:top;padding:2.5px 6px 2.5px 0;
98+
border-bottom:1px solid var(--ig-hairline);font:400 8.5px/11px var(--ig-font)}
99+
td.t,td.v{font-family:ui-monospace,Menlo,monospace;white-space:nowrap}
100+
td.t{color:var(--ig-accent)}
101+
td.v{color:var(--ig-ink-2);max-width:150px;overflow:hidden;text-overflow:ellipsis}
102+
td.e{color:var(--ig-ink-2)}</style>
103+
</head>
104+
<body>
105+
<div class="sheet"><header><h1>Evidence 1/2</h1><p>One row per token. A token with no evidence is a guess.</p></header><table class="ev"><tr><td class="t">--ig-font</td><td class="v">-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif</td><td class="e">refkit font on the c01 nav title: SF Pro, score 0.922, margin 0.104 over the runner-up</td></tr><tr><td class="t">--ig-bg</td><td class="v">#FFFFFF</td><td class="e">flat census of c01 200-300 x 302-312, the ground between the Threads and mutuals rows: 100% flat</td></tr><tr><td class="t">--ig-fill</td><td class="v">#F1F2F6</td><td class="e">flat census of the c01 Message button at 240-330 x 375-395: 89.4% flat, no channel under 241</td></tr><tr><td class="t">--ig-hairline</td><td class="v">#DADADA</td><td class="e">c06 tab-bar divider at y 346.0, one device pixel tall and the full width: 72.3% flat</td></tr><tr><td class="t">--ig-ring</td><td class="v">#DDDEE2</td><td class="e">c01 highlight 1's ring at 9 o'clock, 3.3pt of stroke over 12pt of height: 56.1% flat</td></tr><tr><td class="t">--ig-ink</td><td class="v">#0E0F13</td><td class="e">flat census of the c01 active-tab underline, 29-69 x 559-561: the only solid fill of this colour in the set</td></tr><tr><td class="t">--ig-ink-2</td><td class="v">#6E7074</td><td class="e">modal ink of c06's 'Follow this account to see their photos'; --only ink reads #696C6E, iOS stem-darkening</td></tr><tr><td class="t">--ig-ink-inv</td><td class="v">#FFFFFF</td><td class="e">label core on the accent fill, c01 Follow</td></tr><tr><td class="t">--ig-accent</td><td class="v">#4A5DF6</td><td class="e">flat census of the c01 Follow button at 60-150 x 375-395: 94.6% flat</td></tr><tr><td class="t">--ig-link</td><td class="v">#3846C7</td><td class="e">modal ink of c01's youtube.com URL; --only ink reads #3543B4, iOS stem-darkening</td></tr><tr><td class="t">--ig-verified</td><td class="v">#3F96F4</td><td class="e">flat census of the c01 verified disc, 156-163 x 81-88 inside the tick's arms: 42.9% flat</td></tr><tr><td class="t">--ig-sub</td><td class="v">#7339F5</td><td class="e">modal of the filled crown on c08 highlight 1, ink box 12.67-24.0 x 484.33-492.67</td></tr><tr><td class="t">--ig-story</td><td class="v">conic-gradient(#E731A3 0deg,#D52BBD 30deg,#D32CCB 60deg,#E433A1 90deg,#EB335A 120deg,#E95F20 150deg,#EEA837 180deg,#F7CE43 210deg,#F4D243 240deg,#F0A63B 270deg,#EE6329 300deg,#EB3260 330deg,#E731A3 360deg)</td><td class="e">24-sample sweep of the c01 avatar ring at r 48.5, kept every 30 deg; conic, because the halves do not mirror</td></tr><tr><td class="t">--ig-r-btn</td><td class="v">8px</td><td class="e">refkit bbox on the c01 Follow button corner, 16-194 x 369-401</td></tr><tr><td class="t">--ig-r-phone</td><td class="v">52px</td><td class="e">circular stand-in for the 55pt continuous display corner</td></tr><tr><td class="t">--ig-t-nav</td><td class="v">700 20px/24px var(--ig-font)</td><td class="e">c01 'instagram' ink 53.3-146.0, w 92.67, baseline 91.5; 700 20px sets 93.33</td></tr><tr><td class="t">--ig-t-stat</td><td class="v">600 16px/20px var(--ig-font)</td><td class="e">c01 '8,283' w 43.33 and '698M' w 43.33, baseline 180.67; 600 16px sets 43.67 and 43.33</td></tr><tr><td class="t">--ig-t-body</td><td class="v">400 14px/18px var(--ig-font)</td><td class="e">c01 'posts/followers/following' w 34.0/57.0/56.67 and the bio w 218.67; 400 14px sets all four to within 0.7</td></tr></table></div>
106+
</body>
107+
</html>

0 commit comments

Comments
 (0)