forgedock 1.0.16 → 1.0.18

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 (190) hide show
  1. package/README.md +54 -3
  2. package/bin/cross-publish.mjs +344 -0
  3. package/bin/forgedock.mjs +2205 -541
  4. package/bin/github-app-manifest.json.license +2 -0
  5. package/bin/hooks/session-start.mjs +4 -5
  6. package/bin/registry.mjs +20 -0
  7. package/bin/tui.mjs +172 -96
  8. package/commands/adopt.md +433 -0
  9. package/commands/analytics.md +2 -0
  10. package/commands/audit-agents.md +2 -0
  11. package/commands/audit.md +2 -0
  12. package/commands/autopilot.md +77 -0
  13. package/commands/changelog.md +354 -0
  14. package/commands/cleanup.md +2 -0
  15. package/commands/compat-audit.md +330 -0
  16. package/commands/deploy-info.md +6 -5
  17. package/commands/design-bench.md +176 -0
  18. package/commands/design-render-critique-loop.md +103 -0
  19. package/commands/design.md +259 -0
  20. package/commands/diagnose.md +483 -0
  21. package/commands/explain.md +349 -0
  22. package/commands/forge-stats.md +2 -0
  23. package/commands/forgedock-init.md +2 -0
  24. package/commands/geo-audit.md +2 -0
  25. package/commands/incident-response.md +2 -0
  26. package/commands/issue.md +9 -3
  27. package/commands/milestone.md +2 -0
  28. package/commands/optimize.md +411 -0
  29. package/commands/orchestrate.md +239 -0
  30. package/commands/pipeline-health.md +60 -1
  31. package/commands/qa-sweep.md +39 -2
  32. package/commands/quality-gate.md +67 -0
  33. package/commands/replay.md +263 -0
  34. package/commands/resume.md +264 -0
  35. package/commands/review-pr-agents.md +5 -1
  36. package/commands/review-pr-staging.md +160 -2
  37. package/commands/review-pr.md +85 -3
  38. package/commands/rollback.md +2 -0
  39. package/commands/scope.md +280 -0
  40. package/commands/security-audit.md +2 -0
  41. package/commands/status.md +262 -0
  42. package/commands/sync-ecosystem.md +2 -0
  43. package/commands/test-gate.md +929 -0
  44. package/commands/validate.md +2 -0
  45. package/commands/work-on/build/architect.md +128 -18
  46. package/commands/work-on/build/context.md +130 -17
  47. package/commands/work-on/build/implement.md +7 -3
  48. package/commands/work-on/build/validate.md +2 -0
  49. package/commands/work-on/build.md +32 -7
  50. package/commands/work-on/close.md +85 -0
  51. package/commands/work-on/decompose.md +2 -0
  52. package/commands/work-on/investigate.md +30 -3
  53. package/commands/work-on/review.md +13 -1
  54. package/commands/work-on-monolithic.md +2 -0
  55. package/commands/work-on.md +676 -38
  56. package/docs/BRAND.md +51 -0
  57. package/docs/CI.md +177 -0
  58. package/docs/CONFIG.md +94 -0
  59. package/docs/FORGE-PROTOCOL.md +324 -0
  60. package/docs/articles/b-vs-c-baseline.md +210 -0
  61. package/docs/articles/full-abc-benchmark.md +205 -0
  62. package/docs/articles/per-repo-adaptive-scripts-token-savings.md +174 -0
  63. package/docs/articles/selective-spec-loading-token-savings.md +140 -0
  64. package/docs/claude-breakpoints.json +47 -0
  65. package/docs/design/abc-benchmark.md +195 -0
  66. package/docs/design/design-architect-rationale.md +123 -0
  67. package/docs/design/design-memory.md +61 -0
  68. package/docs/design/design-spec-schema.md +248 -0
  69. package/docs/design/design-system-lint.md +150 -0
  70. package/docs/design/divergent-generation.md +106 -0
  71. package/docs/design/effects-appropriateness.md +133 -0
  72. package/docs/design/fixtures/briefs/README.md +47 -0
  73. package/docs/design/fixtures/briefs/cadence.md +39 -0
  74. package/docs/design/fixtures/briefs/plume.md +39 -0
  75. package/docs/design/fixtures/briefs/slipstream.md +39 -0
  76. package/docs/design/fixtures/briefs/tender.md +39 -0
  77. package/docs/design/fixtures/briefs/voltage.md +39 -0
  78. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-1.html +364 -0
  79. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-2.html +420 -0
  80. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-3.html +506 -0
  81. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-1.html +611 -0
  82. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-2.html +594 -0
  83. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-3.html +817 -0
  84. package/docs/design/fixtures/runs/b-vs-c-baseline/runs.json +175 -0
  85. package/docs/design/fixtures/runs/b-vs-c-baseline/scorecard.json +138 -0
  86. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-1.html +373 -0
  87. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-2.html +398 -0
  88. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-3.html +595 -0
  89. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-1.html +531 -0
  90. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-2.html +565 -0
  91. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-3.html +674 -0
  92. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-1.html +388 -0
  93. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-2.html +463 -0
  94. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-3.html +568 -0
  95. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-1.html +562 -0
  96. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-2.html +618 -0
  97. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-3.html +618 -0
  98. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-1.html +364 -0
  99. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-2.html +420 -0
  100. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-3.html +506 -0
  101. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-1.html +527 -0
  102. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-2.html +445 -0
  103. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-3.html +483 -0
  104. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-1.html +611 -0
  105. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-2.html +594 -0
  106. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-3.html +817 -0
  107. package/docs/design/fixtures/runs/full-abc/runs.json +190 -0
  108. package/docs/design/fixtures/runs/full-abc/scorecard.json +144 -0
  109. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-1.html +496 -0
  110. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-2.html +447 -0
  111. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-3.html +564 -0
  112. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-1.html +373 -0
  113. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-2.html +398 -0
  114. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-3.html +595 -0
  115. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-1.html +622 -0
  116. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-2.html +475 -0
  117. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-3.html +660 -0
  118. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-1.html +531 -0
  119. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-2.html +565 -0
  120. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-3.html +674 -0
  121. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-1.html +525 -0
  122. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-2.html +446 -0
  123. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-3.html +463 -0
  124. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-1.html +388 -0
  125. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-2.html +463 -0
  126. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-3.html +568 -0
  127. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-1.html +1068 -0
  128. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-2.html +1423 -0
  129. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-3.html +1245 -0
  130. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-1.html +305 -0
  131. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-2.html +327 -0
  132. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-3.html +428 -0
  133. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-1.html +1270 -0
  134. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-2.html +1172 -0
  135. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-3.html +1532 -0
  136. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-1.html +315 -0
  137. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-2.html +342 -0
  138. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-3.html +353 -0
  139. package/docs/design/fixtures/runs/full-abc-opus/runs.json +190 -0
  140. package/docs/design/fixtures/runs/full-abc-opus/scorecard.json +144 -0
  141. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-1.html +345 -0
  142. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-2.html +396 -0
  143. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-3.html +502 -0
  144. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-1.html +408 -0
  145. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-2.html +446 -0
  146. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-3.html +496 -0
  147. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-1.html +813 -0
  148. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-2.html +711 -0
  149. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-3.html +721 -0
  150. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-1.html +280 -0
  151. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-2.html +291 -0
  152. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-3.html +366 -0
  153. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-1.html +1010 -0
  154. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-2.html +836 -0
  155. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-3.html +930 -0
  156. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-1.html +407 -0
  157. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-2.html +396 -0
  158. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-3.html +529 -0
  159. package/docs/design/foundations/brutalist.css +294 -0
  160. package/docs/design/foundations/editorial.css +300 -0
  161. package/docs/design/foundations/minimal-luxury.css +295 -0
  162. package/docs/design/foundations/technical.css +293 -0
  163. package/docs/design/foundations/warm-photo.css +299 -0
  164. package/docs/design/reference-corpus.md +1726 -0
  165. package/docs/design/render-critique-loop.md +57 -0
  166. package/docs/site/getting-started.md +21 -0
  167. package/docs/spec-graph-schema.md +397 -0
  168. package/package.json +3 -3
  169. package/scripts/bench-scorecard.mjs +239 -0
  170. package/scripts/build-spec-graph.mjs +509 -0
  171. package/scripts/classify-lane.sh +138 -0
  172. package/scripts/design-system-lint.mjs +993 -0
  173. package/scripts/graph-query.sh +486 -0
  174. package/scripts/transition-label.sh +169 -0
  175. package/scripts/validate-pr-target.sh +30 -0
  176. package/scripts/validate-spec-graph.sh +423 -0
  177. package/templates/devdocs/README.md +72 -0
  178. package/templates/devdocs/agent/using-forgedock.md +3 -0
  179. package/templates/devdocs/agent/using-github.md +3 -0
  180. package/templates/devdocs/index.yaml +162 -0
  181. package/templates/devdocs/project/architecture.md +3 -0
  182. package/templates/devdocs/project/conventions.md +3 -0
  183. package/templates/devdocs/project/custom-instructions.md +3 -0
  184. package/templates/devdocs/project/glossary.md +3 -0
  185. package/templates/devdocs/project/stack.md +3 -0
  186. package/templates/devdocs/templates/commit-convention.md +3 -0
  187. package/templates/devdocs/templates/issue.md +3 -0
  188. package/templates/devdocs/templates/pull-request.md +3 -0
  189. package/templates/devdocs/templates/review-finding.md +3 -0
  190. package/templates/workflows/forgedock-review.yml +96 -0
