Blueprint — Output Skill
Scope
Produces: A single-file HTML client-facing blueprint for one initiative. Audience: The client. This is their document. Filename: [client-first]-blueprint-[initiative-slug].html Lifecycle: Living document — updated only when something changes what the client sees.
Required Inputs
- Approved project plan (primary source — blueprint derives from this)
- Client reference data (names, company, tools)
- Latest CPM (for the opening constraint quote only)
- Existing blueprint (Mode 2: update)
Content Rules
- Zero internal jargon. No "constraint," "CPM," "upstream," "downstream," "GPS," "Mode 1/2/3." If it's in the project plan terminology, it does NOT go in the blueprint.
- Never tell the client their problem. The opening uses a direct client quote + a factual reframe of the observable situation. "Your team currently tracks hours in three places" — not "Your time tracking is broken."
- Every build has a "What Changes" outcome. Green-accented block showing the concrete result. Not what gets built — what changes for the client.
- Prework explains WHY. "We need access to your Financial Cents account so we can map your current workflow" — not just "Financial Cents access."
- Questions are collaborative. "We'll work through" not "You need to decide." The client is a partner, not an assignee.
- Deploy chain shows roles, not codes. The client sees their name, the advisor's name, and the team lead's name — not owner tags or color codes.
- Build descriptions are clear to an outsider. Someone who doesn't know the Advisory OS methodology should understand what each build does.
- Only update for client-visible changes. Internal constraint reclassification, new evidence quotes, advisor notes, stakeholder card updates — these don't trigger a blueprint update.
Update Rules (Mode 2)
Update the blueprint ONLY when one of these changes:
| Change | What to Update |
|---|---|
| Build status changed | Build card: active/queued class, deploy line, "This Week" tag |
| New build added | New build card in sequence |
| Build scope changed | Build description, deliverables, "What Changes" outcome |
| Prework received | Move from "Still Needed" to "Received" (compressed format) |
| New prework needed | Add to "Still Needed" with what + why |
| Question resolved | Move from "Open" to "Resolved" with inline answer |
| New question surfaced | Add to "Open" with context |
| Timeline shifted | Adjust week entries, dot colors |
Do NOT update for: constraint reclassification, new evidence quotes, GPS changes, stakeholder card changes, advisor notes, action items (these are internal).
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>
</div>
<div class="build-title">{{BUILD_TITLE}}</div>
<div class="build-description">{{BUILD_DESCRIPTION}}</div>
<!-- Optional: deliverable sub-cards when a build has multiple deliverables -->
<div class="build-deliverable {{DELIVERABLE_TYPE}}">
<div class="build-deliverable-label">{{DELIVERABLE_LABEL}}</div>
<div class="build-deliverable-title">{{DELIVERABLE_TITLE}}</div>
<div class="build-deliverable-desc">{{DELIVERABLE_DESCRIPTION}}</div>
</div>
<div class="build-outcome">
<div class="build-outcome-label">What Changes</div>
<div class="build-outcome-text">{{CONCRETE_OUTCOME}}</div>
</div>
<div class="build-deploy"><strong>Your review:</strong> {{REVIEW_DATE}} · {{STATUS_NOTE}}</div>
</div>Build states: active (navy left border), queued (dimmed opacity).
Still Needed Item
<div class="item-card" style="border-left: 3px solid #122640; background: rgba(18, 38, 64, 0.04);">
<div class="item-what">{{WHAT_IS_NEEDED}}</div>
<div class="item-why">{{WHY_AND_WHAT_IT_UNBLOCKS}}</div>
</div>Received Item (compressed)
<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_RECEIVED}}
</div>Open Question
<div class="item-card" style="border-left: 3px solid #122640; background: rgba(18, 38, 64, 0.04);">
<div class="item-what">{{QUESTION_TOPIC}}</div>
<div class="item-why">{{CONTEXT_AND_WHAT_NEEDS_DECIDING}}</div>
</div>Resolved Question (compressed)
<div style="font-size: 12px; color: #6a6a6a; padding: 8px 12px; background: rgba(61, 122, 95, 0.04); border-left: 2px solid #3d7a5f;">
<strong>{{QUESTION}}</strong> {{ANSWER}}
</div>Timeline Entry
<div class="timeline-entry">
<div class="timeline-dot" style="background: {{DOT_COLOR}}; border-color: {{DOT_COLOR}};"></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 class="timeline-role">{{CLIENT_ACTION_OR_STATUS}}</div>
</div>
</div>Dot colors: #3d7a5f (complete), #122640 (current), default gray outline (future).
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>Blueprint — {{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: 920px; 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;
}
.header-top {
display: flex; justify-content: space-between;
align-items: flex-start;
}
.doc-type {
font-size: 10px; letter-spacing: 0.25em;
text-transform: uppercase; color: #6a6a6a;
margin-bottom: 4px;
}
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: 6px;
}
h1 em { font-style: italic; color: #122640; }
.subtitle {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem; color: #6a6a6a;
}
.date-line {
font-size: 12px; color: #6a6a6a;
letter-spacing: 0.1em; margin-bottom: 8px;
}
.status-badge {
display: inline-flex; align-items: center; gap: 6px;
background: #122640; color: #f8f7f4;
padding: 6px 14px; font-size: 10px;
text-transform: uppercase; letter-spacing: 0.1em;
font-weight: 500;
}
.status-badge .dot {
width: 6px; height: 6px; border-radius: 50%;
background: #22c55e;
}
/* --- Sections --- */
.section { margin-bottom: 48px; }
.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem; font-weight: 500;
color: #122640; margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(10,10,10,0.08);
}
/* --- Constraint Block (Opening) --- */
.constraint-block {
background: #122640; color: #f8f7f4;
padding: 32px 40px; margin-bottom: 48px;
}
.constraint-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(248, 247, 244, 0.7);
margin-bottom: 16px;
}
.constraint-quote {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem; font-style: italic;
color: #f8f7f4; line-height: 1.7;
border-left: 3px solid rgba(248, 247, 244, 0.3);
padding-left: 20px; margin-bottom: 20px;
}
.constraint-reframe {
font-size: 14px; line-height: 1.8;
color: rgba(248, 247, 244, 0.85);
}
/* --- 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.now {
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);
}
/* --- Deploy Block --- */
.deploy-block {
background: #fff;
border: 1px solid rgba(10,10,10,0.08);
padding: 32px 40px; margin-bottom: 32px;
}
.deploy-title {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.15em; color: #6a6a6a;
margin-bottom: 16px;
}
.deploy-legend {
display: flex; gap: 24px;
font-size: 12px; color: #6a6a6a;
margin-bottom: 16px;
}
.deploy-legend-dot {
display: inline-block; width: 10px; height: 10px;
border-radius: 50%; margin-right: 6px;
vertical-align: middle;
}
.deploy-steps {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 4px; margin-bottom: 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;
}
/* Role color classes — customize per client: */
.deploy-step.advisor { background: #6a9fb5; color: #f8f7f4; border-color: #6a9fb5; }
.deploy-step.client { background: #c4785e; color: #f8f7f4; border-color: #c4785e; }
.deploy-step.team { background: #C4A44D; color: #122640; border-color: #C4A44D; }
.deploy-note {
font-size: 13px; color: #6a6a6a; line-height: 1.7;
}
/* --- 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.8; }
.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;
}
.build-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem; font-weight: 500;
color: #122640; margin-bottom: 8px;
}
.build-description {
font-size: 14px; color: #2a2a2a; line-height: 1.7;
margin-bottom: 16px;
}
.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;
}
.build-deliverable-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.1em; font-weight: 500;
color: #122640; margin-bottom: 4px;
}
.build-deliverable-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem; font-weight: 500;
color: #122640; margin-bottom: 6px;
}
.build-deliverable-desc { font-size: 14px; color: #2a2a2a; }
.build-outcome {
background: rgba(61, 122, 95, 0.04);
border-left: 3px solid #3d7a5f;
padding: 12px 16px; margin-top: 12px;
}
.build-outcome-label {
font-size: 9px; text-transform: uppercase;
letter-spacing: 0.1em; color: #3d7a5f;
font-weight: 500; margin-bottom: 4px;
}
.build-outcome-text { font-size: 14px; color: #2a2a2a; }
.build-deploy {
font-size: 13px; color: #6a6a6a; margin-top: 12px;
}
/* --- Item Cards (Prework / Questions) --- */
.item-card {
padding: 16px 20px; margin-bottom: 8px;
background: #fff;
border: 1px solid rgba(10,10,10,0.06);
border-left: 3px solid rgba(18, 38, 64, 0.2);
}
.item-what { font-size: 14px; color: #0a0a0a; font-weight: 400; }
.item-why { font-size: 13px; color: #6a6a6a; line-height: 1.6; margin-top: 4px; }
/* --- 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.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; }
.timeline-role {
font-size: 12px; color: #c4785e;
font-weight: 500; margin-top: 4px;
}
/* --- Footer --- */
footer {
text-align: center; padding-top: 48px;
border-top: 1px solid rgba(10,10,10,0.08);
margin-top: 48px;
}
.footer-brand {
font-size: 11px; letter-spacing: 0.25em;
text-transform: uppercase; color: #6a6a6a;
margin-bottom: 4px;
}
.footer-advisor { font-size: 11px; color: #6a6a6a; }
/* --- Responsive --- */
@media (max-width: 768px) {
body { padding: 24px; }
h1 { font-size: 2rem; }
.state-grid { grid-template-columns: 1fr; }
.deploy-steps { grid-template-columns: repeat(4, 1fr); }
}
/* --- Print --- */
@media print {
body { padding: 24px; }
.constraint-block, .status-badge,
.deploy-step.advisor, .deploy-step.client, .deploy-step.team,
.this-week-tag {
print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.build-card.queued { opacity: 1; }
}
</style>
</head>
<body>
<div class="container">
<!-- SECTION 1: HEADER -->
<header>
<div class="brand-name">{{COMPANY_NAME}}</div>
<div class="header-top">
<div>
<div class="doc-type">Client Blueprint</div>
<h1>{{INITIATIVE_NAME}} <em>{{INITIATIVE_SUBTITLE}}</em></h1>
<div class="date-line">Prepared: {{PREPARED_DATE}} · Updated: {{UPDATED_DATE}}</div>
<div class="subtitle">{{ONE_LINE_SCOPE_SUMMARY}}</div>
</div>
<div class="status-badge"><span class="dot"></span><span>{{STATUS}}</span></div>
</div>
</header>
<!-- SECTION 2: OPENING (Constraint Source) -->
<div class="constraint-block">
<div class="constraint-label">From Your Constraint Briefs</div>
<div class="constraint-quote">"{{DIRECT_CLIENT_QUOTE}}"</div>
<div class="constraint-reframe">{{FACTUAL_REFRAME_OF_OBSERVABLE_SITUATION}}</div>
</div>
<!-- SECTION 3: WHERE YOU ARE VS WHERE WE'RE GOING -->
<section class="section">
<h3 class="section-title">Where You Are vs. Where We're Going</h3>
<div class="state-grid">
<div>
<div class="state-col-title" style="color: #8b4049;">Today</div>
<!-- Repeat for each paired item: -->
<div class="state-item now">{{OBSERVABLE_CURRENT_STATE}}</div>
</div>
<div>
<div class="state-col-title" style="color: #3d7a5f;">After These Builds</div>
<!-- Repeat, paired 1:1 with "Today" items: -->
<div class="state-item target">{{CONCRETE_TARGET_OUTCOME}}</div>
</div>
</div>
</section>
<!-- SECTION 4: DEPLOY CHAIN -->
<div class="deploy-block">
<div class="deploy-title">How Each Build Gets Deployed</div>
<div class="deploy-legend">
<span><span class="deploy-legend-dot" style="background: #6a9fb5;"></span> {{ADVISOR_NAME}}</span>
<span><span class="deploy-legend-dot" style="background: #c4785e;"></span> You ({{CLIENT_NAME}})</span>
<span><span class="deploy-legend-dot" style="background: #C4A44D;"></span> {{TEAM_LEAD}} / Team</span>
</div>
<div class="deploy-steps">
<div class="deploy-step advisor">Design</div>
<div class="deploy-step client">Review</div>
<div class="deploy-step advisor">Implement</div>
<div class="deploy-step advisor">QC Round 1</div>
<div class="deploy-step team">Train</div>
<div class="deploy-step advisor">QC Round 2</div>
<div class="deploy-step team">Team Runs It</div>
<div class="deploy-step advisor">Optimize</div>
</div>
<div class="deploy-note">
{{EXPLANATION_OF_CLIENT_ROLE_IN_PROCESS}}
</div>
</div>
<!-- SECTION 5: THE BUILDS -->
<section class="section">
<h3 class="section-title">What We're Building</h3>
<!-- INSERT BUILD CARDS HERE (use Build Card component template) -->
</section>
<!-- SECTION 6: WHAT WE NEED FROM YOU -->
<section class="section">
<h3 class="section-title">What We Need from You</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 STILL NEEDED 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 RECEIVED ITEMS HERE (compressed format) -->
</div>
</section>
<!-- SECTION 7: QUESTIONS WE'LL WORK THROUGH -->
<section class="section">
<h3 class="section-title">Questions We'll Work Through</h3>
<div style="font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: #122640; font-weight: 500; margin-bottom: 10px;">Open</div>
<!-- INSERT OPEN QUESTION ITEMS HERE -->
<div style="font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: #3d7a5f; font-weight: 500; margin: 20px 0 10px;">Resolved</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px;">
<!-- INSERT RESOLVED QUESTIONS HERE (compressed format) -->
</div>
</section>
<!-- SECTION 8: TIMELINE -->
<section class="section">
<h3 class="section-title">Timeline</h3>
<div class="timeline">
<!-- INSERT TIMELINE ENTRIES HERE -->
</div>
</section>
<!-- SECTION 9: FOOTER -->
<footer>
<div class="footer-brand">{{COMPANY_NAME}}</div>
<div class="footer-advisor">{{ADVISOR_NAME}} · Advisory OS · {{MONTH_YEAR}} · Updated {{UPDATED_DATE}}</div>
</footer>
</div>
</body>
</html>Delivery Checklist
Before sharing the blueprint with the client:
- [ ] All 9 sections present in correct order
- [ ] Zero internal jargon (search for: constraint, CPM, upstream, downstream, GPS, Mode)
- [ ] Opening uses a direct client quote (not paraphrased)
- [ ] Opening reframe describes observable situation, not diagnosis
- [ ] Every build has a "What Changes" outcome block
- [ ] Build statuses match the project plan
- [ ] Deploy chain shows role names the client recognizes
- [ ] "Still Needed" items explain both what AND why
- [ ] "Received" items are in compressed green format
- [ ] Open questions are framed collaboratively
- [ ] Timeline dot colors are accurate (green/navy/gray)
- [ ] Names match reference data exactly
- [ ] File opens in browser without errors
- [ ] Responsive layout works at 768px breakpoint
- [ ] QC checklist scored 90+
- [ ] Read the entire document from the client's perspective — does every section make sense and feel respectful?