privateboard 0.1.13 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +2623 -333
- package/dist/cli.js.map +1 -1
- package/package.json +1 -1
- package/public/adjourn-overlay.css +6 -6
- package/public/agent-build-bgm.js +292 -0
- package/public/agent-overlay.css +14 -14
- package/public/agent-profile.css +408 -87
- package/public/agent-profile.js +254 -0
- package/public/app.js +2486 -384
- package/public/home.html +26 -26
- package/public/i18n.js +1890 -21
- package/public/icons/logo2.png +0 -0
- package/public/icons/private-board-vi.html +1716 -0
- package/public/index.html +2954 -1018
- package/public/magazine.html +12 -12
- package/public/new-agent.css +29 -29
- package/public/newspaper.html +20 -20
- package/public/onboarding.css +350 -272
- package/public/onboarding.js +614 -323
- package/public/quote-cta.css +4 -4
- package/public/report.html +2008 -1673
- package/public/room-settings.css +192 -24
- package/public/room-settings.js +5 -0
- package/public/share-cover-svg-creator.js +736 -0
- package/public/themes.css +0 -34
- package/public/typing-sfx.js +176 -3
- package/public/user-settings.css +50 -27
- package/public/user-settings.js +43 -14
- package/public/voice-onboarding.css +425 -0
- package/public/voice-onboarding.js +144 -0
- package/public/voice-replay.css +31 -38
- package/public/voice-replay.js +12 -11
|
@@ -0,0 +1,1716 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>PrivateBoard · Visual Identity System v1.0</title>
|
|
6
|
+
<style>
|
|
7
|
+
:root {
|
|
8
|
+
/* Brand surface · primary register is dark */
|
|
9
|
+
--slate: #0F0E0C;
|
|
10
|
+
--slate-soft: #1A1916;
|
|
11
|
+
--slate-deep: #060503;
|
|
12
|
+
--slate-text: #D8CDB8;
|
|
13
|
+
--slate-faint: rgba(216,205,184,0.55);
|
|
14
|
+
|
|
15
|
+
/* Light surface (rare · print / letterhead) */
|
|
16
|
+
--paper: #F4EFE6;
|
|
17
|
+
--paper-soft: #ECE6DA;
|
|
18
|
+
--paper-deep: #E3DCCC;
|
|
19
|
+
--ink: #2A2724;
|
|
20
|
+
--ink-mid: #6A655D;
|
|
21
|
+
--ink-soft: #9A938A;
|
|
22
|
+
--rule: rgba(216,205,184,0.16);
|
|
23
|
+
--rule-light: rgba(42,39,36,0.14);
|
|
24
|
+
|
|
25
|
+
/* Brand accent · gold, two surface variants */
|
|
26
|
+
--gold: #C5A05B; /* primary · on dark */
|
|
27
|
+
--gold-mid: #A88454;
|
|
28
|
+
--gold-faint: #8D7740; /* support text on dark */
|
|
29
|
+
--brass: #7A5A24; /* primary · on light */
|
|
30
|
+
--brass-mid: #9C7837;
|
|
31
|
+
|
|
32
|
+
/* Type */
|
|
33
|
+
--serif: "Charter", "Tiempos Text", "Iowan Old Style", Georgia, serif;
|
|
34
|
+
--sans: -apple-system, "SF Pro Text", "Söhne", "Inter", system-ui, sans-serif;
|
|
35
|
+
--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
|
|
36
|
+
}
|
|
37
|
+
* { box-sizing: border-box; }
|
|
38
|
+
html, body { background: var(--slate); color: var(--slate-text); margin: 0; }
|
|
39
|
+
body {
|
|
40
|
+
font-family: var(--sans);
|
|
41
|
+
font-size: 14px;
|
|
42
|
+
line-height: 1.6;
|
|
43
|
+
padding: 64px 56px 96px;
|
|
44
|
+
-webkit-font-smoothing: antialiased;
|
|
45
|
+
}
|
|
46
|
+
.container { max-width: 1200px; margin: 0 auto; }
|
|
47
|
+
|
|
48
|
+
/* Shared rhythm */
|
|
49
|
+
.kicker {
|
|
50
|
+
font-family: var(--mono);
|
|
51
|
+
font-size: 11px;
|
|
52
|
+
text-transform: uppercase;
|
|
53
|
+
letter-spacing: 0.20em;
|
|
54
|
+
color: var(--gold);
|
|
55
|
+
font-weight: 600;
|
|
56
|
+
}
|
|
57
|
+
.kicker::before { content: "— "; }
|
|
58
|
+
|
|
59
|
+
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.005em; margin: 0; color: var(--slate-text); }
|
|
60
|
+
h1 em, h2 em, h3 em { color: var(--gold); font-style: italic; }
|
|
61
|
+
p em { color: var(--gold); font-style: italic; }
|
|
62
|
+
|
|
63
|
+
/* ═════════════════════════════════════════════════════════ COVER */
|
|
64
|
+
.cover {
|
|
65
|
+
border-bottom: 1px solid var(--rule);
|
|
66
|
+
padding-bottom: 72px;
|
|
67
|
+
margin-bottom: 96px;
|
|
68
|
+
}
|
|
69
|
+
.cover .kicker { margin-bottom: 18px; }
|
|
70
|
+
.cover-grid {
|
|
71
|
+
display: grid;
|
|
72
|
+
grid-template-columns: 1.1fr 1fr;
|
|
73
|
+
gap: 80px;
|
|
74
|
+
align-items: center;
|
|
75
|
+
}
|
|
76
|
+
.cover h1 {
|
|
77
|
+
font-size: 46px;
|
|
78
|
+
line-height: 1.12;
|
|
79
|
+
margin-bottom: 22px;
|
|
80
|
+
}
|
|
81
|
+
.cover .lede {
|
|
82
|
+
color: var(--slate-faint);
|
|
83
|
+
font-size: 16px;
|
|
84
|
+
line-height: 1.7;
|
|
85
|
+
max-width: 540px;
|
|
86
|
+
margin: 0 0 32px;
|
|
87
|
+
}
|
|
88
|
+
.cover .meta {
|
|
89
|
+
display: flex; gap: 36px;
|
|
90
|
+
padding-top: 20px;
|
|
91
|
+
border-top: 1px solid var(--rule);
|
|
92
|
+
}
|
|
93
|
+
.cover .meta div .l {
|
|
94
|
+
font-family: var(--mono); font-size: 10px;
|
|
95
|
+
text-transform: uppercase; letter-spacing: 0.18em;
|
|
96
|
+
color: var(--slate-faint);
|
|
97
|
+
}
|
|
98
|
+
.cover .meta div .v {
|
|
99
|
+
font-family: var(--serif);
|
|
100
|
+
font-size: 15px;
|
|
101
|
+
margin-top: 4px;
|
|
102
|
+
color: var(--slate-text);
|
|
103
|
+
}
|
|
104
|
+
.cover-stage {
|
|
105
|
+
background: var(--slate-soft);
|
|
106
|
+
height: 460px;
|
|
107
|
+
display: flex;
|
|
108
|
+
flex-direction: column;
|
|
109
|
+
align-items: center;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
gap: 28px;
|
|
112
|
+
border: 1px solid var(--rule);
|
|
113
|
+
}
|
|
114
|
+
.cover-stage svg { width: 220px; height: 220px; }
|
|
115
|
+
.cover-stage .wm {
|
|
116
|
+
font-family: var(--serif);
|
|
117
|
+
font-weight: 400;
|
|
118
|
+
font-size: 32px;
|
|
119
|
+
color: var(--gold);
|
|
120
|
+
letter-spacing: -0.003em;
|
|
121
|
+
line-height: 1;
|
|
122
|
+
}
|
|
123
|
+
.cover-stage .tag {
|
|
124
|
+
font-family: var(--mono);
|
|
125
|
+
font-size: 10px;
|
|
126
|
+
letter-spacing: 0.22em;
|
|
127
|
+
color: var(--gold-faint);
|
|
128
|
+
text-transform: uppercase;
|
|
129
|
+
}
|
|
130
|
+
.cover-stage .tag .sep { color: var(--gold-mid); opacity: 0.5; margin: 0 6px; }
|
|
131
|
+
|
|
132
|
+
/* ═════════════════════════════════════════════════════════ SECTION HEADERS */
|
|
133
|
+
section { margin-bottom: 108px; }
|
|
134
|
+
section > .sec-head {
|
|
135
|
+
display: grid;
|
|
136
|
+
grid-template-columns: 1fr 2fr;
|
|
137
|
+
gap: 56px;
|
|
138
|
+
padding-bottom: 28px;
|
|
139
|
+
margin-bottom: 48px;
|
|
140
|
+
border-bottom: 1px solid var(--rule);
|
|
141
|
+
align-items: end;
|
|
142
|
+
}
|
|
143
|
+
.sec-head .sec-num {
|
|
144
|
+
font-family: var(--mono);
|
|
145
|
+
font-size: 11px;
|
|
146
|
+
text-transform: uppercase;
|
|
147
|
+
letter-spacing: 0.20em;
|
|
148
|
+
color: var(--gold);
|
|
149
|
+
font-weight: 600;
|
|
150
|
+
}
|
|
151
|
+
.sec-head .sec-num::before { content: "— "; }
|
|
152
|
+
.sec-head h2 {
|
|
153
|
+
font-size: 30px;
|
|
154
|
+
line-height: 1.22;
|
|
155
|
+
margin-top: 10px;
|
|
156
|
+
}
|
|
157
|
+
.sec-head .sec-blurb {
|
|
158
|
+
color: var(--slate-faint);
|
|
159
|
+
font-size: 15px;
|
|
160
|
+
line-height: 1.7;
|
|
161
|
+
margin: 0;
|
|
162
|
+
}
|
|
163
|
+
.sec-head .sec-blurb em { color: var(--gold); font-style: italic; }
|
|
164
|
+
|
|
165
|
+
/* ═════════════════════════════════════════════════════════ THE MARK */
|
|
166
|
+
.construction-stage {
|
|
167
|
+
background: var(--slate-soft);
|
|
168
|
+
border: 1px solid var(--rule);
|
|
169
|
+
padding: 40px;
|
|
170
|
+
display: grid;
|
|
171
|
+
grid-template-columns: 1.05fr 1fr;
|
|
172
|
+
gap: 48px;
|
|
173
|
+
align-items: center;
|
|
174
|
+
}
|
|
175
|
+
.construction-stage .canvas {
|
|
176
|
+
background: var(--slate-deep);
|
|
177
|
+
border: 1px solid var(--rule);
|
|
178
|
+
height: 380px;
|
|
179
|
+
display: flex;
|
|
180
|
+
align-items: center;
|
|
181
|
+
justify-content: center;
|
|
182
|
+
}
|
|
183
|
+
.construction-stage .canvas svg { width: 320px; height: 320px; }
|
|
184
|
+
.construction-stage .anatomy h3 {
|
|
185
|
+
font-size: 22px;
|
|
186
|
+
margin-bottom: 18px;
|
|
187
|
+
}
|
|
188
|
+
.construction-stage .anatomy h3 em { color: var(--gold); font-style: italic; }
|
|
189
|
+
.construction-stage .anatomy ul {
|
|
190
|
+
list-style: none;
|
|
191
|
+
padding: 0;
|
|
192
|
+
margin: 0;
|
|
193
|
+
border-top: 1px solid var(--rule);
|
|
194
|
+
}
|
|
195
|
+
.construction-stage .anatomy li {
|
|
196
|
+
display: grid;
|
|
197
|
+
grid-template-columns: 80px 1fr;
|
|
198
|
+
gap: 18px;
|
|
199
|
+
padding: 16px 0;
|
|
200
|
+
border-bottom: 1px solid var(--rule);
|
|
201
|
+
font-size: 13.5px;
|
|
202
|
+
color: var(--slate-faint);
|
|
203
|
+
line-height: 1.65;
|
|
204
|
+
}
|
|
205
|
+
.construction-stage .anatomy li .tag {
|
|
206
|
+
font-family: var(--mono);
|
|
207
|
+
font-size: 11px;
|
|
208
|
+
color: var(--gold);
|
|
209
|
+
text-transform: uppercase;
|
|
210
|
+
letter-spacing: 0.14em;
|
|
211
|
+
font-weight: 600;
|
|
212
|
+
}
|
|
213
|
+
.construction-stage .anatomy li b {
|
|
214
|
+
color: var(--slate-text);
|
|
215
|
+
font-weight: 500;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* Size scale */
|
|
219
|
+
.size-scale {
|
|
220
|
+
display: grid;
|
|
221
|
+
grid-template-columns: repeat(5, 1fr);
|
|
222
|
+
gap: 0;
|
|
223
|
+
background: var(--slate-soft);
|
|
224
|
+
border: 1px solid var(--rule);
|
|
225
|
+
}
|
|
226
|
+
.size-scale .cell {
|
|
227
|
+
padding: 32px 14px 24px;
|
|
228
|
+
display: flex; flex-direction: column;
|
|
229
|
+
align-items: center; gap: 16px;
|
|
230
|
+
border-right: 1px solid var(--rule);
|
|
231
|
+
}
|
|
232
|
+
.size-scale .cell:last-child { border-right: none; }
|
|
233
|
+
.size-scale .frame {
|
|
234
|
+
flex: 1; min-height: 140px;
|
|
235
|
+
display: flex; align-items: center; justify-content: center;
|
|
236
|
+
}
|
|
237
|
+
.size-scale .cap {
|
|
238
|
+
font-family: var(--mono);
|
|
239
|
+
font-size: 10px;
|
|
240
|
+
text-transform: uppercase;
|
|
241
|
+
letter-spacing: 0.18em;
|
|
242
|
+
color: var(--slate-faint);
|
|
243
|
+
text-align: center;
|
|
244
|
+
}
|
|
245
|
+
.size-scale .cap b {
|
|
246
|
+
color: var(--slate-text);
|
|
247
|
+
font-weight: 600;
|
|
248
|
+
display: block;
|
|
249
|
+
margin-bottom: 4px;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/* ═════════════════════════════════════════════════════════ CLEAR SPACE */
|
|
253
|
+
.clear-stage {
|
|
254
|
+
background: var(--slate-soft);
|
|
255
|
+
border: 1px solid var(--rule);
|
|
256
|
+
padding: 40px;
|
|
257
|
+
display: grid;
|
|
258
|
+
grid-template-columns: 1fr 1.1fr;
|
|
259
|
+
gap: 48px;
|
|
260
|
+
align-items: center;
|
|
261
|
+
}
|
|
262
|
+
.clear-stage .clear-canvas {
|
|
263
|
+
background: var(--slate-deep);
|
|
264
|
+
height: 360px;
|
|
265
|
+
display: flex; align-items: center; justify-content: center;
|
|
266
|
+
border: 1px solid var(--rule);
|
|
267
|
+
}
|
|
268
|
+
.clear-stage .clear-canvas svg { width: 320px; height: 320px; }
|
|
269
|
+
.clear-stage h3 { font-size: 22px; margin-bottom: 12px; color: var(--slate-text); }
|
|
270
|
+
.clear-stage p { color: var(--slate-faint); font-size: 14px; line-height: 1.7; margin: 0 0 10px; }
|
|
271
|
+
.clear-stage p em { color: var(--gold); font-style: italic; }
|
|
272
|
+
.clear-stage .law {
|
|
273
|
+
font-family: var(--mono);
|
|
274
|
+
font-size: 11px;
|
|
275
|
+
color: var(--gold);
|
|
276
|
+
text-transform: uppercase;
|
|
277
|
+
letter-spacing: 0.14em;
|
|
278
|
+
margin-top: 16px;
|
|
279
|
+
padding-top: 16px;
|
|
280
|
+
border-top: 1px solid var(--rule);
|
|
281
|
+
font-weight: 600;
|
|
282
|
+
}
|
|
283
|
+
.clear-stage .law::before { content: "Law · "; color: var(--gold-faint); }
|
|
284
|
+
|
|
285
|
+
/* ═════════════════════════════════════════════════════════ COLOR */
|
|
286
|
+
.swatches {
|
|
287
|
+
display: grid;
|
|
288
|
+
grid-template-columns: repeat(4, 1fr);
|
|
289
|
+
gap: 18px;
|
|
290
|
+
}
|
|
291
|
+
.swatch {
|
|
292
|
+
border: 1px solid var(--rule);
|
|
293
|
+
background: var(--slate-soft);
|
|
294
|
+
}
|
|
295
|
+
.swatch .chip { height: 140px; }
|
|
296
|
+
.swatch .chip.is-light { background: var(--paper); }
|
|
297
|
+
.swatch .body {
|
|
298
|
+
padding: 16px 16px 20px;
|
|
299
|
+
border-top: 1px solid var(--rule);
|
|
300
|
+
}
|
|
301
|
+
.swatch .role {
|
|
302
|
+
font-family: var(--mono);
|
|
303
|
+
font-size: 10px;
|
|
304
|
+
color: var(--gold);
|
|
305
|
+
text-transform: uppercase;
|
|
306
|
+
letter-spacing: 0.18em;
|
|
307
|
+
margin-bottom: 4px;
|
|
308
|
+
font-weight: 600;
|
|
309
|
+
}
|
|
310
|
+
.swatch .name {
|
|
311
|
+
font-family: var(--serif);
|
|
312
|
+
font-size: 18px;
|
|
313
|
+
color: var(--slate-text);
|
|
314
|
+
margin-bottom: 8px;
|
|
315
|
+
}
|
|
316
|
+
.swatch .specs {
|
|
317
|
+
font-family: var(--mono);
|
|
318
|
+
font-size: 10.5px;
|
|
319
|
+
color: var(--slate-faint);
|
|
320
|
+
line-height: 1.75;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
/* ═════════════════════════════════════════════════════════ WORDMARK & LOCKUPS */
|
|
324
|
+
.lockup-grid {
|
|
325
|
+
display: grid;
|
|
326
|
+
grid-template-columns: 1.6fr 1fr 1fr;
|
|
327
|
+
gap: 24px;
|
|
328
|
+
}
|
|
329
|
+
.lockup-tile {
|
|
330
|
+
background: var(--slate-soft);
|
|
331
|
+
border: 1px solid var(--rule);
|
|
332
|
+
padding: 32px;
|
|
333
|
+
display: flex;
|
|
334
|
+
flex-direction: column;
|
|
335
|
+
gap: 20px;
|
|
336
|
+
}
|
|
337
|
+
.lockup-tile .stage {
|
|
338
|
+
background: var(--slate-deep);
|
|
339
|
+
border: 1px solid var(--rule);
|
|
340
|
+
flex: 1;
|
|
341
|
+
min-height: 220px;
|
|
342
|
+
display: flex;
|
|
343
|
+
align-items: center;
|
|
344
|
+
justify-content: center;
|
|
345
|
+
padding: 32px;
|
|
346
|
+
}
|
|
347
|
+
.lockup-tile .meta .l {
|
|
348
|
+
font-family: var(--mono);
|
|
349
|
+
font-size: 10px;
|
|
350
|
+
text-transform: uppercase;
|
|
351
|
+
letter-spacing: 0.18em;
|
|
352
|
+
color: var(--gold);
|
|
353
|
+
font-weight: 600;
|
|
354
|
+
margin-bottom: 4px;
|
|
355
|
+
}
|
|
356
|
+
.lockup-tile .meta .l::before { content: "— "; }
|
|
357
|
+
.lockup-tile .meta .n {
|
|
358
|
+
font-family: var(--serif);
|
|
359
|
+
font-size: 17px;
|
|
360
|
+
color: var(--slate-text);
|
|
361
|
+
margin-bottom: 4px;
|
|
362
|
+
}
|
|
363
|
+
.lockup-tile .meta .desc {
|
|
364
|
+
color: var(--slate-faint);
|
|
365
|
+
font-size: 13px;
|
|
366
|
+
line-height: 1.65;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
/* Primary lockup (vertical · mark + wordmark + tagline) */
|
|
370
|
+
.lprime {
|
|
371
|
+
display: flex; flex-direction: column;
|
|
372
|
+
align-items: center; gap: 22px;
|
|
373
|
+
}
|
|
374
|
+
.lprime svg { width: 96px; height: 96px; }
|
|
375
|
+
.lprime .wm {
|
|
376
|
+
font-family: var(--serif);
|
|
377
|
+
font-weight: 400;
|
|
378
|
+
font-size: 30px;
|
|
379
|
+
color: var(--gold);
|
|
380
|
+
line-height: 1;
|
|
381
|
+
}
|
|
382
|
+
.lprime .tag {
|
|
383
|
+
font-family: var(--mono);
|
|
384
|
+
font-size: 10px;
|
|
385
|
+
letter-spacing: 0.22em;
|
|
386
|
+
color: var(--gold-faint);
|
|
387
|
+
text-transform: uppercase;
|
|
388
|
+
}
|
|
389
|
+
.lprime .tag .sep { color: var(--gold-mid); opacity: 0.5; margin: 0 6px; }
|
|
390
|
+
|
|
391
|
+
/* Horizontal lockup */
|
|
392
|
+
.lhoriz { display: flex; gap: 22px; align-items: center; }
|
|
393
|
+
.lhoriz svg { width: 64px; height: 64px; flex: none; }
|
|
394
|
+
.lhoriz .wm {
|
|
395
|
+
font-family: var(--serif);
|
|
396
|
+
font-weight: 400;
|
|
397
|
+
font-size: 32px;
|
|
398
|
+
color: var(--gold);
|
|
399
|
+
line-height: 1;
|
|
400
|
+
letter-spacing: -0.003em;
|
|
401
|
+
}
|
|
402
|
+
.lhoriz .tag {
|
|
403
|
+
display: block;
|
|
404
|
+
font-family: var(--mono);
|
|
405
|
+
font-size: 9.5px;
|
|
406
|
+
color: var(--gold-faint);
|
|
407
|
+
text-transform: uppercase;
|
|
408
|
+
letter-spacing: 0.22em;
|
|
409
|
+
margin-top: 8px;
|
|
410
|
+
}
|
|
411
|
+
.lhoriz .tag .sep { color: var(--gold-mid); opacity: 0.5; margin: 0 5px; }
|
|
412
|
+
|
|
413
|
+
/* Wordmark only */
|
|
414
|
+
.wmo {
|
|
415
|
+
font-family: var(--serif);
|
|
416
|
+
font-weight: 400;
|
|
417
|
+
font-size: 36px;
|
|
418
|
+
color: var(--gold);
|
|
419
|
+
line-height: 1;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
/* ═════════════════════════════════════════════════════════ TYPOGRAPHY */
|
|
423
|
+
.panel {
|
|
424
|
+
background: var(--slate-soft);
|
|
425
|
+
border: 1px solid var(--rule);
|
|
426
|
+
padding: 36px 40px;
|
|
427
|
+
}
|
|
428
|
+
.type-stack {
|
|
429
|
+
display: grid;
|
|
430
|
+
grid-template-columns: 220px 1fr;
|
|
431
|
+
gap: 36px;
|
|
432
|
+
padding: 32px 0;
|
|
433
|
+
border-bottom: 1px solid var(--rule);
|
|
434
|
+
}
|
|
435
|
+
.type-stack:last-child { border-bottom: none; }
|
|
436
|
+
.type-stack .lhs .role {
|
|
437
|
+
font-family: var(--mono);
|
|
438
|
+
font-size: 10px;
|
|
439
|
+
text-transform: uppercase;
|
|
440
|
+
letter-spacing: 0.18em;
|
|
441
|
+
color: var(--gold);
|
|
442
|
+
font-weight: 600;
|
|
443
|
+
margin-bottom: 6px;
|
|
444
|
+
}
|
|
445
|
+
.type-stack .lhs .role::before { content: "— "; }
|
|
446
|
+
.type-stack .lhs .name {
|
|
447
|
+
font-family: var(--serif);
|
|
448
|
+
font-size: 20px;
|
|
449
|
+
color: var(--slate-text);
|
|
450
|
+
margin-bottom: 10px;
|
|
451
|
+
}
|
|
452
|
+
.type-stack .lhs .stack-list {
|
|
453
|
+
font-family: var(--mono);
|
|
454
|
+
font-size: 11px;
|
|
455
|
+
color: var(--slate-faint);
|
|
456
|
+
line-height: 1.75;
|
|
457
|
+
}
|
|
458
|
+
.type-stack .rhs .sample-serif {
|
|
459
|
+
font-family: var(--serif);
|
|
460
|
+
font-size: 32px;
|
|
461
|
+
line-height: 1.22;
|
|
462
|
+
color: var(--slate-text);
|
|
463
|
+
margin-bottom: 14px;
|
|
464
|
+
letter-spacing: -0.003em;
|
|
465
|
+
}
|
|
466
|
+
.type-stack .rhs .sample-serif em { color: var(--gold); font-style: italic; }
|
|
467
|
+
.type-stack .rhs .sample-sans {
|
|
468
|
+
font-family: var(--sans);
|
|
469
|
+
font-size: 16px;
|
|
470
|
+
line-height: 1.7;
|
|
471
|
+
color: var(--slate-text);
|
|
472
|
+
margin-bottom: 14px;
|
|
473
|
+
}
|
|
474
|
+
.type-stack .rhs .sample-sans em { color: var(--gold); font-style: italic; }
|
|
475
|
+
.type-stack .rhs .sample-mono {
|
|
476
|
+
font-family: var(--mono);
|
|
477
|
+
font-size: 12px;
|
|
478
|
+
color: var(--slate-faint);
|
|
479
|
+
line-height: 1.7;
|
|
480
|
+
text-transform: uppercase;
|
|
481
|
+
letter-spacing: 0.16em;
|
|
482
|
+
}
|
|
483
|
+
.type-stack .rhs .alphas {
|
|
484
|
+
font-family: var(--mono);
|
|
485
|
+
font-size: 11.5px;
|
|
486
|
+
color: var(--slate-faint);
|
|
487
|
+
margin-top: 8px;
|
|
488
|
+
letter-spacing: 0.06em;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
/* ═════════════════════════════════════════════════════════ ICON FAMILY */
|
|
492
|
+
.icons-grid {
|
|
493
|
+
display: grid;
|
|
494
|
+
grid-template-columns: repeat(5, 1fr);
|
|
495
|
+
gap: 0;
|
|
496
|
+
background: var(--slate-soft);
|
|
497
|
+
border: 1px solid var(--rule);
|
|
498
|
+
}
|
|
499
|
+
.icon-tile {
|
|
500
|
+
padding: 32px 16px 24px;
|
|
501
|
+
border-right: 1px solid var(--rule);
|
|
502
|
+
border-bottom: 1px solid var(--rule);
|
|
503
|
+
display: flex; flex-direction: column; gap: 16px;
|
|
504
|
+
align-items: center; text-align: center;
|
|
505
|
+
}
|
|
506
|
+
.icon-tile:nth-child(5n) { border-right: none; }
|
|
507
|
+
.icon-tile:nth-last-child(-n+5) { border-bottom: none; }
|
|
508
|
+
.icon-tile svg { width: 64px; height: 64px; }
|
|
509
|
+
.icon-tile .nm {
|
|
510
|
+
font-family: var(--serif);
|
|
511
|
+
font-size: 15px;
|
|
512
|
+
color: var(--slate-text);
|
|
513
|
+
}
|
|
514
|
+
.icon-tile .nm em { color: var(--gold); font-style: italic; }
|
|
515
|
+
.icon-tile .d {
|
|
516
|
+
font-family: var(--mono);
|
|
517
|
+
font-size: 10px;
|
|
518
|
+
color: var(--slate-faint);
|
|
519
|
+
text-transform: uppercase;
|
|
520
|
+
letter-spacing: 0.14em;
|
|
521
|
+
line-height: 1.5;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
/* ═════════════════════════════════════════════════════════ APPLICATION */
|
|
525
|
+
.app-grid {
|
|
526
|
+
display: grid;
|
|
527
|
+
grid-template-columns: 1fr 1fr;
|
|
528
|
+
gap: 28px;
|
|
529
|
+
}
|
|
530
|
+
.app-tile {
|
|
531
|
+
background: var(--slate-soft);
|
|
532
|
+
border: 1px solid var(--rule);
|
|
533
|
+
padding: 32px;
|
|
534
|
+
display: flex;
|
|
535
|
+
flex-direction: column;
|
|
536
|
+
gap: 20px;
|
|
537
|
+
}
|
|
538
|
+
.app-tile .stage {
|
|
539
|
+
background: var(--slate-deep);
|
|
540
|
+
border: 1px solid var(--rule);
|
|
541
|
+
flex: 1;
|
|
542
|
+
min-height: 240px;
|
|
543
|
+
display: flex;
|
|
544
|
+
align-items: center;
|
|
545
|
+
justify-content: center;
|
|
546
|
+
padding: 32px;
|
|
547
|
+
position: relative;
|
|
548
|
+
overflow: hidden;
|
|
549
|
+
}
|
|
550
|
+
.app-tile .stage.is-light {
|
|
551
|
+
background: var(--paper);
|
|
552
|
+
border-color: var(--rule-light);
|
|
553
|
+
}
|
|
554
|
+
.app-tile .label .l {
|
|
555
|
+
font-family: var(--mono);
|
|
556
|
+
font-size: 10px;
|
|
557
|
+
text-transform: uppercase;
|
|
558
|
+
letter-spacing: 0.18em;
|
|
559
|
+
color: var(--gold);
|
|
560
|
+
font-weight: 600;
|
|
561
|
+
margin-bottom: 6px;
|
|
562
|
+
}
|
|
563
|
+
.app-tile .label .l::before { content: "— "; }
|
|
564
|
+
.app-tile .label .n {
|
|
565
|
+
font-family: var(--serif);
|
|
566
|
+
font-size: 18px;
|
|
567
|
+
color: var(--slate-text);
|
|
568
|
+
margin-bottom: 6px;
|
|
569
|
+
}
|
|
570
|
+
.app-tile .label .desc {
|
|
571
|
+
font-size: 13px;
|
|
572
|
+
color: var(--slate-faint);
|
|
573
|
+
line-height: 1.65;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.favicons { display: flex; gap: 32px; align-items: end; }
|
|
577
|
+
.favicons .fav { display: flex; flex-direction: column; align-items: center; gap: 10px; }
|
|
578
|
+
.favicons .fav .swatch {
|
|
579
|
+
border: 1px solid var(--rule);
|
|
580
|
+
background: var(--slate);
|
|
581
|
+
display: flex; align-items: center; justify-content: center;
|
|
582
|
+
}
|
|
583
|
+
.favicons .fav .cap {
|
|
584
|
+
font-family: var(--mono);
|
|
585
|
+
font-size: 10px;
|
|
586
|
+
color: var(--slate-faint);
|
|
587
|
+
letter-spacing: 0.14em;
|
|
588
|
+
}
|
|
589
|
+
.fav-16 .swatch { width: 32px; height: 32px; }
|
|
590
|
+
.fav-32 .swatch { width: 48px; height: 48px; }
|
|
591
|
+
.fav-64 .swatch { width: 80px; height: 80px; }
|
|
592
|
+
|
|
593
|
+
.appicon {
|
|
594
|
+
width: 180px; height: 180px;
|
|
595
|
+
border-radius: 38px;
|
|
596
|
+
background: var(--slate);
|
|
597
|
+
box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 12px 32px rgba(0,0,0,0.4);
|
|
598
|
+
display: flex; align-items: center; justify-content: center;
|
|
599
|
+
}
|
|
600
|
+
.appicon.is-light {
|
|
601
|
+
background: var(--paper);
|
|
602
|
+
box-shadow: 0 1px 0 var(--rule-light), 0 12px 32px rgba(42,39,36,0.08);
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.og {
|
|
606
|
+
width: 100%;
|
|
607
|
+
aspect-ratio: 1200/630;
|
|
608
|
+
background: var(--slate);
|
|
609
|
+
padding: 40px 48px;
|
|
610
|
+
display: grid;
|
|
611
|
+
grid-template-columns: 1fr auto;
|
|
612
|
+
align-items: end;
|
|
613
|
+
overflow: hidden;
|
|
614
|
+
position: relative;
|
|
615
|
+
color: var(--slate-text);
|
|
616
|
+
}
|
|
617
|
+
.og::before {
|
|
618
|
+
content: "";
|
|
619
|
+
position: absolute;
|
|
620
|
+
inset: 18px;
|
|
621
|
+
border: 1px solid rgba(197,160,91,0.18);
|
|
622
|
+
pointer-events: none;
|
|
623
|
+
}
|
|
624
|
+
.og .og-kicker {
|
|
625
|
+
font-family: var(--mono);
|
|
626
|
+
font-size: 12px;
|
|
627
|
+
color: var(--gold);
|
|
628
|
+
text-transform: uppercase;
|
|
629
|
+
letter-spacing: 0.20em;
|
|
630
|
+
margin-bottom: 14px;
|
|
631
|
+
font-weight: 600;
|
|
632
|
+
}
|
|
633
|
+
.og .og-kicker::before { content: "— "; }
|
|
634
|
+
.og .og-title {
|
|
635
|
+
font-family: var(--serif);
|
|
636
|
+
font-size: 38px;
|
|
637
|
+
color: var(--slate-text);
|
|
638
|
+
line-height: 1.18;
|
|
639
|
+
max-width: 72%;
|
|
640
|
+
}
|
|
641
|
+
.og .og-title em { color: var(--gold); font-style: italic; }
|
|
642
|
+
.og .og-foot {
|
|
643
|
+
font-family: var(--mono);
|
|
644
|
+
font-size: 11px;
|
|
645
|
+
text-transform: uppercase;
|
|
646
|
+
letter-spacing: 0.20em;
|
|
647
|
+
color: var(--gold-faint);
|
|
648
|
+
margin-top: 18px;
|
|
649
|
+
}
|
|
650
|
+
.og svg { width: 104px; height: 104px; }
|
|
651
|
+
|
|
652
|
+
.letterhead {
|
|
653
|
+
background: var(--paper);
|
|
654
|
+
color: var(--ink);
|
|
655
|
+
border: 1px solid var(--rule-light);
|
|
656
|
+
aspect-ratio: 8.5/11;
|
|
657
|
+
padding: 36px 40px;
|
|
658
|
+
display: flex;
|
|
659
|
+
flex-direction: column;
|
|
660
|
+
}
|
|
661
|
+
.letterhead .lh-top {
|
|
662
|
+
display: flex;
|
|
663
|
+
justify-content: space-between;
|
|
664
|
+
align-items: flex-start;
|
|
665
|
+
padding-bottom: 18px;
|
|
666
|
+
border-bottom: 1px solid var(--rule-light);
|
|
667
|
+
}
|
|
668
|
+
.letterhead .brand {
|
|
669
|
+
display: flex; gap: 14px; align-items: center;
|
|
670
|
+
}
|
|
671
|
+
.letterhead .brand svg { width: 42px; height: 42px; }
|
|
672
|
+
.letterhead .brand .name {
|
|
673
|
+
font-family: var(--serif); font-weight: 400;
|
|
674
|
+
font-size: 20px; color: var(--brass); line-height: 1;
|
|
675
|
+
}
|
|
676
|
+
.letterhead .brand .tag {
|
|
677
|
+
font-family: var(--mono); font-size: 8.5px;
|
|
678
|
+
color: var(--ink-soft);
|
|
679
|
+
text-transform: uppercase; letter-spacing: 0.22em; margin-top: 5px;
|
|
680
|
+
}
|
|
681
|
+
.letterhead .brand .tag .sep { opacity: 0.5; margin: 0 4px; }
|
|
682
|
+
.letterhead .lh-top .meta {
|
|
683
|
+
font-family: var(--mono); font-size: 9.5px; color: var(--ink-mid);
|
|
684
|
+
text-transform: uppercase; letter-spacing: 0.18em;
|
|
685
|
+
text-align: right; line-height: 1.7;
|
|
686
|
+
}
|
|
687
|
+
.letterhead .lh-body {
|
|
688
|
+
flex: 1;
|
|
689
|
+
padding: 28px 0;
|
|
690
|
+
font-family: var(--serif);
|
|
691
|
+
font-size: 12px;
|
|
692
|
+
color: var(--ink-soft);
|
|
693
|
+
line-height: 1.8;
|
|
694
|
+
}
|
|
695
|
+
.letterhead .lh-body em { color: var(--brass); font-style: italic; }
|
|
696
|
+
.letterhead .lh-foot {
|
|
697
|
+
padding-top: 14px;
|
|
698
|
+
border-top: 1px solid var(--rule-light);
|
|
699
|
+
font-family: var(--mono); font-size: 9px; color: var(--ink-soft);
|
|
700
|
+
text-transform: uppercase; letter-spacing: 0.18em;
|
|
701
|
+
display: flex; justify-content: space-between;
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
.card-pair {
|
|
705
|
+
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
|
|
706
|
+
width: 100%;
|
|
707
|
+
}
|
|
708
|
+
.biz-card {
|
|
709
|
+
aspect-ratio: 7/4;
|
|
710
|
+
padding: 20px 24px;
|
|
711
|
+
display: flex;
|
|
712
|
+
flex-direction: column;
|
|
713
|
+
justify-content: space-between;
|
|
714
|
+
border: 1px solid var(--rule);
|
|
715
|
+
}
|
|
716
|
+
.biz-card.is-dark {
|
|
717
|
+
background: var(--slate);
|
|
718
|
+
color: var(--slate-text);
|
|
719
|
+
}
|
|
720
|
+
.biz-card.is-light {
|
|
721
|
+
background: var(--paper);
|
|
722
|
+
color: var(--ink);
|
|
723
|
+
border-color: var(--rule-light);
|
|
724
|
+
}
|
|
725
|
+
.biz-card .top {
|
|
726
|
+
display: flex; gap: 12px; align-items: center;
|
|
727
|
+
}
|
|
728
|
+
.biz-card .top svg { width: 26px; height: 26px; }
|
|
729
|
+
.biz-card .top .name {
|
|
730
|
+
font-family: var(--serif); font-weight: 400;
|
|
731
|
+
font-size: 16px; line-height: 1;
|
|
732
|
+
}
|
|
733
|
+
.biz-card.is-dark .top .name { color: var(--gold); }
|
|
734
|
+
.biz-card.is-light .top .name { color: var(--brass); }
|
|
735
|
+
.biz-card .person {
|
|
736
|
+
font-family: var(--serif); font-size: 14px;
|
|
737
|
+
}
|
|
738
|
+
.biz-card .person .what {
|
|
739
|
+
display: block;
|
|
740
|
+
font-family: var(--mono); font-size: 9px;
|
|
741
|
+
text-transform: uppercase; letter-spacing: 0.20em; margin-top: 4px;
|
|
742
|
+
}
|
|
743
|
+
.biz-card.is-dark .person .what { color: var(--gold-faint); }
|
|
744
|
+
.biz-card.is-light .person .what { color: var(--ink-soft); }
|
|
745
|
+
.biz-card .bot {
|
|
746
|
+
font-family: var(--mono); font-size: 9px;
|
|
747
|
+
text-transform: uppercase; letter-spacing: 0.18em;
|
|
748
|
+
display: flex; justify-content: space-between;
|
|
749
|
+
}
|
|
750
|
+
.biz-card.is-dark .bot { color: var(--slate-faint); }
|
|
751
|
+
.biz-card.is-light .bot { color: var(--ink-soft); }
|
|
752
|
+
|
|
753
|
+
/* ═════════════════════════════════════════════════════════ MISUSE */
|
|
754
|
+
.misuse-grid {
|
|
755
|
+
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
|
|
756
|
+
}
|
|
757
|
+
.mis {
|
|
758
|
+
background: var(--slate-soft); border: 1px solid var(--rule);
|
|
759
|
+
padding: 22px 22px 20px;
|
|
760
|
+
display: flex; flex-direction: column; gap: 16px;
|
|
761
|
+
}
|
|
762
|
+
.mis .frame {
|
|
763
|
+
background: var(--slate-deep); border: 1px solid var(--rule);
|
|
764
|
+
height: 160px;
|
|
765
|
+
display: flex; align-items: center; justify-content: center;
|
|
766
|
+
position: relative;
|
|
767
|
+
}
|
|
768
|
+
.mis .frame svg.mark { width: 86px; height: 86px; }
|
|
769
|
+
.mis .frame::after {
|
|
770
|
+
content: "";
|
|
771
|
+
position: absolute;
|
|
772
|
+
top: 10px; right: 10px;
|
|
773
|
+
width: 20px; height: 20px;
|
|
774
|
+
border: 1px solid var(--gold);
|
|
775
|
+
background: var(--slate-soft);
|
|
776
|
+
}
|
|
777
|
+
.mis .frame .x-mark {
|
|
778
|
+
position: absolute; top: 12px; right: 12px;
|
|
779
|
+
width: 16px; height: 16px;
|
|
780
|
+
color: var(--gold);
|
|
781
|
+
}
|
|
782
|
+
.mis .frame.is-good::after { border-color: #7DA363; }
|
|
783
|
+
.mis .frame.is-good .x-mark { color: #7DA363; }
|
|
784
|
+
.mis .lbl {
|
|
785
|
+
font-family: var(--mono); font-size: 11px;
|
|
786
|
+
color: var(--gold);
|
|
787
|
+
text-transform: uppercase; letter-spacing: 0.18em;
|
|
788
|
+
font-weight: 600;
|
|
789
|
+
}
|
|
790
|
+
.mis .lbl.ok { color: #7DA363; }
|
|
791
|
+
.mis .desc {
|
|
792
|
+
font-family: var(--serif); font-size: 14.5px;
|
|
793
|
+
color: var(--slate-text); line-height: 1.5;
|
|
794
|
+
}
|
|
795
|
+
.mis .desc em { color: var(--gold); font-style: italic; }
|
|
796
|
+
|
|
797
|
+
/* ═════════════════════════════════════════════════════════ FOOTER */
|
|
798
|
+
footer.bk-foot {
|
|
799
|
+
margin-top: 108px;
|
|
800
|
+
padding-top: 32px;
|
|
801
|
+
border-top: 1px solid var(--rule);
|
|
802
|
+
display: flex; justify-content: space-between;
|
|
803
|
+
font-family: var(--mono); font-size: 11px;
|
|
804
|
+
text-transform: uppercase; letter-spacing: 0.20em;
|
|
805
|
+
color: var(--gold);
|
|
806
|
+
}
|
|
807
|
+
footer.bk-foot .right { color: var(--slate-faint); }
|
|
808
|
+
</style>
|
|
809
|
+
|
|
810
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
811
|
+
The master mark · used as a reusable <symbol> so every size
|
|
812
|
+
renders from the SAME geometry. Outer ring r=46, inner edge
|
|
813
|
+
r=30 (thickness 16). Five seat cutouts on the inner edge, at
|
|
814
|
+
REGULAR PENTAGON positions (72° spacing), with asymmetric
|
|
815
|
+
radii that match the source artwork:
|
|
816
|
+
· top (0°) · r=3.5 · narrow notch
|
|
817
|
+
· upper-right (72°) · r=6.5 · medium bite
|
|
818
|
+
· upper-left (288°) · r=6.5 · medium bite
|
|
819
|
+
· lower-right (144°) · r=10 · large bite
|
|
820
|
+
· lower-left (216°) · r=10 · large bite
|
|
821
|
+
The bottom of the ring (180°) carries no cutout, so the gap
|
|
822
|
+
between the two lower seats reads as a solid "front" of the
|
|
823
|
+
table — the side facing the viewer.
|
|
824
|
+
════════════════════════════════════════════════════════════ -->
|
|
825
|
+
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
|
826
|
+
<defs>
|
|
827
|
+
<mask id="logoMask" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
828
|
+
<rect width="100" height="100" fill="black"/>
|
|
829
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
830
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
831
|
+
<circle cx="50" cy="20" r="4" fill="black"/>
|
|
832
|
+
<circle cx="78.5" cy="40.7" r="9" fill="black"/>
|
|
833
|
+
<circle cx="21.5" cy="40.7" r="9" fill="black"/>
|
|
834
|
+
<circle cx="67.6" cy="74.3" r="13" fill="black"/>
|
|
835
|
+
<circle cx="32.4" cy="74.3" r="13" fill="black"/>
|
|
836
|
+
</mask>
|
|
837
|
+
<symbol id="pbLogo" viewBox="0 0 100 100">
|
|
838
|
+
<rect width="100" height="100" fill="currentColor" mask="url(#logoMask)"/>
|
|
839
|
+
</symbol>
|
|
840
|
+
|
|
841
|
+
<!-- Simplified · 22 px and below · keeps the 5-seat pentagon but
|
|
842
|
+
enlarges the cuts so the geometry survives the pixel grid. -->
|
|
843
|
+
<mask id="logoMaskSmall" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
844
|
+
<rect width="100" height="100" fill="black"/>
|
|
845
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
846
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
847
|
+
<circle cx="50" cy="20" r="6" fill="black"/>
|
|
848
|
+
<circle cx="78.5" cy="40.7" r="11" fill="black"/>
|
|
849
|
+
<circle cx="21.5" cy="40.7" r="11" fill="black"/>
|
|
850
|
+
<circle cx="67.6" cy="74.3" r="14" fill="black"/>
|
|
851
|
+
<circle cx="32.4" cy="74.3" r="14" fill="black"/>
|
|
852
|
+
</mask>
|
|
853
|
+
<symbol id="pbLogoSm" viewBox="0 0 100 100">
|
|
854
|
+
<rect width="100" height="100" fill="currentColor" mask="url(#logoMaskSmall)"/>
|
|
855
|
+
</symbol>
|
|
856
|
+
</defs>
|
|
857
|
+
</svg>
|
|
858
|
+
</head>
|
|
859
|
+
<body>
|
|
860
|
+
<div class="container">
|
|
861
|
+
|
|
862
|
+
|
|
863
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
864
|
+
I. COVER
|
|
865
|
+
═══════════════════════════════════════════════════════════ -->
|
|
866
|
+
<header class="cover">
|
|
867
|
+
<div class="kicker">PrivateBoard · Visual Identity System · v1.0</div>
|
|
868
|
+
<div class="cover-grid">
|
|
869
|
+
<div>
|
|
870
|
+
<h1>A round table, <em>five seats carved into the rim</em></h1>
|
|
871
|
+
<p class="lede">The mark is a single annular form — a thick gold ring with five seats bitten out of its inner edge. The seats are negative space, not added shapes. Their sizes encode a hierarchy: the top seat is the smallest (the question), the lower seats are the largest (the human side of the table). The system that extends from this — palette, type, lockups, icon family — keeps the editorial register: warm slate paper, champagne gold, restraint over ornament.</p>
|
|
872
|
+
<div class="meta">
|
|
873
|
+
<div><div class="l">— version</div><div class="v">v1.0</div></div>
|
|
874
|
+
<div><div class="l">— authored</div><div class="v">2026 · 05 · 14</div></div>
|
|
875
|
+
<div><div class="l">— sections</div><div class="v">nine</div></div>
|
|
876
|
+
</div>
|
|
877
|
+
</div>
|
|
878
|
+
<div class="cover-stage">
|
|
879
|
+
<svg style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
880
|
+
<div class="wm">private board</div>
|
|
881
|
+
<div class="tag">ROUND TABLE<span class="sep">/</span>FIVE SEATS<span class="sep">/</span>PRIVATE CONSENSUS</div>
|
|
882
|
+
</div>
|
|
883
|
+
</div>
|
|
884
|
+
</header>
|
|
885
|
+
|
|
886
|
+
|
|
887
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
888
|
+
II. THE MARK · construction & anatomy
|
|
889
|
+
═══════════════════════════════════════════════════════════ -->
|
|
890
|
+
<section>
|
|
891
|
+
<div class="sec-head">
|
|
892
|
+
<div>
|
|
893
|
+
<div class="sec-num">01 · the mark</div>
|
|
894
|
+
<h2>Construction & <em>anatomy</em></h2>
|
|
895
|
+
</div>
|
|
896
|
+
<p class="sec-blurb">The mark is built on a 100-unit grid. An outer circle at <em>r=46</em>, an inner cutout at <em>r=30</em> — together they describe a ring of <em>16-unit thickness</em>. Five seat cutouts sit on the inner edge at <em>regular pentagon positions</em> (72° apart, top-anchored), with deliberately unequal radii: top is <em>4</em>, upper sides <em>9</em>, lower sides <em>13</em>. The lower cuts nearly slice through the ring — only a 3-unit outer band remains. The bottom of the ring (180°) carries <em>no</em> cutout — the solid front face is the side the viewer sits on.</p>
|
|
897
|
+
</div>
|
|
898
|
+
|
|
899
|
+
<div class="construction-stage">
|
|
900
|
+
<div class="canvas">
|
|
901
|
+
<!-- Construction diagram · same mask + gold rect, plus visible guides -->
|
|
902
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);">
|
|
903
|
+
<!-- Crosshair -->
|
|
904
|
+
<line x1="50" y1="2" x2="50" y2="98" stroke="#3A2F1A" stroke-width="0.18" stroke-dasharray="0.6 0.8"/>
|
|
905
|
+
<line x1="2" y1="50" x2="98" y2="50" stroke="#3A2F1A" stroke-width="0.18" stroke-dasharray="0.6 0.8"/>
|
|
906
|
+
<!-- Outer + inner reference circles -->
|
|
907
|
+
<circle cx="50" cy="50" r="46" fill="none" stroke="#3A2F1A" stroke-width="0.18" stroke-dasharray="0.6 0.8" opacity="0.6"/>
|
|
908
|
+
<circle cx="50" cy="50" r="30" fill="none" stroke="#3A2F1A" stroke-width="0.18" stroke-dasharray="0.6 0.8" opacity="0.6"/>
|
|
909
|
+
<!-- Radials to each seat (regular pentagon, 72° spacing) -->
|
|
910
|
+
<line x1="50" y1="50" x2="50" y2="20" stroke="#3A2F1A" stroke-width="0.18" opacity="0.45"/>
|
|
911
|
+
<line x1="50" y1="50" x2="78.5" y2="40.7" stroke="#3A2F1A" stroke-width="0.18" opacity="0.45"/>
|
|
912
|
+
<line x1="50" y1="50" x2="21.5" y2="40.7" stroke="#3A2F1A" stroke-width="0.18" opacity="0.45"/>
|
|
913
|
+
<line x1="50" y1="50" x2="67.6" y2="74.3" stroke="#3A2F1A" stroke-width="0.45" opacity="0.65"/>
|
|
914
|
+
<line x1="50" y1="50" x2="32.4" y2="74.3" stroke="#3A2F1A" stroke-width="0.45" opacity="0.65"/>
|
|
915
|
+
<!-- The mark itself -->
|
|
916
|
+
<use href="#pbLogo" width="100" height="100"/>
|
|
917
|
+
<!-- Annotations -->
|
|
918
|
+
<text x="51" y="48" font-family="JetBrains Mono, monospace" font-size="1.9" fill="#8D7740">R 46 · R 30</text>
|
|
919
|
+
<text x="51" y="19" font-family="JetBrains Mono, monospace" font-size="1.9" fill="#8D7740">r 4 · 0°</text>
|
|
920
|
+
<text x="80" y="39" font-family="JetBrains Mono, monospace" font-size="1.9" fill="#8D7740">r 9 · 72°</text>
|
|
921
|
+
<text x="70" y="78" font-family="JetBrains Mono, monospace" font-size="1.9" fill="#A88454">r 13 · 144°</text>
|
|
922
|
+
<text x="14" y="78" font-family="JetBrains Mono, monospace" font-size="1.9" fill="#A88454">216°</text>
|
|
923
|
+
<text x="6" y="39" font-family="JetBrains Mono, monospace" font-size="1.9" fill="#8D7740">288°</text>
|
|
924
|
+
</svg>
|
|
925
|
+
</div>
|
|
926
|
+
<div class="anatomy">
|
|
927
|
+
<h3>Five seats, <em>unequally weighted</em></h3>
|
|
928
|
+
<ul>
|
|
929
|
+
<li>
|
|
930
|
+
<span class="tag">— grid</span>
|
|
931
|
+
<span><b>100 × 100</b> units. Centre at (50, 50). All seat positions resolve to <em>regular pentagon</em> angles (72° apart) at the inner edge (r=30 from centre).</span>
|
|
932
|
+
</li>
|
|
933
|
+
<li>
|
|
934
|
+
<span class="tag">— ring</span>
|
|
935
|
+
<span>Outer at <b>r=46</b>, inner cutout at <b>r=30</b>. The ring is <em>16 units thick</em>. Hollow centre stays dark; the ring carries the mark.</span>
|
|
936
|
+
</li>
|
|
937
|
+
<li>
|
|
938
|
+
<span class="tag">— top seat</span>
|
|
939
|
+
<span>0° · r=4 · <b>smallest</b>. A narrow notch into the inner rim — the question being asked, the chair speaking.</span>
|
|
940
|
+
</li>
|
|
941
|
+
<li>
|
|
942
|
+
<span class="tag">— upper sides</span>
|
|
943
|
+
<span>72° / 288° · r=9 · the AI directors. Mid-depth bites — the inner half of the ring opens up.</span>
|
|
944
|
+
</li>
|
|
945
|
+
<li>
|
|
946
|
+
<span class="tag">— lower sides</span>
|
|
947
|
+
<span>144° / 216° · <em>r=13</em> · the <em>human side</em>. Largest bites — they slice through 81% of the ring, leaving only a <em>3-unit outer sliver</em>. Chair (system) + user (you).</span>
|
|
948
|
+
</li>
|
|
949
|
+
<li>
|
|
950
|
+
<span class="tag">— front</span>
|
|
951
|
+
<span>The bottom of the ring (180°) carries <em>no</em> cutout. The solid front face is the side that <b>faces the viewer</b> — a deliberate gap in the pentagon rotation.</span>
|
|
952
|
+
</li>
|
|
953
|
+
<li>
|
|
954
|
+
<span class="tag">— colour</span>
|
|
955
|
+
<span>Single fill across the ring · champagne gold on dark, deep brass on light. The cutouts inherit the background — they are <em>not</em> drawn.</span>
|
|
956
|
+
</li>
|
|
957
|
+
</ul>
|
|
958
|
+
</div>
|
|
959
|
+
</div>
|
|
960
|
+
</section>
|
|
961
|
+
|
|
962
|
+
|
|
963
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
964
|
+
III. SIZE SCALE
|
|
965
|
+
═══════════════════════════════════════════════════════════ -->
|
|
966
|
+
<section>
|
|
967
|
+
<div class="sec-head">
|
|
968
|
+
<div>
|
|
969
|
+
<div class="sec-num">02 · size scale</div>
|
|
970
|
+
<h2>Five sizes, one <em>simplification</em></h2>
|
|
971
|
+
</div>
|
|
972
|
+
<p class="sec-blurb">From 240-pixel hero to 16-pixel favicon. The full mark (5 seats, asymmetric radii) holds down to <em>40 px</em>. At 22 px and below, the four upper seats collapse into a simplified 3-cut form — one open top notch + two deep lower bites. The hierarchy is preserved in spirit (top is small, sides are large) but the asymmetric pentagon resolves cleanly at favicon scale.</p>
|
|
973
|
+
</div>
|
|
974
|
+
|
|
975
|
+
<div class="size-scale">
|
|
976
|
+
<div class="cell">
|
|
977
|
+
<div class="frame">
|
|
978
|
+
<svg width="120" height="120" style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
979
|
+
</div>
|
|
980
|
+
<div class="cap"><b>120 px</b>hero</div>
|
|
981
|
+
</div>
|
|
982
|
+
<div class="cell">
|
|
983
|
+
<div class="frame">
|
|
984
|
+
<svg width="80" height="80" style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
985
|
+
</div>
|
|
986
|
+
<div class="cap"><b>80 px</b>app icon</div>
|
|
987
|
+
</div>
|
|
988
|
+
<div class="cell">
|
|
989
|
+
<div class="frame">
|
|
990
|
+
<svg width="48" height="48" style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
991
|
+
</div>
|
|
992
|
+
<div class="cap"><b>48 px</b>menubar</div>
|
|
993
|
+
</div>
|
|
994
|
+
<div class="cell">
|
|
995
|
+
<div class="frame">
|
|
996
|
+
<svg width="22" height="22" style="color: var(--gold);"><use href="#pbLogoSm"/></svg>
|
|
997
|
+
</div>
|
|
998
|
+
<div class="cap"><b>22 px</b>simplified</div>
|
|
999
|
+
</div>
|
|
1000
|
+
<div class="cell">
|
|
1001
|
+
<div class="frame">
|
|
1002
|
+
<svg width="16" height="16" style="color: var(--gold);"><use href="#pbLogoSm"/></svg>
|
|
1003
|
+
</div>
|
|
1004
|
+
<div class="cap"><b>16 px</b>minimum</div>
|
|
1005
|
+
</div>
|
|
1006
|
+
</div>
|
|
1007
|
+
</section>
|
|
1008
|
+
|
|
1009
|
+
|
|
1010
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1011
|
+
IV. CLEAR SPACE
|
|
1012
|
+
═══════════════════════════════════════════════════════════ -->
|
|
1013
|
+
<section>
|
|
1014
|
+
<div class="sec-head">
|
|
1015
|
+
<div>
|
|
1016
|
+
<div class="sec-num">03 · clear space</div>
|
|
1017
|
+
<h2>The room the mark <em>asks for</em></h2>
|
|
1018
|
+
</div>
|
|
1019
|
+
<p class="sec-blurb">Always leave at least <em>one ring-thickness</em> of empty space on every side. That's <em>16 grid units</em> — the same width as the ring itself, mirroring the form's own proportions. No type, image edge, or sibling mark crosses into the dashed frame.</p>
|
|
1020
|
+
</div>
|
|
1021
|
+
|
|
1022
|
+
<div class="clear-stage">
|
|
1023
|
+
<div class="clear-canvas">
|
|
1024
|
+
<svg viewBox="0 0 132 132" style="color: var(--gold);">
|
|
1025
|
+
<!-- Clear-space frame at 16u clearance · safe area 100×100 in a 132×132 canvas -->
|
|
1026
|
+
<rect x="16" y="16" width="100" height="100" fill="none" stroke="#8D7740" stroke-width="0.4" stroke-dasharray="1.2 1.4" opacity="0.7"/>
|
|
1027
|
+
<!-- Clearance tick marks -->
|
|
1028
|
+
<line x1="6" y1="66" x2="16" y2="66" stroke="#8D7740" stroke-width="0.4"/>
|
|
1029
|
+
<line x1="116" y1="66" x2="126" y2="66" stroke="#8D7740" stroke-width="0.4"/>
|
|
1030
|
+
<line x1="66" y1="6" x2="66" y2="16" stroke="#8D7740" stroke-width="0.4"/>
|
|
1031
|
+
<line x1="66" y1="116" x2="66" y2="126" stroke="#8D7740" stroke-width="0.4"/>
|
|
1032
|
+
<text x="66" y="4.5" font-family="JetBrains Mono, monospace" font-size="2.6" fill="#8D7740" text-anchor="middle">1 ring</text>
|
|
1033
|
+
<text x="128" y="67" font-family="JetBrains Mono, monospace" font-size="2.6" fill="#8D7740">1 ring</text>
|
|
1034
|
+
<g transform="translate(16, 16)">
|
|
1035
|
+
<use href="#pbLogo" width="100" height="100"/>
|
|
1036
|
+
</g>
|
|
1037
|
+
</svg>
|
|
1038
|
+
</div>
|
|
1039
|
+
<div>
|
|
1040
|
+
<h3>One <em>ring-thickness</em>, every side</h3>
|
|
1041
|
+
<p>The clearance unit is the ring's own thickness — 16 grid units at default scale. Symmetric on all four sides. Above and below the mark are the highest-violation edges (tagline + sibling lockups crowd those zones first).</p>
|
|
1042
|
+
<p>Print and digital both honour this. When the mark is shrunk to favicon scale, the dashed frame scales with it — half a pixel of crowding at 16 px is the same visual violation as 16 px of crowding at hero scale.</p>
|
|
1043
|
+
<div class="law">Never let any element enter the dashed frame</div>
|
|
1044
|
+
</div>
|
|
1045
|
+
</div>
|
|
1046
|
+
</section>
|
|
1047
|
+
|
|
1048
|
+
|
|
1049
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1050
|
+
V. COLOUR
|
|
1051
|
+
═══════════════════════════════════════════════════════════ -->
|
|
1052
|
+
<section>
|
|
1053
|
+
<div class="sec-head">
|
|
1054
|
+
<div>
|
|
1055
|
+
<div class="sec-num">04 · colour</div>
|
|
1056
|
+
<h2>Warm near-black, <em>one accent</em></h2>
|
|
1057
|
+
</div>
|
|
1058
|
+
<p class="sec-blurb">The palette is monochromatic. The primary register is <em>warm near-black slate</em> with a single accent — <em>champagne gold</em>. A deep brass variant carries the mark on cream paper for print. There is no secondary chromatic accent. Greys are warm-toned (yellow-brown undertone, R ≥ G > B), never cool blues.</p>
|
|
1059
|
+
</div>
|
|
1060
|
+
|
|
1061
|
+
<div class="swatches">
|
|
1062
|
+
<div class="swatch">
|
|
1063
|
+
<div class="chip" style="background: #0F0E0C;"></div>
|
|
1064
|
+
<div class="body">
|
|
1065
|
+
<div class="role">— slate · primary surface</div>
|
|
1066
|
+
<div class="name">Council slate</div>
|
|
1067
|
+
<div class="specs">#0F0E0C<br/>rgb 15 14 12<br/>cmyk 80·78·82·90</div>
|
|
1068
|
+
</div>
|
|
1069
|
+
</div>
|
|
1070
|
+
<div class="swatch">
|
|
1071
|
+
<div class="chip" style="background: #1A1916;"></div>
|
|
1072
|
+
<div class="body">
|
|
1073
|
+
<div class="role">— slate · soft</div>
|
|
1074
|
+
<div class="name">Lifted slate</div>
|
|
1075
|
+
<div class="specs">#1A1916<br/>rgb 26 25 22<br/>cmyk 78·76·82·90</div>
|
|
1076
|
+
</div>
|
|
1077
|
+
</div>
|
|
1078
|
+
<div class="swatch">
|
|
1079
|
+
<div class="chip" style="background: #060503;"></div>
|
|
1080
|
+
<div class="body">
|
|
1081
|
+
<div class="role">— slate · deep</div>
|
|
1082
|
+
<div class="name">Deep slate</div>
|
|
1083
|
+
<div class="specs">#060503<br/>rgb 6 5 3<br/>cmyk 88·85·88·92</div>
|
|
1084
|
+
</div>
|
|
1085
|
+
</div>
|
|
1086
|
+
<div class="swatch">
|
|
1087
|
+
<div class="chip" style="background: #C5A05B;"></div>
|
|
1088
|
+
<div class="body">
|
|
1089
|
+
<div class="role">— gold · on dark</div>
|
|
1090
|
+
<div class="name">Champagne gold</div>
|
|
1091
|
+
<div class="specs">#C5A05B<br/>rgb 197 160 91<br/>cmyk 18·30·72·08</div>
|
|
1092
|
+
</div>
|
|
1093
|
+
</div>
|
|
1094
|
+
<div class="swatch">
|
|
1095
|
+
<div class="chip" style="background: #8D7740;"></div>
|
|
1096
|
+
<div class="body">
|
|
1097
|
+
<div class="role">— gold · faint</div>
|
|
1098
|
+
<div class="name">Mid champagne</div>
|
|
1099
|
+
<div class="specs">#8D7740<br/>rgb 141 119 64<br/>cmyk 32·40·86·30</div>
|
|
1100
|
+
</div>
|
|
1101
|
+
</div>
|
|
1102
|
+
<div class="swatch">
|
|
1103
|
+
<div class="chip" style="background: #7A5A24;"></div>
|
|
1104
|
+
<div class="body">
|
|
1105
|
+
<div class="role">— brass · on light</div>
|
|
1106
|
+
<div class="name">Deep brass</div>
|
|
1107
|
+
<div class="specs">#7A5A24<br/>rgb 122 90 36<br/>cmyk 28·48·100·40</div>
|
|
1108
|
+
</div>
|
|
1109
|
+
</div>
|
|
1110
|
+
<div class="swatch">
|
|
1111
|
+
<div class="chip is-light" style="background: #F4EFE6;"></div>
|
|
1112
|
+
<div class="body">
|
|
1113
|
+
<div class="role">— paper · light surface</div>
|
|
1114
|
+
<div class="name">Vellum cream</div>
|
|
1115
|
+
<div class="specs">#F4EFE6<br/>rgb 244 239 230<br/>cmyk 02·04·08·00</div>
|
|
1116
|
+
</div>
|
|
1117
|
+
</div>
|
|
1118
|
+
<div class="swatch">
|
|
1119
|
+
<div class="chip" style="background: #D8CDB8;"></div>
|
|
1120
|
+
<div class="body">
|
|
1121
|
+
<div class="role">— text · on dark</div>
|
|
1122
|
+
<div class="name">Wheat</div>
|
|
1123
|
+
<div class="specs">#D8CDB8<br/>rgb 216 205 184<br/>cmyk 14·18·30·02</div>
|
|
1124
|
+
</div>
|
|
1125
|
+
</div>
|
|
1126
|
+
</div>
|
|
1127
|
+
</section>
|
|
1128
|
+
|
|
1129
|
+
|
|
1130
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1131
|
+
VI. WORDMARK & LOCKUPS
|
|
1132
|
+
═══════════════════════════════════════════════════════════ -->
|
|
1133
|
+
<section>
|
|
1134
|
+
<div class="sec-head">
|
|
1135
|
+
<div>
|
|
1136
|
+
<div class="sec-num">05 · wordmark & lockups</div>
|
|
1137
|
+
<h2>private board, <em>three arrangements</em></h2>
|
|
1138
|
+
</div>
|
|
1139
|
+
<p class="sec-blurb">The wordmark is a single serif word: <em>private board</em> · lowercase · Charter or its system equivalent · weight 400 · slight optical tightening at display sizes only. The tagline rides beneath in mono uppercase with a <em>slash separator</em>: ROUND TABLE / FIVE SEATS / PRIVATE CONSENSUS. Lowercase preserves the editorial register — no marketing-deck Title Case anywhere.</p>
|
|
1140
|
+
</div>
|
|
1141
|
+
|
|
1142
|
+
<div class="lockup-grid">
|
|
1143
|
+
|
|
1144
|
+
<!-- Primary · vertical mark + wordmark + tagline -->
|
|
1145
|
+
<div class="lockup-tile">
|
|
1146
|
+
<div class="stage">
|
|
1147
|
+
<div class="lprime">
|
|
1148
|
+
<svg style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
1149
|
+
<div class="wm">private board</div>
|
|
1150
|
+
<div class="tag">ROUND TABLE<span class="sep">/</span>FIVE SEATS<span class="sep">/</span>PRIVATE CONSENSUS</div>
|
|
1151
|
+
</div>
|
|
1152
|
+
</div>
|
|
1153
|
+
<div class="meta">
|
|
1154
|
+
<div class="l">primary · vertical with tagline</div>
|
|
1155
|
+
<div class="n">Cover · splash · OG hero</div>
|
|
1156
|
+
<div class="desc">The signature lockup. Use whenever the mark gets full visual real estate. Mark sits one wordmark-cap-height above the wordmark; tagline floats one mono-line-height below in gold-faint.</div>
|
|
1157
|
+
</div>
|
|
1158
|
+
</div>
|
|
1159
|
+
|
|
1160
|
+
<!-- Horizontal -->
|
|
1161
|
+
<div class="lockup-tile">
|
|
1162
|
+
<div class="stage">
|
|
1163
|
+
<div class="lhoriz">
|
|
1164
|
+
<svg style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
1165
|
+
<div class="wm">
|
|
1166
|
+
private board
|
|
1167
|
+
<span class="tag">ROUND TABLE<span class="sep">/</span>FIVE SEATS</span>
|
|
1168
|
+
</div>
|
|
1169
|
+
</div>
|
|
1170
|
+
</div>
|
|
1171
|
+
<div class="meta">
|
|
1172
|
+
<div class="l">horizontal · header</div>
|
|
1173
|
+
<div class="n">App header · email signature</div>
|
|
1174
|
+
<div class="desc">For horizontal bands (top of a doc, a footer rule). Mark height matches wordmark cap-height; abbreviated tagline (2 of 3 segments) under the wordmark.</div>
|
|
1175
|
+
</div>
|
|
1176
|
+
</div>
|
|
1177
|
+
|
|
1178
|
+
<!-- Wordmark only -->
|
|
1179
|
+
<div class="lockup-tile">
|
|
1180
|
+
<div class="stage">
|
|
1181
|
+
<div class="wmo">private board</div>
|
|
1182
|
+
</div>
|
|
1183
|
+
<div class="meta">
|
|
1184
|
+
<div class="l">wordmark · no mark</div>
|
|
1185
|
+
<div class="n">Inline · running prose</div>
|
|
1186
|
+
<div class="desc">For body text mentions, narrow footers, or anywhere the mark would crowd. Lowercase Charter serif carries the brand alone. No italic, no caps.</div>
|
|
1187
|
+
</div>
|
|
1188
|
+
</div>
|
|
1189
|
+
|
|
1190
|
+
</div>
|
|
1191
|
+
</section>
|
|
1192
|
+
|
|
1193
|
+
|
|
1194
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1195
|
+
VII. TYPOGRAPHY
|
|
1196
|
+
═══════════════════════════════════════════════════════════ -->
|
|
1197
|
+
<section>
|
|
1198
|
+
<div class="sec-head">
|
|
1199
|
+
<div>
|
|
1200
|
+
<div class="sec-num">06 · typography</div>
|
|
1201
|
+
<h2>Three families, one <em>register</em></h2>
|
|
1202
|
+
</div>
|
|
1203
|
+
<p class="sec-blurb">A literary serif for headlines, body, and italic emphasis. A precise sans for UI labels and meta. A structural mono for kickers and tags. The serif italic <em>em</em> in champagne gold is the single typographic gesture that ties every doc to the brand.</p>
|
|
1204
|
+
</div>
|
|
1205
|
+
|
|
1206
|
+
<div class="panel">
|
|
1207
|
+
<div class="type-stack">
|
|
1208
|
+
<div class="lhs">
|
|
1209
|
+
<div class="role">display + body + emphasis</div>
|
|
1210
|
+
<div class="name">Charter</div>
|
|
1211
|
+
<div class="stack-list">font-family:<br/>"Charter", "Tiempos Text", "Iowan Old Style", Georgia, serif</div>
|
|
1212
|
+
</div>
|
|
1213
|
+
<div class="rhs">
|
|
1214
|
+
<div class="sample-serif">After convening five voices and attempting to take each in turn, we arrived <em>less confident</em> than we began.</div>
|
|
1215
|
+
<div class="alphas">AaBbCcDdEe · 0123456789 · italic</div>
|
|
1216
|
+
</div>
|
|
1217
|
+
</div>
|
|
1218
|
+
|
|
1219
|
+
<div class="type-stack">
|
|
1220
|
+
<div class="lhs">
|
|
1221
|
+
<div class="role">ui · labels · meta</div>
|
|
1222
|
+
<div class="name">SF Pro · Söhne</div>
|
|
1223
|
+
<div class="stack-list">font-family:<br/>-apple-system, "SF Pro Text", "Söhne", "Inter", system-ui, sans-serif</div>
|
|
1224
|
+
</div>
|
|
1225
|
+
<div class="rhs">
|
|
1226
|
+
<div class="sample-sans">Five directors were convened. Three returned <em>aligned</em>; two dissented. The transcript opens with the question and closes with what the room could not resolve.</div>
|
|
1227
|
+
<div class="alphas">AaBbCcDdEe · 0123456789 · italic / 500 / 600</div>
|
|
1228
|
+
</div>
|
|
1229
|
+
</div>
|
|
1230
|
+
|
|
1231
|
+
<div class="type-stack">
|
|
1232
|
+
<div class="lhs">
|
|
1233
|
+
<div class="role">kickers · tags · numerals</div>
|
|
1234
|
+
<div class="name">SF Mono · JetBrains</div>
|
|
1235
|
+
<div class="stack-list">font-family:<br/>"SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace</div>
|
|
1236
|
+
</div>
|
|
1237
|
+
<div class="rhs">
|
|
1238
|
+
<div class="sample-mono">ROUND TABLE / FIVE SEATS / PRIVATE CONSENSUS · 22:14 UTC · 014</div>
|
|
1239
|
+
<div class="alphas">AABBCCDDEE · 0123456789 · 0.20em tracking</div>
|
|
1240
|
+
</div>
|
|
1241
|
+
</div>
|
|
1242
|
+
</div>
|
|
1243
|
+
</section>
|
|
1244
|
+
|
|
1245
|
+
|
|
1246
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1247
|
+
VIII. ICON FAMILY
|
|
1248
|
+
═══════════════════════════════════════════════════════════ -->
|
|
1249
|
+
<section>
|
|
1250
|
+
<div class="sec-head">
|
|
1251
|
+
<div>
|
|
1252
|
+
<div class="sec-num">07 · icon family</div>
|
|
1253
|
+
<h2>Ten icons, one <em>grammar</em></h2>
|
|
1254
|
+
</div>
|
|
1255
|
+
<p class="sec-blurb">Every icon inherits the master geometry — ring + cutouts. State is expressed by what happens to the <em>seats</em> (which are carved, which deepen, which disappear) and never by adding ornament outside the ring.</p>
|
|
1256
|
+
</div>
|
|
1257
|
+
|
|
1258
|
+
<div class="icons-grid">
|
|
1259
|
+
|
|
1260
|
+
<!-- 1 · convene -->
|
|
1261
|
+
<div class="icon-tile">
|
|
1262
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
1263
|
+
<div class="nm"><em>convene</em></div>
|
|
1264
|
+
<div class="d">— full room · master</div>
|
|
1265
|
+
</div>
|
|
1266
|
+
|
|
1267
|
+
<!-- 2 · panel · only upper 3 seats (top + 72° + 288°) -->
|
|
1268
|
+
<div class="icon-tile">
|
|
1269
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1270
|
+
<defs>
|
|
1271
|
+
<mask id="m-panel" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
1272
|
+
<rect width="100" height="100" fill="black"/>
|
|
1273
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
1274
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
1275
|
+
<circle cx="50" cy="20" r="5" fill="black"/>
|
|
1276
|
+
<circle cx="78.5" cy="40.7" r="8" fill="black"/>
|
|
1277
|
+
<circle cx="21.5" cy="40.7" r="8" fill="black"/>
|
|
1278
|
+
</mask>
|
|
1279
|
+
</defs>
|
|
1280
|
+
<rect width="100" height="100" fill="currentColor" mask="url(#m-panel)"/>
|
|
1281
|
+
</svg>
|
|
1282
|
+
<div class="nm"><em>panel</em></div>
|
|
1283
|
+
<div class="d">— three across · the AI</div>
|
|
1284
|
+
</div>
|
|
1285
|
+
|
|
1286
|
+
<!-- 3 · chair · only top seat, enlarged -->
|
|
1287
|
+
<div class="icon-tile">
|
|
1288
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1289
|
+
<defs>
|
|
1290
|
+
<mask id="m-chair" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
1291
|
+
<rect width="100" height="100" fill="black"/>
|
|
1292
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
1293
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
1294
|
+
<circle cx="50" cy="20" r="8" fill="black"/>
|
|
1295
|
+
</mask>
|
|
1296
|
+
</defs>
|
|
1297
|
+
<rect width="100" height="100" fill="currentColor" mask="url(#m-chair)"/>
|
|
1298
|
+
</svg>
|
|
1299
|
+
<div class="nm"><em>chair</em></div>
|
|
1300
|
+
<div class="d">— one seat · the system</div>
|
|
1301
|
+
</div>
|
|
1302
|
+
|
|
1303
|
+
<!-- 4 · user · only lower-left, large -->
|
|
1304
|
+
<div class="icon-tile">
|
|
1305
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1306
|
+
<defs>
|
|
1307
|
+
<mask id="m-user" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
1308
|
+
<rect width="100" height="100" fill="black"/>
|
|
1309
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
1310
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
1311
|
+
<circle cx="32.4" cy="74.3" r="12" fill="black"/>
|
|
1312
|
+
</mask>
|
|
1313
|
+
</defs>
|
|
1314
|
+
<rect width="100" height="100" fill="currentColor" mask="url(#m-user)"/>
|
|
1315
|
+
</svg>
|
|
1316
|
+
<div class="nm"><em>user</em></div>
|
|
1317
|
+
<div class="d">— you · who convened</div>
|
|
1318
|
+
</div>
|
|
1319
|
+
|
|
1320
|
+
<!-- 5 · speak · all 5 + halo above top -->
|
|
1321
|
+
<div class="icon-tile">
|
|
1322
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1323
|
+
<use href="#pbLogo"/>
|
|
1324
|
+
<circle cx="50" cy="6" r="2.4" fill="currentColor" opacity="0.5"/>
|
|
1325
|
+
<circle cx="50" cy="2" r="1.6" fill="currentColor" opacity="0.3"/>
|
|
1326
|
+
</svg>
|
|
1327
|
+
<div class="nm"><em>speak</em></div>
|
|
1328
|
+
<div class="d">— halo above the top seat</div>
|
|
1329
|
+
</div>
|
|
1330
|
+
|
|
1331
|
+
<!-- 6 · listen · all 5 seats shallow (every radius reduced) -->
|
|
1332
|
+
<div class="icon-tile">
|
|
1333
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1334
|
+
<defs>
|
|
1335
|
+
<mask id="m-listen" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
1336
|
+
<rect width="100" height="100" fill="black"/>
|
|
1337
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
1338
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
1339
|
+
<circle cx="50" cy="20" r="2.5" fill="black"/>
|
|
1340
|
+
<circle cx="78.5" cy="40.7" r="4" fill="black"/>
|
|
1341
|
+
<circle cx="21.5" cy="40.7" r="4" fill="black"/>
|
|
1342
|
+
<circle cx="67.6" cy="74.3" r="6" fill="black"/>
|
|
1343
|
+
<circle cx="32.4" cy="74.3" r="6" fill="black"/>
|
|
1344
|
+
</mask>
|
|
1345
|
+
</defs>
|
|
1346
|
+
<rect width="100" height="100" fill="currentColor" mask="url(#m-listen)"/>
|
|
1347
|
+
</svg>
|
|
1348
|
+
<div class="nm"><em>listen</em></div>
|
|
1349
|
+
<div class="d">— every seat shallower</div>
|
|
1350
|
+
</div>
|
|
1351
|
+
|
|
1352
|
+
<!-- 7 · vote · 3 deep (top + upper-right + lower-right) + 2 shallow (left side) -->
|
|
1353
|
+
<div class="icon-tile">
|
|
1354
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1355
|
+
<defs>
|
|
1356
|
+
<mask id="m-vote" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
1357
|
+
<rect width="100" height="100" fill="black"/>
|
|
1358
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
1359
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
1360
|
+
<circle cx="50" cy="20" r="4" fill="black"/>
|
|
1361
|
+
<circle cx="78.5" cy="40.7" r="7" fill="black"/>
|
|
1362
|
+
<circle cx="67.6" cy="74.3" r="11" fill="black"/>
|
|
1363
|
+
<circle cx="21.5" cy="40.7" r="2.5" fill="black"/>
|
|
1364
|
+
<circle cx="32.4" cy="74.3" r="3.5" fill="black"/>
|
|
1365
|
+
</mask>
|
|
1366
|
+
</defs>
|
|
1367
|
+
<rect width="100" height="100" fill="currentColor" mask="url(#m-vote)"/>
|
|
1368
|
+
</svg>
|
|
1369
|
+
<div class="nm"><em>vote</em></div>
|
|
1370
|
+
<div class="d">— three for · two against</div>
|
|
1371
|
+
</div>
|
|
1372
|
+
|
|
1373
|
+
<!-- 8 · solo · top seat only -->
|
|
1374
|
+
<div class="icon-tile">
|
|
1375
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1376
|
+
<defs>
|
|
1377
|
+
<mask id="m-solo" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
1378
|
+
<rect width="100" height="100" fill="black"/>
|
|
1379
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
1380
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
1381
|
+
<circle cx="50" cy="20" r="5" fill="black"/>
|
|
1382
|
+
</mask>
|
|
1383
|
+
</defs>
|
|
1384
|
+
<rect width="100" height="100" fill="currentColor" mask="url(#m-solo)"/>
|
|
1385
|
+
</svg>
|
|
1386
|
+
<div class="nm"><em>solo</em></div>
|
|
1387
|
+
<div class="d">— one seat · an empty room</div>
|
|
1388
|
+
</div>
|
|
1389
|
+
|
|
1390
|
+
<!-- 9 · adjourn · ring only, no seats -->
|
|
1391
|
+
<div class="icon-tile">
|
|
1392
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1393
|
+
<defs>
|
|
1394
|
+
<mask id="m-adjourn" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
1395
|
+
<rect width="100" height="100" fill="black"/>
|
|
1396
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
1397
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
1398
|
+
</mask>
|
|
1399
|
+
</defs>
|
|
1400
|
+
<rect width="100" height="100" fill="currentColor" mask="url(#m-adjourn)" opacity="0.55"/>
|
|
1401
|
+
</svg>
|
|
1402
|
+
<div class="nm"><em>adjourn</em></div>
|
|
1403
|
+
<div class="d">— seats have left · room dims</div>
|
|
1404
|
+
</div>
|
|
1405
|
+
|
|
1406
|
+
<!-- 10 · recommend · full mark + center check -->
|
|
1407
|
+
<div class="icon-tile">
|
|
1408
|
+
<svg viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1409
|
+
<use href="#pbLogo"/>
|
|
1410
|
+
<path d="M 38 50 L 46 58 L 62 42" stroke="currentColor" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1411
|
+
</svg>
|
|
1412
|
+
<div class="nm"><em>recommend</em></div>
|
|
1413
|
+
<div class="d">— centre check · settled</div>
|
|
1414
|
+
</div>
|
|
1415
|
+
|
|
1416
|
+
</div>
|
|
1417
|
+
</section>
|
|
1418
|
+
|
|
1419
|
+
|
|
1420
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1421
|
+
IX. APPLICATION
|
|
1422
|
+
═══════════════════════════════════════════════════════════ -->
|
|
1423
|
+
<section>
|
|
1424
|
+
<div class="sec-head">
|
|
1425
|
+
<div>
|
|
1426
|
+
<div class="sec-num">08 · application</div>
|
|
1427
|
+
<h2>The mark in <em>five places</em></h2>
|
|
1428
|
+
</div>
|
|
1429
|
+
<p class="sec-blurb">Favicon, app icon, social card, letterhead, business card. Each reuses the same geometry · what changes is the surface (slate / paper), the scale (16 px → 1200 px), and which lockup carries the brand.</p>
|
|
1430
|
+
</div>
|
|
1431
|
+
|
|
1432
|
+
<div class="app-grid">
|
|
1433
|
+
|
|
1434
|
+
<!-- favicon strip -->
|
|
1435
|
+
<div class="app-tile">
|
|
1436
|
+
<div class="stage">
|
|
1437
|
+
<div class="favicons">
|
|
1438
|
+
<div class="fav fav-16">
|
|
1439
|
+
<div class="swatch">
|
|
1440
|
+
<svg width="16" height="16" style="color: var(--gold);"><use href="#pbLogoSm"/></svg>
|
|
1441
|
+
</div>
|
|
1442
|
+
<div class="cap">16 PX</div>
|
|
1443
|
+
</div>
|
|
1444
|
+
<div class="fav fav-32">
|
|
1445
|
+
<div class="swatch">
|
|
1446
|
+
<svg width="22" height="22" style="color: var(--gold);"><use href="#pbLogoSm"/></svg>
|
|
1447
|
+
</div>
|
|
1448
|
+
<div class="cap">22 PX</div>
|
|
1449
|
+
</div>
|
|
1450
|
+
<div class="fav fav-64">
|
|
1451
|
+
<div class="swatch">
|
|
1452
|
+
<svg width="48" height="48" style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
1453
|
+
</div>
|
|
1454
|
+
<div class="cap">48 PX</div>
|
|
1455
|
+
</div>
|
|
1456
|
+
</div>
|
|
1457
|
+
</div>
|
|
1458
|
+
<div class="label">
|
|
1459
|
+
<div class="l">favicon</div>
|
|
1460
|
+
<div class="n">Three tiers</div>
|
|
1461
|
+
<div class="desc">16 + 22 px use the simplified 3-cut form (top notch + two large lower bites). 48 px and above ship the full 5-seat mark with asymmetric radii intact.</div>
|
|
1462
|
+
</div>
|
|
1463
|
+
</div>
|
|
1464
|
+
|
|
1465
|
+
<!-- app icons (dark + light) -->
|
|
1466
|
+
<div class="app-tile">
|
|
1467
|
+
<div class="stage" style="gap: 32px;">
|
|
1468
|
+
<div class="appicon">
|
|
1469
|
+
<svg width="92" height="92" style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
1470
|
+
</div>
|
|
1471
|
+
<div class="appicon is-light">
|
|
1472
|
+
<svg width="92" height="92" style="color: var(--brass);"><use href="#pbLogo"/></svg>
|
|
1473
|
+
</div>
|
|
1474
|
+
</div>
|
|
1475
|
+
<div class="label">
|
|
1476
|
+
<div class="l">app icon · dark + light</div>
|
|
1477
|
+
<div class="n">Rounded square · 22% radius</div>
|
|
1478
|
+
<div class="desc">Dark: slate surface, champagne gold mark. Light: cream paper, deep brass mark. Same geometry, surface-tuned colour. No gradients, no inner shadows — depth comes from the ring's negative cuts.</div>
|
|
1479
|
+
</div>
|
|
1480
|
+
</div>
|
|
1481
|
+
|
|
1482
|
+
<!-- OG image -->
|
|
1483
|
+
<div class="app-tile" style="grid-column: span 2;">
|
|
1484
|
+
<div class="stage" style="padding: 0;">
|
|
1485
|
+
<div class="og">
|
|
1486
|
+
<div>
|
|
1487
|
+
<div class="og-kicker">PrivateBoard</div>
|
|
1488
|
+
<div class="og-title">A private body, <em>in deliberation</em>.</div>
|
|
1489
|
+
<div class="og-foot">ROUND TABLE / FIVE SEATS / PRIVATE CONSENSUS</div>
|
|
1490
|
+
</div>
|
|
1491
|
+
<svg style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
1492
|
+
</div>
|
|
1493
|
+
</div>
|
|
1494
|
+
<div class="label">
|
|
1495
|
+
<div class="l">social share · 1200 × 630</div>
|
|
1496
|
+
<div class="n">Open Graph card</div>
|
|
1497
|
+
<div class="desc">Slate surface, hairline inset frame in gold at 18% alpha, kicker top-left, italic-em headline, mark right-bottom. Tagline runs in gold-faint mono caps with slash separators.</div>
|
|
1498
|
+
</div>
|
|
1499
|
+
</div>
|
|
1500
|
+
|
|
1501
|
+
<!-- letterhead -->
|
|
1502
|
+
<div class="app-tile">
|
|
1503
|
+
<div class="stage is-light" style="padding: 20px;">
|
|
1504
|
+
<div class="letterhead">
|
|
1505
|
+
<div class="lh-top">
|
|
1506
|
+
<div class="brand">
|
|
1507
|
+
<svg style="color: var(--brass);"><use href="#pbLogo"/></svg>
|
|
1508
|
+
<div>
|
|
1509
|
+
<div class="name">private board</div>
|
|
1510
|
+
<div class="tag">ROUND TABLE<span class="sep">/</span>FIVE SEATS<span class="sep">/</span>PRIVATE CONSENSUS</div>
|
|
1511
|
+
</div>
|
|
1512
|
+
</div>
|
|
1513
|
+
<div class="meta">
|
|
1514
|
+
no. 014<br/>2026 · 05 · 14<br/>private · for participants
|
|
1515
|
+
</div>
|
|
1516
|
+
</div>
|
|
1517
|
+
<div class="lh-body">
|
|
1518
|
+
We convened five voices on the question of pricing strategy for the European launch. The room split early; after taking each position seriously in turn, we arrived <em>less confident</em> than we began. The minutes below preserve the disagreements rather than resolving them — that work is the next session's.
|
|
1519
|
+
</div>
|
|
1520
|
+
<div class="lh-foot">
|
|
1521
|
+
<span>page 01 / 04</span>
|
|
1522
|
+
<span>privateboard.cc</span>
|
|
1523
|
+
</div>
|
|
1524
|
+
</div>
|
|
1525
|
+
</div>
|
|
1526
|
+
<div class="label">
|
|
1527
|
+
<div class="l">print · letterhead</div>
|
|
1528
|
+
<div class="n">A4 / US Letter</div>
|
|
1529
|
+
<div class="desc">Cream surface, deep-brass mark + wordmark top-left, mono meta top-right. Hairline foot rule, mono page number + URL.</div>
|
|
1530
|
+
</div>
|
|
1531
|
+
</div>
|
|
1532
|
+
|
|
1533
|
+
<!-- business cards -->
|
|
1534
|
+
<div class="app-tile">
|
|
1535
|
+
<div class="stage">
|
|
1536
|
+
<div class="card-pair">
|
|
1537
|
+
<div class="biz-card is-dark">
|
|
1538
|
+
<div class="top">
|
|
1539
|
+
<svg style="color: var(--gold);"><use href="#pbLogo"/></svg>
|
|
1540
|
+
<div class="name">private board</div>
|
|
1541
|
+
</div>
|
|
1542
|
+
<div class="person">
|
|
1543
|
+
<span>A. Researcher</span>
|
|
1544
|
+
<span class="what">principal · convener</span>
|
|
1545
|
+
</div>
|
|
1546
|
+
<div class="bot">
|
|
1547
|
+
<span>privateboard.cc</span>
|
|
1548
|
+
<span>·</span>
|
|
1549
|
+
</div>
|
|
1550
|
+
</div>
|
|
1551
|
+
<div class="biz-card is-light">
|
|
1552
|
+
<div class="top">
|
|
1553
|
+
<svg style="color: var(--brass);"><use href="#pbLogo"/></svg>
|
|
1554
|
+
<div class="name">private board</div>
|
|
1555
|
+
</div>
|
|
1556
|
+
<div class="person">
|
|
1557
|
+
<span>A. Researcher</span>
|
|
1558
|
+
<span class="what">principal · convener</span>
|
|
1559
|
+
</div>
|
|
1560
|
+
<div class="bot">
|
|
1561
|
+
<span>privateboard.cc</span>
|
|
1562
|
+
<span>·</span>
|
|
1563
|
+
</div>
|
|
1564
|
+
</div>
|
|
1565
|
+
</div>
|
|
1566
|
+
</div>
|
|
1567
|
+
<div class="label">
|
|
1568
|
+
<div class="l">print · business card</div>
|
|
1569
|
+
<div class="n">3.5 × 2 in · paired surfaces</div>
|
|
1570
|
+
<div class="desc">Dark variant for principals / system / brand contact. Light variant for participants. Hairline-driven layout · mark + wordmark top-left, role mid-card, URL foot.</div>
|
|
1571
|
+
</div>
|
|
1572
|
+
</div>
|
|
1573
|
+
|
|
1574
|
+
</div>
|
|
1575
|
+
</section>
|
|
1576
|
+
|
|
1577
|
+
|
|
1578
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1579
|
+
X. MISUSE
|
|
1580
|
+
═══════════════════════════════════════════════════════════ -->
|
|
1581
|
+
<section>
|
|
1582
|
+
<div class="sec-head">
|
|
1583
|
+
<div>
|
|
1584
|
+
<div class="sec-num">09 · misuse</div>
|
|
1585
|
+
<h2>Six things <em>not</em> to do</h2>
|
|
1586
|
+
</div>
|
|
1587
|
+
<p class="sec-blurb">The mark is a small piece of geometry whose meaning lives in the <em>cutouts</em> — what's <em>not</em> drawn. Most violations come from <em>adding</em> things: fills, hard shadows, rotation, equalising seats, decorating the cuts. The remedy is always to remove.</p>
|
|
1588
|
+
</div>
|
|
1589
|
+
|
|
1590
|
+
<div class="misuse-grid">
|
|
1591
|
+
|
|
1592
|
+
<!-- 1 · don't fill the hollow centre -->
|
|
1593
|
+
<div class="mis">
|
|
1594
|
+
<div class="frame">
|
|
1595
|
+
<svg class="mark" viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1596
|
+
<defs>
|
|
1597
|
+
<mask id="m-bad-fill" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
1598
|
+
<rect width="100" height="100" fill="white"/>
|
|
1599
|
+
<circle cx="50" cy="20" r="4" fill="black"/>
|
|
1600
|
+
<circle cx="78.5" cy="40.7" r="9" fill="black"/>
|
|
1601
|
+
<circle cx="21.5" cy="40.7" r="9" fill="black"/>
|
|
1602
|
+
<circle cx="67.6" cy="74.3" r="13" fill="black"/>
|
|
1603
|
+
<circle cx="32.4" cy="74.3" r="13" fill="black"/>
|
|
1604
|
+
</mask>
|
|
1605
|
+
</defs>
|
|
1606
|
+
<circle cx="50" cy="50" r="46" fill="currentColor" mask="url(#m-bad-fill)"/>
|
|
1607
|
+
</svg>
|
|
1608
|
+
<svg class="x-mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
|
|
1609
|
+
</div>
|
|
1610
|
+
<div class="lbl">— don't</div>
|
|
1611
|
+
<div class="desc">Fill the <em>hollow centre</em>. The empty middle is the room — fill it and the mark reads as a coin.</div>
|
|
1612
|
+
</div>
|
|
1613
|
+
|
|
1614
|
+
<!-- 2 · don't equalise the seats -->
|
|
1615
|
+
<div class="mis">
|
|
1616
|
+
<div class="frame">
|
|
1617
|
+
<svg class="mark" viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1618
|
+
<defs>
|
|
1619
|
+
<mask id="m-bad-eq" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
1620
|
+
<rect width="100" height="100" fill="black"/>
|
|
1621
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
1622
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
1623
|
+
<circle cx="50" cy="20" r="7" fill="black"/>
|
|
1624
|
+
<circle cx="78.5" cy="40.7" r="7" fill="black"/>
|
|
1625
|
+
<circle cx="21.5" cy="40.7" r="7" fill="black"/>
|
|
1626
|
+
<circle cx="67.6" cy="74.3" r="7" fill="black"/>
|
|
1627
|
+
<circle cx="32.4" cy="74.3" r="7" fill="black"/>
|
|
1628
|
+
</mask>
|
|
1629
|
+
</defs>
|
|
1630
|
+
<rect width="100" height="100" fill="currentColor" mask="url(#m-bad-eq)"/>
|
|
1631
|
+
</svg>
|
|
1632
|
+
<svg class="x-mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
|
|
1633
|
+
</div>
|
|
1634
|
+
<div class="lbl">— don't</div>
|
|
1635
|
+
<div class="desc">Make all five seats <em>the same size</em>. The hierarchy is the brand — without it, the mark loses its argument.</div>
|
|
1636
|
+
</div>
|
|
1637
|
+
|
|
1638
|
+
<!-- 3 · don't rotate -->
|
|
1639
|
+
<div class="mis">
|
|
1640
|
+
<div class="frame">
|
|
1641
|
+
<svg class="mark" viewBox="0 0 100 100" style="color: var(--gold); transform: rotate(24deg);">
|
|
1642
|
+
<use href="#pbLogo"/>
|
|
1643
|
+
</svg>
|
|
1644
|
+
<svg class="x-mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
|
|
1645
|
+
</div>
|
|
1646
|
+
<div class="lbl">— don't</div>
|
|
1647
|
+
<div class="desc">Rotate. The top seat sits <em>at the top</em>, by axiom — tilted, the hierarchy reads as broken.</div>
|
|
1648
|
+
</div>
|
|
1649
|
+
|
|
1650
|
+
<!-- 4 · don't gradient the gold -->
|
|
1651
|
+
<div class="mis">
|
|
1652
|
+
<div class="frame">
|
|
1653
|
+
<svg class="mark" viewBox="0 0 100 100">
|
|
1654
|
+
<defs>
|
|
1655
|
+
<linearGradient id="bad-grad" x1="0" y1="0" x2="1" y2="1">
|
|
1656
|
+
<stop offset="0" stop-color="#C5A05B"/>
|
|
1657
|
+
<stop offset="1" stop-color="#5D9778"/>
|
|
1658
|
+
</linearGradient>
|
|
1659
|
+
<mask id="m-bad-grad" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
|
1660
|
+
<rect width="100" height="100" fill="black"/>
|
|
1661
|
+
<circle cx="50" cy="50" r="46" fill="white"/>
|
|
1662
|
+
<circle cx="50" cy="50" r="30" fill="black"/>
|
|
1663
|
+
<circle cx="50" cy="20" r="4" fill="black"/>
|
|
1664
|
+
<circle cx="78.5" cy="40.7" r="9" fill="black"/>
|
|
1665
|
+
<circle cx="21.5" cy="40.7" r="9" fill="black"/>
|
|
1666
|
+
<circle cx="67.6" cy="74.3" r="13" fill="black"/>
|
|
1667
|
+
<circle cx="32.4" cy="74.3" r="13" fill="black"/>
|
|
1668
|
+
</mask>
|
|
1669
|
+
</defs>
|
|
1670
|
+
<rect width="100" height="100" fill="url(#bad-grad)" mask="url(#m-bad-grad)"/>
|
|
1671
|
+
</svg>
|
|
1672
|
+
<svg class="x-mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
|
|
1673
|
+
</div>
|
|
1674
|
+
<div class="lbl">— don't</div>
|
|
1675
|
+
<div class="desc">Gradient the gold. The system is <em>flat</em> — one tone per surface, no metallic sheens, no transitions.</div>
|
|
1676
|
+
</div>
|
|
1677
|
+
|
|
1678
|
+
<!-- 5 · don't decorate the cuts -->
|
|
1679
|
+
<div class="mis">
|
|
1680
|
+
<div class="frame">
|
|
1681
|
+
<svg class="mark" viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1682
|
+
<use href="#pbLogo"/>
|
|
1683
|
+
<circle cx="50" cy="20" r="2.4" fill="#7DA363"/>
|
|
1684
|
+
<circle cx="67.6" cy="74.3" r="2.4" fill="#D06A55"/>
|
|
1685
|
+
<circle cx="32.4" cy="74.3" r="2.4" fill="#5D8AA8"/>
|
|
1686
|
+
</svg>
|
|
1687
|
+
<svg class="x-mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
|
|
1688
|
+
</div>
|
|
1689
|
+
<div class="lbl">— don't</div>
|
|
1690
|
+
<div class="desc">Put coloured dots inside the cuts. The cuts <em>are</em> negative space — populating them turns the mark into a status indicator.</div>
|
|
1691
|
+
</div>
|
|
1692
|
+
|
|
1693
|
+
<!-- 6 · do · restraint -->
|
|
1694
|
+
<div class="mis">
|
|
1695
|
+
<div class="frame is-good">
|
|
1696
|
+
<svg class="mark" viewBox="0 0 100 100" style="color: var(--gold);">
|
|
1697
|
+
<use href="#pbLogo"/>
|
|
1698
|
+
</svg>
|
|
1699
|
+
<svg class="x-mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3,8 7,12 13,4"/></svg>
|
|
1700
|
+
</div>
|
|
1701
|
+
<div class="lbl ok">— do</div>
|
|
1702
|
+
<div class="desc">Leave it alone. The mark works because it does <em>less</em>.</div>
|
|
1703
|
+
</div>
|
|
1704
|
+
|
|
1705
|
+
</div>
|
|
1706
|
+
</section>
|
|
1707
|
+
|
|
1708
|
+
|
|
1709
|
+
<footer class="bk-foot">
|
|
1710
|
+
<span>privateboard · vi system · v1.0</span>
|
|
1711
|
+
<span class="right">2026 · 05 · 14 · nine sections · ten icons · eight swatches</span>
|
|
1712
|
+
</footer>
|
|
1713
|
+
|
|
1714
|
+
</div>
|
|
1715
|
+
</body>
|
|
1716
|
+
</html>
|