diff --git a/.agents/skills/icp-brand-guidelines/SKILL.md b/.agents/skills/icp-brand-guidelines/SKILL.md
new file mode 100644
index 00000000..ac3c4b64
--- /dev/null
+++ b/.agents/skills/icp-brand-guidelines/SKILL.md
@@ -0,0 +1,283 @@
+---
+name: icp-brand-guidelines
+description: "ICP / DFINITY brand guidelines: visual and verbal standards for every surface under the DFINITY or Internet Computer (ICP) mark. Use when building, updating, or reviewing products (NNS, ICP.app, Internet Identity, dashboards, developer tools), the main website (internetcomputer.org), developer documentation, marketing material, blog posts, release notes, or internal tools. Enforces the Anthropic-inspired visual system from skills.internetcomputer.org (serif headings, parchment / cream off-white palette, terracotta accent, light mode default, dark mode opt-in) and the 'Escaping Web3 Jargon' voice (calm, factual, no hyperbole, no em-dashes, banned vocab list). Trigger phrases: ICP brand, DFINITY brand, brand compliance, is this on brand, design review ICP, product guideline, NNS redesign, ICP.app design, ICP style, does this fit our brand. Products with their own brand identity (OISY wallet, Caffeine, and any future ecosystem product with its own visual and verbal system) are explicitly out of scope."
+license: MIT
+metadata:
+  version: '1.0'
+  source: https://skills.internetcomputer.org
+  author: Pierre Samaties
+---
+
+# ICP / DFINITY Brand Guidelines
+
+## When to Use This Skill
+
+Load this skill when the user works on any surface that carries the DFINITY or Internet Computer mark. That includes:
+
+- **Products**: NNS, ICP.app, Internet Identity, the IC dashboard, developer portals, explorers, internal tools
+- **The main website**: internetcomputer.org and its subpages
+- **Developer documentation**: docs pages, API references, tutorials, SDK sites
+- **Marketing material**: landing pages, campaign pages, investor pages, press pages, decks
+- **Editorial**: blog posts, long-form articles, release notes
+- **Reviews**: design reviews, brand checks, compliance audits, PR or mockup reviews
+- **Copy**: headlines, hero lines, button labels, error messages, empty states, email templates
+
+Also load when the user says phrases like "make this on brand", "does this fit ICP", "ICP style", "DFINITY look", "NNS redesign", "redo the website", "fix the docs", "Anthropic-style but for ICP".
+
+Do NOT use this skill for:
+
+- **OISY wallet.** OISY has its own product identity and is explicitly out of scope.
+- **Caffeine.** Caffeine is an AI-powered app builder with its own brand identity and voice. Out of scope.
+- **Any other ecosystem product with its own established brand system.** If a product already ships under its own visual and verbal identity, leave it alone. This skill governs products that sit directly under the DFINITY / Internet Computer mark.
+- Third-party dapps that happen to run on ICP but are not DFINITY products.
+- Pure protocol / canister code. Use the ICP development skills for that.
+
+## North Star
+
+Every DFINITY product should feel like it came from the same studio: quiet, editorial, confident. The reference implementation is [skills.internetcomputer.org](https://skills.internetcomputer.org). Canonical visual and verbal system lives at the deployed brand guide (see Resources).
+
+Two non-negotiables:
+
+1. **Light mode is the default.** Dark mode is opt-in per product via `data-theme="dark"` on the root. Never use `prefers-color-scheme` to auto-switch.
+2. **No em-dashes.** Ever. Not in UI, not in marketing, not in docs. Use a colon, a period, or parentheses.
+
+## What ICP is (positioning)
+
+This section is the source of truth for how to describe ICP. If the voice section of this skill and the copy you are reviewing disagree about what ICP *is*, the copy is wrong.
+
+**A frontier cloud where security is built into the network.**
+
+- **One cloud, any hardware.** ICP is a cloud that runs your whole app on the network itself: the frontend, the data, and the backend logic. The apps are tamperproof and stay online by design. A cloud engine, which is just a set of nodes running the ICP protocol, can run on bare metal, on AWS, Google Cloud, Azure, on local cloud providers, or across a mix of them. The nodes are always distributed across independent locations, so an app keeps serving users even if a whole data centre goes down. The guarantees travel with the protocol, not the hardware.
+- **Security is a property of the network, not a team.** Tamper-resistance, replication, and code integrity are enforced by math across the nodes. You do not need a security team to keep apps safe, a sysadmin to patch servers, or a compliance officer to prove the code has not been changed. The network does that work on every request. In a world where attackers are AI agents too, this is the only model that scales.
+- **Sovereign by design.** An app deployed to ICP is not locked to a cloud vendor. It can move between providers, or off them entirely, without downtime. Users can pick cloud engines by jurisdiction, by operator, or by policy.
+- **The frontier cloud for agents.** AI agents are starting to build and ship real apps, services, and systems. They need a place to build where what they produce is safe by construction. ICP is that place. The network makes every app, service, and system tamperproof, so an attacker, human or AI, cannot silently change the running code. And Motoko, the language designed for this era, is the first built for AI to write and operate software on tamperproof infrastructure without losing data when the code is upgraded. An agent that ships on ICP ships something that keeps running, keeps its data, and cannot be tampered with.
+
+**Out of scope.** Products with their own brand identity, such as OISY and Caffeine, are not covered by this skill. They have their own visual and verbal systems.
+
+## Instructions
+
+### 1. Load the tokens
+
+Use `assets/tokens.css` as the single source of truth for color, type, spacing, and radii. Ship it untouched, or mirror the same values into your framework config.
+
+```html
+<link rel="stylesheet" href="/tokens.css">
+```
+
+Never redefine the accent, background, or text colors with hex values in product code. Always reference the CSS custom properties (`var(--icp-bg)`, `var(--icp-fg)`, `var(--icp-accent)`, etc.).
+
+### 2. Apply the visual system
+
+**Colors (light, default)**
+
+| Role          | Token              | Hex       | Notes                                      |
+| ------------- | ------------------ | --------- | ------------------------------------------ |
+| Page bg       | `--icp-bg`         | `#f8f5ef` | parchment, never pure white                |
+| Elevated bg   | `--icp-bg-elev`    | `#fdfaf3` | cards, code headers, inputs                |
+| Text          | `--icp-fg`         | `#1a1714` | ink, never pure black                      |
+| Muted text    | `--icp-muted`      | `#6b6660` | captions, meta                             |
+| Rule          | `--icp-rule`       | `#e5ddcf` | 1px hairlines, dividers                    |
+| Accent        | `--icp-accent`     | `#cc5a2b` | terracotta, the one and only brand color   |
+| Accent dim    | `--icp-accent-dim` | `#f2d7c7` | blush, callout backgrounds                 |
+| Code bg       | `--icp-code-bg`    | `#efe8da` | sand                                       |
+
+**Colors (dark, opt-in)**
+
+| Role          | Hex       | Notes                                  |
+| ------------- | --------- | -------------------------------------- |
+| Page bg       | `#14110d` | deep bark, never pure black            |
+| Elevated bg   | `#1b1812` | bark                                   |
+| Text          | `#f0ebe0` | bone                                   |
+| Muted         | `#a29a8d` | ash                                    |
+| Rule          | `#2d2820` | soil                                   |
+| Accent        | `#ff7a4d` | ember (warmer for dark surfaces)       |
+| Accent dim    | `#3a2218` | hearth                                 |
+
+**Rules**
+
+- One accent color per page. Terracotta / ember only. No green, blue, or secondary brand colors.
+- No gradients on brand surfaces. Flat color.
+- No pure `#000` text and no pure `#fff` backgrounds.
+- Hairlines are 1px in `--icp-rule`. No heavy borders.
+
+**Typography**
+
+- **Serif (headings):** Newsreader, 500 weight, letter-spacing `-0.01em` to `-0.015em` for h1/h2. Fallback stack: `"Newsreader", "Source Serif 4", "EB Garamond", ui-serif, Georgia, serif`.
+- **Sans (body, UI, labels):** Inter. Fallback: `"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.
+- **Mono (code):** system monospace stack.
+- Body line-height `1.6`–`1.75`. Headings `1.15`–`1.25`.
+- Headings in serif italic only for emphasis words inside an otherwise roman heading (see hero pattern on skills.internetcomputer.org).
+
+**Layout and spacing**
+
+- Container max width: `68rem` (~1088px).
+- Prose max width: `48rem` (~768px). Never run body text wider.
+- Horizontal gutter: `1.75rem` (28px).
+- Generous vertical rhythm. Sections separated by 1px hairlines in `--icp-rule`, not boxes.
+
+**Radii**
+
+- Inline code: `3px`
+- Buttons, pre blocks, meta cards: `6px`
+- Search bars, callout right-hand side: `8px`
+- No pills, no fully rounded shapes anywhere except circular avatars.
+
+**Iconography and imagery**
+
+- Line icons, 1.5px stroke, rounded joins. No filled or duotone icons in product chrome.
+- Photography is rare. When used, warm-toned, documentary, no stock illustrations.
+- No 3D renders, no isometric illustrations, no crypto iconography.
+
+**Motion**
+
+- Default transition: `0.15s ease` on `background`, `color`, and `border-color`.
+- No bounce, no slide-ins on load. Respect `prefers-reduced-motion`.
+
+### 3. Apply the voice
+
+DFINITY copy is calm, factual, and confident. It reads like The Economist, not a startup pitch deck. The voice grew out of the "Escaping Web3 Jargon" initiative. The goal is to sound like a frontier cloud where agents build apps, services, and systems, not a crypto project.
+
+**Four voice attributes**
+
+1. **Factual.** Every sentence states something concrete. If you can remove a sentence without losing information, remove it.
+2. **Plain.** Read every sentence aloud. If you would not say it to a smart non-specialist friend, rewrite it.
+3. **Calm.** No hype, no urgency theatre, no exclamation marks, no emoji. The product is self-evidently interesting.
+4. **Sovereign by math.** When security, uptime, or tamper-resistance come up, the subject of the sentence is the network, not DFINITY and not the cloud underneath. Prefer "the network enforces", "replicated across the nodes", "cannot be changed without governance" over "we secure", "our team monitors", or anything that implies the guarantee comes from which cloud the nodes run on.
+
+**Banned on top-of-funnel and in product UI**
+
+- Web3, blockchain, crypto, token (as primary descriptors)
+- DeFi, smart contract, dapp
+- "decentralized" as the main selling point
+- "blockchain platform"
+- "platform for building AI agents" (wrong frame: we are the platform agents build on, not the platform to build agents)
+- "autonomous, always-on agents" (overclaims; implies the network runs the agent)
+- "workload" (use throughput metrics instead)
+- `dfx` or "Install dfx" anywhere in docs, tutorials, or UI. The CLI is `icp`.
+- Unexplained jargon: subnet, cycles (define on first use if you must ship them)
+- Hype words: revolutionizing, next-generation, paradigm shift, bleeding-edge, game-changing, unlock, seamless, disrupt
+- Community slang: hodl, moon, fam, WAGMI, GM, ser, anon
+
+**Preferred framing**
+
+- **What ICP is:** a frontier cloud for agents building apps, services, and systems. A network. A tamperproof, unstoppable platform. Sovereign by design. The cloud where agent-built software is always on and resilient.
+- **What ICP does:** runs end-to-end on the network. Hosts apps that are secure, tamperproof, and unstoppable. Provides tamperproof, unstoppable infrastructure.
+- **Who it's for:** agents that build secure, tamperproof apps. Non-technical entrepreneurs deploying enterprise-grade apps. Developers who want sovereignty and vendor independence.
+- **CLI:** the `icp` CLI. "Install the icp CLI." Never `dfx`.
+- **Backends:** canisters, or "agent-built app backends." Never "smart contracts" in a developer pitch, never "workloads."
+- **Metrics:** query throughput, update throughput, inference capacity, fault tolerance.
+- **Attribution:** "Built on the Internet Computer" only when useful to the audience.
+
+**Style rules**
+
+- Sentence case for headlines, buttons, page titles, nav. Title Case only for proper nouns.
+- Oxford comma. Straight apostrophes and quotes. US spelling.
+- No em-dash (`—`). Replace with a colon, period, or parentheses.
+- No emoji in product UI or marketing copy. Fine in internal Slack.
+- Numbers: write out one through nine, use digits for 10+. Always digits for metrics.
+- Active voice. Short sentences. Specific claims.
+
+**Button labels (examples)**
+
+- Good: "Get started", "Create account", "Deploy canister", "View proposal"
+- Bad: "Let's go!", "Unlock the future", "Dive in", "Learn more 🚀"
+
+**Do / don't pairs (high-signal substitutions)**
+
+| Don't say                                    | Say instead                                                                                                 |
+| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| Install dfx                                  | Install the icp CLI                                                                                         |
+| dfx deploy                                   | icp deploy                                                                                                  |
+| Platform for building AI agents              | Frontier cloud where AI agents build apps, services, and systems that stay tamperproof and keep their data across upgrades |
+| Autonomous, always-on agents                 | Apps that are secure, tamperproof, and unstoppable                                                          |
+| Blockchain platform                          | Frontier cloud / tamperproof, unstoppable infrastructure                                                   |
+| Decentralized (as the pitch)                 | Tamperproof, unstoppable, sovereign                                                                         |
+| Smart contracts (to developers)              | Canisters, or agent-built app backends                                                                      |
+| Workload                                     | Query throughput / update throughput / fault tolerance                                                      |
+| Revolutionizing / next-generation            | Name the specific capability                                                                                |
+| Enterprise-grade / bank-grade security       | Tamperproof by the network, integrity enforced across the nodes                                             |
+| We keep your data safe                       | The network keeps data replicated across the nodes                                                          |
+| Trust us                                     | Verify it                                                                                                   |
+| Secure hosting                               | Frontier cloud                                                                                             |
+| No downtime                                  | Stays online if any node or cloud underneath fails                                                          |
+| Hosted on AWS (as a positive)                | Portable across AWS, Google Cloud, Azure, local clouds, and bare metal                                      |
+| Cyber security team (as a requirement)       | No security team required for what the network already enforces                                             |
+
+**Do / don't pairs (long form)**
+
+When rewriting legacy crypto-era copy, use these five rewrites as a reference. The "don't" column is the old voice we are leaving behind; the "do" column is where we are going.
+
+1. **Don't:** "Get ready to revolutionize the next-gen decentralized future of Web3." **Do:** "Run your app end-to-end on a network instead of a single cloud. The app stays tamperproof and online whether the nodes run on AWS, Google Cloud, Azure, a local cloud, or bare metal."
+2. **Don't:** "Deploy your dapp to our bleeding-edge blockchain and start building the future." **Do:** "Build and deploy your app by asking Caffeine, the ICP-native AI builder, or any other agent (Claude, Perplexity, Codex) using the ICP skill."
+3. **Don't:** "Enterprise-grade security you can trust. Our team works 24/7 to keep your apps safe." **Do:** "You do not need a security team for apps that run on the network. Tamper-resistance is enforced by math, not a dashboard."
+4. **Don't:** "Stay ahead of evolving cyber threats with our advanced protection." **Do:** "AI is now on both sides of every attack. Apps running on the Internet Computer remove most of what attackers target: no server to break into, no OS to patch, no secrets file to leak. And every change to the running code is replicated and verified by the network, so nothing can be altered silently."
+5. **Don't:** "The platform for autonomous, always-on AI agents." **Do:** "The frontier cloud for agents building apps, services, and systems. What they ship stays tamperproof, keeps its data across upgrades, and stays online without anyone tending it."
+
+### 4. Components (mirror the reference)
+
+Use the component patterns from the brand guide directly. Never invent a new primary button, card, or callout without a review. Key patterns:
+
+- **Primary CTA**: terracotta fill, white text, `6px` radius, sans-serif, no shadow.
+- **Secondary CTA**: transparent with 1px rule border, fg text.
+- **Eyebrow label**: uppercase, `0.06em` letter-spacing, muted color, small caps feel.
+- **Callout**: blush (`--icp-accent-dim`) left stripe on cream card.
+- **Meta card**: cream bg, 1px rule, serif title, sans body.
+- **List row**: 1px bottom hairline, serif label, muted right-hand value.
+- **Code block**: sand background, mono, no syntax colors beyond fg + muted.
+- **Trust banner**: row of monochrome logos, no boxes.
+
+### 5. Accessibility
+
+- WCAG AA contrast minimum. The palette is designed to pass; verify on every surface.
+- Real `<button>` and `<a>` elements. No div-buttons. Keyboard navigable.
+- Focus rings must be visible: 2px `--icp-accent` outline with `2px` offset.
+- Never convey meaning by color alone.
+
+### 6. Review checklist
+
+Before merging any ICP / DFINITY product change, confirm:
+
+- [ ] Uses `tokens.css` variables, no hardcoded brand hex values
+- [ ] Light mode is default. Dark mode only via explicit `data-theme="dark"`
+- [ ] Newsreader for headings, Inter for body, system mono for code
+- [ ] No em-dashes anywhere in copy
+- [ ] No banned vocabulary in user-facing copy
+- [ ] Sentence case on buttons and headlines
+- [ ] One accent color on the page (terracotta / ember only)
+- [ ] Body prose capped at `48rem`
+- [ ] 1px hairlines in `--icp-rule`, no heavy borders
+- [ ] Focus states visible, AA contrast verified
+- [ ] No emoji, no exclamation marks, no stock illustration
+
+If any box is unchecked, the work is not on brand.
+
+### 7. When in doubt
+
+Defer to [skills.internetcomputer.org](https://skills.internetcomputer.org) as the living reference. If the reference and this skill disagree, the reference wins and this skill should be updated.
+
+## Resources
+
+- **Canonical brand guide**: the HTML guideline page deployed from this system (shareable URL in the conversation)
+- **Tokens file**: `assets/tokens.css` in this skill. Drop into any product as the single source of truth.
+- **Reference site**: [skills.internetcomputer.org](https://skills.internetcomputer.org)
+- **Out of scope**: products with their own brand identity (OISY wallet, Caffeine, and any future ecosystem product that ships under its own visual and verbal system). Do not apply this skill to those surfaces. If in doubt, check whether the product has its own brand guide; if it does, defer to that.
+
+## Examples
+
+**Example 1. Reviewing a PR**
+
+User: "Here's a mockup for the new NNS proposal detail page. Does it fit our brand?"
+
+Response: Walk the review checklist, flag hardcoded `#ffffff` background and em-dashes in the summary copy, recommend swapping to `var(--icp-bg)` and replacing em-dashes with colons, confirm serif h1 and terracotta CTA are correct.
+
+**Example 2. Writing product copy**
+
+User: "Write the hero headline for the ICP.app landing page."
+
+Response: Produce a serif, sentence-case headline with one italicised emphasis word. No hyperbole, no "revolutionize", no em-dash. Example: "The frontier cloud your agents *actually* ship on."
+
+**Example 3. New developer tool**
+
+User: "I'm shipping a new IC explorer dashboard. Give me the starter styles."
+
+Response: Hand over `tokens.css`, Inter + Newsreader font links, the primary / secondary CTA CSS, the meta card pattern, and a reminder that light mode is the default.
diff --git a/.agents/skills/icp-brand-guidelines/assets/tokens.css b/.agents/skills/icp-brand-guidelines/assets/tokens.css
new file mode 100644
index 00000000..ee4631ce
--- /dev/null
+++ b/.agents/skills/icp-brand-guidelines/assets/tokens.css
@@ -0,0 +1,73 @@
+/* =========================================================
+   ICP / DFINITY Product Design Tokens
+   Source of truth: https://skills.internetcomputer.org
+   Version 1.0 — 2026
+   ========================================================= */
+
+:root {
+  /* --- Backgrounds --- */
+  --icp-bg:          #f8f5ef;  /* parchment — page background */
+  --icp-bg-elev:     #fdfaf3;  /* cream — cards, inputs, code headers */
+
+  /* --- Text --- */
+  --icp-fg:          #1a1714;  /* ink — headings, body */
+  --icp-muted:       #6b6660;  /* stone — subtext, captions */
+
+  /* --- Lines --- */
+  --icp-rule:        #e5ddcf;  /* tan — borders, dividers */
+
+  /* --- Accent / Brand --- */
+  --icp-accent:      #cc5a2b;  /* terracotta — primary brand color */
+  --icp-accent-dim:  #f2d7c7;  /* blush — callout / tinted background */
+
+  /* --- Code --- */
+  --icp-code-bg:     #efe8da;  /* sand — code surfaces */
+  --icp-code-fg:     #1a1714;
+
+  /* --- Fonts --- */
+  --icp-serif: "Newsreader", "Source Serif 4", "EB Garamond", ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --icp-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --icp-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+
+  /* --- Layout --- */
+  --icp-max:        68rem;   /* container  ~1088px */
+  --icp-max-prose:  48rem;   /* prose      ~768px  */
+  --icp-gutter:     1.75rem; /* 28px horizontal padding */
+
+  /* --- Radii --- */
+  --icp-r-sm: 3px;   /* inline code */
+  --icp-r-md: 6px;   /* buttons, pre, meta cards */
+  --icp-r-lg: 8px;   /* search, callout right-side */
+
+  /* --- Transitions --- */
+  --icp-transition: 0.15s ease;
+}
+
+/* Dark mode is opt-in only. Apply [data-theme="dark"] on <html> to activate.
+   We do NOT listen to prefers-color-scheme: light mode is the default
+   so that every product in the system looks the same out of the box. */
+
+/* Manual override — useful when a product ships its own theme switcher. */
+[data-theme="dark"] {
+  --icp-bg:         #14110d;
+  --icp-bg-elev:    #1b1812;
+  --icp-fg:         #f0ebe0;
+  --icp-muted:      #a29a8d;
+  --icp-rule:       #2d2820;
+  --icp-accent:     #ff7a4d;
+  --icp-accent-dim: #3a2218;
+  --icp-code-bg:    #1b1812;
+  --icp-code-fg:    #f0ebe0;
+}
+
+[data-theme="light"] {
+  --icp-bg:         #f8f5ef;
+  --icp-bg-elev:    #fdfaf3;
+  --icp-fg:         #1a1714;
+  --icp-muted:      #6b6660;
+  --icp-rule:       #e5ddcf;
+  --icp-accent:     #cc5a2b;
+  --icp-accent-dim: #f2d7c7;
+  --icp-code-bg:    #efe8da;
+  --icp-code-fg:    #1a1714;
+}
diff --git a/.claude/skills/icp-brand-guidelines b/.claude/skills/icp-brand-guidelines
new file mode 120000
index 00000000..edef2582
--- /dev/null
+++ b/.claude/skills/icp-brand-guidelines
@@ -0,0 +1 @@
+../../.agents/skills/icp-brand-guidelines
\ No newline at end of file
diff --git a/.docs-plan/decisions.md b/.docs-plan/decisions.md
index 4ba76662..e1a59443 100644
--- a/.docs-plan/decisions.md
+++ b/.docs-plan/decisions.md
@@ -4,6 +4,22 @@ Record decisions that constrain future work — things an agent needs to know th
 
 ---
 
+## 2026-04-23: icp-brand-guidelines skill lives directly in the repo
+
+**Context:** The `icp-brand-guidelines` skill was added to support design/brand work on the docs (CSS tokens, typography, voice). No upstream repo exists for it yet.
+**Decision:** Committed directly under `.agents/skills/icp-brand-guidelines/` (real directory, not a submodule). Symlinked from `.claude/skills/icp-brand-guidelines`. If the skill is later published to a DFINITY repo, migrate to a submodule then.
+**Rationale:** No upstream repo to pin. All other skills are submodule-backed; this is the only exception. The skill contains `SKILL.md` and `assets/tokens.css`.
+
+---
+
+## 2026-04-23: ICP brand guidelines applied to docs design
+
+**Context:** New `icp-brand-guidelines` skill defines the visual and verbal system for all DFINITY/ICP surfaces.
+**Decision:** Switched docs theme from dark-first/purple to light-default/terracotta. Newsreader serif added for headings. Custom `ThemeProvider` overrides Starlight's default to prevent auto-switching on `prefers-color-scheme`.
+**Rationale:** Brand skill spec: "Light mode is the default. Dark mode is opt-in. Never use `prefers-color-scheme` to auto-switch."
+
+---
+
 ## 2026-04-17: Added chain-fusion-signer, papi, ic-pub-key submodules
 **Context:** Page proposal #24 (chain-fusion signer guide) required source material not yet in `.sources/`
 **Decision:** Added three new release-pinned submodules: `chain-fusion-signer` (v0.3.0), `papi` (v0.1.1), `ic-pub-key` (v1.0.1)
diff --git a/AGENTS.md b/AGENTS.md
index 55993d52..2ede7666 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -210,6 +210,7 @@ For current release hashes, see `.sources/VERSIONS`.
 | `.sources/papi` | `dfinity/papi` | latest release | PAPI (payment API) — cycle payment interface used by the Chain Fusion Signer |
 | `.sources/ic-pub-key` | `dfinity/ic-pub-key` | latest release | `@dfinity/ic-pub-key` CLI tool for deriving public keys via the Chain Fusion Signer |
 | `.sources/dotskills` | `vincentkoc/dotskills` | `main` | Technical documentation skill (AGPL-3.0 — kept as submodule to avoid license mixing) |
+| `.agents/skills/icp-brand-guidelines` | n/a — lives directly in this repo | n/a | ICP / DFINITY brand guidelines: colors, typography, voice, component patterns |
 | `.sources/internetidentity` | `dfinity/internet-identity` | `main` | Internet Identity spec (`docs/ii-spec.mdx`), Candid interface (`src/internet_identity/internet_identity.did`) |
 
 ### Submodule initialization
@@ -349,6 +350,8 @@ ls .agents/skills/icp-cli/SKILL.md .agents/skills/technical-documentation/SKILL.
 
 If no skill matches, use `technical-documentation` only. Topics with no dedicated icskill yet: on-chain AI, randomness/VRF, timers, Candid, chain-key tokens.
 
+**For design and brand work** (CSS, copy, UI components, docs styling, marketing copy) — load `icp-brand-guidelines` instead of or in addition to the above. This skill is not an icskill; it covers visual tokens, typography, voice, and component patterns for all surfaces under the DFINITY / Internet Computer mark.
+
 ## Frontmatter schema
 
 ```yaml
diff --git a/astro.config.mjs b/astro.config.mjs
index c0d364e4..0f31898f 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -25,6 +25,7 @@ export default defineConfig({
       components: {
         EditLink: "./src/components/EditLink.astro",
         Footer: "./src/components/Footer.astro",
+        ThemeProvider: "./src/components/ThemeProvider.astro",
       },
       head: [
         {
@@ -98,6 +99,10 @@ export default defineConfig({
         "@fontsource/inter/500.css",
         "@fontsource/inter/600.css",
         "@fontsource/inter/700.css",
+        "@fontsource/newsreader/400.css",
+        "@fontsource/newsreader/400-italic.css",
+        "@fontsource/newsreader/500.css",
+        "@fontsource/newsreader/500-italic.css",
         "./src/styles/custom.css",
       ],
       social: [
diff --git a/package-lock.json b/package-lock.json
index 5c24e644..e41a1665 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@astrojs/starlight": "^0.38.1",
         "@fontsource/inter": "^5.2.8",
+        "@fontsource/newsreader": "^5.2.10",
         "astro": "^6.1.8",
         "sharp": "^0.34.2"
       },
@@ -820,6 +821,15 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@fontsource/newsreader": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@fontsource/newsreader/-/newsreader-5.2.10.tgz",
+      "integrity": "sha512-TFaYzoFhDqarUyV2yYjgZZEwT4bpaj6sGBnXSnFknQ/QB8/9LzfY6IO9+inHOX4zzPp87Z7/KuG1OI5gr91Q3A==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
@@ -2213,6 +2223,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2299,6 +2310,7 @@
       "resolved": "https://registry.npmjs.org/astro/-/astro-6.1.8.tgz",
       "integrity": "sha512-6fT9M12U3fpi13DiPavNKDIoBflASTSxmKTEe+zXhWtlebQuOqfOnIrMWyRmlXp+mgDsojmw+fVFG9LUTzKSog==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@astrojs/compiler": "^3.0.1",
         "@astrojs/internal-helpers": "0.8.0",
@@ -5463,6 +5475,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -5915,6 +5928,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
       "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -6659,6 +6673,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
       "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
diff --git a/package.json b/package.json
index c213c48a..22284dde 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@astrojs/starlight": "^0.38.1",
     "@fontsource/inter": "^5.2.8",
+    "@fontsource/newsreader": "^5.2.10",
     "astro": "^6.1.8",
     "sharp": "^0.34.2"
   },
diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro
new file mode 100644
index 00000000..867ec14c
--- /dev/null
+++ b/src/components/ThemeProvider.astro
@@ -0,0 +1,41 @@
+---
+---
+
+{/* Inlined to avoid FOUC. Defaults to light; dark is opt-in. Never auto-switches on prefers-color-scheme. */}
+<script is:inline>
+	window.StarlightThemeProvider = (() => {
+		const storedTheme =
+			typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
+		const theme = storedTheme || 'light';
+		document.documentElement.dataset.theme = theme === 'dark' ? 'dark' : 'light';
+		return {
+			updatePickers(theme = storedTheme || 'auto') {
+				document.querySelectorAll('starlight-theme-select').forEach((picker) => {
+					const select = picker.querySelector('select');
+					if (select) select.value = theme;
+					/** @type {HTMLTemplateElement | null} */
+					const tmpl = document.querySelector(`#theme-icons`);
+					const newIcon = tmpl && tmpl.content.querySelector('.' + theme);
+					if (newIcon) {
+						const oldIcon = picker.querySelector('svg.label-icon');
+						if (oldIcon) {
+							oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes);
+						}
+					}
+				});
+			},
+		};
+	})();
+</script>
+
+<template id="theme-icons">
+	<svg class="light" aria-hidden="true" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+		<path d="M5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Zm.64 5-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 1.41 0l.71-.71A1 1 0 0 0 5.64 17ZM12 5a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1Zm5.66 2.34a1 1 0 0 0 .7-.29l.71-.71a1 1 0 1 0-1.41-1.41l-.66.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.29Zm-12-.29a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.71-.71a1.004 1.004 0 1 0-1.43 1.41l.73.71ZM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Zm-2.64 6A1 1 0 0 0 17 18.36l.71.71a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.76-.66ZM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0 3.5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1Z"/>
+	</svg>
+	<svg class="dark" aria-hidden="true" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+		<path d="M21.64 13a1 1 0 0 0-1.05-.14 8.049 8.049 0 0 1-3.37.73 8.15 8.15 0 0 1-8.14-8.1 8.59 8.59 0 0 1 .25-2A1 1 0 0 0 8 2.36a10.14 10.14 0 1 0 14 11.69 1 1 0 0 0-.36-1.05Zm-9.5 6.69A8.14 8.14 0 0 1 7.08 5.22v.27a10.15 10.15 0 0 0 10.14 10.14 9.784 9.784 0 0 0 2.1-.22 8.11 8.11 0 0 1-7.18 4.32v-.04Z"/>
+	</svg>
+	<svg class="auto" aria-hidden="true" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+		<path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/>
+	</svg>
+</template>
diff --git a/src/styles/custom.css b/src/styles/custom.css
index dab485dc..7b8f3ccc 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -1,251 +1,263 @@
 /*
  * ICP Developer Docs — Custom Theme
  *
- * Brand alignment with internetcomputer.org:
- *   - Primary accent: #3b00b9 (ICP purple)
- *   - Font: Inter
- *   - Dark-first, uniform black background
- *   - White-on-black text hierarchy (no colorful accents)
- *
- * The marketing site uses a white-alpha transparency system on pure black.
- * Sidebar, nav, and content all share the same black background —
- * there is no visible two-tone panel effect.
- *
- * Accent usage: The marketing site keeps purple very subtle (glows, badges).
- * Primary navigation and text use white hierarchy only. We keep the purple
- * accent for interactive elements (links, active states) but tone it down.
+ * Brand: skills.internetcomputer.org
+ * Light mode is the default. Dark mode is opt-in via data-theme="dark".
+ * No pure #000 text, no pure #fff backgrounds.
+ * Terracotta accent only — no purple, no secondary brand colors.
  */
 
