Because the IO Chrome Extension is not listed in the Chrome Web Store, it is installed as a developer extension. This is completely normal for internal tools, enterprise extensions, and extensions in active development. The process is supported natively by Chrome and takes no technical knowledge beyond following the steps below.

Verifying installation

After installation, you should see the IO Marketing OS extension card in your Extensions list. Navigate to any webpage, click the IO icon in the toolbar — the popup should appear with the current page's URL displayed. If it opens but shows an error, see the Troubleshooting guide.

Updating the extension

When new versions of the extension files are released, copy the updated files into your io-extension folder (replacing the old ones), then go to chrome://extensions and click the refresh icon on the IO Marketing OS card. No need to re-install from scratch.

The host_permissions field

The manifest includes "host_permissions": ["<all_urls>"]. This sounds broad — it means the extension can theoretically run on any URL — but in practice it is constrained by the other permissions. The scripting permission only executes when you click "Analyze This Page," and activeTab limits that to the tab you are currently looking at. The broad host permission is needed because the URLs of the sites you might want to analyze are not known in advance.

Reviewing what's stored

To see everything the extension has stored: open the Chrome DevTools console on any page, type chrome.storage.local.get(null, console.log), and press Enter. You will see the full contents of the local storage — your capture library and any pending analysis URLs. You can clear it all with chrome.storage.local.clear().

This walkthrough uses a real competitor's blog post as the example. The same flow works for any public webpage: a competitor's homepage, a piece of content you want to benchmark, a client's website, or an article you want to reverse-engineer.

The complete workflow

When you click "Analyze This Page," the extension injects a short content script into the active tab. The script strips non-content elements (scripts, styles, navigation, footers, headers, sidebars), then extracts the meaningful content. The extraction runs in milliseconds in your browser — nothing is sent to a server at this stage.

What gets extracted

The popup display after capture

After extraction, the popup shows a formatted summary in monospace text: the page title, word count, H1 headings, and the top five H2 headings. This gives you an immediate read on the page's structure before opening the IO Platform for full analysis. The URL is shown at the bottom — ready to copy.

What the capture does not do

The capture does not: access pages other than the one you are currently viewing; run without you clicking the button; log your browsing history; send any data to a server; capture paywalled or login-protected content (it reads only what the page renders publicly); or store images, CSS, or any non-text content.

The "Save to Library" button is the lightweight alternative to "Analyze This Page." Where Analyze runs a full content script extraction, Save to Library records only the URL, tab title, and a timestamp — making it near-instant and usable even on pages where scripting is restricted.

Use it when: you are actively browsing and find a page worth analyzing later; you want to batch-collect competitor pages for a competitive intelligence sprint; or you are on a page where full extraction doesn't work but you want to remember the URL.

What gets saved

Library limits and rotation

The library holds up to 100 entries. When the limit is reached, the oldest entry is removed automatically (first-in, first-out). The library persists across browser sessions — it survives closing and reopening Chrome. It is cleared if you uninstall the extension or manually clear extension storage.

Accessing your library

The popup displays your current library count in the footer area ("12 pages in library"). To view the full library contents, open Chrome DevTools (F12) on any page, go to the Console tab, and type:

This outputs your full capture library as a formatted table in the console — sortable by URL, title, timestamp, or source. To clear the library: chrome.storage.local.remove(['io_captures']).

The context menu integration is provided by the background service worker (background.js). When Chrome starts, the service worker registers an "Analyze with IO Marketing OS" option in the right-click context menu. This option appears in three contexts:

The pending analysis flow

When you right-click a link and choose "Analyze with IO Marketing OS," the extension saves the link's URL to io_pending_analysis in local storage, then opens the popup. The next time you open the popup, it can read this pending URL and pre-populate the analysis. Copy the URL from the popup and paste it into the IO Platform URL Intelligence tool for full analysis.

Where the option appears

The context menu option appears on all pages by default — the extension does not filter by domain or content type. It does not appear on Chrome's internal pages (chrome:// URLs) or the Chrome Web Store, which are protected by the browser. On pages where the extension does not have permission to inject scripts (rare, for certain enterprise-managed pages), the menu item appears but the analyze action may fail gracefully.

Think of the capture library as your IO analysis inbox. As you browse — reading competitors' blogs, checking backlink sources, reviewing industry publications — you save pages to the library. Later, in a dedicated analysis session, you open each saved URL in the IO Platform and run the analysis mode most relevant to that source.

