Project Plan — Output Skill
Scope
Produces: A single-file HTML project plan for one client initiative. Audience: Advisor only. Never shared with the client. Filename: [client-first]-project-plan-[initiative-slug].html Lifecycle: Living document — updated after every session.
Required Inputs
- Latest Constraint Priority Matrix (CPM)
- Session transcript(s) and/or JSON analysis
- Client reference data (names, tools, spellings)
- Master plan (for cross-initiative context)
- Existing project plan (Mode 2: update)
Content Rules
- GPS is scoped to the initiative — not the overall engagement. Position, Direction, and Speed describe THIS project, not the client relationship.
- Constraint IDs are per-initiative — C1, C2, etc. start fresh for each project plan. They do NOT share IDs with the CPM.
- Every build must resolve at least one constraint — if a build doesn't map to a constraint, it doesn't belong.
- Build sequence follows constraint logic — upstream constraints first, then secondary, then downstream. Earlier builds unblock later builds.
- Owner colors are locked per client — once a person is assigned a color (gold, steel blue, copper, stone), that color never changes. Document the mapping in the client-specific skill.
- Deploy chain always has 8 steps — Design, Review, Implement, QC1, Train, QC2, Live, Optimize. Never skip, reorder, or rename steps.
- Evidence must be direct quotes — not paraphrased. Include speaker, date, and context topic.
- Product constraints are coaching observations — behavioral patterns to watch for, not builds to create. They track patterns that could undermine build adoption.
Update Rules (Mode 2)
After each session, update in this order:
| Order | Section | Always or If Changed |
|---|---|---|
| 1 | Matrix Validation Banner | Always — new constraint analysis per session |
| 2 | GPS | Always — position/direction/speed may shift |
| 3 | Deployment Plan — build cards | Always — advance deploy chains, update statuses |
| 4 | Constraints | If changed — new constraints, reclassifications, or resolutions |
| 5 | Themes | If changed — new patterns or theme status changes |
| 6 | Prework | Always — check for received items, add new needs |
| 7 | Evidence | Always — add key quotes from session |
| 8 | Actions | Always — new items, check off completed |
| 9 | Timeline | Always — advance completed weeks, adjust future |
| 10 | Header | Always — update date and build count |
Do NOT update without session data. The constraint brief alone is not sufficient. Wait for the session transcript.
Status Progressions
Build Deploy Chain
Design → Review → Implement → QC1 → Train → QC2 → Live → Optimize
Constraint Status
Identified → Diagnosed → Build Designed → Build Active → Resolved
Prework Status
Still Needed → Received (or Future → Still Needed → Received)
Action Status
Outstanding → Completed (with date)
Reusable Component Templates
Build Card
<div class="build-card {{BUILD_STATE}}">
<div class="build-number">
Build {{N}}
<!-- Include if active this week: -->
<span class="this-week-tag">This Week</span>
<!-- Include if scheduled: -->
<span class="week-tag">Week {{N}} — {{DATE_RANGE}}</span>
<!-- Include if synergy: -->
<span class="synergy-tag">Solve Together with Build {{X}}</span>
</div>
<div class="build-title">{{BUILD_TITLE}}</div>
<div class="build-deliverable {{DELIVERABLE_TYPE}}">
<div class="deliverable-label {{DELIVERABLE_TYPE}}">{{DELIVERABLE_LABEL}}</div>
<div class="deliverable-title">{{DELIVERABLE_TITLE}}</div>
<div class="deliverable-desc">{{DELIVERABLE_DESCRIPTION}}</div>
<!-- Optional: -->
<div class="deliverable-note"><strong>Why:</strong> {{RATIONALE}}</div>
</div>
<!-- Repeat for additional deliverables -->
<div class="build-resolves">
<strong>Resolves:</strong> {{CONSTRAINT_REFERENCES}}
</div>
<div class="owner-tags">
<span class="owner-tag owns">{{NAME}} — Owns Post-Deploy</span>
<span class="owner-tag designs">{{NAME}} — Design + Implement</span>
<span class="owner-tag approves">{{NAME}} — Review {{DATE}}</span>
</div>
<div class="deploy-chain">
<!-- 8 steps. Apply class: complete-step, active-step, or default -->
<div class="deploy-step {{STEP_STATE}}">Design</div>
<div class="deploy-step {{STEP_STATE}}">Review</div>
<div class="deploy-step {{STEP_STATE}}">Implement</div>
<div class="deploy-step {{STEP_STATE}}">QC1</div>
<div class="deploy-step {{STEP_STATE}}">Train</div>
<div class="deploy-step {{STEP_STATE}}">QC2</div>
<div class="deploy-step {{STEP_STATE}}">Live</div>
<div class="deploy-step {{STEP_STATE}}">Optimize</div>
</div>
<div class="deploy-detail">
<strong>Design:</strong> {{DETAIL}} <strong>Review:</strong> {{DETAIL}} <strong>Implement:</strong> {{DETAIL}} <strong>QC1:</strong> {{DETAIL}} <strong>Train:</strong> {{DETAIL}} <strong>QC2:</strong> {{DETAIL}} <strong>Live:</strong> {{DETAIL}} <strong>Optimize:</strong> {{DETAIL}}
</div>
</div>Constraint Item
<div class="constraint-item {{TIER_CLASS}}">
<div class="constraint-type-label {{POSITION_CLASS}}">{{TIER_LABEL}} / {{ID}} / {{RELATIONSHIP}}</div>
<div class="constraint-name">{{CONSTRAINT_NAME}}</div>
<div class="constraint-detail">{{PATTERN_MARKERS}} · {{BUILD_REFERENCES}}</div>
</div>Tier classes: primary (red border), secondary (copper border), downstream (gray border). Position classes: up, mid, down.
Theme Item
<div class="theme-item {{SEVERITY_CLASS}}">
<div class="theme-name">{{THEME_NAME}}</div>
<div class="theme-evidence">{{EVIDENCE_TEXT}}</div>
</div>Severity classes: critical (red border), emerging (orange border).
Stakeholder Card
<div class="stakeholder-card">
<div class="stakeholder-name">{{NAME}}</div>
<div class="stakeholder-role">{{ROLE_DESCRIPTION}}</div>
<span class="stakeholder-badge {{BADGE_TYPE}}">{{BADGE_LABEL}}</span>
</div>Badge types: owner (gold), approver (copper), designer (steel blue), executor (stone), support (light gray).
Prework Item — Still Needed
<div class="prework-item" style="border-left: 3px solid #122640; background: rgba(18, 38, 64, 0.04);">
<div class="prework-question">{{WHAT_IS_NEEDED}}</div>
<div class="prework-rationale">{{WHY_IT_MATTERS}}</div>
<span class="prework-status pending">Needed for Build {{N}} — since {{DATE}}</span>
</div>Prework Item — Received
<div style="font-size: 12px; color: #6a6a6a; padding: 8px 12px; background: rgba(61, 122, 95, 0.04); border-left: 2px solid #3d7a5f;">
{{ITEM_TEXT}} — {{DATE}}
</div>Quote Item
<div class="quote-item">
<div class="quote-text">"{{DIRECT_QUOTE}}"</div>
<div class="quote-context">{{SPEAKER}} · {{DATE}} · {{TOPIC}}</div>
</div>Action Item
<div class="action-item">
<input type="checkbox" class="action-checkbox" {{CHECKED_IF_COMPLETE}}>
<div class="action-content">
<div class="action-task">{{TASK_DESCRIPTION}}</div>
<div class="action-meta">
<span class="action-owner {{OWNER_TYPE}}">{{NAME}}</span>
<span>{{STATUS_TEXT}}</span>
</div>
</div>
</div>Owner types: mine (steel blue / advisor), client (copper), team (gold).
Timeline Entry
<div class="timeline-entry">
<div class="timeline-dot {{DOT_STATE}}"></div>
<div class="timeline-content">
<div class="timeline-week">Week {{N}} — {{DATE_RANGE}}</div>
<div class="timeline-title">{{TITLE}}</div>
<div class="timeline-detail">{{DETAIL}}</div>
</div>
</div>Dot states: complete (green via inline style background: #3d7a5f), active (navy via inline style background: #122640), default (gray outline).
Full HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Plan — {{INITIATIVE_NAME}} — {{COMPANY_NAME}}</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', sans-serif;
background: #f8f7f4;
color: #0a0a0a;
padding: 48px;
font-size: 15px;
line-height: 1.7;
font-weight: 300;
min-height: 100vh;
}
.container { max-width: 1100px; margin: 0 auto; }
/* --- Header --- */
header { margin-bottom: 32px; }
.brand-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase;
color: #122640; margin-bottom: 4px;
}
.doc-type {
font-size: 13px; letter-spacing: 0.08em;
text-transform: uppercase; color: #6a6a6a;
margin-bottom: 8px; display: flex;
align-items: center; gap: 10px; flex-wrap: wrap;
}
h1 {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem; font-weight: 500;
letter-spacing: -0.02em; color: #0a0a0a;
line-height: 1.2; margin-bottom: 8px;
}
h1 em { font-style: italic; color: #122640; }
.date-line {
font-size: 12px; color: #6a6a6a;
letter-spacing: 0.1em; margin-bottom: 12px;
}
.header-meta {
display: flex; gap: 24px; flex-wrap: wrap;
font-size: 13px; color: #6a6a6a;
}
.header-meta strong { color: #0a0a0a; font-weight: 500; }
/* --- Badges --- */
.badge {
display: inline-block; padding: 3px 10px;
font-size: 10px; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase;
border-radius: 3px; color: #f8f7f4;
}
.badge-active { background: #122640; }
.badge-priority { background: #8b4049; }
.badge-category { background: #8a8680; }
/* --- Sections --- */
.section {
background: #fff;
border: 1px solid rgba(10,10,10,0.08);
padding: 28px 32px;
margin-bottom: 20px;
}
.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem; font-weight: 500;
color: #122640; margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(10,10,10,0.08);
}
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* --- Matrix Validation Banner --- */
.matrix-banner {
background: #122640; color: #f8f7f4;
padding: 32px 40px; margin-bottom: 20px;
}
.matrix-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(248, 247, 244, 0.7);
margin-bottom: 16px;
}
.matrix-narrative {
font-size: 14px; line-height: 1.8;
border-left: 3px solid rgba(248, 247, 244, 0.2);
padding-left: 20px; margin-bottom: 24px;
}
.matrix-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.stat-value {
font-family: 'Cormorant Garamond', serif;
font-size: 1.75rem; font-weight: 500;
}
.stat-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(248, 247, 244, 0.7);
}
/* --- GPS --- */
.gps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.gps-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.15em; color: #6a6a6a;
margin-bottom: 6px;
}
.gps-value { font-size: 14px; color: #2a2a2a; }
/* --- State Grid --- */
.state-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.state-col-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem; font-weight: 500;
margin-bottom: 12px;
}
.state-item {
padding: 12px 16px; font-size: 14px;
margin-bottom: 8px;
}
.state-item.current {
border-left: 3px solid #8b4049;
background: rgba(139, 64, 73, 0.04);
}
.state-item.target {
border-left: 3px solid #3d7a5f;
background: rgba(61, 122, 95, 0.04);
}
.build-tag {
display: inline-block; font-size: 10px;
font-weight: 500; color: #122640;
background: rgba(18, 38, 64, 0.08);
padding: 2px 8px; border-radius: 2px;
}
/* --- Build Cards --- */
.build-card {
background: #fff;
border: 1px solid rgba(10,10,10,0.08);
padding: 28px 32px;
margin-bottom: 12px;
}
.build-card.active { border-left: 4px solid #122640; }
.build-card.queued { opacity: 0.85; }
.build-card.complete { border-left: 4px solid #3d7a5f; }
.build-number {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.15em; color: #122640;
font-weight: 500; margin-bottom: 6px;
display: flex; align-items: center; gap: 8px;
}
.this-week-tag {
background: #122640; color: #f8f7f4;
padding: 2px 8px; font-size: 9px;
text-transform: uppercase; letter-spacing: 0.05em;
}
.week-tag {
background: rgba(10,10,10,0.06); color: #6a6a6a;
padding: 2px 8px; font-size: 9px;
text-transform: uppercase; letter-spacing: 0.05em;
}
.synergy-tag {
background: rgba(18, 38, 64, 0.08); color: #122640;
padding: 2px 8px; font-size: 9px;
text-transform: uppercase; letter-spacing: 0.05em;
}
.build-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem; font-weight: 500;
color: #122640; margin-bottom: 12px;
}
.build-deliverable {
padding: 16px 20px; margin-bottom: 12px;
}
.build-deliverable.process {
background: rgba(18, 38, 64, 0.03);
border-left: 3px solid #122640;
}
.build-deliverable.visibility {
background: rgba(18, 38, 64, 0.03);
border-left: 3px solid #122640;
}
.deliverable-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.1em; font-weight: 500;
margin-bottom: 4px;
}
.deliverable-label.process { color: #122640; }
.deliverable-label.visibility { color: #122640; }
.deliverable-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem; font-weight: 500;
color: #122640; margin-bottom: 6px;
}
.deliverable-desc { font-size: 14px; color: #2a2a2a; }
.deliverable-note {
font-size: 13px; color: #6a6a6a;
margin-top: 8px;
}
.build-resolves {
font-size: 13px; color: #6a6a6a;
margin-top: 12px;
}
/* --- Owner Tags --- */
.owner-tags {
display: flex; flex-wrap: wrap;
gap: 8px; margin-top: 12px;
}
.owner-tag {
font-size: 11px; font-weight: 500;
padding: 4px 12px; border-radius: 3px;
}
.owner-tag.owns { background: rgba(196, 164, 77, 0.15); color: #C4A44D; }
.owner-tag.designs { background: rgba(106, 159, 181, 0.15); color: #6a9fb5; }
.owner-tag.approves { background: rgba(196, 120, 94, 0.15); color: #c4785e; }
.owner-tag.involved { background: rgba(138, 134, 128, 0.15); color: #8a8680; }
/* --- Deploy Chain --- */
.deploy-chain {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 4px; margin-top: 16px;
}
.deploy-step {
text-align: center; padding: 10px 4px;
font-size: 11px; text-transform: uppercase;
letter-spacing: 0.05em; font-weight: 500;
border: 1px solid rgba(10,10,10,0.1);
color: #6a6a6a;
}
.deploy-step.complete-step {
background: #3d7a5f; color: #f8f7f4; border-color: #3d7a5f;
}
.deploy-step.active-step {
background: #122640; color: #f8f7f4; border-color: #122640;
}
.deploy-detail {
font-size: 12px; color: #6a6a6a;
line-height: 1.8; margin-top: 12px;
}
.source-note {
font-size: 12px; color: #6a6a6a;
margin-top: 8px; font-style: italic;
}
.sequence-note {
background: rgba(18, 38, 64, 0.03);
border-left: 3px solid #122640;
padding: 20px 24px; margin-top: 20px;
font-size: 14px; color: #2a2a2a;
}
.sequence-note-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.15em; color: #122640;
font-weight: 500; margin-bottom: 8px;
}
/* --- Constraints --- */
.constraint-item {
padding: 16px 20px; margin-bottom: 12px;
}
.constraint-item.primary {
border-left: 3px solid #8b4049;
background: rgba(139, 64, 73, 0.03);
}
.constraint-item.secondary {
border-left: 3px solid #c4785e;
background: rgba(196, 120, 94, 0.03);
}
.constraint-item.downstream {
border-left: 3px solid #8a8680;
background: rgba(138, 134, 128, 0.03);
}
.constraint-type-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.1em; font-weight: 500;
margin-bottom: 4px;
}
.constraint-type-label.up { color: #8b4049; }
.constraint-type-label.mid { color: #c4785e; }
.constraint-type-label.down { color: #8a8680; }
.constraint-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem; font-weight: 500;
color: #0a0a0a; margin-bottom: 6px;
}
.constraint-detail { font-size: 13px; color: #6a6a6a; }
.pattern-legend {
display: grid;
grid-template-columns: repeat(4, auto);
gap: 16px; margin-bottom: 16px;
font-size: 12px; color: #6a6a6a;
}
/* --- Themes --- */
.theme-item { padding: 16px 20px; margin-bottom: 12px; }
.theme-item.critical {
border-left: 3px solid #8b4049;
background: rgba(139, 64, 73, 0.03);
}
.theme-item.emerging {
border-left: 3px solid #cc6b3a;
background: rgba(204, 107, 58, 0.03);
}
.theme-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem; font-weight: 500;
color: #0a0a0a; margin-bottom: 6px;
}
.theme-evidence { font-size: 13px; color: #6a6a6a; }
.theme-legend {
display: flex; gap: 20px;
font-size: 12px; margin-bottom: 16px;
}
.theme-legend-dot {
display: inline-block; width: 10px; height: 10px;
border-radius: 50%; margin-right: 6px;
vertical-align: middle;
}
/* --- Stakeholders --- */
.stakeholder-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.stakeholder-card {
padding: 16px 20px;
border: 1px solid rgba(10,10,10,0.06);
background: rgba(10,10,10,0.01);
}
.stakeholder-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem; font-weight: 500;
color: #0a0a0a; margin-bottom: 4px;
}
.stakeholder-role { font-size: 13px; color: #6a6a6a; margin-bottom: 8px; }
.stakeholder-badge {
display: inline-block; font-size: 10px;
font-weight: 500; padding: 3px 10px;
border-radius: 3px;
}
.stakeholder-badge.owner { background: rgba(196, 164, 77, 0.15); color: #C4A44D; }
.stakeholder-badge.approver { background: rgba(196, 120, 94, 0.15); color: #c4785e; }
.stakeholder-badge.designer { background: rgba(106, 159, 181, 0.15); color: #6a9fb5; }
.stakeholder-badge.executor { background: rgba(138, 134, 128, 0.15); color: #8a8680; }
.stakeholder-badge.support { background: rgba(10,10,10,0.04); color: #6a6a6a; }
/* --- Prework --- */
.prework-item { padding: 16px 20px; margin-bottom: 12px; }
.prework-question { font-size: 14px; font-weight: 400; color: #0a0a0a; }
.prework-rationale { font-size: 13px; color: #6a6a6a; margin-top: 4px; }
.prework-status {
display: inline-block; font-size: 11px;
margin-top: 8px; color: #6a6a6a;
}
/* --- Evidence --- */
.quote-item {
padding: 16px 20px; margin-bottom: 12px;
border-left: 3px solid #122640;
}
.quote-text {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem; font-style: italic;
color: #0a0a0a; line-height: 1.6;
}
.quote-context {
font-size: 12px; color: #6a6a6a; margin-top: 8px;
}
/* --- Product Constraints --- */
.product-constraint {
padding: 16px 20px; margin-bottom: 12px;
border-left: 3px solid #8b4049;
}
.product-constraint-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.1em; font-weight: 500;
color: #8b4049; margin-bottom: 4px;
}
.product-constraint-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem; font-weight: 500;
color: #0a0a0a; margin-bottom: 6px;
}
.product-constraint-note { font-size: 13px; color: #6a6a6a; }
/* --- Notes --- */
.notes-section { margin-bottom: 16px; }
.notes-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.1em; font-weight: 500;
color: #122640; margin-bottom: 6px;
}
.notes-section p { font-size: 14px; color: #2a2a2a; }
/* --- Actions --- */
.action-item {
display: flex; gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(10,10,10,0.04);
}
.action-checkbox { accent-color: #3d7a5f; margin-top: 4px; }
.action-task { font-size: 14px; color: #0a0a0a; }
.action-meta {
display: flex; gap: 12px;
font-size: 12px; color: #6a6a6a; margin-top: 4px;
}
.action-owner {
font-weight: 500; padding: 1px 8px;
border-radius: 2px; font-size: 11px;
}
.action-owner.mine { background: rgba(106, 159, 181, 0.15); color: #6a9fb5; }
.action-owner.client { background: rgba(196, 120, 94, 0.15); color: #c4785e; }
.action-owner.team { background: rgba(196, 164, 77, 0.15); color: #C4A44D; }
/* --- Action + Deploy Legend --- */
.action-legend {
display: flex; flex-wrap: wrap;
gap: 16px; margin-bottom: 16px;
font-size: 12px; color: #6a6a6a;
}
.action-legend-dot {
display: inline-block; width: 10px; height: 10px;
border-radius: 50%; margin-right: 6px;
vertical-align: middle;
}
/* --- Timeline --- */
.timeline { padding-left: 8px; }
.timeline-entry {
display: flex; gap: 20px;
margin-bottom: 20px; position: relative;
}
.timeline-entry::before {
content: '';
position: absolute; left: 7px;
top: 22px; bottom: -14px;
width: 1px; background: rgba(10,10,10,0.1);
}
.timeline-entry:last-child::before { display: none; }
.timeline-dot {
width: 16px; height: 16px; min-width: 16px;
border-radius: 50%; margin-top: 3px;
border: 2px solid rgba(10,10,10,0.15);
background: transparent;
}
.timeline-dot.complete { background: #3d7a5f; border-color: #3d7a5f; }
.timeline-dot.active { background: #122640; border-color: #122640; }
.timeline-week {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.1em; color: #122640;
font-weight: 500; margin-bottom: 2px;
}
.timeline-title { font-size: 15px; color: #0a0a0a; }
.timeline-detail { font-size: 13px; color: #6a6a6a; margin-top: 4px; }
/* --- Footer --- */
footer {
text-align: center; padding-top: 32px;
border-top: 1px solid rgba(10,10,10,0.08);
margin-top: 40px;
}
.footer-text {
font-size: 11px; color: #6a6a6a;
letter-spacing: 0.05em;
}
/* --- Responsive --- */
@media (max-width: 900px) {
body { padding: 24px; }
h1 { font-size: 2rem; }
.two-col,
.state-grid,
.gps-grid,
.matrix-stats,
.stakeholder-grid { grid-template-columns: 1fr; }
.deploy-chain { grid-template-columns: repeat(4, 1fr); }
}
/* --- Print --- */
@media print {
body { padding: 20px; font-size: 12px; }
.section, .matrix-banner, .build-card { break-inside: avoid; }
.matrix-banner, .badge, .deploy-step.complete-step,
.deploy-step.active-step, .this-week-tag,
.owner-tag, .stakeholder-badge {
print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
}
</style>
</head>
<body>
<div class="container">
<!-- SECTION 1: HEADER -->
<header>
<div class="brand-name">{{COMPANY_NAME}}</div>
<div class="doc-type">
Project Plan
<span class="badge badge-active">{{STATUS}}</span>
<span class="badge badge-priority">Priority: {{TIER}}</span>
<span class="badge badge-category">{{CATEGORY}}</span>
</div>
<h1>{{INITIATIVE_NAME}} <em>{{INITIATIVE_SUBTITLE}}</em></h1>
<div class="date-line">Last Updated: {{DATE}}</div>
<div class="header-meta">
<span><strong>Client:</strong> {{CLIENT_NAME}}</span>
<span><strong>Builds:</strong> {{BUILD_COUNT}}</span>
<span><strong>First Identified:</strong> {{FIRST_IDENTIFIED_DATE}}</span>
<span><strong>Target Completion:</strong> {{TARGET_DATE}}</span>
</div>
</header>
<!-- SECTION 2: MATRIX VALIDATION BANNER -->
<div class="matrix-banner">
<div class="matrix-label">Matrix Validation — {{CPM_DATE}}</div>
<div class="matrix-narrative">
{{CONSTRAINT_ANALYSIS_NARRATIVE}}
</div>
<div class="matrix-stats">
<div class="stat-block">
<div class="stat-value">{{UPSTREAM_COUNT}}</div>
<div class="stat-label">Upstream Causes</div>
</div>
<div class="stat-block">
<div class="stat-value">{{SECONDARY_COUNT}}</div>
<div class="stat-label">Secondary Constraints</div>
</div>
<div class="stat-block">
<div class="stat-value">{{DOWNSTREAM_COUNT}}</div>
<div class="stat-label">Downstream Effects</div>
</div>
<div class="stat-block">
<div class="stat-value">{{PATTERN_COUNT}}</div>
<div class="stat-label">Patterns Detected</div>
</div>
</div>
</div>
<!-- SECTION 3: GPS -->
<div class="section">
<h3 class="section-title">GPS — Scoped to Initiative</h3>
<div class="gps-grid">
<div class="gps-item">
<div class="gps-label">Position</div>
<div class="gps-value">{{GPS_POSITION}}</div>
</div>
<div class="gps-item">
<div class="gps-label">Direction</div>
<div class="gps-value">{{GPS_DIRECTION}}</div>
</div>
<div class="gps-item">
<div class="gps-label">Speed</div>
<div class="gps-value">{{GPS_SPEED}}</div>
</div>
</div>
</div>
<!-- SECTION 4: CURRENT STATE VS TARGET STATE -->
<div class="section">
<h3 class="section-title">Current State vs. Target State</h3>
<div class="state-grid">
<div>
<div class="state-col-title" style="color: #8b4049;">Current State</div>
<!-- Repeat for each current state item: -->
<div class="state-item current">{{CURRENT_STATE_ITEM}}</div>
</div>
<div>
<div class="state-col-title" style="color: #3d7a5f;">Target State</div>
<!-- Repeat for each target item, paired 1:1 with current: -->
<div class="state-item target">{{TARGET_STATE_ITEM}} <span class="build-tag">Build {{N}}</span></div>
</div>
</div>
</div>
<!-- SECTION 5: DEPLOYMENT PLAN -->
<div class="section">
<h3 class="section-title">Deployment Plan</h3>
<div class="action-legend">
<span class="action-legend-item"><span class="action-legend-dot" style="background: #3d7a5f;"></span> Done</span>
<span class="action-legend-item"><span class="action-legend-dot" style="background: #122640;"></span> Active Now</span>
<span class="action-legend-item"><span class="action-legend-dot" style="background: rgba(10,10,10,0.1); border: 1px solid #6a6a6a;"></span> Next</span>
<span style="color: rgba(10,10,10,0.15);">|</span>
<span class="action-legend-item"><span class="action-legend-dot" style="background: #C4A44D;"></span> Owns</span>
<span class="action-legend-item"><span class="action-legend-dot" style="background: #6a9fb5;"></span> Designs ({{ADVISOR_NAME}})</span>
<span class="action-legend-item"><span class="action-legend-dot" style="background: #c4785e;"></span> Approves ({{CLIENT_NAME}})</span>
<span class="action-legend-item"><span class="action-legend-dot" style="background: #8a8680;"></span> Executes / Support</span>
</div>
<!-- INSERT BUILD CARDS HERE (use Build Card component template) -->
<div class="action-legend">
<!-- Repeat legend at bottom -->
</div>
<div class="sequence-note">
<div class="sequence-note-label">Build Sequence Rationale</div>
{{SEQUENCE_RATIONALE}}
</div>
</div>
<!-- SECTION 6-7: CONSTRAINTS + THEMES (two-column) -->
<div class="two-col">
<div class="section">
<h3 class="section-title">Constraints — Scoped to Initiative</h3>
<div style="font-size: 12px; color: #6a6a6a; margin-bottom: 12px;">Source: CPM {{CPM_DATE}}</div>
<div class="pattern-legend">
<div class="pattern-legend-item"><span>🔄</span> <span>Recurring</span></div>
<div class="pattern-legend-item"><span>📈</span> <span>Escalating</span></div>
<div class="pattern-legend-item"><span>🌳</span> <span>Same Root Cause</span></div>
<div class="pattern-legend-item"><span>🔗</span> <span>Solve Together</span></div>
</div>
<!-- INSERT CONSTRAINT ITEMS HERE -->
</div>
<div class="section">
<h3 class="section-title">Recurring Themes — Scoped to Initiative</h3>
<div class="theme-legend">
<span class="theme-legend-item"><span class="theme-legend-dot" style="background: #8b4049;"></span> <span>Critical</span> — needs action</span>
<span class="theme-legend-item"><span class="theme-legend-dot" style="background: #cc6b3a;"></span> <span>Emerging</span> — watching</span>
</div>
<!-- INSERT THEME ITEMS HERE -->
</div>
</div>
<!-- SECTION 8-9: STAKEHOLDERS + PREWORK (two-column) -->
<div class="two-col">
<div class="section">
<h3 class="section-title">Stakeholders</h3>
<div class="stakeholder-grid">
<!-- INSERT STAKEHOLDER CARDS HERE -->
</div>
</div>
<div class="section">
<h3 class="section-title">Pre-work</h3>
<div style="font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: #122640; font-weight: 500; margin-bottom: 10px;">Still Needed</div>
<!-- INSERT PREWORK STILL NEEDED ITEMS HERE -->
<div style="font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: #8a8680; font-weight: 500; margin: 20px 0 10px;">Future Builds</div>
<!-- INSERT PREWORK FUTURE ITEMS HERE -->
<div style="font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: #3d7a5f; font-weight: 500; margin: 20px 0 10px;">Received</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px;">
<!-- INSERT PREWORK RECEIVED ITEMS HERE -->
</div>
</div>
</div>
<!-- SECTION 10: EVIDENCE -->
<div class="section">
<h3 class="section-title">Evidence — Key Quotes</h3>
<!-- INSERT QUOTE ITEMS HERE -->
</div>
<!-- SECTION 11-12: PRODUCT CONSTRAINTS + NOTES (two-column) -->
<div class="two-col">
<div class="section">
<h3 class="section-title">Product Constraints (Coaching, Not Builds)</h3>
<!-- INSERT PRODUCT CONSTRAINT ITEMS HERE -->
</div>
<div class="section">
<h3 class="section-title">Notes</h3>
<!-- INSERT NOTES SECTIONS HERE -->
<div class="notes-section">
<div class="notes-label">{{CATEGORY}}</div>
<p>{{NOTE_CONTENT}}</p>
</div>
</div>
</div>
<!-- SECTION 13: ACTIONS -->
<div class="section">
<h3 class="section-title">Actions</h3>
<div class="action-legend">
<span class="action-legend-item"><span class="action-legend-dot" style="background: #6a9fb5;"></span> {{ADVISOR_NAME}}</span>
<span class="action-legend-item"><span class="action-legend-dot" style="background: #c4785e;"></span> {{CLIENT_NAME}}</span>
<span class="action-legend-item"><span class="action-legend-dot" style="background: #C4A44D;"></span> {{TEAM_LEAD_NAME}}</span>
</div>
<!-- INSERT ACTION ITEMS HERE -->
</div>
<!-- SECTION 14: TIMELINE -->
<div class="section">
<h3 class="section-title">Timeline</h3>
<div class="timeline">
<!-- INSERT TIMELINE ENTRIES HERE -->
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="footer-text">
Project Plan: {{INITIATIVE_NAME}} · {{CLIENT_NAME}} — {{COMPANY_NAME}} · Advisory OS · {{MONTH_YEAR}} · Updated {{UPDATED_DATE}}
</div>
</footer>
</div>
</body>
</html>Delivery Checklist
Before marking the project plan step complete:
- [ ] All 14 sections present and populated
- [ ] Names match reference data exactly
- [ ] All constraint IDs unique and internally consistent
- [ ] Every build resolves at least one constraint
- [ ] Deploy chains show correct 8 steps with accurate statuses
- [ ] Owner colors locked and consistent throughout
- [ ] GPS scoped to initiative, not engagement
- [ ] Current/target state items paired 1:1
- [ ] Prework items reference blocking builds
- [ ] Evidence quotes are direct (not paraphrased) with attribution
- [ ] Actions have owner, date, and status
- [ ] Timeline matches build card week tags
- [ ] File opens in browser without errors
- [ ] Responsive layout works at 900px breakpoint
- [ ] QC checklist scored 90+