Layouts

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-neutral-100 p-6'><div class='mx-auto grid max-w-6xl grid-cols-12 gap-4 text-sm'><div class='col-span-12 rounded-xl bg-white p-5 ring-1 ring-neutral-200 lg:col-span-8'><p class='font-semibold text-black'>Traffic</p><p class='text-neutral-500'>Visits over the last 7 days</p><div class='mt-6 flex h-36 items-end gap-3'><div class='h-[40%] flex-1 rounded-t bg-neutral-300'></div><div class='h-[55%] flex-1 rounded-t bg-neutral-300'></div><div class='h-[45%] flex-1 rounded-t bg-neutral-300'></div><div class='h-[75%] flex-1 rounded-t bg-neutral-400'></div><div class='h-[60%] flex-1 rounded-t bg-neutral-300'></div><div class='h-[90%] flex-1 rounded-t bg-black'></div><div class='h-[70%] flex-1 rounded-t bg-neutral-400'></div></div></div><div class='col-span-12 rounded-xl bg-black p-5 text-white lg:col-span-4'><p class='text-neutral-400'>This week</p><p class='mt-2 text-4xl font-semibold'>24,310</p><p class='mt-1 text-neutral-400'>+8.2% from last week</p></div><div class='col-span-12 rounded-xl bg-white p-5 ring-1 ring-neutral-200 md:col-span-6'><p class='font-semibold text-black'>Top pages</p><ul class='mt-3 space-y-2 text-neutral-600'><li class='flex justify-between'><span>/pricing</span><span>6,120</span></li><li class='flex justify-between'><span>/features</span><span>4,880</span></li><li class='flex justify-between'><span>/blog</span><span>3,402</span></li></ul></div><div class='col-span-12 rounded-xl bg-white p-5 ring-1 ring-neutral-200 md:col-span-6'><p class='font-semibold text-black'>Sources</p><ul class='mt-3 space-y-2 text-neutral-600'><li class='flex justify-between'><span>Search</span><span>48%</span></li><li class='flex justify-between'><span>Direct</span><span>31%</span></li><li class='flex justify-between'><span>Social</span><span>21%</span></li></ul></div><div class='col-span-12 rounded-xl bg-white p-5 ring-1 ring-neutral-200'><p class='font-semibold text-black'>Recent activity</p><ul class='mt-3 divide-y divide-neutral-100 text-neutral-600'><li class='flex justify-between py-2'><span>New signup from Austin</span><span>2 min ago</span></li><li class='flex justify-between py-2'><span>Plan upgraded to Team</span><span>18 min ago</span></li><li class='flex justify-between py-2'><span>Export finished</span><span>1 hour ago</span></li></ul></div></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div><section class='bg-white'><div class='mx-auto max-w-4xl px-6 py-20 text-center'><h1 class='text-5xl font-semibold tracking-tight text-black'>Plan less. Ship more.</h1><p class='mx-auto mt-5 max-w-xl text-lg text-neutral-600'>A calm project tool for teams who would rather build than manage.</p><div class='mt-8 flex justify-center gap-3'><a href='#' class='rounded-lg bg-black px-5 py-3 text-sm font-semibold text-white'>Start free</a><a href='#' class='rounded-lg border border-neutral-300 px-5 py-3 text-sm font-semibold text-black'>See how it works</a></div></div></section><section class='bg-neutral-100'><div class='mx-auto grid max-w-5xl gap-6 px-6 py-16 md:grid-cols-3'><div><h3 class='font-semibold text-black'>One board</h3><p class='mt-2 text-sm leading-6 text-neutral-600'>Every task, owner and deadline in a single view that fits on a screen.</p></div><div><h3 class='font-semibold text-black'>Quiet by default</h3><p class='mt-2 text-sm leading-6 text-neutral-600'>Notifications only when something needs you, never for noise.</p></div><div><h3 class='font-semibold text-black'>Plays well</h3><p class='mt-2 text-sm leading-6 text-neutral-600'>Connects to the calendar, chat and code tools you already use.</p></div></div></section><section class='bg-black text-white'><div class='mx-auto grid max-w-5xl gap-8 px-6 py-14 text-center md:grid-cols-3'><div><p class='text-4xl font-semibold'>12k</p><p class='mt-1 text-sm text-neutral-400'>Teams</p></div><div><p class='text-4xl font-semibold'>4.9</p><p class='mt-1 text-sm text-neutral-400'>Average rating</p></div><div><p class='text-4xl font-semibold'>99.9%</p><p class='mt-1 text-sm text-neutral-400'>Uptime</p></div></div></section><section class='bg-white'><div class='mx-auto max-w-3xl px-6 py-16 text-center'><h2 class='text-3xl font-semibold tracking-tight text-black'>Ready when you are</h2><a href='#' class='mt-6 inline-block rounded-lg bg-black px-5 py-3 text-sm font-semibold text-white'>Create your workspace</a></div></section></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='flex min-h-[620px] bg-white text-sm'><aside class='flex w-14 shrink-0 flex-col items-center gap-2 border-r border-neutral-200 bg-neutral-50 py-4'><span class='mb-2 grid h-8 w-8 place-items-center rounded-lg bg-black text-xs font-semibold text-white'>F</span><a href='#' class='grid h-9 w-9 place-items-center rounded-lg bg-white ring-1 ring-neutral-200' aria-label='Files'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/></svg></a><a href='#' class='grid h-9 w-9 place-items-center rounded-lg text-neutral-500' aria-label='Search'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg></a><a href='#' class='grid h-9 w-9 place-items-center rounded-lg text-neutral-500' aria-label='Shared'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'><circle cx='9' cy='8' r='3'/><path d='M3 20a6 6 0 0 1 12 0'/><path d='M16 5a3 3 0 0 1 0 6M21 20a6 6 0 0 0-4-5.6'/></svg></a><a href='#' class='mt-auto grid h-9 w-9 place-items-center rounded-lg text-neutral-500' aria-label='Settings'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3'/></svg></a></aside><div class='flex-1'><header class='flex items-center justify-between border-b border-neutral-200 px-6 py-3'><div><p class='font-semibold text-black'>Brand assets</p><p class='text-xs text-neutral-500'>12 files · 48 MB</p></div><div class='flex gap-2'><a href='#' class='rounded-lg border border-neutral-300 px-3 py-1.5 font-semibold text-black'>Share</a><a href='#' class='rounded-lg bg-black px-3 py-1.5 font-semibold text-white'>Upload</a></div></header><main class='grid gap-4 p-6 sm:grid-cols-2 lg:grid-cols-4'><div class='rounded-xl border border-neutral-200 p-4'><div class='grid h-24 place-items-center rounded-lg bg-neutral-100'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft logo' class='h-10 w-auto'></div><p class='mt-3 font-medium text-black'>Logo.svg</p><p class='text-xs text-neutral-500'>12 KB</p></div><div class='rounded-xl border border-neutral-200 p-4'><div class='h-24 overflow-hidden rounded-lg bg-neutral-200'><img src='https://images.unsplash.com/photo-1487338875411-8880f74114a2?auto=format&fit=crop&w=500&q=75' alt='Two monitors showing design work on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><p class='mt-3 font-medium text-black'>Cover.png</p><p class='text-xs text-neutral-500'>2.4 MB</p></div><div class='rounded-xl border border-neutral-200 p-4'><div class='h-24 overflow-hidden rounded-lg bg-black' style='background-image:radial-gradient(circle,#525252 1.5px,transparent 1.5px);background-size:14px 14px'></div><p class='mt-3 font-medium text-black'>Pattern.png</p><p class='text-xs text-neutral-500'>860 KB</p></div><div class='rounded-xl border border-neutral-200 p-4'><div class='h-24 overflow-hidden rounded-lg bg-neutral-100 p-3'><div class='mx-auto h-full w-16 rounded-sm bg-white p-2 shadow-sm ring-1 ring-neutral-200'><div class='h-1.5 w-8 rounded bg-black'></div><div class='mt-2 h-1 rounded bg-neutral-300'></div><div class='mt-1 h-1 rounded bg-neutral-300'></div><div class='mt-1 h-1 w-10 rounded bg-neutral-300'></div></div></div><p class='mt-3 font-medium text-black'>Guidelines.pdf</p><p class='text-xs text-neutral-500'>5.1 MB</p></div></main></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='grid min-h-[640px] md:grid-cols-2'><div class='flex flex-col justify-between bg-black p-10 text-white'><span class='text-lg font-semibold'>Northwind</span><div><h1 class='text-4xl font-semibold leading-tight tracking-tight'>Welcome back to your workspace</h1><p class='mt-6 max-w-sm text-neutral-400'>“We replaced three tools with one and our weekly meeting got shorter.”</p><p class='mt-3 text-sm text-neutral-300'>Jordan Lee, Head of Operations</p></div><p class='text-xs text-neutral-500'>© 2026 Northwind</p></div><div class='flex items-center justify-center bg-neutral-100 p-10'><form class='w-full max-w-sm'><h2 class='text-2xl font-semibold tracking-tight text-black'>Sign in</h2><p class='mt-1 text-sm text-neutral-500'>Use your work email to continue.</p><label class='mt-6 block text-sm font-medium text-black'>Email<input type='email' class='mt-1 w-full rounded-lg border border-neutral-300 bg-white px-3 py-2.5 text-sm outline-none' placeholder='you@company.com'></label><label class='mt-4 block text-sm font-medium text-black'>Password<input type='password' class='mt-1 w-full rounded-lg border border-neutral-300 bg-white px-3 py-2.5 text-sm outline-none' placeholder='••••••••'></label><button type='button' class='mt-6 w-full rounded-lg bg-black px-4 py-2.5 text-sm font-semibold text-white'>Sign in</button><p class='mt-4 text-center text-sm text-neutral-500'>New here? <a href='#' class='font-semibold text-black underline'>Create an account</a></p></form></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='flex min-h-[680px] flex-col bg-white'><header class='border-b border-neutral-200'><div class='mx-auto flex max-w-6xl items-center justify-between px-6 py-4'><span class='font-semibold text-black'>The Daily Build</span><nav class='hidden gap-6 text-sm text-neutral-600 sm:flex'><a href='#'>Latest</a><a href='#'>Guides</a><a href='#'>Podcast</a></nav></div></header><div class='mx-auto grid w-full max-w-6xl flex-1 gap-10 px-6 py-12 lg:grid-cols-[1fr_300px]'><main class='space-y-8'><article class='border-b border-neutral-200 pb-8'><p class='text-xs font-semibold uppercase tracking-widest text-neutral-500'>Design</p><h2 class='mt-2 text-2xl font-semibold text-black'>Why simple interfaces win</h2><p class='mt-3 leading-7 text-neutral-600'>Less to look at means less to get wrong. We look at five products that removed features and grew.</p></article><article class='border-b border-neutral-200 pb-8'><p class='text-xs font-semibold uppercase tracking-widest text-neutral-500'>Engineering</p><h2 class='mt-2 text-2xl font-semibold text-black'>The case for boring technology</h2><p class='mt-3 leading-7 text-neutral-600'>New tools are exciting. Proven tools ship. How to decide which one belongs in your stack.</p></article><article><p class='text-xs font-semibold uppercase tracking-widest text-neutral-500'>Product</p><h2 class='mt-2 text-2xl font-semibold text-black'>Writing release notes that get read</h2><p class='mt-3 leading-7 text-neutral-600'>A short, honest changelog builds more trust than a long launch post.</p></article></main><aside class='space-y-6'><div class='rounded-xl border border-neutral-200 p-5'><p class='font-semibold text-black'>Topics</p><div class='mt-3 flex flex-wrap gap-2 text-sm'><span class='rounded-full bg-neutral-100 px-3 py-1'>Design</span><span class='rounded-full bg-neutral-100 px-3 py-1'>Engineering</span><span class='rounded-full bg-neutral-100 px-3 py-1'>Product</span><span class='rounded-full bg-neutral-100 px-3 py-1'>Careers</span></div></div><div class='rounded-xl bg-black p-5 text-white'><p class='font-semibold'>Get the weekly digest</p><p class='mt-1 text-sm text-neutral-400'>One email on Friday. No spam.</p><input class='mt-4 w-full rounded-lg border border-neutral-700 bg-neutral-900 px-3 py-2 text-sm outline-none' placeholder='you@example.com'><a href='#' class='mt-3 block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-black'>Subscribe</a></div></aside></div><footer class='border-t border-neutral-200'><div class='mx-auto flex max-w-6xl justify-between px-6 py-6 text-sm text-neutral-500'><span>© 2026 The Daily Build</span><span>Privacy · Terms</span></div></footer></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='grid min-h-[620px] bg-white text-sm md:grid-cols-[200px_320px_1fr]'><nav class='hidden border-r border-neutral-200 bg-neutral-50 p-4 md:block'><a href='#' class='mb-4 block rounded-lg bg-black px-3 py-2 text-center font-semibold text-white'>Compose</a><a href='#' class='flex justify-between rounded-lg bg-white px-3 py-2 font-medium text-black ring-1 ring-neutral-200'>Inbox <span>12</span></a><a href='#' class='mt-1 block rounded-lg px-3 py-2 text-neutral-600'>Starred</a><a href='#' class='block rounded-lg px-3 py-2 text-neutral-600'>Sent</a><a href='#' class='block rounded-lg px-3 py-2 text-neutral-600'>Drafts</a><a href='#' class='block rounded-lg px-3 py-2 text-neutral-600'>Archive</a></nav><section class='border-r border-neutral-200'><div class='border-b border-neutral-200 px-4 py-3 font-semibold text-black'>Inbox</div><ul class='divide-y divide-neutral-100'><li class='bg-neutral-50 px-4 py-3'><p class='font-semibold text-black'>Design review notes</p><p class='mt-0.5 text-neutral-500'>Thanks for the quick turnaround on the…</p></li><li class='px-4 py-3'><p class='font-medium text-black'>Invoice for March</p><p class='mt-0.5 text-neutral-500'>Attached is the invoice for last month…</p></li><li class='px-4 py-3'><p class='font-medium text-black'>Lunch on Friday?</p><p class='mt-0.5 text-neutral-500'>There is a new place near the office…</p></li><li class='px-4 py-3'><p class='font-medium text-black'>Welcome to the team</p><p class='mt-0.5 text-neutral-500'>We are glad to have you on board…</p></li></ul></section><article class='p-8'><h1 class='text-xl font-semibold text-black'>Design review notes</h1><p class='mt-1 text-neutral-500'>From Taylor Brooks · Today, 9:14</p><div class='mt-6 space-y-4 leading-7 text-neutral-700'><p>Hi, thanks for the quick turnaround on the pricing page. A few notes from the review.</p><p>The headline reads well. Can we make the plan comparison easier to scan on mobile, and add one customer quote under the first plan?</p><p>Happy to talk it through on a call if that is easier.</p></div><div class='mt-8 flex gap-2'><a href='#' class='rounded-lg bg-black px-4 py-2 font-semibold text-white'>Reply</a><a href='#' class='rounded-lg border border-neutral-300 px-4 py-2 font-semibold text-black'>Forward</a></div></article></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='flex min-h-[680px] bg-neutral-100 text-sm'><aside class='hidden w-56 shrink-0 bg-black p-4 text-neutral-400 md:block'><div class='mb-8 px-2 text-base font-semibold text-white'>Acme</div><nav class='space-y-1'><a href='#' class='block rounded-lg bg-neutral-800 px-3 py-2 text-white'>Dashboard</a><a href='#' class='block rounded-lg px-3 py-2'>Orders</a><a href='#' class='block rounded-lg px-3 py-2'>Customers</a><a href='#' class='block rounded-lg px-3 py-2'>Products</a><a href='#' class='block rounded-lg px-3 py-2'>Analytics</a></nav></aside><div class='flex-1'><header class='flex items-center justify-between gap-4 border-b border-neutral-200 bg-white px-6 py-3'><input class='w-full max-w-xs rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm outline-none' placeholder='Search orders'><span class='grid h-8 w-8 place-items-center rounded-full bg-black text-xs font-semibold text-white'>AL</span></header><main class='p-6'><h1 class='text-xl font-semibold text-black'>Good morning, Alex</h1><div class='mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-4'><div class='rounded-xl bg-white p-5 ring-1 ring-neutral-200'><p class='text-neutral-500'>Revenue</p><p class='mt-2 text-2xl font-semibold text-black'>$48,290</p></div><div class='rounded-xl bg-white p-5 ring-1 ring-neutral-200'><p class='text-neutral-500'>Orders</p><p class='mt-2 text-2xl font-semibold text-black'>1,204</p></div><div class='rounded-xl bg-white p-5 ring-1 ring-neutral-200'><p class='text-neutral-500'>Customers</p><p class='mt-2 text-2xl font-semibold text-black'>864</p></div><div class='rounded-xl bg-white p-5 ring-1 ring-neutral-200'><p class='text-neutral-500'>Refunds</p><p class='mt-2 text-2xl font-semibold text-black'>12</p></div></div><div class='mt-6 overflow-hidden rounded-xl bg-white ring-1 ring-neutral-200'><div class='border-b border-neutral-200 px-5 py-3 font-semibold text-black'>Recent orders</div><table class='w-full text-left'><thead class='text-neutral-500'><tr><th class='px-5 py-2 font-medium'>Order</th><th class='px-5 py-2 font-medium'>Customer</th><th class='px-5 py-2 font-medium'>Status</th><th class='px-5 py-2 text-right font-medium'>Total</th></tr></thead><tbody class='divide-y divide-neutral-100 text-black'><tr><td class='px-5 py-3'>#1042</td><td class='px-5 py-3'>Sam Rivera</td><td class='px-5 py-3'>Paid</td><td class='px-5 py-3 text-right'>$120.00</td></tr><tr><td class='px-5 py-3'>#1041</td><td class='px-5 py-3'>Priya Nair</td><td class='px-5 py-3'>Shipped</td><td class='px-5 py-3 text-right'>$86.50</td></tr><tr><td class='px-5 py-3'>#1040</td><td class='px-5 py-3'>Jon Ellis</td><td class='px-5 py-3'>Pending</td><td class='px-5 py-3 text-right'>$240.00</td></tr></tbody></table></div></main></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white'><div class='mx-auto grid max-w-6xl gap-12 px-6 py-16 lg:grid-cols-[1fr_280px]'><article><p class='text-xs font-semibold uppercase tracking-widest text-neutral-500'>Guide</p><h1 class='mt-3 text-4xl font-semibold tracking-tight text-black'>How to write documentation people read</h1><p class='mt-5 text-lg leading-8 text-neutral-600'>Most docs are written once and never opened again. Here is how to write pages that answer the question and get out of the way.</p><h2 id='start' class='mt-10 text-2xl font-semibold text-black'>Start with the question</h2><p class='mt-3 leading-7 text-neutral-600'>Readers arrive with a problem. Put the answer in the first paragraph, then explain why it works. If the page needs a table of contents, it is probably doing too much.</p><h2 id='examples' class='mt-10 text-2xl font-semibold text-black'>Show a real example</h2><p class='mt-3 leading-7 text-neutral-600'>An example is worth three paragraphs. Use a real request, a real response and the one mistake everybody makes the first time.</p><h2 id='update' class='mt-10 text-2xl font-semibold text-black'>Keep it up to date</h2><p class='mt-3 leading-7 text-neutral-600'>Add the docs change to the same pull request as the code change. A stale page is worse than no page.</p></article><aside class='lg:sticky lg:top-8 lg:self-start'><div class='rounded-xl border border-neutral-200 p-5'><p class='text-sm font-semibold text-black'>On this page</p><nav class='mt-3 space-y-2 text-sm text-neutral-600'><a href='#start' class='block text-black'>Start with the question</a><a href='#examples' class='block'>Show a real example</a><a href='#update' class='block'>Keep it up to date</a></nav></div><div class='mt-4 flex items-center gap-3 rounded-xl border border-neutral-200 p-5'><span class='grid h-10 w-10 place-items-center rounded-full bg-black text-sm font-semibold text-white'>MK</span><div><p class='text-sm font-semibold text-black'>Maya Kim</p><p class='text-xs text-neutral-500'>Developer advocate</p></div></div></aside></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='flex min-h-[640px] bg-white text-sm'><aside class='hidden w-60 shrink-0 border-r border-neutral-200 bg-neutral-50 p-4 md:block'><div class='mb-6 flex items-center gap-2 px-2'><span class='grid h-7 w-7 place-items-center rounded-lg bg-black text-xs font-semibold text-white'>W</span><span class='font-semibold text-black'>Workspace</span></div><nav class='space-y-1'><a href='#' class='block rounded-lg bg-white px-3 py-2 font-medium text-black shadow-sm ring-1 ring-neutral-200'>Overview</a><a href='#' class='block rounded-lg px-3 py-2 text-neutral-600'>Projects</a><a href='#' class='block rounded-lg px-3 py-2 text-neutral-600'>Tasks</a><a href='#' class='block rounded-lg px-3 py-2 text-neutral-600'>Team</a><a href='#' class='block rounded-lg px-3 py-2 text-neutral-600'>Reports</a></nav><p class='mb-2 mt-8 px-3 text-xs font-semibold uppercase tracking-wider text-neutral-400'>Settings</p><nav class='space-y-1'><a href='#' class='block rounded-lg px-3 py-2 text-neutral-600'>Billing</a><a href='#' class='block rounded-lg px-3 py-2 text-neutral-600'>Integrations</a></nav></aside><main class='flex-1 p-8'><div class='flex items-center justify-between'><div><h1 class='text-2xl font-semibold tracking-tight text-black'>Overview</h1><p class='mt-1 text-neutral-500'>Here is what happened this week.</p></div><a href='#' class='rounded-lg bg-black px-4 py-2 font-semibold text-white'>New project</a></div><div class='mt-8 grid gap-4 sm:grid-cols-3'><div class='rounded-xl border border-neutral-200 p-5'><p class='text-neutral-500'>Open tasks</p><p class='mt-2 text-3xl font-semibold text-black'>42</p></div><div class='rounded-xl border border-neutral-200 p-5'><p class='text-neutral-500'>Completed</p><p class='mt-2 text-3xl font-semibold text-black'>128</p></div><div class='rounded-xl border border-neutral-200 p-5'><p class='text-neutral-500'>On track</p><p class='mt-2 text-3xl font-semibold text-black'>94%</p></div></div><div class='mt-6 rounded-xl border border-neutral-200'><div class='border-b border-neutral-200 px-5 py-3 font-semibold text-black'>Due this week</div><ul class='divide-y divide-neutral-100'><li class='flex items-center justify-between px-5 py-3'><span class='text-black'>Review onboarding copy</span><span class='text-neutral-500'>Mon</span></li><li class='flex items-center justify-between px-5 py-3'><span class='text-black'>Ship pricing page update</span><span class='text-neutral-500'>Wed</span></li><li class='flex items-center justify-between px-5 py-3'><span class='text-black'>Plan Q3 roadmap</span><span class='text-neutral-500'>Fri</span></li></ul></div></main></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='flex min-h-[640px] flex-col bg-white'><header class='border-b border-neutral-200'><div class='mx-auto flex max-w-5xl items-center justify-between px-6 py-4'><span class='text-base font-semibold tracking-tight text-black'>Northfield</span><nav class='hidden gap-6 text-sm text-neutral-600 sm:flex'><a href='#' class='text-black'>Journal</a><a href='#'>Projects</a><a href='#'>About</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-semibold text-white'>Subscribe</a></div></header><main class='mx-auto w-full max-w-2xl flex-1 px-6 py-16'><p class='text-xs font-semibold uppercase tracking-widest text-neutral-500'>Essay · 6 min read</p><h1 class='mt-4 text-4xl font-semibold tracking-tight text-black'>Small teams ship better software</h1><p class='mt-6 text-lg leading-8 text-neutral-600'>Every extra person in the room adds a conversation. The teams we admire most keep the room small, the goal clear and the feedback loop short.</p><blockquote class='my-10 border-l-2 border-black pl-6 text-xl font-medium leading-8 text-black'>Say less. Decide faster. Ship the smallest thing that teaches you something.</blockquote><p class='text-base leading-7 text-neutral-600'>That does not mean working alone. It means being deliberate about who needs to be involved, and when. Start with one owner, add a reviewer, and invite the rest after the first draft exists.</p><a href='#' class='mt-10 inline-block rounded-lg bg-black px-5 py-2.5 text-sm font-semibold text-white'>Read the full essay</a></main><footer class='border-t border-neutral-200'><div class='mx-auto flex max-w-5xl items-center justify-between px-6 py-6 text-sm text-neutral-500'><span>© 2026 Northfield</span><span>Made in a small room</span></div></footer></div>