Managing your library

Using the library for competitive sprints

A competitive intelligence sprint using the IO extension: over one browsing session, right-click and save 15–20 competitor pages, blog posts, and landing pages. End of the session: 20 entries in the library. Next day: open each URL in the IO Platform URL Intelligence tool, run Competitive Analysis mode, copy each report. In 30–45 minutes you have 20 structured IO framework analyses of your competitive landscape.

The 100-entry limit

Chrome's storage.local has a 5MB default quota. The 100-entry limit is a precautionary cap set in the extension code — at typical page metadata sizes, 100 entries uses roughly 50–100KB, well within the quota. If you need more than 100 entries, export the current library to JSON (using the command above), clear it, and continue capturing.

The extension handles capture: extracting URLs and basic structure from any page, anywhere on the web, with one click. The IO Platform handles intelligence: running the captured URL through the full IO framework using Claude Sonnet 4, producing structured analysis in one of four modes. The two tools are designed to be used in sequence, not in isolation.

The complete workflow

Using analysis results to brief content production

The most productive use of a URL Intelligence analysis: take the "Content Gaps" section of the IO Full Analysis and paste it directly into the IO Platform Content Builder as the topic. The Content Builder receives the gap description and generates a complete IO-formatted article addressing that exact gap. From competitive intelligence to published content in under 30 minutes.

The URL Intelligence Engine uses allorigins.win as a CORS proxy to fetch public webpage content from the browser — bypassing the Same-Origin Policy that prevents direct browser-to-URL fetching. This means it works on any public URL without requiring a server. The fetched HTML is cleaned (scripts, styles, and navigation stripped), parsed into structural components, and sent to Claude Sonnet 4 along with the selected analysis mode's system prompt.

What the engine analyzes

The engine sends the following to Claude for analysis: the full page URL, the document title and meta description, all H1/H2/H3 headings, and up to 4,500 words of body content. This gives the model enough context to run a substantive IO framework analysis without hitting token limits.

Limitations of the CORS proxy approach

The proxy approach works on most public pages but has edge cases: heavily JavaScript-rendered sites may return incomplete HTML (the proxy sees server-rendered HTML, not post-JavaScript content); pages behind paywalls or login walls return only the gating content; some sites actively block proxy requests and return a 403 or a bot-detection page. For pages that fail, use the extension's extraction (which runs in your actual browser, past any rendering) and manually note the URL for analysis of the extracted content.

Running multiple modes on the same URL

There is no cost to running multiple modes on the same URL — each call is a separate API request, and the URL is scraped fresh each time (the IO Platform does not cache scrape results). For a comprehensive competitive analysis, run both "Competitive Analysis" (for strategic positioning insights) and "Content Gap Finder" (for tactical content opportunities) on the same competitor URL. Copy both reports and cross-reference them.

Reading the fit score

The Full IO Analysis mode returns a fit score from 0–100 with a one-sentence rationale. This is Claude's assessment of how well the page's content architecture aligns with IO Marketing OS standards — it is a directional benchmark, not a precise metric. Pages scoring above 70 have strong content foundations; pages below 40 have significant structural gaps. Use the gap list, not the score, to prioritize action.

The popup is a 340px-wide HTML interface that opens when you click the IO icon. It is built from a single popup.html file and controlled by popup.js. Understanding each element prevents confusion when the popup behaves unexpectedly.

The popup UI — annotated

Status message guide

Setting a custom shortcut

Chrome allows custom keyboard shortcuts for extension actions. To set one: go to chrome://extensions/shortcuts, find "IO Marketing OS," and assign a shortcut for "Activate the extension." Recommended: ⌘+Shift+I (for "IO"). This opens the popup on any page with the shortcut.

After adding this to manifest.json, reload the extension at chrome://extensions. The shortcut will be active on the next popup open.

Checking the service worker health

If the context menu is missing or the extension behaves erratically, inspect the background service worker: go to chrome://extensions, find the IO Marketing OS card, and click the "Service Worker" link in the extension details. This opens a DevTools window for the service worker — the Console tab shows any errors. The most common: a syntax error in background.js from a copy-paste issue. Fix the file, reload the extension.

LinkedIn and social platforms

