Cathryn Lavery
ba3062c5ba
Why: the default skin was too warm/neutral and the pyramid + venn never quite read the way they should. Also prepping for public sharing, so the example diagrams needed to drop the littlemight-specific copy. Changes: - New five-color palette: jet-black ink, atomic-tangerine accent, white-smoke paper, blue-slate muted, silver hairlines. Replaces warm-stone + rust across every variant + dark-mode tokens. - Default background is clean paper; dot grid + framed container are now opt-in variants (uncomment in template to enable). - New consultant-special quadrant variant (example-quadrant-consultant.html) — 2×2 scenario matrix with named cells, double-ended axes, one focal quadrant; house skin, not a separate visual language. - Pyramid redrawn as a true triangular silhouette with shared edges on one slope (stacked polygons on a single triangle outline, no kinks). - Venn redesigned: dark-fill triple-intersection with white text, circle labels moved inside non-overlap lobes, pair-overlap labels removed, legend dropped. - Example content genericized (content site / product timeline / content platform instead of littlemight-branded copy). - Screenshots regenerated at 2× DPI; added quadrant-consultant.png (14th diagram in the gallery). - README: hero-first opener, preserved Why-I-built-it section, UTM tags on littlemight + bestself links, palette description updated.
170 lines
12 KiB
HTML
170 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Workplace 2030 · Remote work × AI automation</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
:root {
|
||
--color-paper: #f5f5f5;
|
||
--color-paper-2: #ececec;
|
||
--color-ink: #2d3142;
|
||
--color-muted: #4f5d75;
|
||
--color-soft: #7a8399;
|
||
--color-rule: rgba(45,49,66,0.12);
|
||
--color-accent: #eb6c36;
|
||
--font-sans: 'Geist', system-ui, sans-serif;
|
||
--font-serif: 'Instrument Serif', serif;
|
||
--font-mono: 'Geist Mono', ui-monospace, monospace;
|
||
}
|
||
|
||
body { font-family: var(--font-sans); background: var(--color-paper); min-height: 100vh; padding: 3rem 2rem; color: var(--color-ink); }
|
||
.container { max-width: 1200px; margin: 0 auto; }
|
||
|
||
.header { margin-bottom: 2.5rem; }
|
||
.header-eyebrow { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.75rem; }
|
||
h1 { font-family: var(--font-serif); font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.5rem; }
|
||
.subtitle { font-size: 1rem; line-height: 1.55; color: var(--color-muted); max-width: 58ch; }
|
||
|
||
.diagram-container { background: transparent; border: none; padding: 0; overflow-x: auto; }
|
||
svg { width: 100%; min-width: 900px; display: block; }
|
||
|
||
.cards { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1rem; margin-top: 1.5rem; }
|
||
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
|
||
.card { background: #fff; border-radius: 6px; border: 1px solid var(--color-rule); padding: 1.25rem; }
|
||
.card .eyebrow { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.5rem; }
|
||
.card-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.875rem; padding-bottom: 0.875rem; border-bottom: 1px solid rgba(45,49,66,0.08); }
|
||
.card-dot { width: 7px; height: 7px; border-radius: 50%; }
|
||
.card-dot.ink { background: var(--color-ink); }
|
||
.card-dot.muted { background: var(--color-muted); }
|
||
.card-dot.coral { background: var(--color-accent); }
|
||
.card h3 { font-size: 0.875rem; font-weight: 600; }
|
||
.card p, .card ul { color: var(--color-muted); font-size: 0.8125rem; line-height: 1.55; list-style: none; }
|
||
.card li { margin-bottom: 0.3rem; padding-left: 0.875rem; position: relative; }
|
||
.card li::before { content: '—'; position: absolute; left: 0; color: rgba(45,49,66,0.25); font-size: 0.75rem; }
|
||
|
||
.footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(45,49,66,0.10); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--color-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<p class="header-eyebrow">Quadrant · Consultant special</p>
|
||
<h1>Workplace 2030 · Remote × AI automation</h1>
|
||
<p class="subtitle">Four named futures, one matrix. Scenario planning in the consultant 2×2 form — two independent drivers, four equal-weight cells, one quadrant carrying the coral bet.</p>
|
||
</div>
|
||
|
||
<div class="diagram-container">
|
||
<svg viewBox="0 0 1000 660" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<!-- Double-ended axis markers -->
|
||
<marker id="axis-end" markerWidth="9" markerHeight="7" refX="8" refY="3.5" orient="auto">
|
||
<polygon points="0 0, 9 3.5, 0 7" fill="#2d3142"/>
|
||
</marker>
|
||
<marker id="axis-start" markerWidth="9" markerHeight="7" refX="1" refY="3.5" orient="auto">
|
||
<polygon points="9 0, 0 3.5, 9 7" fill="#2d3142"/>
|
||
</marker>
|
||
</defs>
|
||
|
||
<!-- Clean paper background, no dot pattern -->
|
||
<rect width="100%" height="100%" fill="#f5f5f5"/>
|
||
|
||
<!-- Focal quadrant tint (TR) — coral at 3% -->
|
||
<rect x="500" y="80" width="400" height="220" fill="rgba(235,108,54,0.04)"/>
|
||
|
||
<!-- Scenario cells — store treatment with hairline rule, slightly varied -->
|
||
<!-- TL: Distributed humans -->
|
||
<rect x="140" y="120" width="300" height="160" rx="6" fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
|
||
<text x="156" y="144" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.18em">01 · HIGH REMOTE / LOW AI</text>
|
||
<text x="156" y="180" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Distributed humans</text>
|
||
<text x="156" y="216" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Async-first, global hiring,</text>
|
||
<text x="156" y="232" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Slack-heavy. Human-centric</text>
|
||
<text x="156" y="248" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">workflows, low AI leverage.</text>
|
||
|
||
<!-- TR: Agent teams (FOCAL) -->
|
||
<rect x="560" y="120" width="300" height="160" rx="6" fill="rgba(235,108,54,0.06)" stroke="#eb6c36" stroke-width="1.2"/>
|
||
<text x="576" y="144" fill="#eb6c36" font-size="8" font-weight="600" font-family="'Geist Mono', monospace" letter-spacing="0.18em">02 · HIGH REMOTE / HIGH AI</text>
|
||
<text x="576" y="180" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Agent teams <tspan fill="#eb6c36" font-size="13">●</tspan></text>
|
||
<text x="576" y="216" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Humans orchestrate; AI</text>
|
||
<text x="576" y="232" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">handles the routine layer.</text>
|
||
<text x="576" y="248" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Small, high-leverage teams.</text>
|
||
|
||
<!-- BL: Office classic -->
|
||
<rect x="140" y="320" width="300" height="160" rx="6" fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
|
||
<text x="156" y="344" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.18em">03 · LOW REMOTE / LOW AI</text>
|
||
<text x="156" y="380" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Office classic</text>
|
||
<text x="156" y="416" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Return-to-office mandates,</text>
|
||
<text x="156" y="432" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">manual work. Techlash</text>
|
||
<text x="156" y="448" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">prolongs the status quo.</text>
|
||
|
||
<!-- BR: In-person + AI -->
|
||
<rect x="560" y="320" width="300" height="160" rx="6" fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
|
||
<text x="576" y="344" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.18em">04 · LOW REMOTE / HIGH AI</text>
|
||
<text x="576" y="380" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">In-person + AI</text>
|
||
<text x="576" y="416" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">Smart offices, AI-augmented</text>
|
||
<text x="576" y="432" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">staff. Physical presence is</text>
|
||
<text x="576" y="448" fill="#4f5d75" font-size="11" font-family="'Geist', sans-serif">the moat, AI is the lever.</text>
|
||
|
||
<!-- Axis cross — ink, heavier than standard quadrant, double-ended -->
|
||
<line x1="80" y1="300" x2="920" y2="300"
|
||
stroke="#2d3142" stroke-width="1.2"
|
||
marker-start="url(#axis-start)" marker-end="url(#axis-end)"/>
|
||
<line x1="500" y1="60" x2="500" y2="540"
|
||
stroke="#2d3142" stroke-width="1.2"
|
||
marker-start="url(#axis-start)" marker-end="url(#axis-end)"/>
|
||
|
||
<!-- Axis labels — driver name + range (eyebrow + sublabel) -->
|
||
<!-- Top (vertical axis, maximum) -->
|
||
<text x="508" y="40" fill="#2d3142" font-size="9" font-weight="600" font-family="'Geist Mono', monospace" letter-spacing="0.18em">↑ AI AUTOMATION</text>
|
||
<text x="508" y="56" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">high</text>
|
||
<!-- Bottom (vertical axis, minimum) -->
|
||
<text x="508" y="560" fill="#2d3142" font-size="9" font-weight="600" font-family="'Geist Mono', monospace" letter-spacing="0.18em">↓ AI AUTOMATION</text>
|
||
<text x="508" y="576" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">low</text>
|
||
<!-- Left (horizontal axis, minimum) -->
|
||
<text x="60" y="292" fill="#2d3142" font-size="9" font-weight="600" font-family="'Geist Mono', monospace" letter-spacing="0.18em">← REMOTE WORK</text>
|
||
<text x="60" y="308" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace">low</text>
|
||
<!-- Right (horizontal axis, maximum) -->
|
||
<text x="940" y="292" fill="#2d3142" font-size="9" font-weight="600" font-family="'Geist Mono', monospace" text-anchor="end" letter-spacing="0.18em">REMOTE WORK →</text>
|
||
<text x="940" y="308" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="end">high</text>
|
||
|
||
<!-- Legend — horizontal strip, placed BELOW the bottom axis labels (y=560/576) -->
|
||
<line x1="40" y1="604" x2="960" y2="604" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
|
||
<rect x="40" y="616" width="16" height="16" rx="3" fill="rgba(235,108,54,0.06)" stroke="#eb6c36" stroke-width="1"/>
|
||
<text x="64" y="628" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Headline bet</text>
|
||
<rect x="160" y="616" width="16" height="16" rx="3" fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
|
||
<text x="184" y="628" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Candidate future</text>
|
||
<text x="304" y="628" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif" font-style="italic">Every cell is named. The axes carry the range; the coral quadrant carries the commitment.</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="cards">
|
||
<div class="card">
|
||
<p class="eyebrow">THE HEADLINE</p>
|
||
<div class="card-header"><span class="card-dot coral"></span><h3>Name every future</h3></div>
|
||
<p>Scenario planning fails when three of the four cells are placeholders. Forcing a name on each future — even the "won't happen" ones — surfaces the assumptions hiding in the axes.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header"><span class="card-dot ink"></span><h3>Variant rules</h3></div>
|
||
<ul>
|
||
<li>Double-ended arrows on both axes (spectrum, not flow)</li>
|
||
<li>Named cells, not plotted items</li>
|
||
<li>Driver name + range on each arrow tip</li>
|
||
<li>Coral on one focal quadrant max</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header"><span class="card-dot muted"></span><h3>When to use</h3></div>
|
||
<p>Reach for the consultant 2×2 for scenario planning, positioning frames, or strategy sessions where four named archetypes beat a plotted point cloud. If you're prioritising, use the standard quadrant instead.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<span>workplace 2030 · remote × AI automation</span>
|
||
<span>example · consultant special</span>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|