package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-1.html ADDED
@@ -0,0 +1,1270 @@
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 - Issue tracking for teams who ship</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=DM+Serif+Display&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
10
+
11
+ :root {
12
+ --ink: #1a1a1a;
13
+ --ink-secondary: #5a5a5a;
14
+ --ink-tertiary: #8a8a8a;
15
+ --surface: #fafaf8;
16
+ --surface-raised: #ffffff;
17
+ --border: #e8e6e1;
18
+ --border-light: #f0eeea;
19
+ --accent: #2d5a27;
20
+ --accent-light: #e8f0e7;
21
+ }
22
+
23
+ html { font-size: 16px; -webkit-font-smoothing: antialiased; }
24
+
25
+ body {
26
+ font-family: 'Plus Jakarta Sans', sans-serif;
27
+ background: var(--surface);
28
+ color: var(--ink);
29
+ line-height: 1.6;
30
+ }
31
+
32
+ /* NAV */
33
+ nav {
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: space-between;
37
+ padding: 28px 64px;
38
+ max-width: 1400px;
39
+ margin: 0 auto;
40
+ }
41
+
42
+ .logo {
43
+ font-family: 'DM Serif Display', serif;
44
+ font-size: 1.5rem;
45
+ letter-spacing: -0.02em;
46
+ color: var(--ink);
47
+ }
48
+
49
+ .nav-links {
50
+ display: flex;
51
+ gap: 40px;
52
+ align-items: center;
53
+ list-style: none;
54
+ }
55
+
56
+ .nav-links a {
57
+ text-decoration: none;
58
+ color: var(--ink-secondary);
59
+ font-size: 0.875rem;
60
+ font-weight: 500;
61
+ transition: color 0.2s;
62
+ }
63
+
64
+ .nav-links a:hover { color: var(--ink); }
65
+
66
+ .nav-cta {
67
+ background: var(--ink);
68
+ color: var(--surface) !important;
69
+ padding: 10px 24px;
70
+ border-radius: 6px;
71
+ font-weight: 600;
72
+ transition: opacity 0.2s;
73
+ }
74
+
75
+ .nav-cta:hover { opacity: 0.85; }
76
+
77
+ /* HERO */
78
+ .hero {
79
+ max-width: 1400px;
80
+ margin: 0 auto;
81
+ padding: 100px 64px 80px;
82
+ display: grid;
83
+ grid-template-columns: 1fr;
84
+ text-align: left;
85
+ }
86
+
87
+ .hero-label {
88
+ font-size: 0.75rem;
89
+ font-weight: 600;
90
+ text-transform: uppercase;
91
+ letter-spacing: 0.12em;
92
+ color: var(--accent);
93
+ margin-bottom: 24px;
94
+ }
95
+
96
+ .hero h1 {
97
+ font-family: 'DM Serif Display', serif;
98
+ font-size: clamp(3rem, 6vw, 5.5rem);
99
+ line-height: 1.05;
100
+ letter-spacing: -0.03em;
101
+ max-width: 800px;
102
+ margin-bottom: 32px;
103
+ }
104
+
105
+ .hero-sub {
106
+ font-size: 1.25rem;
107
+ color: var(--ink-secondary);
108
+ max-width: 560px;
109
+ line-height: 1.7;
110
+ font-weight: 300;
111
+ margin-bottom: 48px;
112
+ }
113
+
114
+ .hero-actions {
115
+ display: flex;
116
+ gap: 16px;
117
+ align-items: center;
118
+ }
119
+
120
+ .btn-primary {
121
+ display: inline-block;
122
+ background: var(--ink);
123
+ color: var(--surface);
124
+ padding: 14px 36px;
125
+ border-radius: 6px;
126
+ font-weight: 600;
127
+ font-size: 0.9375rem;
128
+ text-decoration: none;
129
+ transition: opacity 0.2s;
130
+ font-family: inherit;
131
+ border: none;
132
+ cursor: pointer;
133
+ }
134
+
135
+ .btn-primary:hover { opacity: 0.85; }
136
+
137
+ .btn-ghost {
138
+ display: inline-block;
139
+ color: var(--ink-secondary);
140
+ padding: 14px 24px;
141
+ font-weight: 500;
142
+ font-size: 0.9375rem;
143
+ text-decoration: none;
144
+ transition: color 0.2s;
145
+ }
146
+
147
+ .btn-ghost:hover { color: var(--ink); }
148
+
149
+ /* PRODUCT SCREENSHOT */
150
+ .product-hero {
151
+ max-width: 1400px;
152
+ margin: 0 auto;
153
+ padding: 0 64px 120px;
154
+ }
155
+
156
+ .product-frame {
157
+ background: var(--surface-raised);
158
+ border: 1px solid var(--border);
159
+ border-radius: 12px;
160
+ overflow: hidden;
161
+ box-shadow: 0 24px 80px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03);
162
+ }
163
+
164
+ .product-titlebar {
165
+ display: flex;
166
+ align-items: center;
167
+ padding: 14px 20px;
168
+ border-bottom: 1px solid var(--border-light);
169
+ gap: 8px;
170
+ }
171
+
172
+ .dot { width: 10px; height: 10px; border-radius: 50%; }
173
+ .dot-r { background: #f87171; }
174
+ .dot-y { background: #fbbf24; }
175
+ .dot-g { background: #4ade80; }
176
+
177
+ .product-ui {
178
+ display: grid;
179
+ grid-template-columns: 220px 1fr 280px;
180
+ min-height: 420px;
181
+ }
182
+
183
+ .sidebar {
184
+ border-right: 1px solid var(--border-light);
185
+ padding: 16px 0;
186
+ font-size: 0.8125rem;
187
+ }
188
+
189
+ .sidebar-section {
190
+ padding: 0 16px;
191
+ margin-bottom: 20px;
192
+ }
193
+
194
+ .sidebar-label {
195
+ font-size: 0.6875rem;
196
+ text-transform: uppercase;
197
+ letter-spacing: 0.08em;
198
+ color: var(--ink-tertiary);
199
+ margin-bottom: 8px;
200
+ font-weight: 600;
201
+ }
202
+
203
+ .sidebar-item {
204
+ display: flex;
205
+ align-items: center;
206
+ gap: 8px;
207
+ padding: 6px 8px;
208
+ border-radius: 4px;
209
+ color: var(--ink-secondary);
210
+ cursor: pointer;
211
+ transition: background 0.15s;
212
+ }
213
+
214
+ .sidebar-item:hover { background: var(--border-light); }
215
+ .sidebar-item.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
216
+
217
+ .sidebar-icon {
218
+ width: 14px;
219
+ height: 14px;
220
+ border-radius: 3px;
221
+ border: 1.5px solid currentColor;
222
+ flex-shrink: 0;
223
+ }
224
+
225
+ .sidebar-icon.filled { background: currentColor; }
226
+
227
+ .main-panel { padding: 20px 24px; }
228
+
229
+ .main-header {
230
+ display: flex;
231
+ justify-content: space-between;
232
+ align-items: center;
233
+ margin-bottom: 20px;
234
+ }
235
+
236
+ .main-title {
237
+ font-size: 1rem;
238
+ font-weight: 700;
239
+ }
240
+
241
+ .filter-bar {
242
+ display: flex;
243
+ gap: 8px;
244
+ }
245
+
246
+ .filter-pill {
247
+ font-size: 0.6875rem;
248
+ padding: 4px 10px;
249
+ border-radius: 4px;
250
+ background: var(--border-light);
251
+ color: var(--ink-secondary);
252
+ font-weight: 500;
253
+ }
254
+
255
+ .issue-list { list-style: none; }
256
+
257
+ .issue-row {
258
+ display: grid;
259
+ grid-template-columns: 20px 60px 1fr auto auto;
260
+ align-items: center;
261
+ gap: 12px;
262
+ padding: 10px 0;
263
+ border-bottom: 1px solid var(--border-light);
264
+ font-size: 0.8125rem;
265
+ }
266
+
267
+ .issue-check {
268
+ width: 14px;
269
+ height: 14px;
270
+ border-radius: 50%;
271
+ border: 1.5px solid var(--border);
272
+ }
273
+
274
+ .issue-check.done {
275
+ background: var(--accent);
276
+ border-color: var(--accent);
277
+ }
278
+
279
+ .issue-id { color: var(--ink-tertiary); font-family: 'Plus Jakarta Sans', monospace; font-size: 0.75rem; }
280
+
281
+ .issue-title-text { font-weight: 500; }
282
+
283
+ .issue-priority {
284
+ display: inline-block;
285
+ width: 16px;
286
+ height: 16px;
287
+ border-radius: 3px;
288
+ font-size: 0.6rem;
289
+ text-align: center;
290
+ line-height: 16px;
291
+ font-weight: 700;
292
+ color: white;
293
+ }
294
+
295
+ .p-urgent { background: #dc2626; }
296
+ .p-high { background: #ea580c; }
297
+ .p-medium { background: #ca8a04; }
298
+ .p-low { background: #6b7280; }
299
+
300
+ .issue-label {
301
+ font-size: 0.6875rem;
302
+ padding: 2px 8px;
303
+ border-radius: 10px;
304
+ font-weight: 500;
305
+ }
306
+
307
+ .label-bug { background: #fee2e2; color: #991b1b; }
308
+ .label-feat { background: #dbeafe; color: #1e40af; }
309
+ .label-perf { background: #fef3c7; color: #92400e; }
310
+ .label-infra { background: #e0e7ff; color: #3730a3; }
311
+
312
+ .detail-panel {
313
+ border-left: 1px solid var(--border-light);
314
+ padding: 20px;
315
+ font-size: 0.8125rem;
316
+ }
317
+
318
+ .detail-title {
319
+ font-weight: 700;
320
+ font-size: 0.9375rem;
321
+ margin-bottom: 16px;
322
+ line-height: 1.4;
323
+ }
324
+
325
+ .detail-meta { margin-bottom: 20px; }
326
+
327
+ .detail-row {
328
+ display: flex;
329
+ justify-content: space-between;
330
+ padding: 6px 0;
331
+ border-bottom: 1px solid var(--border-light);
332
+ }
333
+
334
+ .detail-key { color: var(--ink-tertiary); }
335
+ .detail-val { font-weight: 500; }
336
+
337
+ .detail-desc {
338
+ color: var(--ink-secondary);
339
+ font-size: 0.8125rem;
340
+ line-height: 1.6;
341
+ margin-top: 16px;
342
+ }
343
+
344
+ /* PILLARS */
345
+ .pillars {
346
+ max-width: 1400px;
347
+ margin: 0 auto;
348
+ padding: 0 64px 120px;
349
+ }
350
+
351
+ .pillars-header {
352
+ margin-bottom: 64px;
353
+ }
354
+
355
+ .pillars-header h2 {
356
+ font-family: 'DM Serif Display', serif;
357
+ font-size: clamp(2rem, 3.5vw, 3rem);
358
+ letter-spacing: -0.02em;
359
+ margin-bottom: 16px;
360
+ }
361
+
362
+ .pillars-header p {
363
+ color: var(--ink-secondary);
364
+ max-width: 520px;
365
+ font-weight: 300;
366
+ font-size: 1.1rem;
367
+ }
368
+
369
+ .pillars-grid {
370
+ display: grid;
371
+ grid-template-columns: repeat(3, 1fr);
372
+ gap: 1px;
373
+ background: var(--border);
374
+ border: 1px solid var(--border);
375
+ border-radius: 12px;
376
+ overflow: hidden;
377
+ }
378
+
379
+ .pillar {
380
+ background: var(--surface-raised);
381
+ padding: 48px 40px;
382
+ }
383
+
384
+ .pillar-number {
385
+ font-size: 0.6875rem;
386
+ text-transform: uppercase;
387
+ letter-spacing: 0.1em;
388
+ color: var(--ink-tertiary);
389
+ margin-bottom: 20px;
390
+ font-weight: 600;
391
+ }
392
+
393
+ .pillar h3 {
394
+ font-family: 'DM Serif Display', serif;
395
+ font-size: 1.5rem;
396
+ margin-bottom: 16px;
397
+ letter-spacing: -0.01em;
398
+ }
399
+
400
+ .pillar p {
401
+ color: var(--ink-secondary);
402
+ font-size: 0.9375rem;
403
+ line-height: 1.7;
404
+ margin-bottom: 20px;
405
+ }
406
+
407
+ .pillar-detail {
408
+ font-size: 0.8125rem;
409
+ color: var(--ink-tertiary);
410
+ line-height: 1.7;
411
+ border-top: 1px solid var(--border-light);
412
+ padding-top: 16px;
413
+ }
414
+
415
+ /* KEYBOARD SECTION */
416
+ .keyboard-section {
417
+ max-width: 1400px;
418
+ margin: 0 auto;
419
+ padding: 0 64px 120px;
420
+ display: grid;
421
+ grid-template-columns: 1fr 1fr;
422
+ gap: 80px;
423
+ align-items: start;
424
+ }
425
+
426
+ .keyboard-content h2 {
427
+ font-family: 'DM Serif Display', serif;
428
+ font-size: clamp(1.75rem, 3vw, 2.5rem);
429
+ letter-spacing: -0.02em;
430
+ margin-bottom: 20px;
431
+ }
432
+
433
+ .keyboard-content > p {
434
+ color: var(--ink-secondary);
435
+ font-size: 1.0625rem;
436
+ line-height: 1.7;
437
+ font-weight: 300;
438
+ margin-bottom: 40px;
439
+ max-width: 480px;
440
+ }
441
+
442
+ .shortcut-group {
443
+ margin-bottom: 32px;
444
+ }
445
+
446
+ .shortcut-group-title {
447
+ font-size: 0.6875rem;
448
+ text-transform: uppercase;
449
+ letter-spacing: 0.1em;
450
+ color: var(--ink-tertiary);
451
+ font-weight: 600;
452
+ margin-bottom: 12px;
453
+ }
454
+
455
+ .shortcut-row {
456
+ display: flex;
457
+ justify-content: space-between;
458
+ align-items: center;
459
+ padding: 10px 0;
460
+ border-bottom: 1px solid var(--border-light);
461
+ }
462
+
463
+ .shortcut-label { font-size: 0.875rem; color: var(--ink-secondary); }
464
+
465
+ .shortcut-keys {
466
+ display: flex;
467
+ gap: 4px;
468
+ }
469
+
470
+ .key {
471
+ display: inline-flex;
472
+ align-items: center;
473
+ justify-content: center;
474
+ min-width: 28px;
475
+ height: 28px;
476
+ padding: 0 8px;
477
+ background: var(--surface);
478
+ border: 1px solid var(--border);
479
+ border-radius: 5px;
480
+ font-size: 0.75rem;
481
+ font-weight: 600;
482
+ color: var(--ink-secondary);
483
+ box-shadow: 0 1px 2px rgba(0,0,0,0.05);
484
+ font-family: 'Plus Jakarta Sans', sans-serif;
485
+ }
486
+
487
+ .keyboard-visual {
488
+ background: var(--surface-raised);
489
+ border: 1px solid var(--border);
490
+ border-radius: 12px;
491
+ padding: 40px;
492
+ }
493
+
494
+ .cmd-palette {
495
+ background: var(--surface);
496
+ border: 1px solid var(--border);
497
+ border-radius: 8px;
498
+ overflow: hidden;
499
+ box-shadow: 0 12px 40px rgba(0,0,0,0.08);
500
+ }
501
+
502
+ .cmd-input {
503
+ padding: 16px 20px;
504
+ border-bottom: 1px solid var(--border-light);
505
+ display: flex;
506
+ align-items: center;
507
+ gap: 10px;
508
+ }
509
+
510
+ .cmd-input-icon {
511
+ color: var(--ink-tertiary);
512
+ font-size: 0.875rem;
513
+ }
514
+
515
+ .cmd-input-text {
516
+ color: var(--ink);
517
+ font-size: 0.875rem;
518
+ font-weight: 500;
519
+ }
520
+
521
+ .cmd-results { list-style: none; }
522
+
523
+ .cmd-result {
524
+ padding: 10px 20px;
525
+ display: flex;
526
+ align-items: center;
527
+ gap: 12px;
528
+ font-size: 0.8125rem;
529
+ color: var(--ink-secondary);
530
+ cursor: pointer;
531
+ transition: background 0.1s;
532
+ }
533
+
534
+ .cmd-result:hover, .cmd-result.active {
535
+ background: var(--accent-light);
536
+ color: var(--accent);
537
+ }
538
+
539
+ .cmd-result-icon {
540
+ width: 20px;
541
+ text-align: center;
542
+ font-size: 0.75rem;
543
+ opacity: 0.6;
544
+ }
545
+
546
+ .cmd-hint {
547
+ margin-left: auto;
548
+ font-size: 0.6875rem;
549
+ color: var(--ink-tertiary);
550
+ }
551
+
552
+ /* WORKFLOW SECTION */
553
+ .workflow-section {
554
+ background: var(--ink);
555
+ color: var(--surface);
556
+ padding: 120px 64px;
557
+ }
558
+
559
+ .workflow-inner {
560
+ max-width: 1400px;
561
+ margin: 0 auto;
562
+ }
563
+
564
+ .workflow-header {
565
+ margin-bottom: 72px;
566
+ }
567
+
568
+ .workflow-header h2 {
569
+ font-family: 'DM Serif Display', serif;
570
+ font-size: clamp(2rem, 3.5vw, 3rem);
571
+ letter-spacing: -0.02em;
572
+ margin-bottom: 16px;
573
+ }
574
+
575
+ .workflow-header p {
576
+ color: rgba(250,250,248,0.6);
577
+ max-width: 520px;
578
+ font-weight: 300;
579
+ font-size: 1.0625rem;
580
+ line-height: 1.7;
581
+ }
582
+
583
+ .workflow-steps {
584
+ display: grid;
585
+ grid-template-columns: repeat(4, 1fr);
586
+ gap: 0;
587
+ position: relative;
588
+ }
589
+
590
+ .workflow-step {
591
+ padding: 40px 32px;
592
+ border: 1px solid rgba(250,250,248,0.1);
593
+ border-right: none;
594
+ position: relative;
595
+ }
596
+
597
+ .workflow-step:last-child { border-right: 1px solid rgba(250,250,248,0.1); }
598
+
599
+ .step-number {
600
+ font-size: 2.5rem;
601
+ font-family: 'DM Serif Display', serif;
602
+ color: rgba(250,250,248,0.15);
603
+ margin-bottom: 20px;
604
+ }
605
+
606
+ .step-title {
607
+ font-weight: 700;
608
+ font-size: 1rem;
609
+ margin-bottom: 12px;
610
+ }
611
+
612
+ .step-desc {
613
+ color: rgba(250,250,248,0.6);
614
+ font-size: 0.875rem;
615
+ line-height: 1.7;
616
+ }
617
+
618
+ .step-detail {
619
+ margin-top: 20px;
620
+ font-size: 0.75rem;
621
+ color: rgba(250,250,248,0.35);
622
+ line-height: 1.6;
623
+ border-top: 1px solid rgba(250,250,248,0.08);
624
+ padding-top: 16px;
625
+ }
626
+
627
+ /* INTEGRATIONS */
628
+ .integrations {
629
+ max-width: 1400px;
630
+ margin: 0 auto;
631
+ padding: 120px 64px;
632
+ }
633
+
634
+ .integrations-grid {
635
+ display: grid;
636
+ grid-template-columns: 1fr 1fr;
637
+ gap: 80px;
638
+ align-items: start;
639
+ }
640
+
641
+ .integrations h2 {
642
+ font-family: 'DM Serif Display', serif;
643
+ font-size: clamp(1.75rem, 3vw, 2.5rem);
644
+ letter-spacing: -0.02em;
645
+ margin-bottom: 20px;
646
+ }
647
+
648
+ .integrations > .integrations-grid > div > p {
649
+ color: var(--ink-secondary);
650
+ font-size: 1.0625rem;
651
+ line-height: 1.7;
652
+ font-weight: 300;
653
+ margin-bottom: 40px;
654
+ }
655
+
656
+ .integration-list { list-style: none; }
657
+
658
+ .integration-item {
659
+ display: flex;
660
+ align-items: flex-start;
661
+ gap: 20px;
662
+ padding: 24px 0;
663
+ border-bottom: 1px solid var(--border-light);
664
+ }
665
+
666
+ .integration-icon {
667
+ width: 40px;
668
+ height: 40px;
669
+ border-radius: 8px;
670
+ background: var(--border-light);
671
+ display: flex;
672
+ align-items: center;
673
+ justify-content: center;
674
+ font-weight: 700;
675
+ font-size: 0.75rem;
676
+ color: var(--ink-secondary);
677
+ flex-shrink: 0;
678
+ }
679
+
680
+ .integration-name {
681
+ font-weight: 600;
682
+ margin-bottom: 4px;
683
+ }
684
+
685
+ .integration-desc {
686
+ font-size: 0.8125rem;
687
+ color: var(--ink-secondary);
688
+ line-height: 1.5;
689
+ }
690
+
691
+ .integrations-visual {
692
+ background: var(--surface-raised);
693
+ border: 1px solid var(--border);
694
+ border-radius: 12px;
695
+ padding: 32px;
696
+ }
697
+
698
+ .commit-feed { list-style: none; }
699
+
700
+ .commit-item {
701
+ display: flex;
702
+ align-items: flex-start;
703
+ gap: 16px;
704
+ padding: 16px 0;
705
+ border-bottom: 1px solid var(--border-light);
706
+ }
707
+
708
+ .commit-dot {
709
+ width: 8px;
710
+ height: 8px;
711
+ border-radius: 50%;
712
+ background: var(--accent);
713
+ margin-top: 6px;
714
+ flex-shrink: 0;
715
+ }
716
+
717
+ .commit-msg {
718
+ font-size: 0.8125rem;
719
+ font-weight: 500;
720
+ margin-bottom: 4px;
721
+ font-family: 'Plus Jakarta Sans', monospace;
722
+ }
723
+
724
+ .commit-meta {
725
+ font-size: 0.75rem;
726
+ color: var(--ink-tertiary);
727
+ }
728
+
729
+ .commit-link {
730
+ margin-top: 4px;
731
+ font-size: 0.75rem;
732
+ color: var(--accent);
733
+ text-decoration: none;
734
+ }
735
+
736
+ /* PRICING TEASER */
737
+ .pricing-teaser {
738
+ max-width: 1400px;
739
+ margin: 0 auto;
740
+ padding: 0 64px 120px;
741
+ text-align: left;
742
+ }
743
+
744
+ .pricing-card {
745
+ background: var(--surface-raised);
746
+ border: 1px solid var(--border);
747
+ border-radius: 12px;
748
+ padding: 64px 80px;
749
+ display: grid;
750
+ grid-template-columns: 1fr 1fr;
751
+ gap: 64px;
752
+ align-items: center;
753
+ }
754
+
755
+ .pricing-card h2 {
756
+ font-family: 'DM Serif Display', serif;
757
+ font-size: clamp(1.75rem, 3vw, 2.5rem);
758
+ letter-spacing: -0.02em;
759
+ margin-bottom: 16px;
760
+ }
761
+
762
+ .pricing-card > div > p {
763
+ color: var(--ink-secondary);
764
+ font-size: 1rem;
765
+ line-height: 1.7;
766
+ margin-bottom: 32px;
767
+ }
768
+
769
+ .pricing-highlights { list-style: none; }
770
+
771
+ .pricing-highlights li {
772
+ padding: 10px 0;
773
+ border-bottom: 1px solid var(--border-light);
774
+ font-size: 0.9375rem;
775
+ display: flex;
776
+ align-items: center;
777
+ gap: 12px;
778
+ }
779
+
780
+ .check-icon {
781
+ color: var(--accent);
782
+ font-weight: 700;
783
+ }
784
+
785
+ /* FOOTER */
786
+ footer {
787
+ border-top: 1px solid var(--border);
788
+ padding: 48px 64px;
789
+ max-width: 1400px;
790
+ margin: 0 auto;
791
+ display: flex;
792
+ justify-content: space-between;
793
+ align-items: center;
794
+ }
795
+
796
+ .footer-logo {
797
+ font-family: 'DM Serif Display', serif;
798
+ font-size: 1.125rem;
799
+ }
800
+
801
+ .footer-links {
802
+ display: flex;
803
+ gap: 32px;
804
+ list-style: none;
805
+ }
806
+
807
+ .footer-links a {
808
+ text-decoration: none;
809
+ color: var(--ink-tertiary);
810
+ font-size: 0.8125rem;
811
+ transition: color 0.2s;
812
+ }
813
+
814
+ .footer-links a:hover { color: var(--ink); }
815
+
816
+ .footer-copy {
817
+ font-size: 0.75rem;
818
+ color: var(--ink-tertiary);
819
+ }
820
+
821
+ /* MOBILE */
822
+ @media (max-width: 1024px) {
823
+ .product-ui { grid-template-columns: 200px 1fr; }
824
+ .detail-panel { display: none; }
825
+ .pillars-grid { grid-template-columns: 1fr; }
826
+ .keyboard-section { grid-template-columns: 1fr; }
827
+ .keyboard-visual { display: none; }
828
+ .workflow-steps { grid-template-columns: 1fr 1fr; }
829
+ .integrations-grid { grid-template-columns: 1fr; }
830
+ .integrations-visual { display: none; }
831
+ .pricing-card { grid-template-columns: 1fr; }
832
+ }
833
+
834
+ @media (max-width: 640px) {
835
+ nav { padding: 20px 24px; }
836
+ .nav-links { gap: 20px; }
837
+ .nav-links li:not(:last-child) { display: none; }
838
+ .hero { padding: 60px 24px 48px; }
839
+ .product-hero { padding: 0 24px 80px; }
840
+ .product-ui { grid-template-columns: 1fr; }
841
+ .sidebar { display: none; }
842
+ .pillars { padding: 0 24px 80px; }
843
+ .pillar { padding: 32px 24px; }
844
+ .keyboard-section { padding: 0 24px 80px; gap: 40px; }
845
+ .workflow-section { padding: 80px 24px; }
846
+ .workflow-steps { grid-template-columns: 1fr; }
847
+ .workflow-step { border-right: 1px solid rgba(250,250,248,0.1); }
848
+ .integrations { padding: 80px 24px; }
849
+ .pricing-teaser { padding: 0 24px 80px; }
850
+ .pricing-card { padding: 40px 32px; }
851
+ footer { padding: 32px 24px; flex-direction: column; gap: 24px; text-align: center; }
852
+ .footer-links { flex-wrap: wrap; justify-content: center; }
853
+ }
854
+ </style>
855
+ </head>
856
+ <body>
857
+
858
+ <!-- NAV -->
859
+ <nav>
860
+ <div class="logo">Plume</div>
861
+ <ul class="nav-links">
862
+ <li><a href="#features">Features</a></li>
863
+ <li><a href="#workflow">Workflow</a></li>
864
+ <li><a href="#integrations">Integrations</a></li>
865
+ <li><a href="#pricing">Pricing</a></li>
866
+ <li><a href="#" class="nav-cta">Get started</a></li>
867
+ </ul>
868
+ </nav>
869
+
870
+ <!-- HERO -->
871
+ <section class="hero">
872
+ <div class="hero-label">Issue tracking, refined</div>
873
+ <h1>Plan, build, and ship<br>without the noise</h1>
874
+ <p class="hero-sub">Plume is project management for software teams who value speed and clarity. Keyboard-first, opinionated by design, built for people who actually ship.</p>
875
+ <div class="hero-actions">
876
+ <a href="#" class="btn-primary">Get started free</a>
877
+ <a href="#" class="btn-ghost">See how it works</a>
878
+ </div>
879
+ </section>
880
+
881
+ <!-- PRODUCT SCREENSHOT -->
882
+ <section class="product-hero">
883
+ <div class="product-frame">
884
+ <div class="product-titlebar">
885
+ <div class="dot dot-r"></div>
886
+ <div class="dot dot-y"></div>
887
+ <div class="dot dot-g"></div>
888
+ </div>
889
+ <div class="product-ui">
890
+ <!-- Sidebar -->
891
+ <div class="sidebar">
892
+ <div class="sidebar-section">
893
+ <div class="sidebar-label">Workspace</div>
894
+ <div class="sidebar-item active"><div class="sidebar-icon filled"></div>My Issues</div>
895
+ <div class="sidebar-item"><div class="sidebar-icon"></div>All Issues</div>
896
+ <div class="sidebar-item"><div class="sidebar-icon"></div>Activity</div>
897
+ </div>
898
+ <div class="sidebar-section">
899
+ <div class="sidebar-label">Cycles</div>
900
+ <div class="sidebar-item"><div class="sidebar-icon"></div>Cycle 24 &middot; Active</div>
901
+ <div class="sidebar-item"><div class="sidebar-icon"></div>Cycle 25 &middot; Next</div>
902
+ </div>
903
+ <div class="sidebar-section">
904
+ <div class="sidebar-label">Projects</div>
905
+ <div class="sidebar-item"><div class="sidebar-icon"></div>Auth Rewrite</div>
906
+ <div class="sidebar-item"><div class="sidebar-icon"></div>Mobile App</div>
907
+ <div class="sidebar-item"><div class="sidebar-icon"></div>API v3</div>
908
+ </div>
909
+ <div class="sidebar-section">
910
+ <div class="sidebar-label">Views</div>
911
+ <div class="sidebar-item"><div class="sidebar-icon"></div>Roadmap</div>
912
+ <div class="sidebar-item"><div class="sidebar-icon"></div>Progress</div>
913
+ </div>
914
+ </div>
915
+
916
+ <!-- Main panel -->
917
+ <div class="main-panel">
918
+ <div class="main-header">
919
+ <div class="main-title">Cycle 24 &mdash; Nov 11&ndash;22</div>
920
+ <div class="filter-bar">
921
+ <div class="filter-pill">Status: In Progress</div>
922
+ <div class="filter-pill">Priority: All</div>
923
+ </div>
924
+ </div>
925
+ <ul class="issue-list">
926
+ <li class="issue-row">
927
+ <div class="issue-check done"></div>
928
+ <span class="issue-id">PLM-142</span>
929
+ <span class="issue-title-text">Migrate session store to Redis</span>
930
+ <span class="issue-label label-infra">infra</span>
931
+ <span class="issue-priority p-high">H</span>
932
+ </li>
933
+ <li class="issue-row">
934
+ <div class="issue-check"></div>
935
+ <span class="issue-id">PLM-158</span>
936
+ <span class="issue-title-text">Add bulk-action toolbar to issue list</span>
937
+ <span class="issue-label label-feat">feature</span>
938
+ <span class="issue-priority p-medium">M</span>
939
+ </li>
940
+ <li class="issue-row">
941
+ <div class="issue-check"></div>
942
+ <span class="issue-id">PLM-163</span>
943
+ <span class="issue-title-text">Fix timezone offset in cycle dates</span>
944
+ <span class="issue-label label-bug">bug</span>
945
+ <span class="issue-priority p-urgent">!</span>
946
+ </li>
947
+ <li class="issue-row">
948
+ <div class="issue-check"></div>
949
+ <span class="issue-id">PLM-167</span>
950
+ <span class="issue-title-text">Reduce bundle size: tree-shake chart lib</span>
951
+ <span class="issue-label label-perf">perf</span>
952
+ <span class="issue-priority p-medium">M</span>
953
+ </li>
954
+ <li class="issue-row">
955
+ <div class="issue-check done"></div>
956
+ <span class="issue-id">PLM-171</span>
957
+ <span class="issue-title-text">Implement keyboard navigation in list view</span>
958
+ <span class="issue-label label-feat">feature</span>
959
+ <span class="issue-priority p-high">H</span>
960
+ </li>
961
+ <li class="issue-row">
962
+ <div class="issue-check"></div>
963
+ <span class="issue-id">PLM-174</span>
964
+ <span class="issue-title-text">OAuth flow for GitHub integration</span>
965
+ <span class="issue-label label-feat">feature</span>
966
+ <span class="issue-priority p-high">H</span>
967
+ </li>
968
+ <li class="issue-row">
969
+ <div class="issue-check"></div>
970
+ <span class="issue-id">PLM-179</span>
971
+ <span class="issue-title-text">Add cycle velocity chart to progress view</span>
972
+ <span class="issue-label label-feat">feature</span>
973
+ <span class="issue-priority p-low">L</span>
974
+ </li>
975
+ </ul>
976
+ </div>
977
+
978
+ <!-- Detail panel -->
979
+ <div class="detail-panel">
980
+ <div class="detail-title">Fix timezone offset in cycle dates</div>
981
+ <div class="detail-meta">
982
+ <div class="detail-row"><span class="detail-key">Status</span><span class="detail-val">In Progress</span></div>
983
+ <div class="detail-row"><span class="detail-key">Priority</span><span class="detail-val" style="color:#dc2626;">Urgent</span></div>
984
+ <div class="detail-row"><span class="detail-key">Assignee</span><span class="detail-val">A. Chen</span></div>
985
+ <div class="detail-row"><span class="detail-key">Cycle</span><span class="detail-val">Cycle 24</span></div>
986
+ <div class="detail-row"><span class="detail-key">Project</span><span class="detail-val">API v3</span></div>
987
+ <div class="detail-row"><span class="detail-key">Label</span><span class="detail-val">bug</span></div>
988
+ <div class="detail-row"><span class="detail-key">Created</span><span class="detail-val">Nov 13</span></div>
989
+ </div>
990
+ <p class="detail-desc">Cycle start/end dates display incorrectly for users outside UTC. The stored dates are UTC but rendered without conversion. Affects cycle filtering and progress calculation.</p>
991
+ </div>
992
+ </div>
993
+ </div>
994
+ </section>
995
+
996
+ <!-- PILLARS -->
997
+ <section class="pillars" id="features">
998
+ <div class="pillars-header">
999
+ <h2>Designed around how<br>teams actually work</h2>
1000
+ <p>Every decision in Plume serves one goal: remove friction between having an idea and shipping it.</p>
1001
+ </div>
1002
+ <div class="pillars-grid">
1003
+ <div class="pillar">
1004
+ <div class="pillar-number">01</div>
1005
+ <h3>Issues that move</h3>
1006
+ <p>Create, triage, and close issues faster than you can context-switch. Status, priority, labels, and assignees update in place. No page reloads, no save buttons, no waiting.</p>
1007
+ <div class="pillar-detail">Custom statuses per team. Bulk operations on any selection. Sub-issues for decomposition. Markdown descriptions with inline code and image paste.</div>
1008
+ </div>
1009
+ <div class="pillar">
1010
+ <div class="pillar-number">02</div>
1011
+ <h3>Cycles keep cadence</h3>
1012
+ <p>Time-boxed sprints that start automatically. Drag issues in, track velocity, review what shipped. Unfinished work rolls forward with a single action. No ceremony.</p>
1013
+ <div class="pillar-detail">Configurable cycle length (1-4 weeks). Burndown and velocity charts. Auto-archive completed cycles. Scope-change tracking to protect commitments.</div>
1014
+ </div>
1015
+ <div class="pillar">
1016
+ <div class="pillar-number">03</div>
1017
+ <h3>Projects span cycles</h3>
1018
+ <p>Long-running initiatives that cross multiple sprints. Set milestones, track progress as a percentage, and see which cycles contribute. Projects give you the big picture without a separate tool.</p>
1019
+ <div class="pillar-detail">Roadmap timeline view. Status updates with rich text. Automatic progress from child issues. Filter the board by project to focus.</div>
1020
+ </div>
1021
+ </div>
1022
+ </section>
1023
+
1024
+ <!-- KEYBOARD SECTION -->
1025
+ <section class="keyboard-section">
1026
+ <div class="keyboard-content">
1027
+ <h2>Your hands stay on<br>the keyboard</h2>
1028
+ <p>Plume is built for people who think in keystrokes. Every action is reachable without touching the mouse. The command palette puts the entire workspace at your fingertips.</p>
1029
+
1030
+ <div class="shortcut-group">
1031
+ <div class="shortcut-group-title">Navigation</div>
1032
+ <div class="shortcut-row">
1033
+ <span class="shortcut-label">Command palette</span>
1034
+ <div class="shortcut-keys"><span class="key">&#8984;</span><span class="key">K</span></div>
1035
+ </div>
1036
+ <div class="shortcut-row">
1037
+ <span class="shortcut-label">Go to My Issues</span>
1038
+ <div class="shortcut-keys"><span class="key">G</span> <span class="key">M</span></div>
1039
+ </div>
1040
+ <div class="shortcut-row">
1041
+ <span class="shortcut-label">Go to Active Cycle</span>
1042
+ <div class="shortcut-keys"><span class="key">G</span> <span class="key">C</span></div>
1043
+ </div>
1044
+ <div class="shortcut-row">
1045
+ <span class="shortcut-label">Search issues</span>
1046
+ <div class="shortcut-keys"><span class="key">/</span></div>
1047
+ </div>
1048
+ </div>
1049
+
1050
+ <div class="shortcut-group">
1051
+ <div class="shortcut-group-title">Issue actions</div>
1052
+ <div class="shortcut-row">
1053
+ <span class="shortcut-label">New issue</span>
1054
+ <div class="shortcut-keys"><span class="key">C</span></div>
1055
+ </div>
1056
+ <div class="shortcut-row">
1057
+ <span class="shortcut-label">Set priority</span>
1058
+ <div class="shortcut-keys"><span class="key">P</span></div>
1059
+ </div>
1060
+ <div class="shortcut-row">
1061
+ <span class="shortcut-label">Change status</span>
1062
+ <div class="shortcut-keys"><span class="key">S</span></div>
1063
+ </div>
1064
+ <div class="shortcut-row">
1065
+ <span class="shortcut-label">Assign to me</span>
1066
+ <div class="shortcut-keys"><span class="key">I</span></div>
1067
+ </div>
1068
+ <div class="shortcut-row">
1069
+ <span class="shortcut-label">Add label</span>
1070
+ <div class="shortcut-keys"><span class="key">L</span></div>
1071
+ </div>
1072
+ </div>
1073
+ </div>
1074
+
1075
+ <div class="keyboard-visual">
1076
+ <div class="cmd-palette">
1077
+ <div class="cmd-input">
1078
+ <span class="cmd-input-icon">&#9906;</span>
1079
+ <span class="cmd-input-text">assign PLM-163...</span>
1080
+ </div>
1081
+ <ul class="cmd-results">
1082
+ <li class="cmd-result active">
1083
+ <span class="cmd-result-icon">&#9679;</span>
1084
+ Assign to Alex Chen
1085
+ <span class="cmd-hint">a.chen</span>
1086
+ </li>
1087
+ <li class="cmd-result">
1088
+ <span class="cmd-result-icon">&#9679;</span>
1089
+ Assign to Maria Santos
1090
+ <span class="cmd-hint">m.santos</span>
1091
+ </li>
1092
+ <li class="cmd-result">
1093
+ <span class="cmd-result-icon">&#9679;</span>
1094
+ Assign to Jordan Park
1095
+ <span class="cmd-hint">j.park</span>
1096
+ </li>
1097
+ <li class="cmd-result">
1098
+ <span class="cmd-result-icon">&#9679;</span>
1099
+ Assign to Sam Lee
1100
+ <span class="cmd-hint">s.lee</span>
1101
+ </li>
1102
+ <li class="cmd-result">
1103
+ <span class="cmd-result-icon">&#9675;</span>
1104
+ Unassign
1105
+ <span class="cmd-hint"></span>
1106
+ </li>
1107
+ </ul>
1108
+ </div>
1109
+ <p style="margin-top: 24px; font-size: 0.75rem; color: var(--ink-tertiary); text-align: center;">Command palette &middot; reachable from anywhere with <span class="key" style="display:inline-flex; vertical-align: middle;">&#8984;</span> <span class="key" style="display:inline-flex; vertical-align: middle;">K</span></p>
1110
+ </div>
1111
+ </section>
1112
+
1113
+ <!-- WORKFLOW SECTION -->
1114
+ <section class="workflow-section" id="workflow">
1115
+ <div class="workflow-inner">
1116
+ <div class="workflow-header">
1117
+ <h2>From idea to shipped<br>in one place</h2>
1118
+ <p>Plume replaces the constellation of tools your team has outgrown. One workspace, one source of truth, no tab-switching.</p>
1119
+ </div>
1120
+
1121
+ <div class="workflow-steps">
1122
+ <div class="workflow-step">
1123
+ <div class="step-number">01</div>
1124
+ <div class="step-title">Capture</div>
1125
+ <div class="step-desc">Create issues in seconds. Keyboard shortcut, command palette, or Slack integration. Every issue gets a unique ID and immediate context.</div>
1126
+ <div class="step-detail">Quick-capture with C. Paste images inline. Templates for bugs, features, and tasks. Issues link to code from the start.</div>
1127
+ </div>
1128
+ <div class="workflow-step">
1129
+ <div class="step-number">02</div>
1130
+ <div class="step-title">Plan</div>
1131
+ <div class="step-desc">Drag issues into cycles. Set priorities. Scope work that fits your team's velocity. Protect the sprint by tracking scope changes in real time.</div>
1132
+ <div class="step-detail">Backlog grooming view. Effort estimates. Dependency flags. Automatic capacity calculation based on team size and historical data.</div>
1133
+ </div>
1134
+ <div class="workflow-step">
1135
+ <div class="step-number">03</div>
1136
+ <div class="step-title">Build</div>
1137
+ <div class="step-desc">Issues move through statuses as code ships. PRs link automatically. Branch names generate from issue IDs. The board updates without anyone touching it.</div>
1138
+ <div class="step-detail">GitHub and GitLab sync. Auto-transition on PR merge. Branch name patterns: plm-163-fix-timezone. Code review status reflected on the issue.</div>
1139
+ </div>
1140
+ <div class="workflow-step">
1141
+ <div class="step-number">04</div>
1142
+ <div class="step-title">Ship</div>
1143
+ <div class="step-desc">Close the cycle, review velocity, archive what shipped. Unfinished work rolls forward. The team knows exactly what landed and what's next.</div>
1144
+ <div class="step-detail">Cycle summary reports. Changelog generation. Slack notifications on cycle close. Historical velocity trend so estimates improve over time.</div>
1145
+ </div>
1146
+ </div>
1147
+ </div>
1148
+ </section>
1149
+
1150
+ <!-- INTEGRATIONS -->
1151
+ <section class="integrations" id="integrations">
1152
+ <div class="integrations-grid">
1153
+ <div>
1154
+ <h2>Connects to your<br>existing stack</h2>
1155
+ <p>Plume integrates with the tools your team already relies on. No data silos, no copy-pasting, no context lost between tools.</p>
1156
+ <ul class="integration-list">
1157
+ <li class="integration-item">
1158
+ <div class="integration-icon">GH</div>
1159
+ <div>
1160
+ <div class="integration-name">GitHub</div>
1161
+ <div class="integration-desc">Sync PRs, branches, and commits. Auto-link issues by branch name. Transition statuses on merge.</div>
1162
+ </div>
1163
+ </li>
1164
+ <li class="integration-item">
1165
+ <div class="integration-icon">GL</div>
1166
+ <div>
1167
+ <div class="integration-name">GitLab</div>
1168
+ <div class="integration-desc">Merge request sync, pipeline status, and branch linking. Full bidirectional sync.</div>
1169
+ </div>
1170
+ </li>
1171
+ <li class="integration-item">
1172
+ <div class="integration-icon">SK</div>
1173
+ <div>
1174
+ <div class="integration-name">Slack</div>
1175
+ <div class="integration-desc">Create issues from messages. Get notified on status changes. Slash commands for quick actions.</div>
1176
+ </div>
1177
+ </li>
1178
+ <li class="integration-item">
1179
+ <div class="integration-icon">FG</div>
1180
+ <div>
1181
+ <div class="integration-name">Figma</div>
1182
+ <div class="integration-desc">Embed design links in issues. Preview thumbnails inline. Keep design and engineering in sync.</div>
1183
+ </div>
1184
+ </li>
1185
+ <li class="integration-item">
1186
+ <div class="integration-icon">SY</div>
1187
+ <div>
1188
+ <div class="integration-name">Sentry</div>
1189
+ <div class="integration-desc">Auto-create issues from errors. Link stack traces. Close Sentry issues when the fix ships.</div>
1190
+ </div>
1191
+ </li>
1192
+ </ul>
1193
+ </div>
1194
+
1195
+ <div class="integrations-visual">
1196
+ <div style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-tertiary); font-weight: 600; margin-bottom: 16px;">Recent Activity &middot; GitHub</div>
1197
+ <ul class="commit-feed">
1198
+ <li class="commit-item">
1199
+ <div class="commit-dot"></div>
1200
+ <div>
1201
+ <div class="commit-msg">fix: convert cycle dates to local tz</div>
1202
+ <div class="commit-meta">a.chen &middot; 2 min ago &middot; PLM-163</div>
1203
+ <a href="#" class="commit-link">View PR #247 &rarr;</a>
1204
+ </div>
1205
+ </li>
1206
+ <li class="commit-item">
1207
+ <div class="commit-dot"></div>
1208
+ <div>
1209
+ <div class="commit-msg">feat: add bulk selection toolbar</div>
1210
+ <div class="commit-meta">m.santos &middot; 18 min ago &middot; PLM-158</div>
1211
+ <a href="#" class="commit-link">View PR #245 &rarr;</a>
1212
+ </div>
1213
+ </li>
1214
+ <li class="commit-item">
1215
+ <div class="commit-dot"></div>
1216
+ <div>
1217
+ <div class="commit-msg">refactor: tree-shake chart dependency</div>
1218
+ <div class="commit-meta">j.park &middot; 1 hr ago &middot; PLM-167</div>
1219
+ <a href="#" class="commit-link">View PR #243 &rarr;</a>
1220
+ </div>
1221
+ </li>
1222
+ <li class="commit-item">
1223
+ <div class="commit-dot"></div>
1224
+ <div>
1225
+ <div class="commit-msg">feat: keyboard nav for issue list</div>
1226
+ <div class="commit-meta">s.lee &middot; 3 hr ago &middot; PLM-171</div>
1227
+ <a href="#" class="commit-link">View PR #241 &rarr;</a>
1228
+ </div>
1229
+ </li>
1230
+ </ul>
1231
+ </div>
1232
+ </div>
1233
+ </section>
1234
+
1235
+ <!-- PRICING TEASER -->
1236
+ <section class="pricing-teaser" id="pricing">
1237
+ <div class="pricing-card">
1238
+ <div>
1239
+ <h2>Start building today</h2>
1240
+ <p>Free for teams up to 5. No credit card, no trial countdown. Upgrade when your team grows and you need advanced features.</p>
1241
+ <a href="#" class="btn-primary">Get started free</a>
1242
+ </div>
1243
+ <ul class="pricing-highlights">
1244
+ <li><span class="check-icon">&#10003;</span> Unlimited issues and projects</li>
1245
+ <li><span class="check-icon">&#10003;</span> Cycles and roadmap views</li>
1246
+ <li><span class="check-icon">&#10003;</span> GitHub and GitLab integration</li>
1247
+ <li><span class="check-icon">&#10003;</span> Keyboard-first interface</li>
1248
+ <li><span class="check-icon">&#10003;</span> Command palette and shortcuts</li>
1249
+ <li><span class="check-icon">&#10003;</span> API access</li>
1250
+ <li><span class="check-icon">&#10003;</span> Priority support from $8/seat/mo</li>
1251
+ </ul>
1252
+ </div>
1253
+ </section>
1254
+
1255
+ <!-- FOOTER -->
1256
+ <footer>
1257
+ <div class="footer-logo">Plume</div>
1258
+ <ul class="footer-links">
1259
+ <li><a href="#">Features</a></li>
1260
+ <li><a href="#">Pricing</a></li>
1261
+ <li><a href="#">Docs</a></li>
1262
+ <li><a href="#">Changelog</a></li>
1263
+ <li><a href="#">Blog</a></li>
1264
+ <li><a href="#">Twitter</a></li>
1265
+ </ul>
1266
+ <div class="footer-copy">&copy; 2026 Plume. All rights reserved.</div>
1267
+ </footer>
1268
+
1269
+ </body>
1270
+ </html>