forked from nexu-io/open-design
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathexample.html
More file actions
234 lines (220 loc) · 11.7 KB
/
Copy pathexample.html
File metadata and controls
234 lines (220 loc) · 11.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Growth squad weekly · 14 Oct notes</title>
<style>
:root {
--bg: #fafaf8;
--paper: #ffffff;
--ink: #1a1d24;
--muted: #5d6371;
--line: #e8e9ed;
--accent: #2c5fae;
--accent-soft: #e8efff;
--positive: #2c8a4f;
--warn: #b58522;
--danger: #b13b3b;
--display: 'Charter', Georgia, serif;
--body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14.5px; line-height: 1.6; }
.page { max-width: 920px; margin: 24px auto; padding: 48px 56px 64px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
header.head { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 28px; }
.crumb { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
h1 { font-family: var(--display); font-size: 32px; margin: 6px 0 14px; letter-spacing: -0.005em; font-weight: 700; }
.meta-row { display: flex; gap: 28px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.meta-row strong { color: var(--ink); display: block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; font-weight: 500; }
.attendees { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; background: var(--bg); border-radius: 8px; }
.attendees-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.av-row { display: flex; }
.av { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--paper); margin-left: -8px; font-size: 11px; font-weight: 700; color: white; display: inline-flex; align-items: center; justify-content: center; }
.av:first-child { margin-left: 0; }
.a-dp { background: linear-gradient(135deg, #2c5fae, #6e9bf0); }
.a-mr { background: linear-gradient(135deg, #d6336c, #ff7a9b); }
.a-pb { background: linear-gradient(135deg, #b58522, #f1b13a); }
.a-ca { background: linear-gradient(135deg, #1a8e8e, #56c1c1); }
.a-sl { background: linear-gradient(135deg, #5b3df0, #a991ff); }
.away { color: var(--muted); font-size: 12.5px; }
section { margin-top: 36px; }
h2 { font-family: var(--display); font-size: 21px; margin: 0 0 14px; letter-spacing: -0.005em; }
/* Agenda */
.agenda { display: flex; flex-direction: column; gap: 8px; }
.agenda-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-radius: 6px; background: var(--bg); }
.agenda-item .check { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: transparent; margin-top: 2px; }
.agenda-item.done .check { background: var(--positive); border-color: var(--positive); color: white; }
.agenda-item .body { flex: 1; }
.agenda-item .body strong { font-weight: 600; }
.agenda-item .body small { color: var(--muted); display: block; margin-top: 2px; font-size: 12.5px; }
.agenda-item .time { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 3px; }
/* Decisions */
.decisions { padding: 22px 24px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 6px; }
.decisions h3 { font-family: var(--display); font-size: 15px; margin: 0 0 12px; color: var(--accent); }
.decisions ul { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.decisions li::marker { color: var(--accent); }
/* Action items */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; }
tr:last-child td { border-bottom: none; }
td.owner { display: flex; align-items: center; gap: 8px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.pill-todo { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.pill-progress { background: rgba(44,95,174,0.12); color: var(--accent); }
.pill-blocked { background: rgba(177,59,59,0.12); color: var(--danger); }
.pill-done { background: rgba(44,138,79,0.12); color: var(--positive); }
/* Open + next */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { padding: 20px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.panel h3 { font-family: var(--display); font-size: 16px; margin: 0 0 8px; }
.panel p { color: var(--muted); margin: 0; font-size: 13.5px; line-height: 1.55; }
.next-meeting { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; margin-top: 10px; }
.next-meeting strong { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: block; font-weight: 500; }
footer { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
@media (max-width: 700px) {
.page { padding: 28px 24px; margin: 0; border-radius: 0; }
.grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="page">
<header class="head">
<div class="crumb">Northwind / Growth squad / Weeklies</div>
<h1>Growth squad weekly · W42</h1>
<div class="meta-row">
<span><strong>Date</strong>Tuesday, 14 October 2025</span>
<span><strong>Time</strong>10:00 – 11:00 PT</span>
<span><strong>Where</strong>Zoom · meet.northwind/growth-weekly</span>
<span><strong>Notes by</strong>Devon Park</span>
</div>
<div class="attendees">
<span class="attendees-label">Present</span>
<div class="av-row">
<span class="av a-dp" title="Devon Park">DP</span>
<span class="av a-mr" title="Mira Reddy">MR</span>
<span class="av a-pb" title="Priya Banerjee">PB</span>
<span class="av a-ca" title="Caleb Renner">CA</span>
<span class="av a-sl" title="Sasha Lin">SL</span>
</div>
<span class="away">Apologies — Alvaro M. (PTO)</span>
</div>
</header>
<section>
<h2>Agenda</h2>
<div class="agenda">
<div class="agenda-item done">
<div class="check">✓</div>
<div class="body"><strong>Sprint 38 mid-sprint check</strong><small>Walk the board column by column. Reset what's stuck.</small></div>
<div class="time">10:00 · 15m</div>
</div>
<div class="agenda-item done">
<div class="check">✓</div>
<div class="body"><strong>2FA workstream — M2 risk</strong><small>Brand microcopy review is the open dependency.</small></div>
<div class="time">10:15 · 10m</div>
</div>
<div class="agenda-item done">
<div class="check">✓</div>
<div class="body"><strong>Onboarding metrics review</strong><small>Activation up 9 pp WoW; debrief the empty-state work.</small></div>
<div class="time">10:25 · 10m</div>
</div>
<div class="agenda-item done">
<div class="check">✓</div>
<div class="body"><strong>Pioneer security review prep</strong><small>Sales loop-in for Thursday's call.</small></div>
<div class="time">10:35 · 10m</div>
</div>
<div class="agenda-item done">
<div class="check">✓</div>
<div class="body"><strong>Q4 roadmap sneak peek</strong><small>Devon shares the proposed shape; we vote on top-3 themes.</small></div>
<div class="time">10:45 · 12m</div>
</div>
<div class="agenda-item">
<div class="check"></div>
<div class="body"><strong>Open thread — anything else</strong><small>Pushed to async — see #growth-squad.</small></div>
<div class="time">10:57 · 3m</div>
</div>
</div>
</section>
<section>
<h2>Decisions</h2>
<div class="decisions">
<h3>What we agreed to, on the record</h3>
<ul>
<li><strong>M2 (2FA challenge step)</strong> stays at Nov 18 unless brand review slips past Wednesday EOD; Devon owns the escalation.</li>
<li><strong>Empty-state experiment</strong> rolls to 100% on Thursday after one more 24h hold; no follow-up control needed.</li>
<li><strong>Q4 themes</strong>: (1) Enterprise-readiness (auth + audit), (2) Onboarding 2.0, (3) Mobile-first settings. Sasha to write up the one-pagers.</li>
<li><strong>Weekly format</strong>: starting next week, demos move to Friday async-video; Tuesday is decisions + board only.</li>
</ul>
</div>
</section>
<section>
<h2>Action items</h2>
<table>
<thead><tr><th>Action</th><th>Owner</th><th>Due</th><th>Status</th></tr></thead>
<tbody>
<tr>
<td>Escalate brand microcopy review to Sasha + Brand lead</td>
<td class="owner"><span class="av a-dp">DP</span>Devon</td>
<td>Wed Oct 15</td>
<td><span class="pill pill-progress">In progress</span></td>
</tr>
<tr>
<td>Roll empty-state to 100% (with monitoring window)</td>
<td class="owner"><span class="av a-mr">MR</span>Mira</td>
<td>Thu Oct 16</td>
<td><span class="pill pill-todo">To do</span></td>
</tr>
<tr>
<td>Pair with Sales on Pioneer call prep</td>
<td class="owner"><span class="av a-pb">PB</span>Priya</td>
<td>Thu Oct 16</td>
<td><span class="pill pill-todo">To do</span></td>
</tr>
<tr>
<td>Draft Q4 theme one-pagers (3)</td>
<td class="owner"><span class="av a-sl">SL</span>Sasha</td>
<td>Mon Oct 20</td>
<td><span class="pill pill-todo">To do</span></td>
</tr>
<tr>
<td>Audit-writer backlog dashboard</td>
<td class="owner"><span class="av a-ca">CA</span>Caleb</td>
<td>Tue Oct 21</td>
<td><span class="pill pill-blocked">Blocked · awaiting Grafana ACL</span></td>
</tr>
<tr>
<td>Switch weekly format to demos-on-Friday</td>
<td class="owner"><span class="av a-dp">DP</span>Devon</td>
<td>Mon Oct 20</td>
<td><span class="pill pill-done">Done</span></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Open questions & next meeting</h2>
<div class="grid">
<div class="panel">
<h3>Open questions</h3>
<p>Do we want a customer in the Q4 mobile-first kickoff (Pioneer would say yes), or do we keep the first session internal?</p>
<p style="margin-top: 8px;">Should the Friday demo video be capped at 5 min, or open-ended?</p>
</div>
<div class="panel">
<h3>Next meeting</h3>
<div class="next-meeting"><strong>Date</strong>Tuesday, 21 October 2025</div>
<div class="next-meeting"><strong>Time</strong>10:00 – 11:00 PT · Zoom</div>
<div class="next-meeting"><strong>Pre-read</strong>Sasha's Q4 one-pagers (Mon EOD)</div>
<div class="next-meeting"><strong>Notes by</strong>Mira Reddy (rotation)</div>
</div>
</div>
</section>
<footer>
<span>Northwind Growth squad · Notes v1</span>
<span>Filed in #growth-squad · 15 Oct 2025</span>
</footer>
</div>
</body>
</html>