-/* ── Font ─────────────────────────────────────────────────── */
+/* ── ICP brand tokens (light defaults) ───────────────────── */
 
 :root {
-	--sl-font: 'Inter', var(--sl-font-system);
-	--sl-content-width: 55rem;
+  --icp-bg:         #f8f5ef;   /* parchment */
+  --icp-bg-elev:    #fdfaf3;   /* elevated: cards, code headers */
+  --icp-fg:         #1a1714;   /* ink */
+  --icp-muted:      #6b6660;   /* captions, meta */
+  --icp-rule:       #e5ddcf;   /* 1px hairlines */
+  --icp-accent:     #cc5a2b;   /* terracotta */
+  --icp-accent-dim: #f2d7c7;   /* blush: callout backgrounds */
+  --icp-code-bg:    #efe8da;   /* sand */
 }
 
-/* ── Dark mode (default) ──────────────────────────────────── */
+:root[data-theme='dark'] {
+  --icp-bg:         #14110d;   /* deep bark */
+  --icp-bg-elev:    #1b1812;   /* bark */
+  --icp-fg:         #f0ebe0;   /* bone */
+  --icp-muted:      #a29a8d;   /* ash */
+  --icp-rule:       #2d2820;   /* soil */
+  --icp-accent:     #ff7a4d;   /* ember */
+  --icp-accent-dim: #3a2218;   /* hearth */
+  --icp-code-bg:    #221e18;
+}
+
+/* ── Fonts ─────────────────────────────────────────────────── */
 
 :root {
-	/* Accent — toned-down purple, closer to the marketing site's subtle usage */
-	--sl-color-accent-low: hsl(259, 40%, 10%);
-	--sl-color-accent: hsl(259, 60%, 60%);
-	--sl-color-accent-high: hsl(265, 60%, 75%);
-
-	/* Gray scale — derived from marketing site's white-alpha on #000 */
-	--sl-color-white: #ffffff;
-	--sl-color-gray-1: #cccccc;  /* white-80 */
-	--sl-color-gray-2: #a3a3a3;  /* white-64 — body text */
-	--sl-color-gray-3: #7a7a7a;  /* white-48 — secondary text */
-	--sl-color-gray-4: #525252;  /* white-32 — muted */
-	--sl-color-gray-5: #1f1f1f;  /* white-12 — subtle borders, inline code bg */
-	--sl-color-gray-6: #0a0a0a;  /* near-black — sidebar/nav blend with bg */
-	--sl-color-black: #000000;   /* page background */
-
-	/* Uniform dark background — no two-tone sidebar/nav */
-	--sl-color-bg-nav: var(--sl-color-black);
-	--sl-color-bg-sidebar: var(--sl-color-black);
-
-	/* Subtle hairlines (white-8 equivalent) */
-	--sl-color-hairline-light: rgba(255, 255, 255, 0.08);
-	--sl-color-hairline: rgba(255, 255, 255, 0.12);
-	--sl-color-hairline-shade: rgba(255, 255, 255, 0.04);
-
-	/* Semantic hues */
-	--sl-hue-purple: 259;
+  --sl-font: 'Inter', var(--sl-font-system);
+  --sl-content-width: 55rem;
 }
 
