// Intellegio landing page — three directions, switchable via Tweaks. // // A · Surgical — keep the cream, drop the italic-coloured accent word. // Emphasis lives in underline rules + a masthead bar. // B · Cool paper — slate-tinted off-white, oxblood accent. No coloured // italic anywhere. Reads as research firm, not AI startup. // C · Newsprint — Playfair Display masthead, drop cap on the lede, // ruled column grid, vol/no dateline. Boldest break. // // Variants share the same component tree; they only swap tokens + a handful // of structural flags (`kickerStyle`, `emphMode`, `cardRadius`, etc.). // ── Variant tokens ────────────────────────────────────────────────────────── const variants = { A: { name: 'A · Surgical', bg: '#f6f4ef', paper: '#fbfaf6', paper2: '#efebe0', ink: '#1a1d23', ink2: '#4a4f5a', ink3: '#8a8f9a', rule: '#cfcabd', ruleSoft: '#e7e3d8', accent: '#1a1d23', // no second colour at all accentSoft: '#e5e1d3', secondInk: '#1d3f7a', // reserved for thin rule marks only amber: '#8a5a1f', serif: '"Source Serif 4", Georgia, serif', sans: '"Geist", "Inter", system-ui, sans-serif', mono: '"Geist Mono", ui-monospace, monospace', display: '"Source Serif 4", Georgia, serif', displayWeight: 500, displayTracking: -2.5, emphMode: 'underline', // emphasise the hero word with a rule under it kickerStyle: 'mastheadBar', cardRadius: 4, pillRadius: 999, dropCap: false, columnRules: false, }, B: { name: 'B · Cool paper', bg: '#ecedeb', paper: '#f4f5f2', paper2: '#dfe0dc', ink: '#1c1e22', ink2: '#494c52', ink3: '#878a8f', rule: '#c4c6c1', ruleSoft: '#dadcd6', accent: '#1d3f7a', // restored ink-blue — used for marks only, never coloured italic accentSoft: '#dde3ef', secondInk: '#1d3f7a', amber: '#8a5a1f', serif: '"Source Serif 4", Georgia, serif', sans: '"Geist", "Inter", system-ui, sans-serif', mono: '"Geist Mono", ui-monospace, monospace', display: '"Source Serif 4", Georgia, serif', displayWeight: 600, displayTracking: -2.2, emphMode: 'none', // no inline emphasis on the hero word — line break carries the rhythm kickerStyle: 'dateline', cardRadius: 2, pillRadius: 4, dropCap: false, columnRules: false, }, C: { name: 'C · Newsprint', bg: '#efeadb', paper: '#f6f1e1', paper2: '#e5dfc7', ink: '#16140e', ink2: '#46402f', ink3: '#8a8472', rule: '#2a2519', // heavy — broadsheet rules ruleSoft: '#c4bea8', accent: '#16140e', // accent IS the ink accentSoft: '#dfd7bd', secondInk: '#16140e', amber: '#8a5a1f', serif: '"Source Serif 4", Georgia, serif', sans: '"Geist", "Inter", system-ui, sans-serif', mono: '"Geist Mono", ui-monospace, monospace', display: '"Playfair Display", "Bodoni 72", Georgia, serif', displayWeight: 900, displayTracking: -1.8, emphMode: 'none', // no inline emphasis on the hero word kickerStyle: 'volDateline', cardRadius: 0, pillRadius: 0, dropCap: true, columnRules: true, }, }; // ── Inject hover/transition styles once ───────────────────────────────────── if (typeof document !== 'undefined' && !document.getElementById('sb-landing-styles')) { const s = document.createElement('style'); s.id = 'sb-landing-styles'; s.textContent = ` .sb-btn { transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; } .sb-btn:hover { transform: translateY(-1px); } .sb-btn:active { transform: translateY(0); } .sb-btn-primary:hover { filter: brightness(1.15); } .sb-btn-paper:hover { filter: brightness(.96); } .sb-btn-ghost:hover { background: rgba(26,29,35,.06); } .sb-link { transition: color .12s ease; cursor: pointer; } .sb-archive-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; cursor: pointer; } .sb-archive-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -16px rgba(20,25,40,.18); } .sb-preview-btn { transition: background .12s ease, color .12s ease; } .sb-nav-link { transition: color .12s ease; cursor: pointer; } .sb-faq-item { cursor: default; } .sb-dropcap::first-letter { font-family: "Playfair Display", "Bodoni 72", Georgia, serif; font-size: 5.6em; line-height: .82; float: left; padding: .04em .12em 0 0; font-weight: 900; } `; document.head.appendChild(s); } // ── Brand mark ────────────────────────────────────────────────────────────── // In newsprint mode the wordmark gets a more idiosyncratic display face so it // reads like a nameplate rather than a SaaS logotype. function SBMark({ size = 30, ink, label = true, mark = false, variant }) { const v = variant || variants.A; const inkColor = ink || v.ink; const wordmarkFace = v.kickerStyle === 'volDateline' ? "'Playfair Display', 'Bodoni 72', Georgia, serif" : "'Libre Baskerville', 'Baskerville', 'Times New Roman', serif"; const wordmarkWeight = v.kickerStyle === 'volDateline' ? 900 : 400; const Wordmark = () => ( Intellegio ); const Square = () => ( I º ); if (!label) return ; if (!mark) return ; return ( ); } // ── Section kicker — varies by direction ──────────────────────────────────── // All three avoid the "small caps + accent colour" pattern that started this // whole conversation. A uses mono in ink, B uses mono in ink with a leading // rule, C uses bracketed section numbers like a broadsheet. function SectionKicker({ v, children, n }) { if (v.kickerStyle === 'volDateline') { return (
{n && § {n}} {children}
); } if (v.kickerStyle === 'dateline') { return (
{children}
); } // mastheadBar (A) return (
{n && {n}  /  }{children}
); } // ── Hero kicker — even more variant-specific ─────────────────────────────── function HeroKicker({ v }) { const items = ['Issue Nº 14', 'May 2026', 'Intelligence brief']; if (v.kickerStyle === 'volDateline') { return (
Vol. I Nº 14 May 2026 First Edition
); } if (v.kickerStyle === 'dateline') { return (
{items.map((it, i) => ( {it} {i < items.length - 1 && —} ))}
); } // mastheadBar (A) return (
{items.map((it, i) => ( {it} {i < items.length - 1 && │} ))}
); } // ── Hero headline — the most-recognisable design move lives here ─────────── // Variant A: "before you ⎯move⎯ in it" underline rule, no colour // Variant B: "before you move in it" weight contrast 700, no colour // Variant C: "before you move in it" no inline emphasis; lede gets a drop cap function HeroHeadline({ v }) { const lead = 'Read the conversation'; const tail = ( <>before you{' '} {v.emphMode === 'underline' && ( enter )} {v.emphMode === 'weight' && ( enter )} {v.emphMode === 'none' && (enter)} {' '}it. ); return (