The extension works on LinkedIn public pages — company pages, public posts, public profiles — because Chrome renders the full content when you are logged in. It captures the visible text, headings, and structure. For Twitter/X and Facebook, it captures whatever the page renders before any "Show more" expansions. The captures may be shorter than the full content but are sufficient for structural analysis.

Handling soft paywalls

Many publications (Medium, Substack paid) allow a limited number of free reads. If you have access to a page (the full content is visible in your browser), the extension captures it — because it reads what your browser has rendered, not what the server would show to an anonymous request. The IO Platform's proxy scraper operates as an anonymous request and will see only the gating screen; the extension sees the full article. Use the extension for soft-gated content.

Does the extension send my browsing history anywhere?

No. The extension only runs when you explicitly click a button. It does not monitor your browsing, does not send data in the background, and does not communicate with any external server. Your capture library stays on your machine in Chrome's local storage.

Does it work in Incognito mode?

Not by default. Chrome prevents extensions from running in Incognito unless you explicitly allow it. To enable: go to chrome://extensions → IO Marketing OS → Details → toggle "Allow in Incognito." Data saved in Incognito does not persist after the Incognito window closes.

Can I use it on multiple computers?

Yes, but the capture library does not sync between computers — it is stored in local Chrome storage, not synced Chrome storage. You would need to install the extension on each computer and maintain separate libraries. The captured URLs are the portable part: they work anywhere.

Will Chrome warn me that this extension can "read and change data on all websites"?

Yes. This warning appears because of the host_permissions: <all_urls> field in the manifest — Chrome warns users about extensions that can run on any site. This is the same warning shown for most developer extensions. The actual data read is limited to what you trigger manually. The warning is accurate but broad — it describes the potential permission, not the actual behavior.

How do I know the extension is not doing something I cannot see?

The extension's code is fully visible to you — it is the four files you installed. background.js only registers the context menu item. popup.js only runs when the popup is open and you click a button. You can inspect both files at any time. You can also monitor extension network activity in Chrome DevTools (Network tab) — you will see no requests initiated by the extension itself.

Can it capture PDFs?

No. Chrome renders PDFs through its built-in PDF viewer, which is treated as a protected context that extensions cannot inject scripts into. To analyze a PDF's content, download it, extract the text manually, and paste key sections into the IO Platform's Content Builder directive field.

Does it work on the IO Platform itself (recursive capture)?

Yes. You can click "Analyze This Page" on the IO Platform and the extension captures its structure. This is not particularly useful for analysis, but it works. The IO editorial site (io-complete.html) can also be analyzed if hosted at a public URL.

Why is the capture library limited to 100 entries?

Chrome's storage.local has a 5MB default quota. The 100-entry cap is conservative — a precautionary limit. At typical page metadata sizes, 100 entries uses roughly 50–100KB. If you regularly need more, export the library as JSON and clear it to reset. A future version may increase the limit or add export/import functionality.

Can I share my capture library with a colleague?

Not directly — the library is in Chrome's local storage, which is not accessible from outside the browser. To share: export the library as a JSON array (see the Library page), send the JSON file, and have your colleague import it. There is no native import function in the current version; they would run chrome.storage.local.set({io_captures: [paste JSON array here]}) in their DevTools console.

Does capturing a page trigger any analytics or notifications on the target site?

The extension reads the DOM as Chrome has already rendered it — it does not make additional requests to the server. From the target site's perspective, only the normal page load event occurred. The extraction is invisible to the target site's analytics.

Can I analyze pages that require login?

If you are logged in to a site in Chrome, the extension can capture that page's content — because Chrome has rendered the full authenticated view. The extension reads what you see. What it cannot do is log you in to a site automatically or capture content that requires authentication you do not have.

Will it work on the next version of Chrome?

The extension is built to Manifest V3, which is Chrome's current and long-term supported extension format. Chrome deprecated Manifest V2 in 2024. MV3 extensions will continue to be supported for the foreseeable future.

How long does the Analyze action take?

The content extraction (in the extension) takes under 2 seconds on most pages. The IO Platform analysis (Claude API call) takes 15–25 seconds depending on API load and response length. Total time from click to IO framework analysis: under 30 seconds.

Can I modify the extension for my own use?

Yes — the files are yours. Common modifications: add additional content extraction fields to popup.js, modify the context menu label in background.js, change the popup dimensions in popup.html, or add your own IO Platform URL to the context menu action. Reload the extension after any file change.