-/* Widen content only when screen has room for left sidebar + content + TOC.
-   Formula: viewport ≥ content-width + 2 × sidebar-width (18.75rem each) + margin.
-   - 65rem content needs ~105rem viewport
-   - 75rem content needs ~115rem viewport */
+/* Newsreader for all headings */
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Newsreader', 'Source Serif 4', 'EB Garamond', ui-serif, Georgia, serif;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.sl-markdown-content h1,
+.sl-markdown-content h2 {
+  letter-spacing: -0.015em;
+}
+
+.sl-markdown-content h3,
+.sl-markdown-content h4 {
+  letter-spacing: -0.01em;
+}
+
+/* ── Light mode — Starlight token overrides ───────────────── */
+
+:root[data-theme='light'] {
+  /* Accent */
+  --sl-color-accent-low:  #f2d7c7;   /* blush */
+  --sl-color-accent:      #cc5a2b;   /* terracotta */
+  --sl-color-accent-high: #a84222;
+
+  /* Gray scale (ink on parchment) */
+  --sl-color-white: #1a1714;         /* foreground / ink */
+  --sl-color-gray-1: #2e2926;
+  --sl-color-gray-2: #443e3a;
+  --sl-color-gray-3: #6b6660;        /* muted */
+  --sl-color-gray-4: #9a9490;
+  --sl-color-gray-5: #e5ddcf;        /* rule */
+  --sl-color-gray-6: #f0e8d8;
+  --sl-color-gray-7: #fdfaf3;        /* elevated */
+  --sl-color-black:  #f8f5ef;        /* page background / parchment */
+
+  /* Panel backgrounds */
+  --sl-color-bg-nav:         #fdfaf3;
+  --sl-color-bg-sidebar:     #f8f5ef;
+  --sl-color-bg-inline-code: #efe8da;
+
+  /* Hairlines */
+  --sl-color-hairline:       #e5ddcf;
+  --sl-color-hairline-light: #ede5d4;
+  --sl-color-hairline-shade: #e0d8c8;
+}
+
+/* ── Dark mode — Starlight token overrides ────────────────── */
+
+:root[data-theme='dark'] {
+  /* Accent */
+  --sl-color-accent-low:  #3a2218;   /* hearth */
+  --sl-color-accent:      #ff7a4d;   /* ember */
+  --sl-color-accent-high: #ffb088;
+
+  /* Gray scale (bone on bark) */
+  --sl-color-white: #f0ebe0;         /* foreground / bone */
+  --sl-color-gray-1: #d8d0c4;
+  --sl-color-gray-2: #b8b0a4;
+  --sl-color-gray-3: #a29a8d;        /* ash */
+  --sl-color-gray-4: #6e6660;
+  --sl-color-gray-5: #2d2820;        /* soil */
+  --sl-color-gray-6: #1f1c16;
+  --sl-color-gray-7: #1b1812;        /* bark */
+  --sl-color-black:  #14110d;        /* deep bark */
+
+  /* Panel backgrounds */
+  --sl-color-bg-nav:         #1b1812;
+  --sl-color-bg-sidebar:     #14110d;
+  --sl-color-bg-inline-code: #221e18;
+
+  /* Hairlines */
+  --sl-color-hairline:       #2d2820;
+  --sl-color-hairline-light: #251f18;
+  --sl-color-hairline-shade: #1e1a13;
+}
+
+/* ── Responsive content width ─────────────────────────────── */
+
 @media (min-width: 105rem) {
-	:root {
-		--sl-content-width: 65rem;
-	}
+  :root { --sl-content-width: 65rem; }
 }
 @media (min-width: 115rem) {
-	:root {
-		--sl-content-width: 75rem;
-	}
+  :root { --sl-content-width: 75rem; }
 }
 
