@pareto4/pp-core 1.7.0 → 1.8.0

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 (48) hide show
  1. package/.claude-plugin/plugin.json +1 -1
  2. package/bin/install.js +116 -0
  3. package/commands/pp-build-handoff.md +46 -0
  4. package/commands/pp-discovery-to-build.md +40 -0
  5. package/gemini-extension.json +1 -1
  6. package/package.json +2 -1
  7. package/pareto-skills/_shared/create-project-board.sh +195 -0
  8. package/pareto-skills/_shared/pp-claude-md-protocol.md +306 -0
  9. package/pareto-skills/_shared/sync-phase-status.sh +139 -0
  10. package/pareto-skills/pp-brand/SKILL.md +644 -0
  11. package/pareto-skills/pp-brand/assets/crew/ParetoAgent.inline.html +120 -0
  12. package/pareto-skills/pp-brand/assets/crew/ParetoAgent.tsx +239 -0
  13. package/pareto-skills/pp-brand/assets/crew/build.svg +11 -0
  14. package/pareto-skills/pp-brand/assets/crew/deploy.svg +11 -0
  15. package/pareto-skills/pp-brand/assets/crew/discovery.svg +11 -0
  16. package/pareto-skills/pp-brand/assets/crew/plan.svg +11 -0
  17. package/pareto-skills/pp-brand/assets/crew/run.svg +11 -0
  18. package/pareto-skills/pp-brand/assets/crew/validate.svg +11 -0
  19. package/pareto-skills/pp-brand/assets/pareto-brand-preview.html +547 -0
  20. package/pareto-skills/pp-obsidian-notes/SKILL.md +127 -0
  21. package/pareto-skills/pp-obsidian-notes/templates/CLAUDE.md +29 -0
  22. package/pareto-skills/pp-obsidian-notes/templates/client-context.md +116 -0
  23. package/pareto-skills/pp-obsidian-notes/templates/meeting-note.md +66 -0
  24. package/pareto-skills/pp-obsidian-notes/templates/pareto-context.md +102 -0
  25. package/pareto-skills/pp-obsidian-notes/templates/proposal.md +117 -0
  26. package/pareto-skills/pp-project-setup/SKILL.md +1364 -0
  27. package/pp-core/bin/lib/intel.cjs +1 -1
  28. package/pp-core/bin/lib/io.cjs +120 -0
  29. package/pp-core/bin/lib/profile-pipeline-command-router.cjs +1 -1
  30. package/pp-core/bin/lib/roadmap-parser.cjs +1 -1
  31. package/pp-core/bin/lib/runtime-artifact-conversion.cjs +2 -2
  32. package/pp-core/bin/lib/surface.cjs +1 -1
  33. package/pp-core/bin/lib/worktree-safety.cjs +2 -2
  34. package/pp-core/bin/pp-tools.cjs +23 -0
  35. package/pp-core/references/ui-brand.md +73 -11
  36. package/pp-core/templates/codebase/structure.md +5 -5
  37. package/pp-core/templates/spec.md +7 -7
  38. package/pp-core/workflows/add-backlog.md +1 -1
  39. package/pp-core/workflows/autonomous.md +4 -4
  40. package/pp-core/workflows/debug.md +1 -1
  41. package/pp-core/workflows/discovery-to-build.md +598 -0
  42. package/pp-core/workflows/execute-phase.md +9 -1
  43. package/pp-core/workflows/plan-phase.md +14 -12
  44. package/pp-core/workflows/pr-branch.md +5 -4
  45. package/pp-core/workflows/reapply-patches.md +1 -1
  46. package/pp-core/workflows/ship.md +1 -1
  47. package/pp-core/workflows/thread.md +1 -1
  48. package/pp-core/workflows/verify-work.md +6 -5
