<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unravel — Summer 2026 Dispatch</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root { --bg: #FBF8F2;
--surface: #FFFFFF;
--ink: #15263A; /* headings */
--body: #46566A; /* body text */
--muted: #808B9B;
--line: #ECE6DA;
--line-soft: #F2EDE3;
--accent: #B4623F; /* rust */
--accent-ink: #9C4E30; /* rust for text/links, more contrast */
--accent-wash: #FBEFE7;
--shadow-sm: 0 1px 2px rgba(21,38,58,.05), 0 1px 1px rgba(21,38,58,.03);
--shadow: 0 2px 4px rgba(21,38,58,.04), 0 12px 28px -8px rgba(21,38,58,.10);
--shadow-lg: 0 4px 8px rgba(21,38,58,.05), 0 24px 56px -16px rgba(21,38,58,.16);
--sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B121C; --surface: #121C29; --ink: #EDF1F6; --body: #AEB9C8; --muted: #75808F;
--line: #212C3A; --line-soft: #1A2432; --accent: #E0946E; --accent-ink: #E9A985; --accent-wash: #1E2735;
--shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 2px 6px rgba(0,0,0,.35), 0 16px 36px -12px rgba(0,0,0,.5);
--shadow-lg: 0 4px 10px rgba(0,0,0,.4), 0 30px 64px -18px rgba(0,0,0,.6);
color-scheme: dark;
}
}
:root[data-theme="dark"] { --bg: #0B121C; --surface: #121C29; --ink: #EDF1F6; --body: #AEB9C8; --muted: #75808F;
--line: #212C3A; --line-soft: #1A2432; --accent: #E0946E; --accent-ink: #E9A985; --accent-wash: #1E2735;
--shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 2px 6px rgba(0,0,0,.35), 0 16px 36px -12px rgba(0,0,0,.5);
--shadow-lg: 0 4px 10px rgba(0,0,0,.4), 0 30px 64px -18px rgba(0,0,0,.6);
color-scheme: dark;
--paper: #F0F2F8;
--panel: #FFFFFF;
--panel-2: #E3E7F1;
--ink: #111C36;
--body: #414D66;
--muted: #59647A;
--faint: #7B859A;
--line: #C5CBD8;
--line-soft: #DDE2EC;
--accent: #2448E8;
--accent-deep: #1730A6;
--accent-hover: #1B39C9;
--accent-soft: #DCE3FF;
--sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }html { scrollbar-color: var(--line) transparent; }html { scrollbar-color: var(--line) var(--paper); }::-webkit-scrollbar { width: 13px; }::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 3px solid var(--bg); }::-webkit-scrollbar-thumb:hover { background: var(--muted); }::selection { background: var(--accent-wash); color: var(--accent-ink); }::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid var(--paper); }::-webkit-scrollbar-thumb:hover { background: var(--faint); }::selection { background: var(--accent-soft); color: var(--accent-deep); }body { margin: 0; background: var(--bg); color: var(--body);
font-family: var(--sans); font-size: 17px; line-height: 1.62;
margin: 0; background: var(--paper); color: var(--body);
font-family: var(--sans); font-size: 16.5px; line-height: 1.62;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
padding: 0 16px;
}
a { color: var(--accent-ink); text-decoration: none; }a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }a { color: var(--accent); text-decoration: none; }a:hover { color: var(--accent-hover); }a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }.wrap { max-width: 616px; margin: 0 auto; padding: 0 26px; }@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }.page { animation: rise .6s cubic-bezier(.16,1,.3,1) both; }@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }.card { max-width: 740px; margin: 44px auto 28px; background: var(--panel);
border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 4px;
box-shadow: 0 2px 10px rgba(17,28,54,.05), 0 18px 44px rgba(17,28,54,.07);
animation: rise .5s cubic-bezier(.16,1,.3,1) both;
}
.inner { padding: 0 clamp(24px, 5vw, 52px); }/* masthead */
.mast { display: flex; align-items: center; justify-content: space-between; padding: 40px 0 0; }.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }.brand .mk { width: 11px; height: 11px; border-radius: 3px; background: var(--accent); }.meta { font-size: 12.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }.mast { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 30px 0 20px; border-bottom: 1px solid var(--line); }.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }.brand .mk { width: 11px; height: 11px; border-radius: 2px; background: var(--accent); }.meta { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); text-align: right; }.meta b { color: var(--accent); font-weight: 500; }/* hero */
.hero { padding: 52px 0 8px; }.hero h1 { font-family: var(--sans); font-weight: 680; font-size: clamp(33px, 6.2vw, 46px); line-height: 1.08; letter-spacing: -0.032em; color: var(--ink); margin: 0; text-wrap: balance; }.hero .sub { font-size: 19px; line-height: 1.55; color: var(--body); margin: 20px 0 0; max-width: 34ch; }.hero { padding: 42px 0 10px; }.hero h1 { margin: 0; font-weight: 600; font-size: clamp(28px, 5.4vw, 39px); line-height: 1.15; letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; }.hero .sub { margin: 18px 0 0; font-size: 17px; line-height: 1.58; color: var(--muted); max-width: 58ch; }/* section rhythm */
.sec { padding: 56px 0; border-top: 1px solid var(--line); }/* sections */
.sec { padding: 40px 0 44px; border-top: 1px solid var(--line-soft); }.sec:first-of-type { border-top: none; }.sec > h2 { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); margin: 0 0 26px; }.sec > h2::before { content: ""; display: block; width: 28px; height: 2px; background: var(--accent); border-radius: 2px; margin-bottom: 16px; }.sec p { margin: 0 0 18px; color: var(--body); }.slabel { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 24px; }.slabel .n { color: var(--faint); }.sec p { margin: 0 0 16px; color: var(--body); max-width: 66ch; }.sec p:last-child { margin: 0; }.lede { font-size: 18.5px; line-height: 1.6; color: var(--ink); font-weight: 450; }.note { color: var(--muted); font-size: 15.5px; }em.k { font-style: normal; color: var(--ink); font-weight: 600; }.sec-sub { font-size: 16px; color: var(--body); margin: -12px 0 24px; max-width: 46ch; }/* client-work gists */
.work { display: flex; flex-direction: column; gap: 30px; }.work .item h3 { font-size: 17.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 8px; }.work .item p { margin: 0; color: var(--body); }.sec-sub { font-size: 15.5px; color: var(--muted); margin: -12px 0 24px; max-width: 52ch; }em.k { font-style: normal; color: var(--accent); font-weight: 600; }/* the figures — restrained, editorial, no card, no accent bar */
.figures { display: flex; flex-wrap: wrap; gap: 40px 56px; padding: 26px 0 30px; margin: 4px 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.figures .fig { display: flex; flex-direction: column; gap: 7px; }.figures .fig b { font-size: 30px; font-weight: 660; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }.figures .fig span { font-size: 13.5px; color: var(--muted); line-height: 1.4; max-width: 20ch; }.work { display: flex; flex-direction: column; gap: 26px; }.work .item { border-left: 2px solid var(--line-soft); padding-left: 18px; }.work .item h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 7px; line-height: 1.3; }.work .item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }/* link list */
.rows { display: flex; flex-direction: column; }.link-row { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line-soft); color: var(--ink); transition: padding-left .18s cubic-bezier(.16,1,.3,1); }.link-row:first-child { border-top: none; }.link-row:hover { padding-left: 6px; }.link-row .lr-main { flex: 1; }.link-row .lr-title { font-size: 17px; font-weight: 570; color: var(--ink); letter-spacing: -0.01em; }.link-row .lr-desc { font-size: 14.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }.link-row .chev { color: var(--accent-ink); flex-shrink: 0; align-self: center; transition: transform .18s cubic-bezier(.16,1,.3,1); }.link-row:hover .chev { transform: translateX(4px); }/* momentum figures */
.figures { display: flex; gap: 44px; padding: 4px 0 26px; }.figures .fig b { display: block; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }.figures .fig.inkfig b { color: var(--ink); }.figures .fig span { display: block; margin-top: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); max-width: 20ch; line-height: 1.45; }/* products */
.prod-row { display: flex; align-items: baseline; gap: 16px; padding: 17px 0; border-top: 1px solid var(--line-soft); color: var(--ink); transition: padding-left .18s cubic-bezier(.16,1,.3,1); }.prod-row:first-child { border-top: none; }.prod-row:hover { padding-left: 6px; }.prod-row .pn { font-size: 16.5px; font-weight: 620; color: var(--ink); min-width: 74px; letter-spacing: -0.01em; }.prod-row .pd { flex: 1; font-size: 14.5px; color: var(--muted); line-height: 1.45; }.prod-row .pv { font-size: 13.5px; color: var(--accent-ink); flex-shrink: 0; align-self: center; }.prod-row { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-soft); color: var(--ink); transition: background .12s ease; }.prod-row:first-of-type { border-top: none; }.prod-row:hover { background: color-mix(in srgb, var(--accent-soft) 30%, transparent); }.prod-row .pn { font-size: 15.5px; font-weight: 600; min-width: 76px; color: var(--ink); }.prod-row .pd { flex: 1; font-size: 14px; color: var(--muted); line-height: 1.5; }.prod-row .pv { font-family: var(--mono); font-size: 12px; color: var(--accent); flex-shrink: 0; white-space: nowrap; }/* CTA */
.cta { margin: 44px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 40px 36px; box-shadow: var(--shadow-lg); text-align: center; }.cta h3 { font-size: 25px; font-weight: 660; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 10px; }.cta p { font-size: 16px; color: var(--body); margin: 0 auto 26px; max-width: 40ch; }.btn { display: inline-block; background: var(--accent); color: #fff; font-weight: 590; font-size: 15.5px; letter-spacing: -0.01em; padding: 13px 26px; border-radius: 10px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); filter: brightness(1.04); }.cta .reply { display: block; margin-top: 16px; font-size: 14px; color: var(--muted); }.cta { margin: 42px 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 36px 32px; text-align: center; }.cta h3 { margin: 0 0 10px; font-size: 23px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }.cta p { margin: 0 auto 24px; font-size: 15.5px; color: var(--body); max-width: 48ch; }.btn { display: inline-block; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; padding: 12px 26px; border-radius: 4px; transition: background .13s ease; }.btn:hover { background: var(--accent-hover); color: #fff; }.cta .reply { display: block; margin-top: 15px; font-size: 13.5px; color: var(--muted); }.cta .reply a { color: var(--body); border-bottom: 1px solid var(--line); }/* footer */
.foot { padding: 30px 0 64px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; line-height: 1.7; }.foot .flinks { display: flex; gap: 20px; margin-bottom: 14px; }.foot .flinks a { color: var(--body); }.foot .fine { font-size: 12.5px; color: var(--muted); }.foot .fine a { color: var(--muted); border-bottom: 1px solid var(--line); }.theme-toggle { position: fixed; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--muted); border-radius: 9px; cursor: pointer; font-size: 14px; box-shadow: var(--shadow-sm); z-index: 10; }.theme-toggle:hover { color: var(--ink); }.foot { padding: 22px 0 34px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 12.5px; line-height: 1.7; }.foot .flinks { display: flex; gap: 18px; margin-bottom: 12px; font-family: var(--mono); font-size: 12px; }.foot .flinks a { color: var(--muted); }.foot .fine a { color: var(--faint); border-bottom: 1px solid var(--line-soft); }</style>
<button class="theme-toggle" id="tt" aria-label="Toggle colour theme">◐</button>
</head>
<body>
<div class="page">
<div class="wrap">
<div class="card">
<div class="inner">
<header class="mast">
<div class="brand"><span class="mk"></span>Unravel</div>
<div class="meta">The Dispatch · Summer 2026</div>
<div class="meta"><b>the-dispatch / 001</b><br>summer 2026 · status: shipped</div>
</header>
<div class="hero">
<h1>The best AI products aren't the smartest. They're the ones that change safely, every week.</h1>
<p class="sub">That is what we build: the models, workflows, and infrastructure that let a team ship fast without shipping regressions. Measured outcomes from this quarter's client work in consumer finance, enterprise AI, and consumer media.</p>
</div>
<section class="sec">
<h2>In consumer finance</h2>
<p class="slabel"><span class="n">01 /</span> Consumer finance</p>
<div class="work">
<div class="item">
<h3>+40% click-through, and still climbing in production</h3>
⋯ 7 unchanged lines
</section>
<section class="sec">
<h2>In enterprise AI</h2>
<p class="slabel"><span class="n">02 /</span> Enterprise AI</p>
<div class="work">
<div class="item">
<h3>AI that surfaces the risks nobody thought to ask about</h3>
⋯ 11 unchanged lines
</section>
<section class="sec">
<h2>In consumer media</h2>
<p class="slabel"><span class="n">03 /</span> Consumer media</p>
<div class="work">
<div class="item">
<h3>$1–2 cheaper and 30–75 seconds faster on every render</h3>
⋯ 11 unchanged lines
</section>
<section class="sec">
<h2>About Unravel</h2>
<p class="sec-sub">Unravel is a 20-person team, up from 15 this year, shipping to production every week. Our own products come out of the same AI-first workflows we build for clients.</p>
<a class="prod-row" href="https://steno.unravel.tech"><span class="pn">Steno</span><span class="pd">Meeting notes that write themselves, clean and searchable when the call ends.</span><span class="pv">steno.unravel.tech ↗</span></a>
<a class="prod-row" href="https://usething.ai"><span class="pn">thing</span><span class="pd">Ship your coding agents' output as live, commentable, versioned pages. This letter runs on it.</span><span class="pv">usething.ai ↗</span></a>
<a class="prod-row" href="https://tablo.unravel.tech"><span class="pn">Tablo</span><span class="pd">Keeps a human in the loop on your AI coding agents, live from the corner of the screen.</span><span class="pv">tablo.unravel.tech ↗</span></a>
<a class="prod-row" href="https://asklight.unravel.tech"><span class="pn">Asklight</span><span class="pd">Ctrl+Space, ask anything. AI one keystroke away, with free models and nothing to set up.</span><span class="pv">asklight.unravel.tech ↗</span></a>
<p class="slabel"><span class="n">04 /</span> About Unravel</p>
<div class="figures">
<div class="fig"><b>~2×</b><span>revenue, quarter over quarter</span></div>
<div class="fig inkfig"><b>20</b><span>on the team, up from 15 this year</span></div>
</div>
<p class="sec-sub" style="margin-top:0;">We ship to production every week. Our own products come out of the same AI-first workflows we build for clients.</p>
<a class="prod-row" href="https://steno.unravel.tech"><span class="pn">Steno</span><span class="pd">Meeting notes that write themselves, clean and searchable when the call ends.</span><span class="pv">steno.unravel.tech →</span></a>
<a class="prod-row" href="https://usething.ai"><span class="pn">thing</span><span class="pd">Ship your coding agents' output as live, commentable, versioned pages. This letter runs on it.</span><span class="pv">usething.ai →</span></a>
<a class="prod-row" href="https://tablo.unravel.tech"><span class="pn">Tablo</span><span class="pd">Keeps a human in the loop on your AI coding agents, live from the corner of the screen.</span><span class="pv">tablo.unravel.tech →</span></a>
<a class="prod-row" href="https://asklight.unravel.tech"><span class="pn">Asklight</span><span class="pd">Ctrl+Space, ask anything. AI one keystroke away, with free models and nothing to set up.</span><span class="pv">asklight.unravel.tech →</span></a>
</section>
<div class="cta">
⋯ 7 unchanged lines
<div class="flinks">
<a href="https://unravel.tech">unravel.tech</a>
<a href="https://usething.ai">usething.ai</a>
<a href="mailto:kapil@unravel.tech">Contact</a>
<a href="mailto:kapil@unravel.tech">contact</a>
</div>
<p class="fine">You're receiving The Dispatch because you've worked with Unravel or asked to hear from us. One short note a quarter. <a href="#">Unsubscribe</a> anytime.</p>
<p class="fine" style="margin:0;">You're receiving The Dispatch because you've worked with Unravel or asked to hear from us. One short note a quarter. <a href="#">Unsubscribe</a> anytime.</p>
</footer>
</div>
</div>
<script>
(function(){ var root = document.documentElement, btn = document.getElementById('tt'); var order = [null,'light','dark'], pos = 0;
btn.addEventListener('click', function(){ pos = (pos+1)%order.length;
if (order[pos]) root.setAttribute('data-theme', order[pos]); else root.removeAttribute('data-theme'); btn.textContent = order[pos]==='light' ? '☀' : order[pos]==='dark' ? '☾' : '◐';
});
})();
</script>
</body>
</html>