-/* ── Hero button hover states ────────────────────────────── */
+/* ── Buttons ──────────────────────────────────────────────── */
 
 .sl-link-button {
-	transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
 
 .sl-link-button.primary:hover {
-	filter: brightness(1.15);
-	box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
+  filter: brightness(1.1);
 }
 
 .sl-link-button.secondary:hover {
-	background: rgba(255, 255, 255, 0.08);
-	border-color: rgba(255, 255, 255, 0.4);
+  background: rgba(26, 23, 20, 0.06);
+  border-color: rgba(26, 23, 20, 0.4);
 }
 
-:root[data-theme='light'] .sl-link-button.secondary:hover {
-	background: rgba(0, 0, 0, 0.06);
-	border-color: rgba(0, 0, 0, 0.4);
+:root[data-theme='dark'] .sl-link-button.secondary:hover {
+  background: rgba(240, 235, 224, 0.08);
+  border-color: rgba(240, 235, 224, 0.4);
 }
 
-/* ── Landing page hero — tighten spacing ─────────────────── */
+/* ── Landing page hero ───────────────────────────────────── */
 
-/* Reduce hero vertical padding so skills banner is visible without scrolling */
 .hero {
-	padding-block: clamp(2rem, 6vmin, 4rem) !important;
+  padding-block: clamp(2rem, 6vmin, 4rem) !important;
 }
 
-/* Cap the hero title size so it doesn't wrap awkwardly on mid-width screens */
 .hero h1 {
-	font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 4vw), var(--sl-text-5xl)) !important;
+  font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 4vw), var(--sl-text-5xl)) !important;
 }
 