Does it work on Brave, Edge, or other Chromium browsers?

Yes. Brave, Microsoft Edge, Opera, and most other Chromium-based browsers support Chrome extensions. Load it the same way — Developer Mode → Load Unpacked. The extension uses standard Chrome Extension APIs that are supported across all Chromium browsers.

manifest.json — key fields explained

How the files interact

Chrome loads manifest.json at install time. It starts the background.js service worker. The service worker registers the context menu. When you click the IO icon, Chrome loads popup.html, which loads popup.js. When you click "Analyze This Page," popup.js calls chrome.scripting.executeScript to inject a content extraction function into the active tab. The extracted data is returned to popup.js, which displays the result in the popup UI and saves it to chrome.storage.local.

Planned for v1.1

• Direct launch of IO Platform URL Intelligence from the popup (single-click flow)
• Selected text capture — right-click a text selection to add it to your library as a quoted insight
• Library export/import as JSON from within the popup
• Custom keyboard shortcut pre-configured in manifest.json

Planned for v2.0

• Embedded analysis result in the popup — run IO framework analysis without leaving the page
• Site-wide crawl mode — save all links on a page to the library in one click
• Integration with the IO Platform content builder — one-click from analysis to article generation

Updating from a previous version

When a new version is released, copy the updated files into your io-extension folder (replacing the old ones). Go to chrome://extensions and click the refresh icon on the IO Marketing OS card. The extension reloads without losing your capture library — library data is in chrome.storage.local, which persists across extension reloads. If a version includes a breaking change to the storage format, it will be noted here with migration instructions.

Project IO began as an editorial system — a library of marketing intelligence organized like a publication. The design follows that origin. The aesthetic is closer to a quality journal than a SaaS dashboard: generous whitespace, a serif-and-sans pairing that gives content typographic authority, a restrained color palette that reserves accent color for genuine information, and a layout system that makes long-form content readable at length.

The visual language is deliberately un-trendy. No gradients. No glassmorphism. No decorative animations. The system should look as correct in 2030 as it does today.

The five design principles

What the IO brand is not

The IO brand is not a SaaS product brand. It does not use purple gradients, floating cards with drop shadows, or bold geometric illustration. It is not a startup brand — it does not chase trend cycles or use Figma-era sans-serif typefaces (Inter, Geist, DM Sans). It is not an agency brand — it does not use full-bleed black backgrounds with white-on-black type. It is a publication brand built for a long time horizon, designed to communicate depth and expertise through restraint and consistency.

The core palette — CSS variables

The 13 series colors

Each series in the IO Marketing OS has an assigned color. These colors are used exclusively for that series' sidebar dot, article number label, article index dot, and tag background. They are never mixed — the color belongs to the series, not to a semantic meaning.

Color usage rules

The three typefaces

Typography rules

• Never use bold (font-weight: 700) in serif body text. Bold is reserved for the sans-serif labeling layer.
• Never use italic in the sans-serif layer. Italic is reserved for serif body — specifically decks and pull quotes.
• Letter-spacing is only applied to the sans-serif layer. Serif text always uses normal letter-spacing.
• All-caps text is only used with the sans-serif, never with serif or mono.
• Do not add intermediate sizes. The scale is defined — use the defined steps, do not interpolate.
• Line-height: body text uses 1.82. Labels use 1.3. Navigation items use 1.3. Code uses 1.7.

The wordmark — as it appears in the sidebar

The three-line brand block

The sidebar brand block has three elements that always appear together in this exact order and hierarchy: (1) Overline — "Project IO" in sans-serif 9px, all-caps, spaced, faint — establishes the project namespace. (2) Wordmark — "IO Marketing OS" in Georgia at 1.25rem, near-black — the primary identity. (3) Subtitle — contextual descriptor (e.g. "13 Series · 94 Articles") in sans-serif 10px, faint — changes per page context.

Permitted wordmark variations

What never to do with the wordmark

• Never change the typeface from Georgia. The wordmark is inseparable from the typeface.
• Never set the wordmark in bold. Georgia regular is the only weight used.
• Never use an icon, symbol, or logomark alongside or in place of the wordmark.
• Never apply color to the wordmark. It is always --ink on --surface.
• Never use the wordmark without the overline ("Project IO"). The overline establishes the namespace — without it, "IO Marketing OS" is ambiguous.
• Never abbreviate to "IO" alone in UI contexts — "IO" is a namespace prefix, not the brand name.