{lead}
{tail}

); } // ── Mini archive cover ────────────────────────────────────────────────────── function MiniCover({ v, no, topic, audience }) { return (
Nº {no}
{topic}
{audience}
); } // ──────────────────────────────────────────────────────────────────────────── function Landing({ onStart, variantKey = 'A' }) { const v = variants[variantKey] || variants.A; // Maintain backward compat for chat.jsx which reads window.dossierTokens. window.dossierTokens = { ...v, blue: v.secondInk, blueSoft: v.accentSoft }; const open = (e) => { e && e.preventDefault && e.preventDefault(); onStart && onStart(); }; return (
{/* ── Nav ─────────────────────────────────────────────────────── */}
{/* ── Hero ──────────────────────────────────────────────────── */}

Intellegio reads the most-engaged X conversation on your topic — typically the top 100 tweets from the past 30 days — and synthesises them into a brief for the decision you're making this week.

{v.columnRules && ( <>
)} {[ ['From $9', 'No subscription, ever.'], ['24 hrs', 'Typical turnaround.'], ['Preview first', 'See the data volume before you pay.'], ].map(([k, val], i) => (
0 ? 18 : 0 }}>
{k}
{val}
))}
{/* Brief cover mock */}
Brief Nº 02615
AI Agents for
Small Business
A third of the corpus is spam. The real signal: narrow tasks work today, autonomous agents don't. One factory owner got 57% more throughput with a whiteboard and one agent.
30-day window 100 top tweets May 2026
{/* ── Pull quote band ────────────────────────────────────────── */}
The premise

{v.kickerStyle === 'volDateline' && “} The real conversation on X used to require enterprise access at thousands of dollars a month.{' '} It shouldn't. {' '}One brief, one topic, one fixed price.

From the editor's note,
May 2026
{/* ── How it works ──────────────────────────────────────────── */}
How it works

The query is the product. You approve it before any work begins.

{v.columnRules && [1, 2, 3].map(i => (
))} {window.STEPS.map((s, i) => (
0 ? 20 : 0, paddingRight: v.columnRules && i < 3 ? 20 : 0 }}>
Step {s.n}
{s.title}

{s.body}

{i === 2 && (
● Transparency checkpoint
)}
))}
{/* ── Pricing ─────────────────────────────────────────────────── */}
Pricing

Pay per brief. Pick the depth.

No subscriptions, no seats. Three tiers for three kinds of questions.
{window.PRICING.map((p) => (
{p.featured && (
Most chosen
)}
{p.tier}
$ {p.price}

{p.blurb}

    {p.bullets.map((b) => (
  • {b}
    • ))}
))}
{/* ── Sample briefs / archive ─────────────────────────────────── */}
{/* ── FAQ ─────────────────────────────────────────────────────── */}
Plain answers

The questions buyers ask before they buy.

{window.FAQ.map((f, i) => (
{f.q}

{f.a}

))}
{/* ── CTA ─────────────────────────────────────────────────────── */}
{/* Decoration: variant-specific */} {v.kickerStyle === 'mastheadBar' && ( <>
)} {v.kickerStyle === 'dateline' && (
)} {v.kickerStyle === 'volDateline' && (
)}
Start a brief

Describe a topic. The rest takes about a minute.

You'll talk to the brief assistant, approve the query, and see a volume estimate before you ever enter a card.

{/* ── Footer ─────────────────────────────────────────────────── */}
); } // Initial dossierTokens shim so chat.jsx (which reads window.dossierTokens.blue // and .blueSoft) has the legacy keys mapped even before Landing first renders. window.dossierTokens = { ...variants.A, blue: variants.A.secondInk, blueSoft: variants.A.accentSoft }; Object.assign(window, { Landing, SBMark, variants });