-/* Tighten the tagline — less gap between "Tamperproof..." and the description */
-.hero .tagline br + br {
-	display: block;
-	content: '';
-	margin-top: 0.5rem;
-}
-
-/* ── Skills banner (landing page) ─────────────────────────── */
+/* ── Skills banner ─────────────────────────────────────────── */
 
 .skills-banner {
-	background: #181818;
-	border: 1px solid rgba(255, 255, 255, 0.08);
-	border-radius: 1rem;
-	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
-	text-align: center;
-	margin-block: 0 2rem;
+  background: var(--icp-bg-elev);
+  border: 1px solid var(--icp-rule);
+  border-radius: 0.5rem;
+  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
+  text-align: center;
+  margin-block: 0 2rem;
 }
 
 .skills-banner h2 {
-	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
-	font-weight: 600;
-	color: #fff;
-	margin: 0 0 0.5rem;
-	border: none;
+  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+  font-weight: 500;
+  color: var(--icp-fg);
+  margin: 0 0 0.5rem;
+  border: none;
+  font-family: 'Newsreader', 'Source Serif 4', 'EB Garamond', ui-serif, Georgia, serif;
 }
 
 .skills-banner p {
-	color: rgba(255, 255, 255, 0.64);
-	font-size: clamp(0.85rem, 1.2vw, 1rem);
-	max-width: 42rem;
-	margin: 0 auto 1.25rem;
-	line-height: 1.6;
+  color: var(--icp-muted);
+  font-size: clamp(0.85rem, 1.2vw, 1rem);
+  max-width: 42rem;
+  margin: 0 auto 1.25rem;
+  line-height: 1.6;
 }
 
 .skills-banner .skills-actions {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 1rem;
-	flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
 }
 
 .skills-banner .skills-primary {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.625rem;
-	background: #fff;
-	border: 1px solid rgba(255, 255, 255, 0.9);
-	border-radius: 0.5rem;
-	padding: 0.6rem 1.25rem;
-	font-family: inherit;
-	font-size: 0.9rem;
-	font-weight: 500;
-	color: #111;
-	cursor: pointer;
-	transition: background 0.15s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  background: var(--icp-accent);
+  border: 1px solid var(--icp-accent);
+  border-radius: 6px;
+  padding: 0.6rem 1.25rem;
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #fff;
+  cursor: pointer;
+  transition: filter 0.15s ease;
 }
 
 .skills-banner .skills-primary:hover {
-	background: rgba(255, 255, 255, 0.88);
+  filter: brightness(1.1);
 }
 
 .skills-banner .skills-primary svg {
-	width: 1rem;
-	height: 1rem;
-	flex-shrink: 0;
-	opacity: 0.6;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  opacity: 0.7;
 }
 
 .skills-banner .skills-cta {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.5rem;
-	background: rgba(255, 255, 255, 0.08);
-	border: 1px solid rgba(255, 255, 255, 0.16);
-	border-radius: 0.5rem;
-	padding: 0.6rem 1.25rem;
-	color: #fff;
-	font-size: 0.9rem;
-	font-weight: 500;
-	text-decoration: none;
-	transition: background 0.15s, border-color 0.15s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: transparent;
+  border: 1px solid var(--icp-rule);
+  border-radius: 6px;
+  padding: 0.6rem 1.25rem;
+  color: var(--icp-fg);
+  font-size: 0.9rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background 0.15s ease, border-color 0.15s ease;
 }
 
 .skills-banner .skills-cta:hover {
-	background: rgba(255, 255, 255, 0.14);
-	border-color: rgba(255, 255, 255, 0.24);
+  background: var(--icp-accent-dim);
+  border-color: var(--icp-accent);
 }
 
 .skills-banner .skills-cta .arrow-icon {
-	width: 0.85rem;
-	height: 0.85rem;
-}
-
-:root[data-theme='light'] .skills-banner {
-	background: #f0f0f0;
-	border-color: rgba(0, 0, 0, 0.08);
-}
-
-:root[data-theme='light'] .skills-banner h2 {
-	color: #1a1a1a;
-}
-
-:root[data-theme='light'] .skills-banner p {
-	color: rgba(0, 0, 0, 0.6);
-}
-
-:root[data-theme='light'] .skills-banner .skills-primary {
-	background: #1a1a1a;
-	border-color: rgba(0, 0, 0, 0.85);
-	color: #fff;
-}
-
-:root[data-theme='light'] .skills-banner .skills-primary:hover {
-	background: #333;
-}
-
-:root[data-theme='light'] .skills-banner .skills-cta {
-	background: rgba(0, 0, 0, 0.06);
-	border-color: rgba(0, 0, 0, 0.16);
-	color: #1a1a1a;
-}
-
-:root[data-theme='light'] .skills-banner .skills-cta:hover {
-	background: rgba(0, 0, 0, 0.1);
+  width: 0.85rem;
+  height: 0.85rem;
 }
 
 /* ── External LinkCard indicator ─────────────────────────── */
 