The topbar breadcrumb identity

In the sticky topbar, the brand appears as a breadcrumb: Project IO › Current Section. This is the only other context where the brand appears as interface text. It uses the sans-serif family, not Georgia — because topbar text is UI, not identity.

The voice in four dimensions

Tone by context

The editorial voice does not change across contexts — the register adjusts. In long-form articles: full sentences, subordinate clauses, evidence-based argumentation, pull quotes that provoke. In UI labels: 2–4 words maximum, imperative verbs, no articles ("The" / "A") where they can be omitted. In error messages: state what happened, why, and what to do — in that order, in plain language, without blame. In section labels and overlines: all-caps, abbreviated, sparse — three words maximum.

The pull quote standard

Every article ends its major sections with a pull quote. The pull quote is always: (1) a complete, standalone sentence — it is not a teaser for the paragraph; (2) a claim, not a summary — it argues something, not just states it; (3) under 35 words; (4) set in the first person or present tense — "The brief is the most undervalued document in a marketing operation" not "Pull quotes should be statements."

Hover state rules

• All interactive elements have a visible hover state. There are no "guess what's clickable" patterns.
• Hover background change: #f5f4f0 (slightly darker than --page). Used on sidebar items, index cards, arch cells.
• Active / selected state: #f0ede6 (amber-tinted) with a right-hand 2px solid border in --ink. Used on sidebar items.
• No scale transforms on hover. No float or elevation changes. No glow effects.
• Cursor: pointer on all clickable elements without exception. The system never requires the user to guess.

What the system never does with motion

• No loading spinners — use status text instead (e.g. "Running analysis...")
• No entrance animations on panels — panels switch immediately
• No parallax scrolling — the reading surface is flat and stable
• No pulsing, bouncing, or attention-seeking animations of any kind
• No transition on color changes that are not state-related

The IO component library is not a collection of React components or a Storybook — it is a set of well-defined HTML patterns and CSS class conventions that compose consistently into pages. Every component in the system is built from the same underlying CSS custom properties defined in :root. Changing a CSS variable updates the entire system simultaneously.

The library is organized by layer: navigation first, then page structure, then content blocks, then inline elements, then feedback patterns. Each section documents the exact HTML required, which CSS classes are available, and the usage rules that make the pattern work correctly.

The sidebar anatomy

Standard .sb-item HTML pattern

The topbar

