forgedock 1.0.17 → 1.0.19

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.
Files changed (134) hide show
  1. package/README.md +34 -1
  2. package/bin/cross-publish.mjs +344 -0
  3. package/bin/forgedock.mjs +229 -17
  4. package/commands/autopilot.md +77 -0
  5. package/commands/design-bench.md +176 -0
  6. package/commands/design-render-critique-loop.md +103 -0
  7. package/commands/design.md +259 -0
  8. package/commands/issue.md +7 -3
  9. package/commands/orchestrate.md +121 -0
  10. package/commands/{resume.md → pipeline-resume.md} +4 -4
  11. package/commands/{status.md → pipeline-status.md} +1 -1
  12. package/commands/qa-sweep.md +37 -2
  13. package/commands/quality-gate.md +57 -0
  14. package/commands/review-pr-staging.md +158 -2
  15. package/commands/test-gate.md +929 -0
  16. package/commands/work-on/build/implement.md +5 -3
  17. package/commands/work-on.md +53 -3
  18. package/docs/CI.md +177 -0
  19. package/docs/FORGE-PROTOCOL.md +324 -0
  20. package/docs/articles/b-vs-c-baseline.md +210 -0
  21. package/docs/articles/full-abc-benchmark.md +205 -0
  22. package/docs/articles/selective-spec-loading-token-savings.md +140 -0
  23. package/docs/design/abc-benchmark.md +195 -0
  24. package/docs/design/design-architect-rationale.md +123 -0
  25. package/docs/design/design-memory.md +61 -0
  26. package/docs/design/design-spec-schema.md +248 -0
  27. package/docs/design/design-system-lint.md +150 -0
  28. package/docs/design/divergent-generation.md +106 -0
  29. package/docs/design/effects-appropriateness.md +133 -0
  30. package/docs/design/fixtures/briefs/README.md +47 -0
  31. package/docs/design/fixtures/briefs/cadence.md +39 -0
  32. package/docs/design/fixtures/briefs/plume.md +39 -0
  33. package/docs/design/fixtures/briefs/slipstream.md +39 -0
  34. package/docs/design/fixtures/briefs/tender.md +39 -0
  35. package/docs/design/fixtures/briefs/voltage.md +39 -0
  36. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-1.html +364 -0
  37. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-2.html +420 -0
  38. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-3.html +506 -0
  39. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-1.html +611 -0
  40. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-2.html +594 -0
  41. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-3.html +817 -0
  42. package/docs/design/fixtures/runs/b-vs-c-baseline/runs.json +175 -0
  43. package/docs/design/fixtures/runs/b-vs-c-baseline/scorecard.json +138 -0
  44. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-1.html +373 -0
  45. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-2.html +398 -0
  46. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-3.html +595 -0
  47. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-1.html +531 -0
  48. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-2.html +565 -0
  49. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-3.html +674 -0
  50. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-1.html +388 -0
  51. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-2.html +463 -0
  52. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-3.html +568 -0
  53. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-1.html +562 -0
  54. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-2.html +618 -0
  55. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-3.html +618 -0
  56. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-1.html +364 -0
  57. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-2.html +420 -0
  58. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-3.html +506 -0
  59. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-1.html +527 -0
  60. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-2.html +445 -0
  61. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-3.html +483 -0
  62. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-1.html +611 -0
  63. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-2.html +594 -0
  64. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-3.html +817 -0
  65. package/docs/design/fixtures/runs/full-abc/runs.json +190 -0
  66. package/docs/design/fixtures/runs/full-abc/scorecard.json +144 -0
  67. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-1.html +496 -0
  68. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-2.html +447 -0
  69. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-3.html +564 -0
  70. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-1.html +373 -0
  71. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-2.html +398 -0
  72. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-3.html +595 -0
  73. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-1.html +622 -0
  74. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-2.html +475 -0
  75. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-3.html +660 -0
  76. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-1.html +531 -0
  77. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-2.html +565 -0
  78. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-3.html +674 -0
  79. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-1.html +525 -0
  80. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-2.html +446 -0
  81. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-3.html +463 -0
  82. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-1.html +388 -0
  83. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-2.html +463 -0
  84. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-3.html +568 -0
  85. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-1.html +1068 -0
  86. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-2.html +1423 -0
  87. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-3.html +1245 -0
  88. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-1.html +305 -0
  89. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-2.html +327 -0
  90. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-3.html +428 -0
  91. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-1.html +1270 -0
  92. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-2.html +1172 -0
  93. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-3.html +1532 -0
  94. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-1.html +315 -0
  95. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-2.html +342 -0
  96. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-3.html +353 -0
  97. package/docs/design/fixtures/runs/full-abc-opus/runs.json +190 -0
  98. package/docs/design/fixtures/runs/full-abc-opus/scorecard.json +144 -0
  99. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-1.html +345 -0
  100. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-2.html +396 -0
  101. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-3.html +502 -0
  102. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-1.html +408 -0
  103. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-2.html +446 -0
  104. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-3.html +496 -0
  105. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-1.html +813 -0
  106. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-2.html +711 -0
  107. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-3.html +721 -0
  108. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-1.html +280 -0
  109. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-2.html +291 -0
  110. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-3.html +366 -0
  111. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-1.html +1010 -0
  112. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-2.html +836 -0
  113. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-3.html +930 -0
  114. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-1.html +407 -0
  115. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-2.html +396 -0
  116. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-3.html +529 -0
  117. package/docs/design/foundations/brutalist.css +294 -0
  118. package/docs/design/foundations/editorial.css +300 -0
  119. package/docs/design/foundations/minimal-luxury.css +295 -0
  120. package/docs/design/foundations/technical.css +293 -0
  121. package/docs/design/foundations/warm-photo.css +299 -0
  122. package/docs/design/reference-corpus.md +1726 -0
  123. package/docs/design/render-critique-loop.md +57 -0
  124. package/docs/spec-graph-schema.md +397 -0
  125. package/package.json +1 -1
  126. package/scripts/bench-scorecard.mjs +239 -0
  127. package/scripts/build-spec-graph.mjs +509 -0
  128. package/scripts/check-native-conflicts.sh +200 -0
  129. package/scripts/classify-lane.sh +0 -7
  130. package/scripts/design-system-lint.mjs +993 -0
  131. package/scripts/graph-query.sh +486 -0
  132. package/scripts/transition-label.sh +10 -2
  133. package/scripts/validate-spec-graph.sh +423 -0
  134. package/templates/workflows/forgedock-review.yml +96 -0