-/* Replace → with ↗ for LinkCards that open in a new tab (external URLs) */
 .sl-link-card:has(a[target="_blank"]) .icon {
-	display: none;
+  display: none;
 }
 
 .sl-link-card:has(a[target="_blank"])::after {
-	content: '↗';
-	color: var(--sl-color-gray-3);
-	font-size: 1.333em;
-	line-height: 1;
-	align-self: center;
+  content: '↗';
+  color: var(--sl-color-gray-3);
+  font-size: 1.333em;
+  line-height: 1;
+  align-self: center;
 }
 
 .sl-link-card:has(a[target="_blank"]):hover::after {
-	color: var(--sl-color-white);
+  color: var(--sl-color-white);
 }
 
 /* ── Agent signaling ──────────────────────────────────────── */
@@ -253,33 +265,13 @@
 /* Visually hidden but present in DOM for HTML-to-markdown converters.
    Uses clip-rect (not display:none) per agentdocsspec.com. */
 .agent-signaling {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
-}
-
-/* ── Light mode ───────────────────────────────────────────── */
-
-:root[data-theme='light'] {
-	/* Accent — exact brand purple #3b00b9 = hsl(259, 100%, 36%) */
-	--sl-color-accent-high: hsl(259, 100%, 28%);
-	--sl-color-accent: hsl(259, 100%, 36%);
-	--sl-color-accent-low: hsl(259, 80%, 93%);
-
-	/* Gray scale — inverted for light backgrounds */
-	--sl-color-white: #1a1a1a;
-	--sl-color-gray-1: #333333;
-	--sl-color-gray-2: #4d4d4d;
-	--sl-color-gray-3: #808080;
-	--sl-color-gray-4: #999999;
-	--sl-color-gray-5: #e6e6e6;
-	--sl-color-gray-6: #f5f5f5;
-	--sl-color-gray-7: #fafafa;
-	--sl-color-black: #ffffff;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }