notion-ios: the data-source and account flows, and the generator the folder never had

mockups/canvases/notion-ios/00-design-tokens.html

@@ -12,6 +12,10 @@
    ========================================================================= */
 :root{
   --n-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
+  --n-font-text:"SF Pro Text",var(--n-font);  /* the Text optical cut, named    */
+                                              /* outright: a browser gives      */
+                                              /* -apple-system the Display cut, */
+                                              /* 4% narrower                    */
 
   /* Surface */
   --n-bg:#FFFFFF;          /* document / full-screen page                */
@@ -58,7 +62,7 @@
   --n-gutter-card:12px;  /* card inset on a grouped sheet               */
   --n-row-h:44px;        /* settings row                                */
   --n-tap:44px;          /* minimum tap target                          */
-  --n-sheet-top:71px;    /* sheet top inset from the device top         */
+  --n-sheet-top:68px;    /* sheet top inset from the device top         */
 }
 
 *{box-sizing:border-box;margin:0;padding:0}
@@ -171,7 +175,7 @@ <h2>Radius &amp; metrics</h2>
     <div><div class="rb" style="border-radius:var(--n-r-pill)"></div><em>pill 999</em></div>
   </div>
   <p class="metrics">gutter 20 · page 26 · summary 46 · card 12 · row 44 · tap 44 ·
-     status bar 54 · sheet top 71 · day cell 34 / pitch 44</p>
+     status bar 54 · sheet top 68 · day cell 34 / pitch 44</p>
 
   <h2>Components</h2>
   <div class="comps">

mockups/canvases/notion-ios/01-splash.html

@@ -12,6 +12,10 @@
    ========================================================================= */
 :root{
   --n-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
+  --n-font-text:"SF Pro Text",var(--n-font);  /* the Text optical cut, named    */
+                                              /* outright: a browser gives      */
+                                              /* -apple-system the Display cut, */
+                                              /* 4% narrower                    */
 
   /* Surface */
   --n-bg:#FFFFFF;          /* document / full-screen page                */
@@ -58,7 +62,7 @@
   --n-gutter-card:12px;  /* card inset on a grouped sheet               */
   --n-row-h:44px;        /* settings row                                */
   --n-tap:44px;          /* minimum tap target                          */
-  --n-sheet-top:71px;    /* sheet top inset from the device top         */
+  --n-sheet-top:68px;    /* sheet top inset from the device top         */
 }
 
 *{box-sizing:border-box;margin:0;padding:0}

mockups/canvases/notion-ios/02-search-ask-ai.html

@@ -12,6 +12,10 @@
    ========================================================================= */
 :root{
   --n-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
+  --n-font-text:"SF Pro Text",var(--n-font);  /* the Text optical cut, named    */
+                                              /* outright: a browser gives      */
+                                              /* -apple-system the Display cut, */
+                                              /* 4% narrower                    */
 
   /* Surface */
   --n-bg:#FFFFFF;          /* document / full-screen page                */
@@ -58,7 +62,7 @@
   --n-gutter-card:12px;  /* card inset on a grouped sheet               */
   --n-row-h:44px;        /* settings row                                */
   --n-tap:44px;          /* minimum tap target                          */
-  --n-sheet-top:71px;    /* sheet top inset from the device top         */
+  --n-sheet-top:68px;    /* sheet top inset from the device top         */
 }
 
 *{box-sizing:border-box;margin:0;padding:0}

mockups/canvases/notion-ios/03-notion-ai-chat.html

@@ -12,6 +12,10 @@
    ========================================================================= */
 :root{
   --n-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
+  --n-font-text:"SF Pro Text",var(--n-font);  /* the Text optical cut, named    */
+                                              /* outright: a browser gives      */
+                                              /* -apple-system the Display cut, */
+                                              /* 4% narrower                    */
 
   /* Surface */
   --n-bg:#FFFFFF;          /* document / full-screen page                */
@@ -58,7 +62,7 @@
   --n-gutter-card:12px;  /* card inset on a grouped sheet               */
   --n-row-h:44px;        /* settings row                                */
   --n-tap:44px;          /* minimum tap target                          */
-  --n-sheet-top:71px;    /* sheet top inset from the device top         */
+  --n-sheet-top:68px;    /* sheet top inset from the device top         */
 }
 
 *{box-sizing:border-box;margin:0;padding:0}

mockups/canvases/notion-ios/04-meeting-page.html

@@ -12,6 +12,10 @@
    ========================================================================= */
 :root{
   --n-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
+  --n-font-text:"SF Pro Text",var(--n-font);  /* the Text optical cut, named    */
+                                              /* outright: a browser gives      */
+                                              /* -apple-system the Display cut, */
+                                              /* 4% narrower                    */
 
   /* Surface */
   --n-bg:#FFFFFF;          /* document / full-screen page                */
@@ -58,7 +62,7 @@
   --n-gutter-card:12px;  /* card inset on a grouped sheet               */
   --n-row-h:44px;        /* settings row                                */
   --n-tap:44px;          /* minimum tap target                          */
-  --n-sheet-top:71px;    /* sheet top inset from the device top         */
+  --n-sheet-top:68px;    /* sheet top inset from the device top         */
 }
 
 *{box-sizing:border-box;margin:0;padding:0}

mockups/canvases/notion-ios/05-date-sheet.html

@@ -12,6 +12,10 @@
    ========================================================================= */
 :root{
   --n-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
+  --n-font-text:"SF Pro Text",var(--n-font);  /* the Text optical cut, named    */
+                                              /* outright: a browser gives      */
+                                              /* -apple-system the Display cut, */
+                                              /* 4% narrower                    */
 
   /* Surface */
   --n-bg:#FFFFFF;          /* document / full-screen page                */
@@ -58,7 +62,7 @@
   --n-gutter-card:12px;  /* card inset on a grouped sheet               */
   --n-row-h:44px;        /* settings row                                */
   --n-tap:44px;          /* minimum tap target                          */
-  --n-sheet-top:71px;    /* sheet top inset from the device top         */
+  --n-sheet-top:68px;    /* sheet top inset from the device top         */
 }
 
 *{box-sizing:border-box;margin:0;padding:0}
@@ -81,9 +85,9 @@
 .phone{background:var(--n-scrim)}
 .sheet{position:absolute;left:0;right:0;top:var(--n-sheet-top);bottom:0;background:var(--n-bg-sheet);
   border-radius:var(--n-r-sheet) var(--n-r-sheet) 0 0;overflow:hidden}
-.handle{width:42px;height:5px;border-radius:3px;background:#D6D4D1;margin:6px auto 0}
+.handle{width:38px;height:5px;border-radius:3px;background:#E7E5E3;margin:7px auto 0}
 .snav{display:flex;align-items:center;justify-content:space-between;height:var(--n-tap);
-  padding:0 var(--n-gutter);margin-top:8px}
+  padding:0 var(--n-gutter);margin-top:7px}
 .stitle{font:var(--n-t-nav);color:var(--n-text);letter-spacing:-.2px}
 .help{width:26px;height:26px;color:var(--n-text-3);display:block}
 .help svg{width:26px;height:26px;display:block}

mockups/canvases/notion-ios/06-share-settings-sheet.html

@@ -12,6 +12,10 @@
    ========================================================================= */
 :root{
   --n-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
+  --n-font-text:"SF Pro Text",var(--n-font);  /* the Text optical cut, named    */
+                                              /* outright: a browser gives      */
+                                              /* -apple-system the Display cut, */
+                                              /* 4% narrower                    */
 
   /* Surface */
   --n-bg:#FFFFFF;          /* document / full-screen page                */
@@ -58,7 +62,7 @@
   --n-gutter-card:12px;  /* card inset on a grouped sheet               */
   --n-row-h:44px;        /* settings row                                */
   --n-tap:44px;          /* minimum tap target                          */
-  --n-sheet-top:71px;    /* sheet top inset from the device top         */
+  --n-sheet-top:68px;    /* sheet top inset from the device top         */
 }
 
 *{box-sizing:border-box;margin:0;padding:0}
@@ -81,7 +85,7 @@
 .phone{background:var(--n-scrim)}
 .sheet{position:absolute;left:0;right:0;top:var(--n-sheet-top);bottom:0;background:var(--n-bg-sheet);
   border-radius:var(--n-r-sheet) var(--n-r-sheet) 0 0;overflow:hidden}
-.handle{width:42px;height:5px;border-radius:3px;background:#D6D4D1;margin:6px auto 0}
+.handle{width:38px;height:5px;border-radius:3px;background:#E7E5E3;margin:7px auto 0}
 .snav{display:flex;align-items:center;justify-content:space-between;height:var(--n-tap);
   padding:0 var(--n-gutter);margin-top:10px}
 .stitle{font:var(--n-t-nav);color:var(--n-text);letter-spacing:-.2px}

mockups/canvases/notion-ios/07-manage-data-sources.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Notion iOS — Manage data sources</title>
+<style>
+/* ============================================================================
+   NOTION iOS — DESIGN TOKENS  (single source of truth, inlined in every file
+   because the canvas renders each mockup in <iframe srcDoc sandbox="">, which
+   blocks external stylesheets. Keep this block byte-identical across files.)
+   Values sampled from Notion iOS 3x screenshots (393 x 852 pt @3x).
+   ========================================================================= */
+:root{
+  --n-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
+  --n-font-text:"SF Pro Text",var(--n-font);  /* the Text optical cut, named    */
+                                              /* outright: a browser gives      */
+                                              /* -apple-system the Display cut, */
+                                              /* 4% narrower                    */
+
+  /* Surface */
+  --n-bg:#FFFFFF;          /* document / full-screen page                */
+  --n-bg-sheet:#FAF8F6;    /* modal sheet ground (warm off-white)        */
+  --n-bg-card:#FFFFFF;     /* grouped card sitting on a sheet            */
+  --n-scrim:#E0E0E0;       /* app dimmed behind a light sheet            */
+  --n-scrim-strong:#C4C4C4;/* app dimmed behind the AI sheet             */
+  --n-fill:#EAE9E7;        /* search field, segmented track, icon tile   */
+  --n-fill-neutral:#F0F0F0;/* chip / icon button on a white page         */
+  --n-fill-soft:#FDFDFD;   /* raised field on white (search, composer)   */
+  --n-hairline:#E9E8E7;    /* row divider                                */
+  --n-border:#EFEEEC;      /* card + field outline                       */
+  --n-track:#F0EEED;       /* switch track, off                          */
+
+  /* Ink */
+  --n-text:#2C2C2C;        /* titles, primary labels                     */
+  --n-text-body:#2C2C2C;   /* page body copy                             */
+  --n-text-2:#787774;      /* secondary labels, section headers          */
+  --n-text-3:#9B9A97;      /* placeholder, values, out-of-month days     */
+
+  /* Accent */
+  --n-blue:#2784E0;        /* selection, primary button, Done, switches  */
+  --n-red:#E66457;         /* "today" in the date picker                 */
+  --n-yellow-bg:#F7F1DE;   /* Guest badge fill                           */
+  --n-yellow-ink:#402C1B;  /* Guest badge ink                            */
+
+  /* Radius */
+  --n-r-field:10px;  --n-r-card:12px;  --n-r-sheet:14px;
+  --n-r-day:8px;     --n-r-tile:8px;   --n-r-pill:999px;
+
+  /* Type — SF Pro. size/line-height/weight */
+  --n-t-title:700 34px/40px var(--n-font);   /* page title              */
+  --n-t-h2:700 19px/26px var(--n-font);      /* in-page heading         */
+  --n-t-nav:600 17px/22px var(--n-font);     /* sheet nav title         */
+  --n-t-row:400 17px/22px var(--n-font);     /* list row label          */
+  --n-t-rowb:600 17px/22px var(--n-font);    /* list row label, strong  */
+  --n-t-body:400 17px/24px var(--n-font);    /* body copy               */
+  --n-t-sub:400 15px/20px var(--n-font);     /* row subtitle            */
+  --n-t-cap:400 13px/18px var(--n-font);     /* badge / caption         */
+
+  /* Metrics */
+  --n-gutter:20px;       /* default screen gutter                       */
+  --n-gutter-page:20px;  /* document page gutter                        */
+  --n-gutter-card:12px;  /* card inset on a grouped sheet               */
+  --n-row-h:44px;        /* settings row                                */
+  --n-tap:44px;          /* minimum tap target                          */
+  --n-sheet-top:68px;    /* sheet top inset from the device top         */
+}
+
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:var(--n-font);background:#fff;-webkit-font-smoothing:antialiased;
+  display:flex;justify-content:center;padding:24px}
+.phone{width:393px;height:852px;position:relative;border-radius:52px;overflow:hidden;flex:none;
+  background:var(--n-bg);outline:1px solid rgba(0,0,0,.10);
+  box-shadow:0 0 0 11px #1D191A, 0 0 0 12.5px #3A3735, 0 24px 60px rgba(29,25,26,.28);
+  display:flex;flex-direction:column;color:var(--n-text)}
+.statusbar{height:54px;position:relative;flex:none;display:flex;align-items:flex-end;
+  justify-content:space-between;padding:0 30px 5px}
+.statusbar .time{font:600 16px/1 var(--n-font);width:60px;letter-spacing:.2px}
+.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);
+  width:125px;height:36px;border-radius:20px;background:#000}
+.sicons{display:flex;align-items:center;gap:6px}
+.sicons svg{display:block}
+.homebar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
+  width:139px;height:5px;border-radius:3px;background:#191918}
+
+.phone{background:var(--n-scrim)}
+.sheet{position:absolute;left:0;right:0;top:var(--n-sheet-top);bottom:0;background:var(--n-bg-sheet);
+  border-radius:var(--n-r-sheet) var(--n-r-sheet) 0 0;overflow:hidden}
+.handle{width:38px;height:5px;border-radius:3px;background:#E7E5E3;margin:7px auto 0}
+.snav{display:flex;align-items:center;justify-content:space-between;height:var(--n-tap);
+  padding:0 var(--n-gutter);margin-top:7px}
+.stitle{font:var(--n-t-nav);color:var(--n-text);letter-spacing:-.2px}
+
+.snav{padding:0 18px}
+.back{width:21px;height:21px;color:var(--n-text);display:block}
+.back svg{width:21px;height:21px;display:block}
+.back.ghost{visibility:hidden}
+.hdr{font:var(--n-t-sub);color:var(--n-text-2);letter-spacing:-.1px;padding:13px 20px 9px 33px}
+.card + .hdr{padding-top:15.4px}
+.card{background:var(--n-bg-card);border-radius:var(--n-r-card);margin:0 16px}
+.card + .card{margin-top:17px}
+.drow{display:flex;align-items:center;height:var(--n-row-h);padding:0 22px 0 17px}
+.drow + .drow{border-top:1px solid #EEEEEC}
+.di{width:18px;height:18px;flex:none;color:#84837F;margin-right:10px}
+.di svg{width:18px;height:18px;display:block}
+.dl{font:var(--n-t-row);color:var(--n-text)}
+.dl.mut{color:var(--n-text-2)}
+.dv{font:var(--n-t-row);color:var(--n-text-3);margin-left:auto}
+.dots{width:18px;height:18px;flex:none;color:#878786;margin-left:11px;display:block}
+.dots svg{width:18px;height:18px;display:block}
+</style>
+</head>
+<body>
+
+<div class="phone">
+  <div class="statusbar">
+    <div class="time">9:41</div>
+    <div class="island"></div>
+    <div class="sicons">
+      <svg width="19" height="12" viewBox="0 0 19 12" fill="currentColor"><rect x="0" y="7" width="3" height="4" rx="1"/><rect x="5" y="5" width="3" height="6" rx="1"/><rect x="10" y="2.5" width="3" height="8.5" rx="1"/><rect x="15" y="0" width="3" height="11" rx="1"/></svg>
+      <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><path d="M8.5 9.6a2 2 0 0 1 2 1.9l-2 .5-2-.5a2 2 0 0 1 2-1.9Z"/><path d="M8.5 5.6c1.9 0 3.6.7 4.9 1.9l-1.4 1.5a5 5 0 0 0-7 0L3.6 7.5a7 7 0 0 1 4.9-1.9Z"/><path d="M8.5 1.5c3 0 5.7 1.2 7.7 3.1l-1.4 1.5a9 9 0 0 0-12.6 0L.8 4.6a11 11 0 0 1 7.7-3.1Z"/></svg>
+      <svg width="25" height="12" viewBox="0 0 25 12"><rect x=".5" y=".5" width="21" height="11" rx="3.5" fill="none" stroke="currentColor" opacity=".4"/><rect x="2" y="2" width="18" height="8" rx="2" fill="currentColor"/><path d="M23 4v4a2.2 2.2 0 0 0 0-4Z" fill="currentColor" opacity=".4"/></svg>
+    </div>
+  </div>
+
+  <div class="sheet">
+    <div class="handle"></div>
+    <div class="snav">
+      <span class="back"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15.5 4-8 8 8 8"/></svg></span>
+      <span class="stitle">Manage data sources</span>
+      <span class="back ghost"></span>
+    </div>
+
+    <div class="hdr">Source</div>
+    <div class="card">
+      <div class="drow"><span class="di"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><ellipse cx="12" cy="5.6" rx="8.2" ry="3.3"/><path d="M3.8 5.6v6.2c0 1.8 3.7 3.3 8.2 3.3s8.2-1.5 8.2-3.3V5.6"/><path d="M3.8 11.8v6.2c0 1.8 3.7 3.3 8.2 3.3s8.2-1.5 8.2-3.3v-6.2"/></svg></span><span class="dl">Need to do</span><span class="dv">1 view</span><span class="dots"><svg viewBox="0 0 24 24" fill="currentColor"><circle cx="4" cy="12" r="1.9"/><circle cx="12" cy="12" r="1.9"/><circle cx="20" cy="12" r="1.9"/></svg></span></div>
+      <div class="drow"><span class="di"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M12 3.4v17.2M3.4 12h17.2"/></svg></span><span class="dl mut">Add data source</span></div>
+    </div>
+
+    <div class="hdr">Linked</div>
+    <div class="card">
+      <div class="drow"><span class="di"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M12 3.4v17.2M3.4 12h17.2"/></svg></span><span class="dl mut">Link existing data source</span></div>
+    </div>
+    <div class="card">
+      <div class="drow"><span class="di"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.2 9.2a2.9 2.9 0 0 1 5.6 1c0 1.9-2.8 2.4-2.8 4.3"/><circle cx="12" cy="17.8" r="1" fill="currentColor" stroke="none"/></svg></span><span class="dl mut">Learn about data sources</span></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>