The topbar is a sticky 40px-high bar at the top of the main content area. It displays a breadcrumb: "Project IO › Current Section › (Current Article)". The section segment is always shown; the article segment shows only when an article is active (controlled by the go() function's third and fourth arguments). On mobile, the topbar also shows the hamburger menu button (#ham).

Responsive behavior

Below 880px: the sidebar translates off-screen (transform: translateX(-100%)) and the hamburger appears. The sidebar slides in with a 250ms ease transition when .open class is added. An overlay (#overlay) covers the main content when the sidebar is open on mobile, clicking it closes the sidebar. Below 540px: additional content simplifications apply — masthead stats hidden, grid columns collapse to single column.

Usage rules

• The masthead only appears on index/overview panels. Individual article panels use the .art-num + .art-hl + .art-deck pattern instead.
• The <br> in the title is intentional — masthead titles are often two lines for visual balance. Do not force all titles to one line.
• The .masthead-sub subtitle has a max-width of 620px and is centered. It should be a single sentence — no longer.
• The .masthead-stats bar is optional. Use it only when you have 3–7 meaningful quantitative stats for the section. Do not pad with weak stats.
• The masthead has a border-bottom: 2px solid var(--ink) — the same 2px weight used in the sidebar brand block. This creates visual consistency between the two structural anchors.

The .art-div divider

The .art-div is a horizontal rule with a centered text label. The two <hr> elements grow to fill the available width using flex:1. The <span> contains 2–5 topic tags separated by · (·). These tags describe the article's key concepts — they appear only once, in the divider, and nowhere else in the article.

Panels vs. the .aw wrapper

The .panel div is the visibility container — it is display:none by default and display:block when the .active class is added by the go() function. The .aw div is the content wrapper — it sets max-width:800px, margin:0 auto, and the consistent padding. Every article panel has both layers. Index and overview panels may use the masthead outside the .aw wrapper (before it), then the .aw for the body content below.

The pull quote

The pull quote (.pull) lives outside the .body wrapper, between a content section and the next section or the footer. It is always the last element before the .af footer. The pull quote has a 3px amber left border and an amber-tinted background. The text inside is Georgia italic.

Table design rules

• Always wrap spec tables in a .sc system card. A bare table without the .sc wrapper lacks the visual container that gives it separation from body text.
• The first column always gets .sk (key). It is bold, --ink, and white-space:nowrap. All other columns get .sv (value).
• Column headers (th) are automatically styled: 9.5px sans-serif, 700, all-caps, 0.15em letter-spacing, --ink-muted, with a 1.5px solid var(--ink) bottom border.
• Rows have a hover state: background:#f5f4f0 on all cells in the hovered row.
• Tables should have 3–7 columns maximum. Beyond 7 columns, readability degrades. Split into two tables or simplify.
• Row count: 4–12 rows is the sweet spot. Below 4: use a list instead. Above 12: consider splitting into sections.

The .ig gap trick

The index grid uses gap:1px; background:var(--rule) on the container, with background:var(--surface) on each .ii card. This creates 1px grid lines between cards using the gap color — no borders needed on individual cards. The result is a seamless grid that maintains the dividing lines without doubling border thickness at the joins.

The copyCode() function

The global copyCode(btn, text) function handles copy button behavior. It accepts the button element and an optional text string. If text is provided, it copies that string. If not, it reads the inner text of the nearest pre element (the code block's content). After copying, it temporarily changes the button label to "Copied!" for 1.8 seconds, then resets. All copy buttons in the system use this same function — it is defined once in the page-level script block.

When to use a code block vs inline code

Inline code (.body code) is for short strings in prose: file names, CSS class names, CSS variables, short commands. The dark code block is for: anything multi-line, anything the user needs to copy in full, configuration files, shell commands, and full HTML patterns. The rule: if it needs a copy button, it needs a code block.

Step flow design rules

• Steps are separated by a 1px --rule border-bottom. The last step has no border — CSS's :last-child selector handles this automatically in the .step rule.
• Step numbers are always numerals (1, 2, 3...) — never letters, Roman numerals, or bullets. The amber color from --amber gives them visual weight without competing with body text.
• Step titles are short (3–6 words), all-caps, sans-serif — they function as commands, not descriptions.
• The .step-code element is an inline <code> with a block display style: grey background, monospace, padded. Use it for single commands. For multi-line code, use a full .codeblock after the .step-body.
• Maximum 8–10 steps per flow. Beyond that, split into phases or use a different pattern.

Usage rules

• The traffic light colors are always the exact macOS values — #ff5f57, #ffbd2e, #28c940. Do not substitute other reds/yellows/greens.
• The .ui-mock-body has no default padding — add it inline on the body element to match the UI being demonstrated.
• The .ui-mock container has a 1.5px solid var(--ink) border and a subtle box-shadow. Do not add additional borders or backgrounds to the container.
• Use this pattern only when showing a UI as an example or annotation. Do not use it as a decorative container for non-UI content.
• For extension popup mockups specifically: set the .ui-mock-body content width to 340px to match the actual popup dimensions.

Footer rules — non-negotiable

• Every article panel ends with an .af footer. No exceptions. An article without a footer nav is incomplete.
• The first article in a section uses the section overview as the "previous" destination. The last article in a section uses the next section's overview or "Return to Overview" as the "next" destination.
• The .af-issue center label always reads: "Article N of M · Series Title" — using the same language used in the .art-num overline. The numbering should match exactly.
• The .afb buttons use the article's short title — the same words that appear in the sidebar. Do not use different phrasing in the footer than in the sidebar.
• Button text: left button always has ← prefix. Right button always has → suffix. These are HTML entities ← and → respectively.
• The .af div uses margin-top:3.5rem and border-top:1px solid var(--rule) — giving substantial breathing room between the last content element and the nav. Do not reduce this margin.

The complete documentation system

The article footer is the last component in the library — and the one that closes every reading session. Every piece of content in the IO system ends with a clear invitation to continue. That continuity is not incidental; it is the design intention. The system is built to be read in sequence, and the footer is the mechanism that makes sequential reading effortless.