@@ -0,0 +1,547 @@
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">
6
+ <title>Pareto — Brand Preview</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --blue: #2251FF;
13
+ --blue-steel: #146FF4;
14
+ --night: #051C2C;
15
+ --ink: #0A1330;
16
+ --fog: #F5F7FA;
17
+ --slate: #6B7A99;
18
+ --border: #E0E5EE;
19
+ --crew-discovery: #F6B437;
20
+ --crew-plan: #146FF4;
21
+ --crew-build: #2251FF;
22
+ --crew-validate: #3ECF8E;
23
+ --crew-deploy: #FF6B4A;
24
+ --crew-run: #A884FF;
25
+ --crew-antenna: #F6B437;
26
+ --success: #00A878;
27
+ --warning: #F3A738;
28
+ --error: #E04E2F;
29
+ --font-sans: 'Inter', system-ui, sans-serif;
30
+ --font-mono: 'JetBrains Mono', ui-monospace, monospace;
31
+ --radius: 3px;
32
+ }
33
+
34
+ * { box-sizing: border-box; }
35
+ html, body { margin: 0; background: #fff; color: var(--night); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
36
+
37
+ .wrap { max-width: 1280px; margin: 0 auto; padding: 64px 48px; }
38
+
39
+ /* Top banner */
40
+ .banner {
41
+ background: var(--night);
42
+ color: #fff;
43
+ padding: 72px 48px 64px;
44
+ background-image:
45
+ radial-gradient(ellipse 80% 60% at 85% 30%, rgba(34,81,255,0.35), transparent 60%),
46
+ linear-gradient(180deg, #051C2C 0%, #0a2740 100%);
47
+ position: relative;
48
+ overflow: hidden;
49
+ }
50
+ .banner::before {
51
+ content: ''; position: absolute; inset: 0;
52
+ background-image:
53
+ linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
54
+ linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
55
+ background-size: 72px 72px;
56
+ pointer-events: none;
57
+ }
58
+ .banner-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; position: relative; }
59
+ .banner h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 12px; }
60
+ .banner p { margin: 0; color: rgba(255,255,255,0.62); font-size: 1.05rem; max-width: 620px; line-height: 1.55; }
61
+ .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; }
62
+ .banner .eyebrow { color: #6aa0ff; }
63
+
64
+ /* Sections */
65
+ .section { margin: 96px 0; }
66
+ .section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
67
+ .section-head h2 { margin: 0; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; }
68
+ .section-head .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--slate); text-transform: uppercase; }
69
+
70
+ /* Color swatches */
71
+ .swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
72
+ .swatch { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
73
+ .swatch-color { height: 96px; display: flex; align-items: flex-end; padding: 12px; color: #fff; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
74
+ .swatch-color.on-light { color: var(--night); }
75
+ .swatch-meta { padding: 12px 14px; }
76
+ .swatch-meta .name { font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; }
77
+ .swatch-meta .hex { font-family: var(--font-mono); font-size: 0.78rem; color: var(--slate); margin-top: 2px; }
78
+
79
+ .crew-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
80
+ .crew-swatch { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; gap: 16px; align-items: center; }
81
+ .crew-swatch-dot { width: 48px; height: 48px; border-radius: var(--radius); flex-shrink: 0; }
82
+ .crew-swatch-meta .role { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); }
83
+ .crew-swatch-meta .name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
84
+ .crew-swatch-meta .hex { font-family: var(--font-mono); font-size: 0.78rem; color: var(--slate); }
85
+
86
+ /* Type */
87
+ .type-row { display: grid; grid-template-columns: 180px 1fr 180px; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
88
+ .type-row:last-child { border-bottom: none; }
89
+ .type-spec { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
90
+ .type-spec-right { text-align: right; }
91
+ .t-display { font-weight: 800; font-size: 2.8rem; letter-spacing: -0.03em; line-height: 1.05; }
92
+ .t-h1 { font-weight: 800; font-size: 2.2rem; letter-spacing: -0.025em; }
93
+ .t-h2 { font-weight: 700; font-size: 1.8rem; letter-spacing: -0.02em; }
94
+ .t-h3 { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
95
+ .t-body { font-size: 1rem; line-height: 1.65; color: var(--slate); }
96
+ .t-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); font-weight: 500; }
97
+ .t-num { font-family: var(--font-sans); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; }
98
+
99
+ /* Crew showcase */
100
+ .crew-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; background: var(--fog); border: 1px solid var(--border); border-radius: var(--radius); padding: 48px 32px; }
101
+ .crew-cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
102
+ .crew-cell .role-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; }
103
+ .crew-cell .role-name { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; margin-top: 2px; }
104
+ .crew-cell .role-desc { font-size: 0.84rem; color: var(--slate); line-height: 1.45; max-width: 180px; }
105
+
106
+ /* Hero demo */
107
+ .hero-demo { background: var(--night); color: #fff; padding: 72px 48px; border-radius: var(--radius); position: relative; overflow: hidden;
108
+ background-image: radial-gradient(ellipse 60% 50% at 80% 40%, rgba(34,81,255,0.35), transparent 60%), linear-gradient(180deg, #051C2C 0%, #0a2740 100%); }
109
+ .hero-demo::before { content: ''; position: absolute; inset: 0;
110
+ background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
111
+ background-size: 72px 72px; pointer-events: none; }
112
+ .hero-inner { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: center; position: relative; }
113
+ .hero-inner .eyebrow { color: #6aa0ff; }
114
+ .hero-inner h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin: 0 0 16px; }
115
+ .hero-inner p { color: rgba(255,255,255,0.62); font-size: 1.02rem; line-height: 1.55; margin: 0 0 24px; max-width: 500px; }
116
+ .btn-row { display: flex; gap: 12px; }
117
+ .btn { font-family: var(--font-sans); font-weight: 600; font-size: 0.92rem; padding: 14px 22px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; }
118
+ .btn-primary { background: var(--blue); color: #fff; }
119
+ .btn-ghost { background: transparent; border-color: rgba(255,255,255,0.22); color: #fff; }
120
+
121
+ /* Components */
122
+ .components-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
123
+ .comp-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
124
+ .comp-card .title { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); margin-bottom: 16px; }
125
+ .buttons-demo { display: flex; gap: 10px; flex-wrap: wrap; }
126
+ .btn-primary-light { background: var(--blue); color: #fff; }
127
+ .btn-ghost-light { background: transparent; border-color: var(--border); color: var(--night); }
128
+ .pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius); }
129
+ .pills-demo { display: flex; gap: 8px; flex-wrap: wrap; }
130
+ .pill.success { background: rgba(0,168,120,0.12); color: #00754f; }
131
+ .pill.warning { background: rgba(243,167,56,0.15); color: #a06500; }
132
+ .pill.error { background: rgba(224,78,47,0.12); color: #a8381d; }
133
+ .pill.info { background: rgba(34,81,255,0.1); color: var(--blue); }
134
+
135
+ /* Usage examples */
136
+ .usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
137
+ .usage-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
138
+ .usage-card h4 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
139
+ .usage-card p { margin: 0; font-size: 0.88rem; color: var(--slate); line-height: 1.55; }
140
+ .usage-card .tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
141
+
142
+ /* Agent component (inline) */
143
+ .pareto-agent { --pa-size: 140px; --pa-body: #2251FF; --pa-antenna: #F6B437; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
144
+ .pareto-agent[data-role="discovery"] { --pa-body: #F6B437; --pa-antenna: #2251FF; }
145
+ .pareto-agent[data-role="plan"] { --pa-body: #146FF4; }
146
+ .pareto-agent[data-role="build"] { --pa-body: #2251FF; }
147
+ .pareto-agent[data-role="validate"] { --pa-body: #3ECF8E; }
148
+ .pareto-agent[data-role="deploy"] { --pa-body: #FF6B4A; }
149
+ .pareto-agent[data-role="run"] { --pa-body: #A884FF; }
150
+ .pareto-agent svg { width: var(--pa-size); height: var(--pa-size); display: block; }
151
+
152
+ .pareto-agent .pa-svg { animation: pa-bob 3.4s ease-in-out infinite; transform-origin: center bottom; }
153
+ .pareto-agent .pa-antenna { transform-origin: 70px 7px; animation: pa-pulse 2.2s ease-in-out infinite; }
154
+ .pareto-agent .pa-eye { transform-origin: center; transform-box: fill-box; animation: pa-blink 5s ease-in-out infinite; }
155
+ .pareto-agent .pa-eye-r { animation-delay: 0.08s; }
156
+ .pareto-agent .pa-smile { transform-origin: 70px 94px; animation: pa-smile 4s ease-in-out infinite; }
157
+
158
+ .pareto-agent[data-role="discovery"] .pa-acc { transform-origin: 104px 34px; animation: pa-scan 3.2s ease-in-out infinite; }
159
+ .pareto-agent[data-role="plan"] .pa-acc { transform-origin: 103px 88px; animation: pa-tick 3.4s ease-in-out infinite; }
160
+ .pareto-agent[data-role="build"] .pa-acc { transform-origin: 70px 30px; animation: pa-tip 3.6s ease-in-out infinite; }
161
+ .pareto-agent[data-role="validate"] .pa-acc { transform-origin: 103px 88px; animation: pa-tick 3.2s ease-in-out infinite; }
162
+ .pareto-agent[data-role="deploy"] .pa-acc { transform-origin: 109px 35px; animation: pa-fly 1.8s ease-in-out infinite; }
163
+ .pareto-agent[data-role="run"] .pa-acc { transform-origin: 106px 100px; animation: pa-rev 2.4s ease-in-out infinite; }
164
+
165
+ .pareto-agent[data-role="discovery"] .pa-svg { animation-delay: 0s; }
166
+ .pareto-agent[data-role="plan"] .pa-svg { animation-delay: 0.3s; }
167
+ .pareto-agent[data-role="build"] .pa-svg { animation-delay: 0.6s; }
168
+ .pareto-agent[data-role="validate"] .pa-svg { animation-delay: 0.9s; }
169
+ .pareto-agent[data-role="deploy"] .pa-svg { animation-delay: 1.2s; }
170
+ .pareto-agent[data-role="run"] .pa-svg { animation-delay: 1.5s; }
171
+
172
+ @keyframes pa-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
173
+ @keyframes pa-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.85; } }
174
+ @keyframes pa-blink { 0%,92%,100% { transform: scaleY(1); } 94%,98% { transform: scaleY(0.1); } }
175
+ @keyframes pa-smile { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.08) translateY(-1px); } }
176
+ @keyframes pa-tip { 0%,80%,100% { transform: translateY(0) rotate(0); } 40%,60% { transform: translateY(-2px) rotate(-4deg); } }
177
+ @keyframes pa-tick { 0%,60%,100% { transform: translateY(0) rotate(0); } 70%,80% { transform: translateY(-2px) rotate(-4deg); } }
178
+ @keyframes pa-fly { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(3px,-4px) rotate(10deg); } }
179
+ @keyframes pa-scan { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-3px,2px) rotate(-8deg); } }
180
+ @keyframes pa-rev { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
181
+
182
+ @media (prefers-reduced-motion: reduce) {
183
+ .pareto-agent *, .pareto-agent .pa-svg { animation: none !important; }
184
+ }
185
+
186
+ footer { margin-top: 96px; padding: 32px 48px; border-top: 1px solid var(--border); color: var(--slate); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
187
+ </style>
188
+ </head>
189
+ <body>
190
+
191
+ <div class="banner">
192
+ <div class="banner-inner">
193
+ <div>
194
+ <p class="eyebrow">Pareto brand · preview</p>
195
+ <h1>The system. The voice.<br>The crew.</h1>
196
+ <p>One accent, one typeface, one cast. A complete brand kit for The Pareto Project — applied to decks, docs, the site, and every future deliverable.</p>
197
+ </div>
198
+ <div class="pareto-agent" data-role="build" style="--pa-size: 200px;">
199
+ <svg class="pa-svg" viewBox="0 0 140 140" fill="none">
200
+ <rect x="20" y="26" width="100" height="90" rx="28" fill="var(--pa-body)"/>
201
+ <path d="M70 10 L70 26" stroke="#2251FF" stroke-width="4" stroke-linecap="round"/>
202
+ <circle class="pa-antenna" cx="70" cy="7" r="5" fill="var(--pa-antenna)"/>
203
+ <g class="pa-eye pa-eye-l"><circle cx="52" cy="66" r="8" fill="#fff"/><circle cx="53" cy="68" r="4" fill="#0A1330"/></g>
204
+ <g class="pa-eye pa-eye-r"><circle cx="88" cy="66" r="8" fill="#fff"/><circle cx="89" cy="68" r="4" fill="#0A1330"/></g>
205
+ <path class="pa-smile" d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
206
+ <g class="pa-acc"><path d="M34 30 Q70 14 106 30 L106 34 L34 34 Z" fill="#F6B437"/><rect x="68" y="16" width="4" height="14" fill="#E0920C"/></g>
207
+ </svg>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="wrap">
213
+
214
+ <!-- 01 — Colors -->
215
+ <section class="section">
216
+ <div class="section-head">
217
+ <h2>Colors</h2>
218
+ <span class="num">01 / Palette</span>
219
+ </div>
220
+
221
+ <p class="t-eyebrow" style="margin-bottom: 16px;">Primary</p>
222
+ <div class="swatch-grid" style="margin-bottom: 40px;">
223
+ <div class="swatch"><div class="swatch-color" style="background: #2251FF;">#2251FF</div><div class="swatch-meta"><div class="name">Pareto Blue</div><div class="hex">Primary · CTAs · accents</div></div></div>
224
+ <div class="swatch"><div class="swatch-color" style="background: #146FF4;">#146FF4</div><div class="swatch-meta"><div class="name">Blue Steel</div><div class="hex">Hover · secondary fills</div></div></div>
225
+ <div class="swatch"><div class="swatch-color" style="background: #051C2C;">#051C2C</div><div class="swatch-meta"><div class="name">Night</div><div class="hex">Dark surfaces · headings</div></div></div>
226
+ <div class="swatch"><div class="swatch-color on-light" style="background: #F5F7FA;">#F5F7FA</div><div class="swatch-meta"><div class="name">Fog</div><div class="hex">Alt surface · card bg</div></div></div>
227
+ </div>
228
+
229
+ <p class="t-eyebrow" style="margin-bottom: 16px;">Crew accents — one per phase</p>
230
+ <div class="crew-grid">
231
+ <div class="crew-swatch"><div class="crew-swatch-dot" style="background: #F6B437;"></div><div class="crew-swatch-meta"><div class="role">01</div><div class="name">Discovery</div><div class="hex">#F6B437</div></div></div>
232
+ <div class="crew-swatch"><div class="crew-swatch-dot" style="background: #146FF4;"></div><div class="crew-swatch-meta"><div class="role">02</div><div class="name">Plan</div><div class="hex">#146FF4</div></div></div>
233
+ <div class="crew-swatch"><div class="crew-swatch-dot" style="background: #2251FF;"></div><div class="crew-swatch-meta"><div class="role">03</div><div class="name">Build</div><div class="hex">#2251FF</div></div></div>
234
+ <div class="crew-swatch"><div class="crew-swatch-dot" style="background: #3ECF8E;"></div><div class="crew-swatch-meta"><div class="role">04</div><div class="name">Validate</div><div class="hex">#3ECF8E</div></div></div>
235
+ <div class="crew-swatch"><div class="crew-swatch-dot" style="background: #FF6B4A;"></div><div class="crew-swatch-meta"><div class="role">05</div><div class="name">Deploy</div><div class="hex">#FF6B4A</div></div></div>
236
+ <div class="crew-swatch"><div class="crew-swatch-dot" style="background: #A884FF;"></div><div class="crew-swatch-meta"><div class="role">06</div><div class="name">Run</div><div class="hex">#A884FF</div></div></div>
237
+ </div>
238
+ </section>
239
+
240
+ <!-- 02 — Typography -->
241
+ <section class="section">
242
+ <div class="section-head">
243
+ <h2>Typography</h2>
244
+ <span class="num">02 / Type</span>
245
+ </div>
246
+
247
+ <div class="type-row">
248
+ <div class="type-spec">Display / Hero</div>
249
+ <div class="t-display">The 80/20 rule, for software.</div>
250
+ <div class="type-spec type-spec-right">Inter 800 · 2.8rem</div>
251
+ </div>
252
+ <div class="type-row">
253
+ <div class="type-spec">H1 / Page</div>
254
+ <div class="t-h1">AI builds 80%. Humans own the 20.</div>
255
+ <div class="type-spec type-spec-right">Inter 800 · 2.2rem</div>
256
+ </div>
257
+ <div class="type-row">
258
+ <div class="type-spec">H2 / Section</div>
259
+ <div class="t-h2">Why it works</div>
260
+ <div class="type-spec type-spec-right">Inter 700 · 1.8rem</div>
261
+ </div>
262
+ <div class="type-row">
263
+ <div class="type-spec">H3 / Card</div>
264
+ <div class="t-h3">Ship in weeks, not quarters</div>
265
+ <div class="type-spec type-spec-right">Inter 700 · 1.1rem</div>
266
+ </div>
267
+ <div class="type-row">
268
+ <div class="type-spec">Body</div>
269
+ <div class="t-body">We redesigned the software delivery lifecycle so AI agents execute about 80% of the work — generation, refactoring, testing, documentation — and humans own the 20% that matters: defining the problem and validating the outcome.</div>
270
+ <div class="type-spec type-spec-right">Inter 400 · 1rem</div>
271
+ </div>
272
+ <div class="type-row">
273
+ <div class="type-spec">Eyebrow / Kicker</div>
274
+ <div class="t-eyebrow">Manifest · 01 / Delivery</div>
275
+ <div class="type-spec type-spec-right">JetBrains Mono 500 · 0.72rem</div>
276
+ </div>
277
+ <div class="type-row">
278
+ <div class="type-spec">Numeric</div>
279
+ <div class="t-num" style="color: var(--blue);">5× faster · 70% lower cost</div>
280
+ <div class="type-spec type-spec-right">Inter 800 · 2rem</div>
281
+ </div>
282
+ </section>
283
+
284
+ <!-- 03 — The Crew -->
285
+ <section class="section">
286
+ <div class="section-head">
287
+ <h2>The Pareto Crew</h2>
288
+ <span class="num">03 / Mascot system</span>
289
+ </div>
290
+
291
+ <p style="color: var(--slate); max-width: 720px; margin: 0 0 24px; font-size: 1rem; line-height: 1.6;">Six agents personify the delivery pipeline — one per phase, no character names. Each maps to a stage; use the right agent for the right context. Their eyes track the cursor. Accents are <em>phase identifiers</em>, never generic UI chrome.</p>
292
+
293
+ <div class="crew-row">
294
+ <div class="crew-cell">
295
+ <div class="pareto-agent" data-role="discovery">
296
+ <svg class="pa-svg" viewBox="0 0 140 140" fill="none">
297
+ <rect x="20" y="26" width="100" height="90" rx="28" fill="#F6B437"/>
298
+ <path d="M70 10 L70 26" stroke="#F6B437" stroke-width="4" stroke-linecap="round"/>
299
+ <circle class="pa-antenna" cx="70" cy="7" r="5" fill="#2251FF"/>
300
+ <g class="pa-eye pa-eye-l"><circle cx="52" cy="66" r="8" fill="#fff"/><circle cx="53" cy="68" r="4" fill="#0A1330"/></g>
301
+ <g class="pa-eye pa-eye-r"><circle cx="88" cy="66" r="8" fill="#fff"/><circle cx="89" cy="68" r="4" fill="#0A1330"/></g>
302
+ <path class="pa-smile" d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
303
+ <g class="pa-acc"><circle cx="104" cy="34" r="7" fill="none" stroke="#0A1330" stroke-width="3"/><path d="M109 39 L117 47" stroke="#0A1330" stroke-width="3" stroke-linecap="round"/></g>
304
+ </svg>
305
+ </div>
306
+ <div>
307
+ <div class="role-label" style="color: #2251FF;">01 · Human-led</div>
308
+ <div class="role-name">Discovery</div>
309
+ <div class="role-desc">Find the real problem and the right technology fit.</div>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="crew-cell">
314
+ <div class="pareto-agent" data-role="plan">
315
+ <svg class="pa-svg" viewBox="0 0 140 140" fill="none">
316
+ <rect x="20" y="26" width="100" height="90" rx="28" fill="#146FF4"/>
317
+ <path d="M70 10 L70 26" stroke="#146FF4" stroke-width="4" stroke-linecap="round"/>
318
+ <circle class="pa-antenna" cx="70" cy="7" r="5" fill="#F6B437"/>
319
+ <g class="pa-eye pa-eye-l"><circle cx="52" cy="66" r="8" fill="#fff"/><circle cx="53" cy="68" r="4" fill="#0A1330"/></g>
320
+ <g class="pa-eye pa-eye-r"><circle cx="88" cy="66" r="8" fill="#fff"/><circle cx="89" cy="68" r="4" fill="#0A1330"/></g>
321
+ <path class="pa-smile" d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
322
+ <g class="pa-acc"><rect x="92" y="74" width="22" height="28" rx="2" fill="#fff" stroke="#0A1330" stroke-width="1.5"/><path d="M96 80h14M96 86h14M96 92h9" stroke="#146FF4" stroke-width="1.4" stroke-linecap="round"/><path d="M101 74v28" stroke="#0A1330" stroke-width="1" stroke-dasharray="2 2"/></g>
323
+ </svg>
324
+ </div>
325
+ <div>
326
+ <div class="role-label" style="color: #1D9E75;">02 · AI-led</div>
327
+ <div class="role-name">Plan</div>
328
+ <div class="role-desc">Decompose scope into AI-ready build increments.</div>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="crew-cell">
333
+ <div class="pareto-agent" data-role="build">
334
+ <svg class="pa-svg" viewBox="0 0 140 140" fill="none">
335
+ <rect x="20" y="26" width="100" height="90" rx="28" fill="#2251FF"/>
336
+ <path d="M70 10 L70 26" stroke="#2251FF" stroke-width="4" stroke-linecap="round"/>
337
+ <circle class="pa-antenna" cx="70" cy="7" r="5" fill="#F6B437"/>
338
+ <g class="pa-eye pa-eye-l"><circle cx="52" cy="66" r="8" fill="#fff"/><circle cx="53" cy="68" r="4" fill="#0A1330"/></g>
339
+ <g class="pa-eye pa-eye-r"><circle cx="88" cy="66" r="8" fill="#fff"/><circle cx="89" cy="68" r="4" fill="#0A1330"/></g>
340
+ <path class="pa-smile" d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
341
+ <g class="pa-acc"><path d="M34 30 Q70 14 106 30 L106 34 L34 34 Z" fill="#F6B437"/><rect x="68" y="16" width="4" height="14" fill="#E0920C"/></g>
342
+ </svg>
343
+ </div>
344
+ <div>
345
+ <div class="role-label" style="color: #1D9E75;">03 · AI-led</div>
346
+ <div class="role-name">Build</div>
347
+ <div class="role-desc">Turn specs into working code. The face of Pareto.</div>
348
+ </div>
349
+ </div>
350
+
351
+ <div class="crew-cell">
352
+ <div class="pareto-agent" data-role="validate">
353
+ <svg class="pa-svg" viewBox="0 0 140 140" fill="none">
354
+ <rect x="20" y="26" width="100" height="90" rx="28" fill="#3ECF8E"/>
355
+ <path d="M70 10 L70 26" stroke="#3ECF8E" stroke-width="4" stroke-linecap="round"/>
356
+ <circle class="pa-antenna" cx="70" cy="7" r="5" fill="#F6B437"/>
357
+ <g class="pa-eye pa-eye-l"><circle cx="52" cy="66" r="8" fill="#fff"/><circle cx="53" cy="68" r="4" fill="#0A1330"/></g>
358
+ <g class="pa-eye pa-eye-r"><circle cx="88" cy="66" r="8" fill="#fff"/><circle cx="89" cy="68" r="4" fill="#0A1330"/></g>
359
+ <path class="pa-smile" d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
360
+ <g class="pa-acc"><rect x="92" y="74" width="22" height="28" rx="2" fill="#fff" stroke="#0A1330" stroke-width="1.5"/><rect x="97" y="70" width="12" height="7" rx="1" fill="#0A1330"/><path d="M96 88 l4 4 7-8" stroke="#1D9E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></g>
361
+ </svg>
362
+ </div>
363
+ <div>
364
+ <div class="role-label" style="color: #2251FF;">04 · Human-led</div>
365
+ <div class="role-name">Validate</div>
366
+ <div class="role-desc">Automated gates, then human end-to-end sign-off.</div>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="crew-cell">
371
+ <div class="pareto-agent" data-role="deploy">
372
+ <svg class="pa-svg" viewBox="0 0 140 140" fill="none">
373
+ <rect x="20" y="26" width="100" height="90" rx="28" fill="#FF6B4A"/>
374
+ <path d="M70 10 L70 26" stroke="#FF6B4A" stroke-width="4" stroke-linecap="round"/>
375
+ <circle class="pa-antenna" cx="70" cy="7" r="5" fill="#F6B437"/>
376
+ <g class="pa-eye pa-eye-l"><circle cx="52" cy="66" r="8" fill="#fff"/><circle cx="53" cy="68" r="4" fill="#0A1330"/></g>
377
+ <g class="pa-eye pa-eye-r"><circle cx="88" cy="66" r="8" fill="#fff"/><circle cx="89" cy="68" r="4" fill="#0A1330"/></g>
378
+ <path class="pa-smile" d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
379
+ <g class="pa-acc"><path d="M102 40 L116 26 L112 44 Z" fill="#2251FF"/><path d="M110 34 L118 42" stroke="#F6B437" stroke-width="2.5" stroke-linecap="round"/></g>
380
+ </svg>
381
+ </div>
382
+ <div>
383
+ <div class="role-label" style="color: #1D9E75;">05 · AI-led</div>
384
+ <div class="role-name">Deploy</div>
385
+ <div class="role-desc">Automated, reversible, zero-manual-step releases.</div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="crew-cell">
390
+ <div class="pareto-agent" data-role="run">
391
+ <svg class="pa-svg" viewBox="0 0 140 140" fill="none">
392
+ <rect x="20" y="26" width="100" height="90" rx="28" fill="#A884FF"/>
393
+ <path d="M70 10 L70 26" stroke="#A884FF" stroke-width="4" stroke-linecap="round"/>
394
+ <circle class="pa-antenna" cx="70" cy="7" r="5" fill="#F6B437"/>
395
+ <g class="pa-eye pa-eye-l"><circle cx="52" cy="66" r="8" fill="#fff"/><circle cx="53" cy="68" r="4" fill="#0A1330"/></g>
396
+ <g class="pa-eye pa-eye-r"><circle cx="88" cy="66" r="8" fill="#fff"/><circle cx="89" cy="68" r="4" fill="#0A1330"/></g>
397
+ <path class="pa-smile" d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
398
+ <g class="pa-acc"><path d="M94 100 a13 13 0 0 1 24 0" fill="none" stroke="#0A1330" stroke-width="2.5" stroke-linecap="round"/><path d="M106 100 L114 91" stroke="#0A1330" stroke-width="2.5" stroke-linecap="round"/><circle cx="106" cy="100" r="2.4" fill="#0A1330"/></g>
399
+ </svg>
400
+ </div>
401
+ <div>
402
+ <div class="role-label" style="color: #1D9E75;">06 · AI-led</div>
403
+ <div class="role-name">Run</div>
404
+ <div class="role-desc">Monitor, back up, and lower the cost to run.</div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </section>
409
+
410
+ <!-- 04 — Hero demo -->
411
+ <section class="section">
412
+ <div class="section-head">
413
+ <h2>Hero treatment</h2>
414
+ <span class="num">04 / Web</span>
415
+ </div>
416
+
417
+ <div class="hero-demo">
418
+ <div class="hero-inner">
419
+ <div>
420
+ <p class="eyebrow">Manifest · 01 / Delivery</p>
421
+ <h3>We redesigned the SDLC.<br>The crew executes 80%.</h3>
422
+ <p>AI agents handle generation, refactoring, testing, and documentation. Humans own the 20% that matters: defining the problem, validating the outcome, taking responsibility.</p>
423
+ <div class="btn-row">
424
+ <button class="btn btn-primary">Start a project</button>
425
+ <button class="btn btn-ghost">See the benchmarks</button>
426
+ </div>
427
+ </div>
428
+ <div class="pareto-agent" data-role="build" style="--pa-size: 240px;">
429
+ <svg class="pa-svg" viewBox="0 0 140 140" fill="none">
430
+ <rect x="20" y="26" width="100" height="90" rx="28" fill="#2251FF"/>
431
+ <path d="M70 10 L70 26" stroke="#2251FF" stroke-width="4" stroke-linecap="round"/>
432
+ <circle class="pa-antenna" cx="70" cy="7" r="5" fill="#F6B437"/>
433
+ <g class="pa-eye pa-eye-l"><circle cx="52" cy="66" r="8" fill="#fff"/><circle cx="53" cy="68" r="4" fill="#0A1330"/></g>
434
+ <g class="pa-eye pa-eye-r"><circle cx="88" cy="66" r="8" fill="#fff"/><circle cx="89" cy="68" r="4" fill="#0A1330"/></g>
435
+ <path class="pa-smile" d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
436
+ <g class="pa-acc"><path d="M34 30 Q70 14 106 30 L106 34 L34 34 Z" fill="#F6B437"/><rect x="68" y="16" width="4" height="14" fill="#E0920C"/></g>
437
+ </svg>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </section>
442
+
443
+ <!-- 05 — Components -->
444
+ <section class="section">
445
+ <div class="section-head">
446
+ <h2>Components</h2>
447
+ <span class="num">05 / UI atoms</span>
448
+ </div>
449
+
450
+ <div class="components-grid">
451
+ <div class="comp-card">
452
+ <div class="title">Buttons</div>
453
+ <div class="buttons-demo">
454
+ <button class="btn btn-primary-light">Primary</button>
455
+ <button class="btn btn-ghost-light">Ghost</button>
456
+ <button class="btn btn-primary-light" style="padding: 10px 16px; font-size: 0.86rem;">Small</button>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="comp-card">
461
+ <div class="title">Status pills</div>
462
+ <div class="pills-demo">
463
+ <span class="pill success">● Shipped</span>
464
+ <span class="pill info">● In progress</span>
465
+ <span class="pill warning">● Review</span>
466
+ <span class="pill error">● Blocked</span>
467
+ </div>
468
+ </div>
469
+
470
+ <div class="comp-card">
471
+ <div class="title">Agent attribution</div>
472
+ <div style="display: flex; align-items: center; gap: 12px;">
473
+ <div class="pareto-agent" data-role="deploy" style="--pa-size: 44px;">
474
+ <svg class="pa-svg" viewBox="0 0 140 140" fill="none">
475
+ <rect x="20" y="26" width="100" height="90" rx="28" fill="#FF6B4A"/>
476
+ <path d="M70 10 L70 26" stroke="#FF6B4A" stroke-width="4" stroke-linecap="round"/>
477
+ <circle class="pa-antenna" cx="70" cy="7" r="5" fill="#F6B437"/>
478
+ <circle cx="52" cy="66" r="8" fill="#fff"/><circle cx="53" cy="68" r="4" fill="#0A1330"/>
479
+ <circle cx="88" cy="66" r="8" fill="#fff"/><circle cx="89" cy="68" r="4" fill="#0A1330"/>
480
+ <path d="M58 90 Q70 100 82 90" stroke="#0A1330" stroke-width="3" stroke-linecap="round" fill="none"/>
481
+ </svg>
482
+ </div>
483
+ <div>
484
+ <div class="tag" style="font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #FF6B4A;">Shipped by the Deploy agent</div>
485
+ <div style="font-size: 0.88rem; color: var(--slate); margin-top: 2px;">v2.4.0 · 2 hours ago</div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+
490
+ <div class="comp-card">
491
+ <div class="title">Stat card</div>
492
+ <div class="t-eyebrow" style="margin-bottom: 6px;">Delivery time</div>
493
+ <div class="t-num" style="color: var(--blue);">1 month</div>
494
+ <div style="font-size: 0.82rem; color: var(--slate); margin-top: 4px;">vs industry average of 5 months</div>
495
+ </div>
496
+ </div>
497
+ </section>
498
+
499
+ <!-- 06 — How to apply -->
500
+ <section class="section">
501
+ <div class="section-head">
502
+ <h2>How to apply the crew</h2>
503
+ <span class="num">06 / Integration</span>
504
+ </div>
505
+
506
+ <div class="usage-grid">
507
+ <div class="usage-card">
508
+ <span class="tag">Website · Hero</span>
509
+ <h4>Hero agent, front and center</h4>
510
+ <p>240–320px hero agent in the hero section. Pairs with the Night background + grid overlay. Pupils track the cursor. Replaces abstract node-canvas imagery.</p>
511
+ </div>
512
+ <div class="usage-card">
513
+ <span class="tag">Website · Crew row</span>
514
+ <h4>All six agents, one band</h4>
515
+ <p>Dedicated section on the landing page. Each agent labelled with its phase, human/AI mode, and a one-line function — no names.</p>
516
+ </div>
517
+ <div class="usage-card">
518
+ <span class="tag">Website · Process</span>
519
+ <h4>Pipeline phases = agents</h4>
520
+ <p>Crew flow visual replaces abstract icons with the matching agent for each phase: Discovery scopes, Build ships code, Validate gates.</p>
521
+ </div>
522
+ <div class="usage-card">
523
+ <span class="tag">Decks · Section opener</span>
524
+ <h4>One agent per chapter</h4>
525
+ <p>Section dividers use a single large agent matching the section's theme. Night background, Pareto Blue accent.</p>
526
+ </div>
527
+ <div class="usage-card">
528
+ <span class="tag">Docs · Byline</span>
529
+ <h4>Shipped by [agent]</h4>
530
+ <p>Release notes, changelogs, blog posts get optional agent attribution — 32–44px inline with a mono label.</p>
531
+ </div>
532
+ <div class="usage-card">
533
+ <span class="tag">Product · CI feed</span>
534
+ <h4>Agent-tagged pipeline</h4>
535
+ <p>Build status views show the responsible agent next to each stage — visual shorthand for "where is my commit."</p>
536
+ </div>
537
+ </div>
538
+ </section>
539
+
540
+ <footer>
541
+ Pareto Brand · v1.0 · skill-package
542
+ </footer>
543
+
544
+ </div>
545
+
546
+ </body>
547
+ </html>