package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-3.html ADDED
@@ -0,0 +1,1532 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Plume - Ship software, not status updates</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Cabinet+Grotesk:wght@400;500;700;800;900&display=swap" rel="stylesheet">
8
+ <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
9
+ <style>
10
+ @font-face {
11
+ font-family: 'Cabinet Grotesk';
12
+ src: url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap');
13
+ }
14
+
15
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
16
+
17
+ :root {
18
+ --black: #0a0a0a;
19
+ --white: #f5f5f0;
20
+ --gray-1: #1a1a1a;
21
+ --gray-2: #2a2a2a;
22
+ --gray-3: #4a4a4a;
23
+ --gray-4: #7a7a7a;
24
+ --gray-5: #b0b0b0;
25
+ --gray-6: #d5d5d0;
26
+ --accent: #ff3d00;
27
+ --accent-dim: rgba(255,61,0,0.15);
28
+ }
29
+
30
+ html { font-size: 16px; -webkit-font-smoothing: antialiased; }
31
+
32
+ body {
33
+ font-family: 'Space Grotesk', sans-serif;
34
+ background: var(--black);
35
+ color: var(--white);
36
+ line-height: 1.6;
37
+ }
38
+
39
+ /* NAV */
40
+ .nav {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: space-between;
44
+ padding: 24px 48px;
45
+ border-bottom: 1px solid var(--gray-2);
46
+ position: sticky;
47
+ top: 0;
48
+ background: var(--black);
49
+ z-index: 100;
50
+ }
51
+
52
+ .nav-logo {
53
+ font-family: 'Syne', sans-serif;
54
+ font-weight: 800;
55
+ font-size: 1.5rem;
56
+ letter-spacing: -0.04em;
57
+ text-transform: uppercase;
58
+ }
59
+
60
+ .nav-center {
61
+ display: flex;
62
+ gap: 32px;
63
+ list-style: none;
64
+ }
65
+
66
+ .nav-center a {
67
+ text-decoration: none;
68
+ font-size: 0.8125rem;
69
+ color: var(--gray-4);
70
+ font-weight: 500;
71
+ text-transform: uppercase;
72
+ letter-spacing: 0.06em;
73
+ transition: color 0.2s;
74
+ }
75
+
76
+ .nav-center a:hover { color: var(--white); }
77
+
78
+ .nav-right { display: flex; gap: 16px; align-items: center; }
79
+
80
+ .nav-signin {
81
+ font-size: 0.8125rem;
82
+ color: var(--gray-4);
83
+ text-decoration: none;
84
+ font-weight: 500;
85
+ }
86
+
87
+ .nav-cta {
88
+ background: var(--accent);
89
+ color: var(--black);
90
+ padding: 10px 28px;
91
+ font-size: 0.8125rem;
92
+ font-weight: 700;
93
+ text-decoration: none;
94
+ text-transform: uppercase;
95
+ letter-spacing: 0.06em;
96
+ transition: background 0.2s;
97
+ }
98
+
99
+ .nav-cta:hover { background: #ff5722; }
100
+
101
+ /* HERO — massive type with embedded dark dashboard */
102
+ .hero {
103
+ padding: 80px 48px 0;
104
+ max-width: 1440px;
105
+ margin: 0 auto;
106
+ }
107
+
108
+ .hero-top {
109
+ display: grid;
110
+ grid-template-columns: 1fr 1fr;
111
+ gap: 48px;
112
+ align-items: end;
113
+ margin-bottom: 64px;
114
+ }
115
+
116
+ .hero h1 {
117
+ font-family: 'Syne', sans-serif;
118
+ font-weight: 800;
119
+ font-size: clamp(3.5rem, 7vw, 7rem);
120
+ line-height: 0.92;
121
+ letter-spacing: -0.05em;
122
+ text-transform: uppercase;
123
+ }
124
+
125
+ .hero h1 .accent { color: var(--accent); }
126
+
127
+ .hero-right-text {
128
+ padding-bottom: 12px;
129
+ }
130
+
131
+ .hero-right-text p {
132
+ font-size: 1.125rem;
133
+ color: var(--gray-5);
134
+ line-height: 1.7;
135
+ max-width: 420px;
136
+ margin-bottom: 32px;
137
+ }
138
+
139
+ .hero-actions { display: flex; gap: 16px; align-items: center; }
140
+
141
+ .btn-accent {
142
+ display: inline-block;
143
+ background: var(--accent);
144
+ color: var(--black);
145
+ padding: 16px 40px;
146
+ font-weight: 700;
147
+ font-size: 0.875rem;
148
+ text-decoration: none;
149
+ text-transform: uppercase;
150
+ letter-spacing: 0.06em;
151
+ transition: background 0.2s;
152
+ font-family: inherit;
153
+ border: none;
154
+ cursor: pointer;
155
+ }
156
+
157
+ .btn-accent:hover { background: #ff5722; }
158
+
159
+ .btn-outline {
160
+ display: inline-block;
161
+ border: 1px solid var(--gray-3);
162
+ color: var(--gray-5);
163
+ padding: 15px 32px;
164
+ font-size: 0.875rem;
165
+ font-weight: 500;
166
+ text-decoration: none;
167
+ text-transform: uppercase;
168
+ letter-spacing: 0.06em;
169
+ transition: border-color 0.2s, color 0.2s;
170
+ }
171
+
172
+ .btn-outline:hover { border-color: var(--white); color: var(--white); }
173
+
174
+ /* HERO DASHBOARD — signature: dark dashboard preview as hero content */
175
+ .hero-dashboard {
176
+ background: var(--gray-1);
177
+ border: 1px solid var(--gray-2);
178
+ margin-bottom: -1px;
179
+ }
180
+
181
+ .hd-bar {
182
+ display: flex;
183
+ align-items: center;
184
+ justify-content: space-between;
185
+ padding: 12px 24px;
186
+ border-bottom: 1px solid var(--gray-2);
187
+ }
188
+
189
+ .hd-dots { display: flex; gap: 6px; }
190
+ .hd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-3); }
191
+ .hd-dot.r { background: #e85040; }
192
+ .hd-dot.y { background: #e8b040; }
193
+ .hd-dot.g { background: #50b848; }
194
+
195
+ .hd-tabs {
196
+ display: flex;
197
+ gap: 0;
198
+ font-size: 0.6875rem;
199
+ text-transform: uppercase;
200
+ letter-spacing: 0.08em;
201
+ }
202
+
203
+ .hd-tab {
204
+ padding: 6px 16px;
205
+ color: var(--gray-4);
206
+ border: 1px solid var(--gray-2);
207
+ border-right: none;
208
+ cursor: pointer;
209
+ }
210
+
211
+ .hd-tab:last-child { border-right: 1px solid var(--gray-2); }
212
+
213
+ .hd-tab.active {
214
+ background: var(--gray-2);
215
+ color: var(--white);
216
+ font-weight: 600;
217
+ }
218
+
219
+ .hd-content {
220
+ display: grid;
221
+ grid-template-columns: 200px 1fr;
222
+ min-height: 420px;
223
+ }
224
+
225
+ .hd-sidebar {
226
+ border-right: 1px solid var(--gray-2);
227
+ padding: 16px 0;
228
+ }
229
+
230
+ .hd-nav-section { padding: 0 16px; margin-bottom: 20px; }
231
+
232
+ .hd-nav-label {
233
+ font-size: 0.5625rem;
234
+ text-transform: uppercase;
235
+ letter-spacing: 0.12em;
236
+ color: var(--gray-4);
237
+ font-weight: 700;
238
+ margin-bottom: 8px;
239
+ }
240
+
241
+ .hd-nav-item {
242
+ padding: 5px 8px;
243
+ font-size: 0.75rem;
244
+ color: var(--gray-4);
245
+ cursor: pointer;
246
+ display: flex;
247
+ align-items: center;
248
+ gap: 8px;
249
+ transition: color 0.15s;
250
+ }
251
+
252
+ .hd-nav-item:hover { color: var(--white); }
253
+
254
+ .hd-nav-item.active {
255
+ color: var(--accent);
256
+ font-weight: 600;
257
+ }
258
+
259
+ .hd-nav-dot {
260
+ width: 6px;
261
+ height: 6px;
262
+ border-radius: 50%;
263
+ border: 1px solid currentColor;
264
+ flex-shrink: 0;
265
+ }
266
+
267
+ .hd-nav-item.active .hd-nav-dot { background: var(--accent); border-color: var(--accent); }
268
+
269
+ .hd-main { padding: 16px 24px; }
270
+
271
+ .hd-main-top {
272
+ display: flex;
273
+ justify-content: space-between;
274
+ align-items: center;
275
+ margin-bottom: 16px;
276
+ }
277
+
278
+ .hd-main-title {
279
+ font-family: 'Syne', sans-serif;
280
+ font-weight: 700;
281
+ font-size: 0.9375rem;
282
+ text-transform: uppercase;
283
+ letter-spacing: 0.02em;
284
+ }
285
+
286
+ .hd-filters {
287
+ display: flex;
288
+ gap: 6px;
289
+ }
290
+
291
+ .hd-filter {
292
+ font-size: 0.625rem;
293
+ padding: 3px 10px;
294
+ border: 1px solid var(--gray-2);
295
+ color: var(--gray-4);
296
+ text-transform: uppercase;
297
+ letter-spacing: 0.06em;
298
+ font-weight: 600;
299
+ }
300
+
301
+ .hd-filter.active { border-color: var(--accent); color: var(--accent); }
302
+
303
+ .hd-issues { list-style: none; }
304
+
305
+ .hd-issue {
306
+ display: grid;
307
+ grid-template-columns: 16px 52px 1fr auto auto auto;
308
+ gap: 12px;
309
+ align-items: center;
310
+ padding: 9px 0;
311
+ border-bottom: 1px solid rgba(255,255,255,0.04);
312
+ font-size: 0.75rem;
313
+ }
314
+
315
+ .hd-check {
316
+ width: 12px;
317
+ height: 12px;
318
+ border: 1.5px solid var(--gray-3);
319
+ }
320
+
321
+ .hd-check.done { background: var(--accent); border-color: var(--accent); }
322
+
323
+ .hd-issue-id {
324
+ color: var(--gray-4);
325
+ font-family: 'Space Grotesk', monospace;
326
+ font-size: 0.6875rem;
327
+ }
328
+
329
+ .hd-issue-title {
330
+ color: var(--gray-5);
331
+ font-weight: 500;
332
+ }
333
+
334
+ .hd-issue .hd-check.done ~ .hd-issue-title { text-decoration: line-through; color: var(--gray-4); }
335
+
336
+ .hd-tag {
337
+ font-size: 0.5625rem;
338
+ padding: 2px 6px;
339
+ text-transform: uppercase;
340
+ letter-spacing: 0.06em;
341
+ font-weight: 700;
342
+ }
343
+
344
+ .tag-bug { background: rgba(232,80,64,0.15); color: #e85040; }
345
+ .tag-feat { background: rgba(80,184,72,0.15); color: #50b848; }
346
+ .tag-perf { background: rgba(232,176,64,0.15); color: #e8b040; }
347
+ .tag-infra { background: rgba(100,140,220,0.15); color: #648cdc; }
348
+ .tag-dx { background: rgba(180,120,220,0.15); color: #b478dc; }
349
+
350
+ .hd-pri {
351
+ font-size: 0.5625rem;
352
+ font-weight: 800;
353
+ width: 16px;
354
+ height: 16px;
355
+ display: flex;
356
+ align-items: center;
357
+ justify-content: center;
358
+ text-transform: uppercase;
359
+ }
360
+
361
+ .pri-u { color: #e85040; }
362
+ .pri-h { color: #e89840; }
363
+ .pri-m { color: var(--gray-4); }
364
+ .pri-l { color: var(--gray-3); }
365
+
366
+ .hd-avatar {
367
+ width: 18px;
368
+ height: 18px;
369
+ background: var(--gray-2);
370
+ display: flex;
371
+ align-items: center;
372
+ justify-content: center;
373
+ font-size: 0.4375rem;
374
+ font-weight: 700;
375
+ color: var(--gray-4);
376
+ }
377
+
378
+ /* STATS BAR */
379
+ .stats-bar {
380
+ border-top: 1px solid var(--gray-2);
381
+ border-bottom: 1px solid var(--gray-2);
382
+ padding: 0 48px;
383
+ }
384
+
385
+ .stats-inner {
386
+ max-width: 1440px;
387
+ margin: 0 auto;
388
+ display: grid;
389
+ grid-template-columns: repeat(4, 1fr);
390
+ gap: 0;
391
+ }
392
+
393
+ .stat-cell {
394
+ padding: 48px 32px;
395
+ border-right: 1px solid var(--gray-2);
396
+ display: flex;
397
+ flex-direction: column;
398
+ }
399
+
400
+ .stat-cell:last-child { border-right: none; }
401
+
402
+ .stat-value {
403
+ font-family: 'Syne', sans-serif;
404
+ font-weight: 800;
405
+ font-size: 3rem;
406
+ letter-spacing: -0.04em;
407
+ line-height: 1;
408
+ margin-bottom: 8px;
409
+ }
410
+
411
+ .stat-value .accent { color: var(--accent); }
412
+
413
+ .stat-label {
414
+ font-size: 0.6875rem;
415
+ text-transform: uppercase;
416
+ letter-spacing: 0.1em;
417
+ color: var(--gray-4);
418
+ font-weight: 600;
419
+ }
420
+
421
+ /* FEATURES — stark grid */
422
+ .features {
423
+ max-width: 1440px;
424
+ margin: 0 auto;
425
+ padding: 120px 48px;
426
+ }
427
+
428
+ .features-heading {
429
+ margin-bottom: 80px;
430
+ }
431
+
432
+ .features-heading h2 {
433
+ font-family: 'Syne', sans-serif;
434
+ font-weight: 800;
435
+ font-size: clamp(2rem, 4vw, 3.5rem);
436
+ text-transform: uppercase;
437
+ letter-spacing: -0.03em;
438
+ line-height: 1;
439
+ margin-bottom: 24px;
440
+ }
441
+
442
+ .features-heading p {
443
+ font-size: 1.0625rem;
444
+ color: var(--gray-4);
445
+ max-width: 560px;
446
+ line-height: 1.7;
447
+ }
448
+
449
+ .features-brutal-grid {
450
+ display: grid;
451
+ grid-template-columns: repeat(3, 1fr);
452
+ gap: 0;
453
+ border: 1px solid var(--gray-2);
454
+ }
455
+
456
+ .fb-card {
457
+ padding: 48px 36px;
458
+ border-right: 1px solid var(--gray-2);
459
+ border-bottom: 1px solid var(--gray-2);
460
+ position: relative;
461
+ }
462
+
463
+ .fb-card:nth-child(3n) { border-right: none; }
464
+ .fb-card:nth-child(n+4) { border-bottom: none; }
465
+
466
+ .fb-index {
467
+ font-family: 'Syne', sans-serif;
468
+ font-weight: 800;
469
+ font-size: 3.5rem;
470
+ color: var(--gray-2);
471
+ line-height: 1;
472
+ margin-bottom: 20px;
473
+ letter-spacing: -0.04em;
474
+ }
475
+
476
+ .fb-title {
477
+ font-family: 'Syne', sans-serif;
478
+ font-weight: 700;
479
+ font-size: 1.125rem;
480
+ text-transform: uppercase;
481
+ letter-spacing: 0.02em;
482
+ margin-bottom: 12px;
483
+ }
484
+
485
+ .fb-body {
486
+ font-size: 0.9375rem;
487
+ color: var(--gray-4);
488
+ line-height: 1.7;
489
+ margin-bottom: 16px;
490
+ }
491
+
492
+ .fb-detail {
493
+ font-size: 0.75rem;
494
+ color: var(--gray-3);
495
+ line-height: 1.65;
496
+ border-top: 1px solid var(--gray-2);
497
+ padding-top: 12px;
498
+ }
499
+
500
+ /* KEYBOARD — signature: physical keyboard motif */
501
+ .keyboard-section {
502
+ border-top: 1px solid var(--gray-2);
503
+ border-bottom: 1px solid var(--gray-2);
504
+ padding: 120px 48px;
505
+ }
506
+
507
+ .keyboard-inner {
508
+ max-width: 1440px;
509
+ margin: 0 auto;
510
+ display: grid;
511
+ grid-template-columns: 1fr 1fr;
512
+ gap: 80px;
513
+ align-items: start;
514
+ }
515
+
516
+ .keyboard-left h2 {
517
+ font-family: 'Syne', sans-serif;
518
+ font-weight: 800;
519
+ font-size: clamp(2rem, 3.5vw, 3rem);
520
+ text-transform: uppercase;
521
+ letter-spacing: -0.03em;
522
+ line-height: 1;
523
+ margin-bottom: 24px;
524
+ }
525
+
526
+ .keyboard-left > p {
527
+ font-size: 1rem;
528
+ color: var(--gray-4);
529
+ line-height: 1.75;
530
+ margin-bottom: 48px;
531
+ max-width: 460px;
532
+ }
533
+
534
+ /* Physical keyboard mockup */
535
+ .kb-mockup {
536
+ background: var(--gray-1);
537
+ border: 1px solid var(--gray-2);
538
+ padding: 24px;
539
+ }
540
+
541
+ .kb-row {
542
+ display: flex;
543
+ gap: 4px;
544
+ margin-bottom: 4px;
545
+ justify-content: center;
546
+ }
547
+
548
+ .kb-key {
549
+ display: flex;
550
+ align-items: center;
551
+ justify-content: center;
552
+ height: 40px;
553
+ min-width: 40px;
554
+ padding: 0 8px;
555
+ background: var(--gray-2);
556
+ border: 1px solid var(--gray-3);
557
+ font-size: 0.625rem;
558
+ font-weight: 600;
559
+ color: var(--gray-4);
560
+ text-transform: uppercase;
561
+ letter-spacing: 0.04em;
562
+ position: relative;
563
+ transition: all 0.15s;
564
+ }
565
+
566
+ .kb-key.highlight {
567
+ background: var(--accent-dim);
568
+ border-color: var(--accent);
569
+ color: var(--accent);
570
+ }
571
+
572
+ .kb-key.wide { min-width: 60px; }
573
+ .kb-key.wider { min-width: 80px; }
574
+ .kb-key.widest { min-width: 100px; }
575
+ .kb-key.space { flex: 1; max-width: 280px; }
576
+
577
+ .kb-legend {
578
+ margin-top: 24px;
579
+ display: flex;
580
+ gap: 24px;
581
+ justify-content: center;
582
+ flex-wrap: wrap;
583
+ }
584
+
585
+ .kb-legend-item {
586
+ display: flex;
587
+ align-items: center;
588
+ gap: 8px;
589
+ font-size: 0.6875rem;
590
+ color: var(--gray-4);
591
+ }
592
+
593
+ .kb-legend-dot {
594
+ width: 8px;
595
+ height: 8px;
596
+ background: var(--accent);
597
+ }
598
+
599
+ /* Shortcut table */
600
+ .shortcut-table {
601
+ width: 100%;
602
+ }
603
+
604
+ .st-group {
605
+ margin-bottom: 32px;
606
+ }
607
+
608
+ .st-group-title {
609
+ font-family: 'Syne', sans-serif;
610
+ font-size: 0.75rem;
611
+ text-transform: uppercase;
612
+ letter-spacing: 0.1em;
613
+ color: var(--accent);
614
+ font-weight: 700;
615
+ padding-bottom: 8px;
616
+ border-bottom: 2px solid var(--accent);
617
+ margin-bottom: 8px;
618
+ }
619
+
620
+ .st-row {
621
+ display: flex;
622
+ justify-content: space-between;
623
+ align-items: center;
624
+ padding: 8px 0;
625
+ border-bottom: 1px solid var(--gray-2);
626
+ }
627
+
628
+ .st-action { font-size: 0.8125rem; color: var(--gray-5); }
629
+
630
+ .st-keys { display: flex; gap: 3px; }
631
+
632
+ .k {
633
+ display: inline-flex;
634
+ align-items: center;
635
+ justify-content: center;
636
+ min-width: 24px;
637
+ height: 24px;
638
+ padding: 0 8px;
639
+ background: var(--gray-2);
640
+ border: 1px solid var(--gray-3);
641
+ font-size: 0.6875rem;
642
+ font-weight: 700;
643
+ color: var(--gray-5);
644
+ font-family: 'Space Grotesk', sans-serif;
645
+ }
646
+
647
+ /* WORKFLOW — horizontal brutalist steps */
648
+ .workflow {
649
+ max-width: 1440px;
650
+ margin: 0 auto;
651
+ padding: 120px 48px;
652
+ }
653
+
654
+ .workflow h2 {
655
+ font-family: 'Syne', sans-serif;
656
+ font-weight: 800;
657
+ font-size: clamp(2rem, 4vw, 3.5rem);
658
+ text-transform: uppercase;
659
+ letter-spacing: -0.03em;
660
+ line-height: 1;
661
+ margin-bottom: 16px;
662
+ }
663
+
664
+ .workflow > p {
665
+ font-size: 1.0625rem;
666
+ color: var(--gray-4);
667
+ max-width: 560px;
668
+ line-height: 1.7;
669
+ margin-bottom: 64px;
670
+ }
671
+
672
+ .wf-steps {
673
+ display: grid;
674
+ grid-template-columns: repeat(4, 1fr);
675
+ gap: 0;
676
+ border: 1px solid var(--gray-2);
677
+ }
678
+
679
+ .wf-step {
680
+ padding: 40px 32px;
681
+ border-right: 1px solid var(--gray-2);
682
+ position: relative;
683
+ }
684
+
685
+ .wf-step:last-child { border-right: none; }
686
+
687
+ .wf-step-num {
688
+ font-family: 'Syne', sans-serif;
689
+ font-weight: 800;
690
+ font-size: 4rem;
691
+ color: var(--gray-2);
692
+ line-height: 1;
693
+ margin-bottom: 16px;
694
+ letter-spacing: -0.06em;
695
+ }
696
+
697
+ .wf-step-title {
698
+ font-family: 'Syne', sans-serif;
699
+ font-weight: 700;
700
+ font-size: 1rem;
701
+ text-transform: uppercase;
702
+ letter-spacing: 0.04em;
703
+ margin-bottom: 12px;
704
+ }
705
+
706
+ .wf-step-desc {
707
+ font-size: 0.875rem;
708
+ color: var(--gray-4);
709
+ line-height: 1.7;
710
+ margin-bottom: 16px;
711
+ }
712
+
713
+ .wf-step-detail {
714
+ font-size: 0.75rem;
715
+ color: var(--gray-3);
716
+ line-height: 1.65;
717
+ border-top: 1px solid var(--gray-2);
718
+ padding-top: 12px;
719
+ }
720
+
721
+ .wf-step-arrow {
722
+ position: absolute;
723
+ right: -8px;
724
+ top: 50%;
725
+ transform: translateY(-50%);
726
+ width: 16px;
727
+ height: 16px;
728
+ background: var(--black);
729
+ border: 1px solid var(--gray-2);
730
+ display: flex;
731
+ align-items: center;
732
+ justify-content: center;
733
+ font-size: 0.625rem;
734
+ color: var(--gray-4);
735
+ z-index: 1;
736
+ }
737
+
738
+ /* INTEGRATIONS */
739
+ .integrations-section {
740
+ border-top: 1px solid var(--gray-2);
741
+ padding: 120px 48px;
742
+ }
743
+
744
+ .integrations-inner {
745
+ max-width: 1440px;
746
+ margin: 0 auto;
747
+ display: grid;
748
+ grid-template-columns: 1fr 1fr;
749
+ gap: 80px;
750
+ align-items: start;
751
+ }
752
+
753
+ .integrations-left h2 {
754
+ font-family: 'Syne', sans-serif;
755
+ font-weight: 800;
756
+ font-size: clamp(1.75rem, 3vw, 2.5rem);
757
+ text-transform: uppercase;
758
+ letter-spacing: -0.03em;
759
+ line-height: 1;
760
+ margin-bottom: 20px;
761
+ }
762
+
763
+ .integrations-left > p {
764
+ font-size: 1rem;
765
+ color: var(--gray-4);
766
+ line-height: 1.75;
767
+ margin-bottom: 40px;
768
+ }
769
+
770
+ .int-list { list-style: none; }
771
+
772
+ .int-item {
773
+ display: flex;
774
+ gap: 20px;
775
+ align-items: flex-start;
776
+ padding: 20px 0;
777
+ border-bottom: 1px solid var(--gray-2);
778
+ }
779
+
780
+ .int-icon {
781
+ width: 36px;
782
+ height: 36px;
783
+ background: var(--gray-2);
784
+ display: flex;
785
+ align-items: center;
786
+ justify-content: center;
787
+ font-size: 0.625rem;
788
+ font-weight: 800;
789
+ color: var(--gray-4);
790
+ text-transform: uppercase;
791
+ letter-spacing: 0.06em;
792
+ flex-shrink: 0;
793
+ }
794
+
795
+ .int-name {
796
+ font-family: 'Syne', sans-serif;
797
+ font-weight: 700;
798
+ font-size: 0.875rem;
799
+ text-transform: uppercase;
800
+ letter-spacing: 0.02em;
801
+ margin-bottom: 4px;
802
+ }
803
+
804
+ .int-desc {
805
+ font-size: 0.8125rem;
806
+ color: var(--gray-4);
807
+ line-height: 1.6;
808
+ }
809
+
810
+ /* Git activity feed */
811
+ .git-feed {
812
+ background: var(--gray-1);
813
+ border: 1px solid var(--gray-2);
814
+ padding: 24px;
815
+ }
816
+
817
+ .gf-header {
818
+ display: flex;
819
+ justify-content: space-between;
820
+ align-items: center;
821
+ margin-bottom: 20px;
822
+ padding-bottom: 12px;
823
+ border-bottom: 1px solid var(--gray-2);
824
+ }
825
+
826
+ .gf-title {
827
+ font-family: 'Syne', sans-serif;
828
+ font-weight: 700;
829
+ font-size: 0.75rem;
830
+ text-transform: uppercase;
831
+ letter-spacing: 0.1em;
832
+ }
833
+
834
+ .gf-badge {
835
+ font-size: 0.5625rem;
836
+ padding: 3px 8px;
837
+ background: var(--accent-dim);
838
+ color: var(--accent);
839
+ text-transform: uppercase;
840
+ letter-spacing: 0.06em;
841
+ font-weight: 700;
842
+ }
843
+
844
+ .gf-list { list-style: none; }
845
+
846
+ .gf-item {
847
+ padding: 12px 0;
848
+ border-bottom: 1px solid rgba(255,255,255,0.04);
849
+ display: flex;
850
+ gap: 12px;
851
+ align-items: flex-start;
852
+ }
853
+
854
+ .gf-dot {
855
+ width: 6px;
856
+ height: 6px;
857
+ margin-top: 7px;
858
+ flex-shrink: 0;
859
+ }
860
+
861
+ .gf-dot.merged { background: var(--accent); }
862
+ .gf-dot.open { background: #50b848; }
863
+ .gf-dot.review { background: #e8b040; }
864
+
865
+ .gf-msg {
866
+ font-size: 0.75rem;
867
+ font-family: 'Space Grotesk', monospace;
868
+ color: var(--gray-5);
869
+ font-weight: 500;
870
+ margin-bottom: 2px;
871
+ }
872
+
873
+ .gf-meta {
874
+ font-size: 0.625rem;
875
+ color: var(--gray-3);
876
+ letter-spacing: 0.02em;
877
+ }
878
+
879
+ .gf-link {
880
+ display: inline-block;
881
+ margin-top: 4px;
882
+ font-size: 0.625rem;
883
+ color: var(--accent);
884
+ text-decoration: none;
885
+ text-transform: uppercase;
886
+ letter-spacing: 0.06em;
887
+ font-weight: 600;
888
+ }
889
+
890
+ /* CTA */
891
+ .cta-section {
892
+ border-top: 1px solid var(--gray-2);
893
+ padding: 120px 48px;
894
+ }
895
+
896
+ .cta-inner {
897
+ max-width: 1440px;
898
+ margin: 0 auto;
899
+ display: grid;
900
+ grid-template-columns: 2fr 1fr;
901
+ gap: 80px;
902
+ align-items: center;
903
+ }
904
+
905
+ .cta-inner h2 {
906
+ font-family: 'Syne', sans-serif;
907
+ font-weight: 800;
908
+ font-size: clamp(2.5rem, 5vw, 5rem);
909
+ text-transform: uppercase;
910
+ letter-spacing: -0.04em;
911
+ line-height: 0.95;
912
+ }
913
+
914
+ .cta-inner h2 .accent { color: var(--accent); }
915
+
916
+ .cta-right-content p {
917
+ font-size: 1rem;
918
+ color: var(--gray-4);
919
+ line-height: 1.75;
920
+ margin-bottom: 32px;
921
+ }
922
+
923
+ .cta-list {
924
+ list-style: none;
925
+ margin-bottom: 40px;
926
+ }
927
+
928
+ .cta-list li {
929
+ padding: 8px 0;
930
+ font-size: 0.875rem;
931
+ color: var(--gray-5);
932
+ display: flex;
933
+ gap: 12px;
934
+ align-items: center;
935
+ border-bottom: 1px solid var(--gray-2);
936
+ }
937
+
938
+ .cta-check {
939
+ color: var(--accent);
940
+ font-weight: 800;
941
+ font-size: 0.75rem;
942
+ }
943
+
944
+ /* FOOTER */
945
+ .footer {
946
+ border-top: 1px solid var(--gray-2);
947
+ padding: 40px 48px;
948
+ }
949
+
950
+ .footer-inner {
951
+ max-width: 1440px;
952
+ margin: 0 auto;
953
+ display: flex;
954
+ justify-content: space-between;
955
+ align-items: center;
956
+ }
957
+
958
+ .footer-brand {
959
+ font-family: 'Syne', sans-serif;
960
+ font-weight: 800;
961
+ font-size: 1rem;
962
+ text-transform: uppercase;
963
+ letter-spacing: -0.02em;
964
+ }
965
+
966
+ .footer-links {
967
+ display: flex;
968
+ gap: 28px;
969
+ list-style: none;
970
+ }
971
+
972
+ .footer-links a {
973
+ text-decoration: none;
974
+ font-size: 0.75rem;
975
+ color: var(--gray-4);
976
+ text-transform: uppercase;
977
+ letter-spacing: 0.06em;
978
+ font-weight: 500;
979
+ transition: color 0.2s;
980
+ }
981
+
982
+ .footer-links a:hover { color: var(--white); }
983
+
984
+ .footer-copy {
985
+ font-size: 0.6875rem;
986
+ color: var(--gray-3);
987
+ }
988
+
989
+ /* MOBILE */
990
+ @media (max-width: 1024px) {
991
+ .hero-top { grid-template-columns: 1fr; }
992
+ .hd-content { grid-template-columns: 1fr; }
993
+ .hd-sidebar { display: none; }
994
+ .stats-inner { grid-template-columns: 1fr 1fr; }
995
+ .stat-cell:nth-child(2) { border-right: none; }
996
+ .stat-cell:nth-child(n+3) { border-top: 1px solid var(--gray-2); }
997
+ .features-brutal-grid { grid-template-columns: 1fr 1fr; }
998
+ .fb-card:nth-child(2n) { border-right: none; }
999
+ .fb-card:nth-child(n+5) { border-bottom: none; }
1000
+ .keyboard-inner { grid-template-columns: 1fr; gap: 60px; }
1001
+ .kb-mockup { display: none; }
1002
+ .wf-steps { grid-template-columns: 1fr 1fr; }
1003
+ .wf-step:nth-child(2) { border-right: none; }
1004
+ .wf-step:nth-child(2) .wf-step-arrow { display: none; }
1005
+ .wf-step:nth-child(n+3) { border-top: 1px solid var(--gray-2); }
1006
+ .integrations-inner { grid-template-columns: 1fr; }
1007
+ .cta-inner { grid-template-columns: 1fr; gap: 40px; }
1008
+ }
1009
+
1010
+ @media (max-width: 640px) {
1011
+ .nav { padding: 16px 24px; }
1012
+ .nav-center { display: none; }
1013
+ .hero { padding: 48px 24px 0; }
1014
+ .stats-inner { grid-template-columns: 1fr; }
1015
+ .stat-cell { border-right: none; border-bottom: 1px solid var(--gray-2); }
1016
+ .stat-cell:last-child { border-bottom: none; }
1017
+ .features, .workflow { padding: 80px 24px; }
1018
+ .features-brutal-grid { grid-template-columns: 1fr; }
1019
+ .fb-card { border-right: none !important; border-bottom: 1px solid var(--gray-2) !important; }
1020
+ .fb-card:last-child { border-bottom: none !important; }
1021
+ .keyboard-section { padding: 80px 24px; }
1022
+ .wf-steps { grid-template-columns: 1fr; }
1023
+ .wf-step { border-right: none !important; border-bottom: 1px solid var(--gray-2); }
1024
+ .wf-step:last-child { border-bottom: none; }
1025
+ .wf-step-arrow { display: none; }
1026
+ .integrations-section { padding: 80px 24px; }
1027
+ .cta-section { padding: 80px 24px; }
1028
+ .footer { padding: 32px 24px; }
1029
+ .footer-inner { flex-direction: column; gap: 24px; text-align: center; }
1030
+ .footer-links { flex-wrap: wrap; justify-content: center; }
1031
+ }
1032
+ </style>
1033
+ </head>
1034
+ <body>
1035
+
1036
+ <!-- NAV -->
1037
+ <nav class="nav">
1038
+ <div class="nav-logo">Plume</div>
1039
+ <ul class="nav-center">
1040
+ <li><a href="#features">Features</a></li>
1041
+ <li><a href="#keyboard">Keyboard</a></li>
1042
+ <li><a href="#workflow">Workflow</a></li>
1043
+ <li><a href="#integrations">Integrations</a></li>
1044
+ </ul>
1045
+ <div class="nav-right">
1046
+ <a href="#" class="nav-signin">Sign in</a>
1047
+ <a href="#" class="nav-cta">Get started</a>
1048
+ </div>
1049
+ </nav>
1050
+
1051
+ <!-- HERO -->
1052
+ <section class="hero">
1053
+ <div class="hero-top">
1054
+ <h1>Ship<br>software<span class="accent">,</span><br>not status<br>updates<span class="accent">.</span></h1>
1055
+ <div class="hero-right-text">
1056
+ <p>Plume is issue tracking for teams who care about craft. Keyboard-first, opinionated, and fast enough that you'll forget it's a web app. Issues, cycles, projects &mdash; no bureaucracy.</p>
1057
+ <div class="hero-actions">
1058
+ <a href="#" class="btn-accent">Get started free</a>
1059
+ <a href="#" class="btn-outline">Watch demo</a>
1060
+ </div>
1061
+ </div>
1062
+ </div>
1063
+
1064
+ <!-- Dark dashboard as hero content -->
1065
+ <div class="hero-dashboard">
1066
+ <div class="hd-bar">
1067
+ <div class="hd-dots">
1068
+ <div class="hd-dot r"></div>
1069
+ <div class="hd-dot y"></div>
1070
+ <div class="hd-dot g"></div>
1071
+ </div>
1072
+ <div class="hd-tabs">
1073
+ <div class="hd-tab">Board</div>
1074
+ <div class="hd-tab active">List</div>
1075
+ <div class="hd-tab">Timeline</div>
1076
+ <div class="hd-tab">Progress</div>
1077
+ </div>
1078
+ </div>
1079
+ <div class="hd-content">
1080
+ <div class="hd-sidebar">
1081
+ <div class="hd-nav-section">
1082
+ <div class="hd-nav-label">Workspace</div>
1083
+ <div class="hd-nav-item active"><div class="hd-nav-dot"></div>My Issues</div>
1084
+ <div class="hd-nav-item"><div class="hd-nav-dot"></div>All Issues</div>
1085
+ <div class="hd-nav-item"><div class="hd-nav-dot"></div>Activity</div>
1086
+ </div>
1087
+ <div class="hd-nav-section">
1088
+ <div class="hd-nav-label">Cycles</div>
1089
+ <div class="hd-nav-item"><div class="hd-nav-dot"></div>Cycle 24 &middot; Active</div>
1090
+ <div class="hd-nav-item"><div class="hd-nav-dot"></div>Cycle 25 &middot; Next</div>
1091
+ </div>
1092
+ <div class="hd-nav-section">
1093
+ <div class="hd-nav-label">Projects</div>
1094
+ <div class="hd-nav-item"><div class="hd-nav-dot"></div>Auth Rewrite</div>
1095
+ <div class="hd-nav-item"><div class="hd-nav-dot"></div>Mobile App</div>
1096
+ <div class="hd-nav-item"><div class="hd-nav-dot"></div>API v3</div>
1097
+ <div class="hd-nav-item"><div class="hd-nav-dot"></div>Design System</div>
1098
+ </div>
1099
+ </div>
1100
+ <div class="hd-main">
1101
+ <div class="hd-main-top">
1102
+ <div class="hd-main-title">My Issues</div>
1103
+ <div class="hd-filters">
1104
+ <div class="hd-filter active">In Progress</div>
1105
+ <div class="hd-filter">Todo</div>
1106
+ <div class="hd-filter">Done</div>
1107
+ </div>
1108
+ </div>
1109
+ <ul class="hd-issues">
1110
+ <li class="hd-issue">
1111
+ <div class="hd-check done"></div>
1112
+ <span class="hd-issue-id">PLM-142</span>
1113
+ <span class="hd-issue-title">Migrate session store to Redis cluster</span>
1114
+ <span class="hd-tag tag-infra">infra</span>
1115
+ <span class="hd-pri pri-h">H</span>
1116
+ <span class="hd-avatar">AC</span>
1117
+ </li>
1118
+ <li class="hd-issue">
1119
+ <div class="hd-check"></div>
1120
+ <span class="hd-issue-id">PLM-158</span>
1121
+ <span class="hd-issue-title">Bulk-action toolbar for issue list</span>
1122
+ <span class="hd-tag tag-feat">feat</span>
1123
+ <span class="hd-pri pri-m">M</span>
1124
+ <span class="hd-avatar">MS</span>
1125
+ </li>
1126
+ <li class="hd-issue">
1127
+ <div class="hd-check"></div>
1128
+ <span class="hd-issue-id">PLM-163</span>
1129
+ <span class="hd-issue-title">Fix timezone offset in cycle date rendering</span>
1130
+ <span class="hd-tag tag-bug">bug</span>
1131
+ <span class="hd-pri pri-u">!</span>
1132
+ <span class="hd-avatar">AC</span>
1133
+ </li>
1134
+ <li class="hd-issue">
1135
+ <div class="hd-check"></div>
1136
+ <span class="hd-issue-id">PLM-167</span>
1137
+ <span class="hd-issue-title">Tree-shake chart library, reduce bundle 40%</span>
1138
+ <span class="hd-tag tag-perf">perf</span>
1139
+ <span class="hd-pri pri-m">M</span>
1140
+ <span class="hd-avatar">JP</span>
1141
+ </li>
1142
+ <li class="hd-issue">
1143
+ <div class="hd-check done"></div>
1144
+ <span class="hd-issue-id">PLM-171</span>
1145
+ <span class="hd-issue-title">Keyboard navigation: J/K in list view</span>
1146
+ <span class="hd-tag tag-dx">dx</span>
1147
+ <span class="hd-pri pri-h">H</span>
1148
+ <span class="hd-avatar">SL</span>
1149
+ </li>
1150
+ <li class="hd-issue">
1151
+ <div class="hd-check"></div>
1152
+ <span class="hd-issue-id">PLM-174</span>
1153
+ <span class="hd-issue-title">OAuth flow for GitHub app integration</span>
1154
+ <span class="hd-tag tag-feat">feat</span>
1155
+ <span class="hd-pri pri-h">H</span>
1156
+ <span class="hd-avatar">AC</span>
1157
+ </li>
1158
+ <li class="hd-issue">
1159
+ <div class="hd-check"></div>
1160
+ <span class="hd-issue-id">PLM-179</span>
1161
+ <span class="hd-issue-title">Cycle velocity chart in progress view</span>
1162
+ <span class="hd-tag tag-feat">feat</span>
1163
+ <span class="hd-pri pri-l">L</span>
1164
+ <span class="hd-avatar">JP</span>
1165
+ </li>
1166
+ <li class="hd-issue">
1167
+ <div class="hd-check"></div>
1168
+ <span class="hd-issue-id">PLM-183</span>
1169
+ <span class="hd-issue-title">Custom status workflows per project</span>
1170
+ <span class="hd-tag tag-feat">feat</span>
1171
+ <span class="hd-pri pri-m">M</span>
1172
+ <span class="hd-avatar">MS</span>
1173
+ </li>
1174
+ </ul>
1175
+ </div>
1176
+ </div>
1177
+ </div>
1178
+ </section>
1179
+
1180
+ <!-- STATS BAR -->
1181
+ <div class="stats-bar">
1182
+ <div class="stats-inner">
1183
+ <div class="stat-cell">
1184
+ <div class="stat-value"><span class="accent">&lt;</span>50ms</div>
1185
+ <div class="stat-label">UI Response Time</div>
1186
+ </div>
1187
+ <div class="stat-cell">
1188
+ <div class="stat-value">40<span class="accent">+</span></div>
1189
+ <div class="stat-label">Keyboard Shortcuts</div>
1190
+ </div>
1191
+ <div class="stat-cell">
1192
+ <div class="stat-value">0</div>
1193
+ <div class="stat-label">Loading Spinners</div>
1194
+ </div>
1195
+ <div class="stat-cell">
1196
+ <div class="stat-value">1<span class="accent">s</span></div>
1197
+ <div class="stat-label">Issue Creation</div>
1198
+ </div>
1199
+ </div>
1200
+ </div>
1201
+
1202
+ <!-- FEATURES -->
1203
+ <section class="features" id="features">
1204
+ <div class="features-heading">
1205
+ <h2>Everything you need.<br>Nothing you don't.</h2>
1206
+ <p>Plume is opinionated about workflow. Every feature exists because shipping software demands it. No feature exists because a sales deck required it.</p>
1207
+ </div>
1208
+
1209
+ <div class="features-brutal-grid">
1210
+ <div class="fb-card">
1211
+ <div class="fb-index">01</div>
1212
+ <div class="fb-title">Issues</div>
1213
+ <div class="fb-body">The atomic unit of work. Status, priority, assignee, labels, rich markdown. Create in under a second. Update inline. No modals, no save buttons, no page reloads.</div>
1214
+ <div class="fb-detail">Sub-issues. Bulk operations. Custom fields. Image paste. Syntax highlighting in descriptions. Filter by any combination.</div>
1215
+ </div>
1216
+ <div class="fb-card">
1217
+ <div class="fb-index">02</div>
1218
+ <div class="fb-title">Cycles</div>
1219
+ <div class="fb-body">Time-boxed sprints that keep your team in rhythm. Drag issues in, track progress, review what shipped. Unfinished work rolls forward. No ceremony.</div>
1220
+ <div class="fb-detail">1-4 week duration. Burndown charts. Velocity tracking. Scope-change alerts. Auto-archive on close.</div>
1221
+ </div>
1222
+ <div class="fb-card">
1223
+ <div class="fb-index">03</div>
1224
+ <div class="fb-title">Projects</div>
1225
+ <div class="fb-body">Long-running initiatives that span cycles. Milestones, progress tracking, roadmap views. See which sprints contributed and how much is left.</div>
1226
+ <div class="fb-detail">Timeline view. Rich status updates. Automatic progress from issues. Project-scoped boards and filters.</div>
1227
+ </div>
1228
+ <div class="fb-card">
1229
+ <div class="fb-index">04</div>
1230
+ <div class="fb-title">Views</div>
1231
+ <div class="fb-body">Board, list, timeline. Filter by status, priority, assignee, label, cycle, project. Save views for yourself or your team. Every view loads instantly.</div>
1232
+ <div class="fb-detail">Custom saved views. Shareable URLs. Group by any field. Sort by priority, date, or custom order.</div>
1233
+ </div>
1234
+ <div class="fb-card">
1235
+ <div class="fb-index">05</div>
1236
+ <div class="fb-title">Speed</div>
1237
+ <div class="fb-body">Engineered for sub-50ms interactions. Optimistic UI, local-first data, incremental sync. No spinners. No loading states. Your attention is never interrupted.</div>
1238
+ <div class="fb-detail">Offline-capable. Background sync. Instant navigation. Sub-second page loads on any connection.</div>
1239
+ </div>
1240
+ <div class="fb-card">
1241
+ <div class="fb-index">06</div>
1242
+ <div class="fb-title">API</div>
1243
+ <div class="fb-body">Everything in Plume is accessible via REST and GraphQL. Build custom workflows, automate triage, integrate with internal tools. First-class developer experience.</div>
1244
+ <div class="fb-detail">Webhooks. OAuth2 apps. Rate limiting with clear headers. Comprehensive docs with runnable examples.</div>
1245
+ </div>
1246
+ </div>
1247
+ </section>
1248
+
1249
+ <!-- KEYBOARD SECTION -->
1250
+ <section class="keyboard-section" id="keyboard">
1251
+ <div class="keyboard-inner">
1252
+ <div class="keyboard-left">
1253
+ <h2>Your hands never<br>leave the keyboard.</h2>
1254
+ <p>Every action in Plume is reachable from the home row. Navigate, triage, assign, and close without touching the mouse. The command palette puts your entire workspace at your fingertips.</p>
1255
+
1256
+ <!-- Keyboard mockup -->
1257
+ <div class="kb-mockup">
1258
+ <div class="kb-row">
1259
+ <div class="kb-key">esc</div>
1260
+ <div class="kb-key">1</div>
1261
+ <div class="kb-key">2</div>
1262
+ <div class="kb-key">3</div>
1263
+ <div class="kb-key">4</div>
1264
+ <div class="kb-key">5</div>
1265
+ <div class="kb-key">6</div>
1266
+ <div class="kb-key">7</div>
1267
+ <div class="kb-key">8</div>
1268
+ <div class="kb-key">9</div>
1269
+ <div class="kb-key">0</div>
1270
+ <div class="kb-key">-</div>
1271
+ <div class="kb-key">=</div>
1272
+ <div class="kb-key wider">del</div>
1273
+ </div>
1274
+ <div class="kb-row">
1275
+ <div class="kb-key wide">tab</div>
1276
+ <div class="kb-key">q</div>
1277
+ <div class="kb-key">w</div>
1278
+ <div class="kb-key">e</div>
1279
+ <div class="kb-key">r</div>
1280
+ <div class="kb-key">t</div>
1281
+ <div class="kb-key">y</div>
1282
+ <div class="kb-key">u</div>
1283
+ <div class="kb-key highlight">i</div>
1284
+ <div class="kb-key">o</div>
1285
+ <div class="kb-key highlight">p</div>
1286
+ <div class="kb-key">[</div>
1287
+ <div class="kb-key">]</div>
1288
+ <div class="kb-key wide">\</div>
1289
+ </div>
1290
+ <div class="kb-row">
1291
+ <div class="kb-key wider">caps</div>
1292
+ <div class="kb-key highlight">a</div>
1293
+ <div class="kb-key highlight">s</div>
1294
+ <div class="kb-key">d</div>
1295
+ <div class="kb-key">f</div>
1296
+ <div class="kb-key highlight">g</div>
1297
+ <div class="kb-key">h</div>
1298
+ <div class="kb-key highlight">j</div>
1299
+ <div class="kb-key highlight">k</div>
1300
+ <div class="kb-key highlight">l</div>
1301
+ <div class="kb-key">;</div>
1302
+ <div class="kb-key">'</div>
1303
+ <div class="kb-key widest">enter</div>
1304
+ </div>
1305
+ <div class="kb-row">
1306
+ <div class="kb-key widest">shift</div>
1307
+ <div class="kb-key">z</div>
1308
+ <div class="kb-key">x</div>
1309
+ <div class="kb-key highlight">c</div>
1310
+ <div class="kb-key">v</div>
1311
+ <div class="kb-key">b</div>
1312
+ <div class="kb-key">n</div>
1313
+ <div class="kb-key">m</div>
1314
+ <div class="kb-key">,</div>
1315
+ <div class="kb-key">.</div>
1316
+ <div class="kb-key highlight">/</div>
1317
+ <div class="kb-key widest">shift</div>
1318
+ </div>
1319
+ <div class="kb-row">
1320
+ <div class="kb-key wide">ctrl</div>
1321
+ <div class="kb-key wide">opt</div>
1322
+ <div class="kb-key highlight wider">cmd</div>
1323
+ <div class="kb-key space"></div>
1324
+ <div class="kb-key wider">cmd</div>
1325
+ <div class="kb-key wide">opt</div>
1326
+ <div class="kb-key wide">ctrl</div>
1327
+ </div>
1328
+ <div class="kb-legend">
1329
+ <div class="kb-legend-item"><div class="kb-legend-dot"></div> Shortcut keys</div>
1330
+ <div class="kb-legend-item">C = New issue &middot; J/K = Navigate &middot; S = Status &middot; P = Priority &middot; / = Search</div>
1331
+ </div>
1332
+ </div>
1333
+ </div>
1334
+
1335
+ <div class="shortcut-table">
1336
+ <div class="st-group">
1337
+ <div class="st-group-title">Navigation</div>
1338
+ <div class="st-row"><span class="st-action">Command palette</span><div class="st-keys"><span class="k">&#8984;</span><span class="k">K</span></div></div>
1339
+ <div class="st-row"><span class="st-action">Search issues</span><div class="st-keys"><span class="k">/</span></div></div>
1340
+ <div class="st-row"><span class="st-action">My Issues</span><div class="st-keys"><span class="k">G</span><span class="k">M</span></div></div>
1341
+ <div class="st-row"><span class="st-action">Active Cycle</span><div class="st-keys"><span class="k">G</span><span class="k">C</span></div></div>
1342
+ <div class="st-row"><span class="st-action">Projects</span><div class="st-keys"><span class="k">G</span><span class="k">P</span></div></div>
1343
+ <div class="st-row"><span class="st-action">Next / Previous</span><div class="st-keys"><span class="k">J</span><span class="k">K</span></div></div>
1344
+ <div class="st-row"><span class="st-action">Open issue</span><div class="st-keys"><span class="k">Enter</span></div></div>
1345
+ <div class="st-row"><span class="st-action">Back</span><div class="st-keys"><span class="k">Esc</span></div></div>
1346
+ </div>
1347
+ <div class="st-group">
1348
+ <div class="st-group-title">Actions</div>
1349
+ <div class="st-row"><span class="st-action">New issue</span><div class="st-keys"><span class="k">C</span></div></div>
1350
+ <div class="st-row"><span class="st-action">Set priority</span><div class="st-keys"><span class="k">P</span></div></div>
1351
+ <div class="st-row"><span class="st-action">Change status</span><div class="st-keys"><span class="k">S</span></div></div>
1352
+ <div class="st-row"><span class="st-action">Assign</span><div class="st-keys"><span class="k">A</span></div></div>
1353
+ <div class="st-row"><span class="st-action">Assign to me</span><div class="st-keys"><span class="k">I</span></div></div>
1354
+ <div class="st-row"><span class="st-action">Add label</span><div class="st-keys"><span class="k">L</span></div></div>
1355
+ <div class="st-row"><span class="st-action">Add to cycle</span><div class="st-keys"><span class="k">Shift</span><span class="k">C</span></div></div>
1356
+ <div class="st-row"><span class="st-action">Delete issue</span><div class="st-keys"><span class="k">&#9003;</span></div></div>
1357
+ </div>
1358
+ </div>
1359
+ </div>
1360
+ </section>
1361
+
1362
+ <!-- WORKFLOW -->
1363
+ <section class="workflow" id="workflow">
1364
+ <h2>Capture. Plan.<br>Build. Ship.</h2>
1365
+ <p>Four phases. One tool. No tab-switching, no data entry, no status meetings about statuses.</p>
1366
+
1367
+ <div class="wf-steps">
1368
+ <div class="wf-step">
1369
+ <div class="wf-step-num">01</div>
1370
+ <div class="wf-step-title">Capture</div>
1371
+ <div class="wf-step-desc">Press C. Type the title. Set priority. Done. Issues get a unique ID, a place in the backlog, and context from the start. No forms, no mandatory fields.</div>
1372
+ <div class="wf-step-detail">Also: create from Slack, from GitHub comments, from the API. Templates for bugs, features, tasks.</div>
1373
+ <div class="wf-step-arrow">&rarr;</div>
1374
+ </div>
1375
+ <div class="wf-step">
1376
+ <div class="wf-step-num">02</div>
1377
+ <div class="wf-step-title">Plan</div>
1378
+ <div class="wf-step-desc">Drag issues into cycles. Set scope. Track velocity from past sprints to know what fits. Scope-change tracking protects your commitments mid-sprint.</div>
1379
+ <div class="wf-step-detail">Backlog grooming. Effort estimates. Dependency flags. Capacity calculation from team size and history.</div>
1380
+ <div class="wf-step-arrow">&rarr;</div>
1381
+ </div>
1382
+ <div class="wf-step">
1383
+ <div class="wf-step-num">03</div>
1384
+ <div class="wf-step-title">Build</div>
1385
+ <div class="wf-step-desc">Issues move as code ships. PRs link by branch name. Statuses transition on merge. The board reflects reality without anyone touching it.</div>
1386
+ <div class="wf-step-detail">GitHub/GitLab sync. Branch name patterns: plm-163-fix-tz. Review status on the issue. CI status inline.</div>
1387
+ <div class="wf-step-arrow">&rarr;</div>
1388
+ </div>
1389
+ <div class="wf-step">
1390
+ <div class="wf-step-num">04</div>
1391
+ <div class="wf-step-title">Ship</div>
1392
+ <div class="wf-step-desc">Close the cycle. Review velocity. Archive what shipped. Unfinished work rolls forward. Your team knows exactly what landed and what's next.</div>
1393
+ <div class="wf-step-detail">Cycle summaries. Changelog generation. Slack notifications. Historical velocity trends for better estimates.</div>
1394
+ </div>
1395
+ </div>
1396
+ </section>
1397
+
1398
+ <!-- INTEGRATIONS -->
1399
+ <section class="integrations-section" id="integrations">
1400
+ <div class="integrations-inner">
1401
+ <div class="integrations-left">
1402
+ <h2>Plugs into<br>your stack.</h2>
1403
+ <p>Plume connects to the tools your team uses. No data silos, no context switching, no copy-paste between tabs.</p>
1404
+
1405
+ <ul class="int-list">
1406
+ <li class="int-item">
1407
+ <div class="int-icon">GH</div>
1408
+ <div>
1409
+ <div class="int-name">GitHub</div>
1410
+ <div class="int-desc">PRs, branches, commits. Auto-link by branch name. Status transitions on merge. Bi-directional sync.</div>
1411
+ </div>
1412
+ </li>
1413
+ <li class="int-item">
1414
+ <div class="int-icon">GL</div>
1415
+ <div>
1416
+ <div class="int-name">GitLab</div>
1417
+ <div class="int-desc">Merge requests, pipelines, branch linking. Full bi-directional sync with your GitLab workflow.</div>
1418
+ </div>
1419
+ </li>
1420
+ <li class="int-item">
1421
+ <div class="int-icon">SK</div>
1422
+ <div>
1423
+ <div class="int-name">Slack</div>
1424
+ <div class="int-desc">Create issues from messages. Status change notifications. /plume slash commands for quick actions.</div>
1425
+ </div>
1426
+ </li>
1427
+ <li class="int-item">
1428
+ <div class="int-icon">FG</div>
1429
+ <div>
1430
+ <div class="int-name">Figma</div>
1431
+ <div class="int-desc">Embed designs in issues. Inline thumbnails. Keep design and engineering context together.</div>
1432
+ </div>
1433
+ </li>
1434
+ <li class="int-item">
1435
+ <div class="int-icon">SY</div>
1436
+ <div>
1437
+ <div class="int-name">Sentry</div>
1438
+ <div class="int-desc">Auto-create issues from production errors. Stack traces linked. Close on deploy.</div>
1439
+ </div>
1440
+ </li>
1441
+ </ul>
1442
+ </div>
1443
+
1444
+ <div class="git-feed">
1445
+ <div class="gf-header">
1446
+ <div class="gf-title">Git Activity</div>
1447
+ <div class="gf-badge">Live</div>
1448
+ </div>
1449
+ <ul class="gf-list">
1450
+ <li class="gf-item">
1451
+ <div class="gf-dot merged"></div>
1452
+ <div>
1453
+ <div class="gf-msg">fix: convert cycle dates to user timezone</div>
1454
+ <div class="gf-meta">a.chen &middot; merged 2m ago &middot; PLM-163</div>
1455
+ <a href="#" class="gf-link">PR #247 &rarr;</a>
1456
+ </div>
1457
+ </li>
1458
+ <li class="gf-item">
1459
+ <div class="gf-dot review"></div>
1460
+ <div>
1461
+ <div class="gf-msg">feat: bulk selection toolbar with shift-click</div>
1462
+ <div class="gf-meta">m.santos &middot; in review &middot; PLM-158</div>
1463
+ <a href="#" class="gf-link">PR #245 &rarr;</a>
1464
+ </div>
1465
+ </li>
1466
+ <li class="gf-item">
1467
+ <div class="gf-dot open"></div>
1468
+ <div>
1469
+ <div class="gf-msg">perf: tree-shake recharts, -42% bundle</div>
1470
+ <div class="gf-meta">j.park &middot; open 1h ago &middot; PLM-167</div>
1471
+ <a href="#" class="gf-link">PR #243 &rarr;</a>
1472
+ </div>
1473
+ </li>
1474
+ <li class="gf-item">
1475
+ <div class="gf-dot merged"></div>
1476
+ <div>
1477
+ <div class="gf-msg">feat: j/k keyboard nav in list view</div>
1478
+ <div class="gf-meta">s.lee &middot; merged 3h ago &middot; PLM-171</div>
1479
+ <a href="#" class="gf-link">PR #241 &rarr;</a>
1480
+ </div>
1481
+ </li>
1482
+ <li class="gf-item">
1483
+ <div class="gf-dot merged"></div>
1484
+ <div>
1485
+ <div class="gf-msg">feat: oauth2 github app installation flow</div>
1486
+ <div class="gf-meta">a.chen &middot; merged 5h ago &middot; PLM-174</div>
1487
+ <a href="#" class="gf-link">PR #239 &rarr;</a>
1488
+ </div>
1489
+ </li>
1490
+ </ul>
1491
+ </div>
1492
+ </div>
1493
+ </section>
1494
+
1495
+ <!-- CTA -->
1496
+ <section class="cta-section">
1497
+ <div class="cta-inner">
1498
+ <h2>Stop managing<br>your tools<span class="accent">.</span><br>Start shipping<span class="accent">.</span></h2>
1499
+ <div class="cta-right-content">
1500
+ <p>Free for teams up to 5. No credit card. No trial clock. Every feature included. Upgrade when you need SSO, audit logs, or priority support.</p>
1501
+ <ul class="cta-list">
1502
+ <li><span class="cta-check">//</span> Unlimited issues, cycles, projects</li>
1503
+ <li><span class="cta-check">//</span> GitHub + GitLab + Slack integrations</li>
1504
+ <li><span class="cta-check">//</span> 40+ keyboard shortcuts</li>
1505
+ <li><span class="cta-check">//</span> Command palette</li>
1506
+ <li><span class="cta-check">//</span> REST + GraphQL API</li>
1507
+ <li><span class="cta-check">//</span> Roadmap and progress views</li>
1508
+ </ul>
1509
+ <a href="#" class="btn-accent">Get started free</a>
1510
+ </div>
1511
+ </div>
1512
+ </section>
1513
+
1514
+ <!-- FOOTER -->
1515
+ <footer class="footer">
1516
+ <div class="footer-inner">
1517
+ <div class="footer-brand">Plume</div>
1518
+ <ul class="footer-links">
1519
+ <li><a href="#">Features</a></li>
1520
+ <li><a href="#">Pricing</a></li>
1521
+ <li><a href="#">Docs</a></li>
1522
+ <li><a href="#">Changelog</a></li>
1523
+ <li><a href="#">Blog</a></li>
1524
+ <li><a href="#">Twitter</a></li>
1525
+ <li><a href="#">GitHub</a></li>
1526
+ </ul>
1527
+ <div class="footer-copy">&copy; 2026 Plume</div>
1528
+ </div>
1529
+ </footer>
1530
+
1531
+ </body>
1532
+ </html>