diff --git a/.claude/skills/icp-brand-design/SKILL.md b/.claude/skills/icp-brand-design/SKILL.md index 1955b387..6bf49400 100644 --- a/.claude/skills/icp-brand-design/SKILL.md +++ b/.claude/skills/icp-brand-design/SKILL.md @@ -1,11 +1,40 @@ --- name: icp-brand-design description: "ICP / DFINITY visual design system v2: tokens, color, typography, layout, components, accessibility for DFINITY and Internet Computer surfaces. Pairs with icp-brand-voice. Use when building or reviewing visual surfaces (NNS, ICP.app, Internet Identity, dashboards, the main website, developer docs, marketing). Enforces the system that ships on internetcomputer.org: three faces (Newsreader, Inter, JetBrains Mono), single rust accent, light editorial parchment as the default theme with an opt-in dark theme for product surfaces that need it, sentence case, italic for asides only, no em-dashes (U+2014), tamperproof spelled as one word. Triggers: ICP design, DFINITY design, brand tokens, design review ICP, color palette, typography ICP, NNS redesign, light or dark mode ICP. OISY, Caffeine, and ecosystem products with their own brand are out of scope." +metadata: + brand_guide_version_at_authoring: 'v2.26' + brand_guide_rules_url: 'https://jgwns-tqaaa-aaaao-ba5ua-cai.icp0.io/rules.json' --- -# ICP / DFINITY Brand Design v2.2 +# ICP / DFINITY Brand Design v2.7 -**Current version:** v2.2 (2026-05-08). See the Changelog section at the bottom for history. Every change to this skill bumps the minor version and adds a line to the changelog. +## Rules of record check (FIRST STEP, EVERY TASK) + +Before applying any rule in this skill, fetch the live brand rules and check the version. + +``` +GET https://jgwns-tqaaa-aaaao-ba5ua-cai.icp0.io/rules.json +``` + +This file is the machine-readable source of truth for the DFINITY / Internet Computer brand. Compare the `version` field in the JSON against the version this skill was authored against: + +- **This skill was authored against brand guide `v2.26`.** + +If the live `version` is the same, proceed normally using the rules in this skill. + +If the live `version` is newer (e.g., `v2.27` or higher), surface a one-line warning to the user before continuing: + +> Note: brand guide is now `vX.Y`, this skill was written against `v2.26`. Using the live rules from `/rules.json` as the source of truth where they differ. + +Then proceed using the live JSON as the source of truth for: positioning, banned characters, banned words, one-word spellings, font stack, accent color, italic rule, surfaces order, default theme, hyperbole ban, and emoji ban. Anything not covered in the JSON falls back to this skill. + +If the fetch fails (offline, canister down), proceed using this skill's rules and mention to the user that the live rules could not be reached. + +The human-readable brand guide lives at https://jgwns-tqaaa-aaaao-ba5ua-cai.icp0.io/. + +--- + +**Current version:** v2.7 (2026-07-17). See the Changelog section at the bottom for history. Every change to this skill bumps the minor version and adds a line to the changelog. This release tracks brand guide v2.26: the favicon is added as a first-class brand surface, with a new Section 6.5 documenting the SVG, .ico, PNG sizes, Apple touch icon (light + dark), Safari pinned-tab mask, and the recommended `` snippet. The favicon files ship alongside `assets/tokens.css` in the skill zip. Color tokens, type stack, layout, italic rule, accent scope, and every other rule are unchanged. ## When to Use This Skill @@ -66,6 +95,8 @@ The accent paints heading emphasis words, key inline terms, primary CTA fills, a **Accent scope rule (strict).** The accent is for **single words or short phrases only**: one emphasis word in a heading, an inline term inside a paragraph, a CTA label, an indicator dot, a focus ring. **Never on a full sentence, a full subtitle, a full paragraph, or any block of text.** If more than a short phrase is in the accent, the design is wrong. The test, the accent should always read as a precise pointer, never as a paint job. If a designer asks "can I make the whole subtitle rust to make it stand out", the answer is no, use weight or hierarchy instead, the accent stays scoped. +**Homepage hero carve-out (v2.25).** The internetcomputer.org homepage H1 line two (rotation between *Runs AIware.* and *Tamperproof, always-on.*) and the sub-strap fragment *fluid functionality* ship italic-rust in full. This is a controlled exception to both the accent scope rule and the one-italic-word rule, scoped strictly to the homepage hero on internetcomputer.org. Every other surface (off-homepage product pages, decks, banners, signatures, video conference backgrounds, this guide) continues to ship the canonical strap *Sovereign cloud. Software that's alive.* with italic-rust on *alive.* only, and the one-italic-word rule still applies there. Off-homepage surfaces stay locked. + The dark accent is warmed to `#c25a37` because the same rust at `#a8482b` does not pass AA on a dark surface for small UI text. Both values resolve to `var(--icp-accent)` once the theme is set. #### Light theme (default, editorial parchment) @@ -202,7 +233,11 @@ The system has **three faces, each with one job**. **Italic** -- Newsreader italic carries a single emphasis word inside an otherwise roman headline ("Sovereign *frontier* cloud", "What *ICP* is"), captions, attributions, and asides. The emphasis word is colored in the rust accent on the live site. The italic word is always **the subject of the heading**, the noun or noun phrase the line is about, never a verb, copula, article, or connector. Test, can the heading still stand if the italic word is removed; if yes, the emphasis is on the wrong word. +- Newsreader italic carries a single emphasis word inside an otherwise roman headline, captions, attributions, and asides. The emphasis word is colored in the rust accent on the live site. The italic word lands on one of three targets: + - **(a) Subject noun.** The noun the line is about. Example: "What *ICP* is". + - **(b) Metaphor carrying the claim.** A factual metaphor describing a real product property. Example: "Sovereign cloud. Software that's *alive*." (italic on *alive*). + - **(c) Possessive pronoun asserting sovereignty.** Used in pillar rows. Example: "On-demand · Tamperproof · Always-on · Fluid · *Yours*" (italic on *Yours*). +- Never italicise a verb, copula, article, or connector. Never more than one italic word per line. Use the removal test: if the line still stands after removing the italic word, the emphasis is on the wrong word. - Never italic for stress in body copy. Never italic for entire paragraphs. **Weights** @@ -237,6 +272,39 @@ Pills are scoped strictly to the CTA pattern. Cards, panels, and inputs never go - No 3D renders, no isometric illustrations, no crypto iconography (no chains, no shields, no padlocks). - The DFINITY infinity logo is the only mark. Always paired with the wordmark in nav, never alone outside small avatar contexts. +### 6.5 Favicon + +The favicon is the smallest surface the brand ships on. The DFINITY gradient infinity is isolated on a transparent canvas because the brand's typography and grid texture do not survive at 16px. The browser places the mark on its own chrome, light or dark, and the mark holds either way. + +**Files (ship all of them for full coverage):** + +| Purpose | File | Notes | +| ------------------------------------ | --------------------------------------------- | ------------------------------------------- | +| Modern browsers, preferred | `assets/favicon/favicon.svg` | Vector, transparent canvas | +| Legacy fallback (IE, older tabs) | `assets/favicon/favicon.ico` | Multi-size (16, 32, 48 px) | +| PNG raster fallbacks | `favicon-16.png`, `-32.png`, `-48.png`, `-192.png`, `-512.png` | For consumers that want a specific size | +| iOS home screen (light) | `apple-touch-icon.png` | 180x180 | +| iOS home screen (dark) | `apple-touch-icon-dark.png` | 180x180, dark-optimized variant | +| Safari pinned tab | `safari-pinned-tab.svg` | Monochrome mask, rust `#a8482b` as color | + +**Recommended `` snippet:** + +```html + + + + +``` + +**Rules:** + +- Do not place the favicon on a filled background. The transparent canvas is intentional so the browser chrome, light or dark, becomes the background. +- Do not add a border, drop shadow, or wordmark to the favicon. The mark alone. +- Do not substitute a different logo, monogram, or letter mark. The DFINITY infinity is the only favicon. +- The Safari pinned-tab mask uses rust `#a8482b` as its color. Do not swap for another accent. + +The download bundle at `downloads/icp-favicon.zip` on the brand guide ships all files above in a flat archive. Machine-readable pointer at `favicon` in `/rules.json`. + ### 7. Motion - Default transition: `0.15s ease` on `background`, `color`, and `border-color`. @@ -346,11 +414,24 @@ The live `internetcomputer.org` ships light only and does not expose a toggle to Before merging any ICP / DFINITY visual change, confirm: +**Visual QA before shipping (the lessons learned the hard way).** Source code is not the deliverable. The rendered pixels are. Every one of the corrections the user has had to flag on this brand traces back to skipping one of the steps below: + +- [ ] **Render and look at it.** For any PNG, slide, banner, signature, or HTML page, render to image and open it. Do not ship anything visual you have not personally inspected as pixels. +- [ ] **Zoom in on every styled fragment.** When a rule says "rust accent on the metaphor word", "italic on *Yours*", or "rust period inside the strap", zoom to that exact glyph and confirm the color, weight, and italic angle are correct. Body ink at the edge of a rust span is the failure mode that hides easiest. +- [ ] **Audit trailing punctuation.** Periods, commas, and ellipses inherit the parent span's color only when they live inside that span. `alive.` paints the period in body ink; `alive.` paints it in rust. The locked rule is: the trailing punctuation that closes a styled phrase sits inside the styled span, not outside it. +- [ ] **Sweep every instance.** When a styled fragment lives in more than one place (the strap appears in the hero, the type specimen, the theme cards, the banners, and the JSON contract), fix every instance in the same pass. One-place fixes ship inconsistent surfaces. +- [ ] **Avatar and PFP overlap.** Any social banner has a profile picture sitting on top of it. Confirm no important glyph lands under the avatar circle (X) or the avatar square (LinkedIn). Right-align the lockup when the avatar lives bottom-left. +- [ ] **Cross-surface consistency.** When the strap or pillar row changes, also update the brand guide HTML, `rules.json`, the deck master, the email signature, the VC backgrounds, and the social banners. The brand guide is the source of truth, but every applied surface that carries the strap must be re-rendered against the new markup. +- [ ] **Re-render after every markup change.** Edit, render, inspect, ship. Never edit and ship. +- [ ] **Em-dash sweep (`grep -c $'\xe2\x80\x94'`) returns 0** on every HTML, JSON, and markdown file before deploy. + +If any of the above is skipped, expect the user to flag it and ask why it was not caught. + - [ ] Uses `tokens.css` variables, no hardcoded brand hex values - [ ] Light editorial parchment is the default (no `data-theme` attribute on ``). Dark is opt-in via `data-theme="dark"`, exposed as an explicit toggle, never auto from `prefers-color-scheme` - [ ] Newsreader for editorial type, Inter for UI chrome, JetBrains Mono for technical readouts. No other faces. - [ ] Sentence case for headlines and body. UPPERCASE only on Inter eyebrows, JetBrains Mono markers, and small CTA labels. -- [ ] Italic used only for asides, captions, attributions, or a single heading emphasis word +- [ ] Italic used only for asides, captions, attributions, or a single emphasis word per heading / strap / pillar row. The italic word lands on the subject noun, a factual metaphor, or a possessive pronoun asserting sovereignty. Never on a verb, copula, article, or connector. - [ ] One primary accent on the page (rust `#a8482b` light, `#c25a37` dark). Section stripes scoped to 3px category coding only. - [ ] No section-stripe fills on CTAs, body text, or emphasis - [ ] Body prose capped at 720px @@ -395,6 +476,11 @@ This skill follows semantic versioning at the brand level. ## Changelog +- **v2.7** (2026-07-17). Tracks brand guide v2.26. Adds Section 6.5 *Favicon* documenting the favicon as a first-class brand surface: SVG for modern browsers, multi-size `.ico` fallback, five raster PNG sizes (16, 32, 48, 192, 512), Apple touch icon in light and dark variants, Safari pinned-tab mask using rust `#a8482b` as its color, and the recommended `` snippet. Rules added: transparent canvas is intentional (the browser chrome is the background), no filled background, no border, no drop shadow, no substituted mark, no swapped mask color. The favicon files ship inside the skill zip alongside `assets/tokens.css`. Machine-readable pointer added to `/rules.json` under the `favicon` key. No changes to color tokens, type stack, layout, italic rule, accent scope, components, or accessibility rules. +- **v2.6** (2026-06-30). Tracks brand guide v2.25. Adds a homepage hero carve-out to the accent scope rule and the italic rule: the internetcomputer.org homepage H1 line two (rotation between *Runs AIware.* and *Tamperproof, always-on.*) and the sub-strap fragment *fluid functionality* ship italic-rust in full as a controlled exception. The carve-out is scoped strictly to the homepage hero on internetcomputer.org. Off-homepage surfaces continue to ship the canonical strap *Sovereign cloud. Software that's alive.* with italic-rust on *alive.* only, and both the accent scope rule and the one-italic-word rule still apply there. No changes to color tokens, type stack, layout, components, or accessibility rules. +- **v2.5** (2026-06-15). Tracks brand guide v2.22. Adds a *Visual QA before shipping* sub-section to the design review checklist, codifying the lessons from the v2.21 → v2.22 cycle: render and look at every visual deliverable before claiming a fix; zoom in on every styled fragment (rust periods, italic words, accent glyphs); place trailing punctuation inside the styled span when it should inherit the style; sweep every instance of a shared styled fragment in the same pass; check avatar overlap on social banners; re-render after every markup change. The trigger case was the trailing period after *alive* shipping in body ink because the markup placed it outside the rust-colored italic span on every surface (hero, type specimen, theme cards, social banners, JSON contract). All markup now wraps the punctuation inside the styled span. +- **v2.4** (2026-06-15). Tracks brand guide v2.20. Video conference backgrounds re-anchored: the editorial lockup (eyebrow, two-line strap with italic-rust on *alive*, pillar row with italic on *Yours*) and the gradient infinity mark move from the bottom of the frame to the top, occupying the upper twenty-five percent of the canvas. The lower two thirds of the frame are now the speaker safe zone. The radial glow center moves with the type to keep the brighter zone behind the lockup. No changes to color tokens, type stack, italic rule, accent scope, or any other component pattern. +- **v2.3** (2026-06-15). Positioning reset aligning the skill with brand guide v2.19 and the internetcomputer.org refresh. Italic rule widens from "subject noun only" to three targets: subject noun, metaphor carrying the claim (e.g., *alive*), or possessive pronoun asserting sovereignty (e.g., *Yours*). No changes to color tokens, type stack, layout, components, or accessibility rules. Visual system is stable; only the verbal emphasis rule moves. - **v2.2** (2026-05-08). Two permissive rules promoted to prescriptive. Hero rule: "the hero section must use the grid paper overlay" (was "use it sparingly: hero, feature surface, ..."), so the brand's signature texture is no longer skippable when scanning for violations. Accent scope rule added: rust accent is for single words or short phrases only, never on a full sentence, subtitle, or block of text, with the precise-pointer test. Both edits sharpen what was already implicit in v2.0/v2.1. - **v2.1** (2026-05-08). Italic emphasis rule clarified: italic word lands on the subject of the heading (the noun the line is about), never a verb, copula, article, or connector. Removal test added. Headings on the canonical guide audited; "What ICP *is*" corrected to "What *ICP* is". Versioning rule introduced. - **v2.0** (2026-05-08). Initial v2 release. Light editorial parchment as the default theme, opt-in dark theme via `data-theme="dark"`, three-face system locked (Newsreader, Inter, JetBrains Mono), single rust accent `#a8482b`, sunk parchment (`--icp-bg-sunk` `#f3f1ea`) for section rhythm, hero grid paper texture (`.icp-grid-paper-overlay`), muted section stripes (rust, deep teal `#0b5e5c`, ink-blue `#1c3d5a`) replacing the v1 neon palette. @@ -403,6 +489,7 @@ This skill follows semantic versioning at the brand level. - **Canonical brand guide v2**: the deployed HTML reference page (URL shared in conversation) - **Tokens file**: `assets/tokens.css` in this skill. Drop into any product as the single source of truth. +- **Favicon set**: `assets/favicon/` in this skill. SVG, multi-size ICO and PNG, Apple touch icons (light + dark), Safari pinned-tab mask. - **Reference site**: [internetcomputer.org](https://internetcomputer.org) - **Paired skill**: `icp-brand-voice` for positioning, voice, and vocabulary. - **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). @@ -425,4 +512,4 @@ Response: Hand over `tokens.css`, the Newsreader + Inter + JetBrains Mono Google User: "Build a landing page for an ICP campaign on agent-deployable apps." -Response: Hero in Newsreader 380 with one italic emphasis word in the rust accent, sentence case, capped at 86px, tracking -0.015em. Inter UPPERCASE eyebrow above. JetBrains Mono metadata strip beneath ("AVAILABILITY · GENERAL · CADENCE · ROLLING"). Rust pill CTA as the only primary action. Editorial cards with 3px section stripes if the page belongs to a category, plain rust stripes if not. CTA bar before the footer in near-black `#1a1a1a`. Light theme only, matching the live site. +Response: Hero in Newsreader 380 with one italic emphasis word in the rust accent (landing on subject, metaphor, or possessive pronoun per the italic rule), sentence case, capped at 86px, tracking -0.015em. Inter UPPERCASE eyebrow above. JetBrains Mono metadata strip beneath ("AVAILABILITY · GENERAL · CADENCE · ROLLING"). Rust pill CTA as the only primary action. Editorial cards with 3px section stripes if the page belongs to a category, plain rust stripes if not. CTA bar before the footer in near-black `#1a1a1a`. Light theme only, matching the live site. diff --git a/.claude/skills/icp-brand-design/assets/favicon/apple-touch-icon-dark.png b/.claude/skills/icp-brand-design/assets/favicon/apple-touch-icon-dark.png new file mode 100644 index 00000000..ee15b585 Binary files /dev/null and b/.claude/skills/icp-brand-design/assets/favicon/apple-touch-icon-dark.png differ diff --git a/.claude/skills/icp-brand-design/assets/favicon/apple-touch-icon.png b/.claude/skills/icp-brand-design/assets/favicon/apple-touch-icon.png new file mode 100644 index 00000000..59e42ccc Binary files /dev/null and b/.claude/skills/icp-brand-design/assets/favicon/apple-touch-icon.png differ diff --git a/.claude/skills/icp-brand-design/assets/favicon/favicon-16.png b/.claude/skills/icp-brand-design/assets/favicon/favicon-16.png new file mode 100644 index 00000000..90250990 Binary files /dev/null and b/.claude/skills/icp-brand-design/assets/favicon/favicon-16.png differ diff --git a/.claude/skills/icp-brand-design/assets/favicon/favicon-192.png b/.claude/skills/icp-brand-design/assets/favicon/favicon-192.png new file mode 100644 index 00000000..2ea50880 Binary files /dev/null and b/.claude/skills/icp-brand-design/assets/favicon/favicon-192.png differ diff --git a/.claude/skills/icp-brand-design/assets/favicon/favicon-32.png b/.claude/skills/icp-brand-design/assets/favicon/favicon-32.png new file mode 100644 index 00000000..ad2bf92b Binary files /dev/null and b/.claude/skills/icp-brand-design/assets/favicon/favicon-32.png differ diff --git a/.claude/skills/icp-brand-design/assets/favicon/favicon-48.png b/.claude/skills/icp-brand-design/assets/favicon/favicon-48.png new file mode 100644 index 00000000..0fadc7f6 Binary files /dev/null and b/.claude/skills/icp-brand-design/assets/favicon/favicon-48.png differ diff --git a/.claude/skills/icp-brand-design/assets/favicon/favicon-512.png b/.claude/skills/icp-brand-design/assets/favicon/favicon-512.png new file mode 100644 index 00000000..eb5d6207 Binary files /dev/null and b/.claude/skills/icp-brand-design/assets/favicon/favicon-512.png differ diff --git a/.claude/skills/icp-brand-design/assets/favicon/favicon.ico b/.claude/skills/icp-brand-design/assets/favicon/favicon.ico new file mode 100644 index 00000000..e3f4ad05 Binary files /dev/null and b/.claude/skills/icp-brand-design/assets/favicon/favicon.ico differ diff --git a/.claude/skills/icp-brand-design/assets/favicon/favicon.svg b/.claude/skills/icp-brand-design/assets/favicon/favicon.svg new file mode 100644 index 00000000..a70481a4 --- /dev/null +++ b/.claude/skills/icp-brand-design/assets/favicon/favicon.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + diff --git a/.claude/skills/icp-brand-design/assets/favicon/safari-pinned-tab.svg b/.claude/skills/icp-brand-design/assets/favicon/safari-pinned-tab.svg new file mode 100644 index 00000000..8b450b2c --- /dev/null +++ b/.claude/skills/icp-brand-design/assets/favicon/safari-pinned-tab.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/.claude/skills/icp-brand-voice/SKILL.md b/.claude/skills/icp-brand-voice/SKILL.md index 62c98848..c4cf7a94 100644 --- a/.claude/skills/icp-brand-voice/SKILL.md +++ b/.claude/skills/icp-brand-voice/SKILL.md @@ -1,11 +1,40 @@ --- name: icp-brand-voice -description: ICP / DFINITY positioning, voice, and vocabulary v2 for surfaces under the DFINITY or Internet Computer (ICP) mark. Pairs with icp-brand-design (colors, typography, components). Use when writing or reviewing copy, UI strings, headlines, hero lines, buttons, errors, empty states, release notes, blog posts, marketing pages, developer docs, social posts, decks. Enforces the calm, factual, plain voice (no hyperbole, no em-dashes, no emoji), the locked positioning ("Sovereign frontier cloud / Scaling AI that builds"), the four voice attributes (Factual, Plain, Calm, Sovereign by math), and the strict ban on bare "onchain" and "on-chain" as nouns, attributes, or selling points. Triggers, ICP voice, DFINITY voice, brand voice, is this on brand copy, vocabulary check, tagline review, headline review, ICP positioning, how should we describe ICP, write a headline. Products with their own voice (OISY, Caffeine, future ecosystem products with their own verbal systems) are out of scope. +description: "ICP / DFINITY positioning, voice, and vocabulary v2 for surfaces under the DFINITY or Internet Computer (ICP) mark. Pairs with icp-brand-design. Use when writing or reviewing copy, UI strings, headlines, hero lines, buttons, errors, release notes, blog posts, marketing pages, developer docs, social posts, decks. Enforces the calm, factual, plain voice (no hyperbole, no em-dashes, no emoji), the locked positioning ('Sovereign cloud. Software that is alive.'), the five public pillars (On-demand, Tamperproof, Always-on, Fluid, Yours), and the strict ban on bare 'onchain' or 'on-chain' as nouns, attributes, or selling points. Triggers, ICP voice, DFINITY voice, brand voice, is this on brand, vocabulary check, tagline review, headline review, ICP positioning, write a headline. OISY, Caffeine, and other ecosystem products with their own verbal systems are out of scope." +metadata: + brand_guide_version_at_authoring: 'v2.25' + brand_guide_rules_url: 'https://jgwns-tqaaa-aaaao-ba5ua-cai.icp0.io/rules.json' --- -# ICP / DFINITY Brand Voice & Positioning v2.2 +# ICP / DFINITY Brand Voice & Positioning v2.6 -**Current version:** v2.2 (2026-05-08). See the Changelog section at the bottom for history. Every change to this skill bumps the minor version and adds a line to the changelog. This release moves with `icp-brand-design` v2.2 (visual-system rules sharpened, no copy changes here). +## Rules of record check (FIRST STEP, EVERY TASK) + +Before applying any rule in this skill, fetch the live brand rules and check the version. + +``` +GET https://jgwns-tqaaa-aaaao-ba5ua-cai.icp0.io/rules.json +``` + +This file is the machine-readable source of truth for the DFINITY / Internet Computer brand. Compare the `version` field in the JSON against the version this skill was authored against: + +- **This skill was authored against brand guide `v2.25`.** + +If the live `version` is the same, proceed normally using the rules in this skill. + +If the live `version` is newer (e.g., `v2.26` or higher), surface a one-line warning to the user before continuing: + +> Note: brand guide is now `vX.Y`, this skill was written against `v2.25`. Using the live rules from `/rules.json` as the source of truth where they differ. + +Then proceed using the live JSON as the source of truth for: positioning, banned characters, banned words, one-word spellings, font stack, accent color, italic rule, surfaces order, default theme, hyperbole ban, and emoji ban. Anything not covered in the JSON falls back to this skill. + +If the fetch fails (offline, canister down), proceed using this skill's rules and mention to the user that the live rules could not be reached. + +The human-readable brand guide lives at https://jgwns-tqaaa-aaaao-ba5ua-cai.icp0.io/. + +--- + +**Current version:** v2.6 (2026-06-30). See the Changelog section at the bottom for history. Every change to this skill bumps the minor version and adds a line to the changelog. This release tracks brand guide v2.25, which adds a homepage hero variant for internetcomputer.org and locks AIware as a brand term. The canonical strap ("Sovereign cloud. Software that's *alive.*") is unchanged for every off-homepage surface. A controlled italic-rust carve-out applies to the homepage hero only. ## When to Use This Skill @@ -32,18 +61,44 @@ Do NOT use this skill for: This section is the source of truth for how to describe ICP. If any copy you are reviewing disagrees with this section about what ICP *is*, the copy is wrong. -**Top line, locked:** *Sovereign frontier cloud. Scaling AI that builds.* +**Top line, locked (canonical, master):** *Sovereign cloud. Software that's alive.* (italic-rust on *alive*, with the period inside the italic span) + +This is the master strap. Two sentences separated by a period. The italic-rust word is `alive`, which carries the claim that software on ICP is fluid: generated through AI chat on demand and extending itself with new natural-language functionality over time. The canonical strap ships on every off-homepage surface: decks, social banners, video conference backgrounds, email signatures, deck covers, investor pages, press pages, this guide. Do not reframe to "onchain", "World Computer", "trustless", "frontier cloud / for AI that builds" (the previous v2.17 strap, retired at v2.19), or any other variant on off-homepage surfaces. + +### Homepage hero variant (internetcomputer.org only) + +The internetcomputer.org homepage runs a product-led variant of the H1 that names the artifact ICP runs, rather than the metaphor that describes it. The canonical strap and the homepage variant coexist on purpose: *alive.* describes what the network is, AIware names what runs on it. + +- **Eyebrow.** § Internet Computer Protocol (ICP) · The internet overlay for AIware +- **Hero H1, line one (static).** Sovereign cloud. +- **Hero H1, line two (rotation).** Alternates between *Runs AIware.* and *Tamperproof, always-on.* Both phrases are italic-rust in full. +- **Sub-strap.** Create custom AIware apps and SaaS on-demand, which have *fluid functionality*. Italic-rust on *fluid functionality* only. + +**Italic-rust on the full line-two phrase** (and on the two-word phrase *fluid functionality* in the sub-strap) is a controlled exception to the one-italic-word rule. It is scoped strictly to the homepage hero. Off-homepage surfaces continue to ship the canonical strap with italic-rust on *alive.* only, and the one-italic-word rule still applies there. + +**Where this variant is allowed.** internetcomputer.org homepage and product pages on the same domain that talk about what ICP runs. Nowhere else. -This is the master strap and should not be reframed as "onchain", "World Computer", "trustless", "open computing research spend", "from math", "portable", or any other reframe. The five-word top line is the locked positioning. +### AIware (locked product noun) + +- **Spelling, locked.** Always `AIware` as one word: capital A, capital I, lowercase ware. Never `AIWare`, `aiware`, `AI-ware`, `AIWARE`, or `AI ware`. Treat as a proper noun. +- **What it means.** A new category of software that AI agents generate, extend, and operate on demand. AIware apps are generated through AI chat, expose their data and logic to the agent so it can add new functionality on the fly, and run end-to-end on the Internet Computer so they stay tamperproof, always-on, and under the user's control. +- **Part of speech.** Noun and adjective. *Runs AIware* (noun). *AIware apps* (adjective). *Sophisticated AIware* (noun). The same word does both jobs without modification. +- **Do not substitute.** Do not replace AIware with *AI agents*, *agentic apps*, *AI-native apps*, or *agent-built apps* on surfaces that reference the internetcomputer.org product noun. Those phrases describe the actors or the building style; AIware is the artifact. +- **Relationship to the canonical strap.** *alive.* describes what the network is. AIware names what runs on it. Both are correct, and both can appear on the same page when it serves the audience. The canonical strap stays the master line on off-homepage surfaces. + +**Five public pillars, locked order:** *On-demand · Tamperproof · Always-on · Fluid · Yours* (italic on *Yours*) + +The pillar row is the second piece of the positioning system. It appears on the homepage strap, on social banners, on video call backgrounds, in the email signature, and on deck covers. The five pillars are locked, in this order, with italic on *Yours*. On narrow social crops where five pillars do not fit, drop the first two and ship the compressed row *Always-on · Fluid · Yours*. Never drop *Yours*. **Long form** -A **frontier cloud where security is built into the network**. +ICP is a **sovereign cloud where the software itself is alive**. Apps are generated on demand through AI chat at the speed of conversation, and they keep extending themselves over time with new natural-language functionality. The network underneath runs them tamperproof, always-on, and under the user's control, on hardware the user picks. It runs the whole app on the network itself: the frontend, the data, and the backend logic. -- **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.** Tamperproof execution, 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. 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. +- **On-demand.** Apps, SaaS, and websites are generated through AI chat at the speed of conversation. No team to provision, no infrastructure to set up first. Caffeine and the ICP skill library make this work across Claude, Codex, Copilot, Cursor, and Perplexity. +- **Tamperproof.** Security is a property of the network, not a team. Tamperproof execution, replication, and code integrity are enforced by math across the nodes. No security team, no sysadmin, no compliance officer needed for what the network already enforces. In a world where attackers are AI agents too, this is the only model that scales. +- **Always-on.** A cloud engine is a set of nodes running the ICP protocol. Engines run on bare metal, on AWS, Google Cloud, Azure, on local cloud providers, or across a mix of them. Nodes are distributed across independent locations, so an app keeps serving users even if a whole data centre goes down. No patch windows, no maintenance pages. +- **Fluid.** Software on ICP is not a static binary. AI can see the data inside the running app and extend its functionality on the fly through natural-language interfaces. Same app, new capability, no redeploy. This is what makes the software *alive*. +- **Yours.** An app deployed to ICP is not locked to a cloud vendor. Pick the hardware, the operators, and the jurisdiction. Move between providers, or off them entirely, without downtime. Users can pick cloud engines by jurisdiction, by operator, or by policy. **Out of scope.** Products with their own brand identity, such as OISY and Caffeine, are not covered by this skill. They have their own voice. @@ -51,13 +106,26 @@ A **frontier cloud where security is built into the network**. 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 +### Four voice attributes (internal writing guardrails) + +These describe **how copy should sound**. They are not the public pillars (above). They are not shown to readers as a list. 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 tamperproof execution 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. +### Hyperbole vs. factual metaphor + +The ban on hyperbole stands. No "revolutionary", "world-first", "unprecedented", "game-changing", "mind-blowing", "next-generation", "cutting-edge", "paradigm shift". State the property factually instead. + +Factual metaphors that describe a real product property are allowed in hero lines and lede paragraphs. Two are currently sanctioned: + +- ***alive*** for fluid, AI-generated, self-extending software. This is the metaphor in the locked top line. It describes the actual behaviour of apps on ICP, not their rank or novelty. +- ***immune*** for the tamperproof property. As in "immune to infrastructure hacks". This describes a real protocol guarantee, not a marketing claim. + +The distinction is rank/novelty (banned) versus property-description (allowed). If a metaphor describes a real, demonstrable behaviour of the product, it is on-brand. If it describes how impressive or how new the product is, it is not. + ### Style rules - **Sentence case** for headlines, body, page titles, nav. Title Case only for proper nouns. @@ -71,9 +139,18 @@ DFINITY copy is calm, factual, and confident. It reads like The Economist, not a ### Italic -Italic is reserved. It carries: +Italic is reserved. In headings, hero straps, and pillar rows, one italic word per line. The italic word lands on one of three targets: + +- **(a) Subject noun** (default). The noun or noun phrase the line is about. Example: *What ICP is*. +- **(b) Metaphor carrying the claim.** The factual metaphor that describes the product property. Example: *Sovereign cloud. Software that's alive.* (italic on *alive*). +- **(c) Possessive pronoun asserting sovereignty.** Used in pillar rows. Example: *On-demand · Tamperproof · Always-on · Fluid · Yours* (italic on *Yours*). + +Never italicise a verb, copula, article, or connector. Never italicise more than one word per line. Use the removal test: can the line still stand if the italic word is removed. If yes, the emphasis is on the wrong word. + +**Homepage hero carve-out (v2.25).** The internetcomputer.org homepage H1 line two (*Runs AIware.* / *Tamperproof, always-on.*) and the sub-strap fragment *fluid functionality* are italic-rust in full as a controlled exception. This exception is scoped strictly to the homepage hero and sub-strap. Every other surface (off-homepage product pages, decks, banners, signatures, video conference backgrounds, this guide) ships one italic word per line. + +Italic also carries: -- A single emphasis word inside an otherwise roman headline ("Sovereign *frontier* cloud", "What *ICP* is"). The emphasis word is the **subject of the heading**, the noun or noun phrase the line is about, never a verb, copula, article, or connector. Use the test, can the heading still stand if the italic word is removed. If yes, the emphasis is on the wrong word. - Asides ("e.g. ...") - Captions, attributions, figure labels - Book and publication titles @@ -107,8 +184,8 @@ Top-of-funnel means the front page, hero, landing pages, investor-facing materia ### Preferred framing -- **What ICP is:** a sovereign frontier cloud. A frontier cloud for agents building apps, services, and systems. A network. A tamperproof, unstoppable platform. -- **What ICP does:** runs end-to-end on the network. Hosts apps that are secure, tamperproof, and unstoppable. Provides tamperproof, unstoppable infrastructure. Scales AI that builds. +- **What ICP is:** a sovereign cloud. A sovereign cloud where software is alive. A network. A tamperproof, always-on platform. +- **What ICP does:** runs end-to-end on the network. Hosts apps that are tamperproof, always-on, and fluid. Generates apps on demand through AI chat. Provides tamperproof, always-on 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." @@ -123,7 +200,7 @@ Top-of-funnel means the front page, hero, landing pages, investor-facing materia | 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 | +| Blockchain platform | Sovereign cloud / tamperproof, always-on 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 | @@ -131,11 +208,11 @@ Top-of-funnel means the front page, hero, landing pages, investor-facing materia | 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 | +| Secure hosting | Sovereign 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 | -| Build onchain apps | Build tamperproof apps on a frontier cloud | +| Build onchain apps | Build tamperproof, always-on apps on a sovereign cloud | | Onchain governance | Tamperproof governance / governance enforced by the network | | Onchain data | Tamperproof data / data replicated across the nodes | | Onchain identity | Sovereign identity / network-verified identity | @@ -152,7 +229,7 @@ The word "onchain" hides what we actually mean. It is a category label, not a be | ---------------------------- | --------------------------------------------------------------------------------------- | | Integrity / can't be altered | tamperproof, tamperproof by the network, integrity enforced across the nodes | | Availability | unstoppable, stays online if any node or cloud underneath fails, always available | -| Where it runs | end-to-end on the network, on a frontier cloud, served and computed by the network | +| Where it runs | end-to-end on the network, on a sovereign cloud, served and computed by the network | | Independence | sovereign, sovereign by design, no single operator can change or pull the app | | Verifiability | verifiable, every change replicated and verified by the network | | Data persistence | data replicated across the nodes, no data loss across upgrades | @@ -160,7 +237,7 @@ The word "onchain" hides what we actually mean. It is a category label, not a be **Examples:** -- "Build onchain apps" becomes "Build tamperproof apps on a frontier cloud" (the user benefit is integrity, not the venue). +- "Build onchain apps" becomes "Build tamperproof, always-on apps on a sovereign cloud" (the user benefit is integrity and availability, not the venue). - "Fully on-chain frontend" becomes "Frontend served end-to-end by the network" (the claim is about where it runs). - "On-chain governance" becomes "Tamperproof governance" or "Governance enforced by the network" (the claim is about who can change the rules). - "Your assets stay on-chain" becomes "Your assets stay tamperproof and replicated across the nodes" (the claim is about integrity and durability). @@ -186,13 +263,32 @@ When rewriting legacy crypto-era copy, use these five rewrites as a reference. T - **Motoko**, **Rust**, **Candid**. Capitalised. - **Chain-key**, not "chainkey". - **Tamperproof** is one word, never hyphenated, never two words. +- **AIware** as one word: capital A, capital I, lowercase ware. Proper noun. Never `AIWare`, `aiware`, `AI-ware`, `AIWARE`, or `AI ware`. - `icp` CLI in lowercase code font. Never `dfx`. ## Copy review checklist Before merging any ICP / DFINITY copy change, confirm: -- [ ] Describes ICP in line with the positioning section above ("Sovereign frontier cloud. Scaling AI that builds.") +**Copy QA before shipping (the lessons learned the hard way).** Every correction the user has had to flag on copy traces back to skipping one of the steps below. Treat each as mandatory, not aspirational: + +- [ ] **Render the surface, then re-read every word at final size.** Hero straps, deck titles, signature lines, and banner straps read differently at 168px than they do in a code editor. Open the rendered output and re-read. +- [ ] **Locked strap audit.** Confirm "Sovereign cloud. Software that's *alive.*". The period sits inside the italic span (`alive.`, not `alive.`) so it inherits the rust accent on every surface that styles `em` in rust. Same rule applies to any closing punctuation on any styled fragment. +- [ ] **Pillar row order and italics.** On-demand · Tamperproof · Always-on · Fluid · *Yours*. Exact order, italic on *Yours* only, never drop *Yours*, never reorder. +- [ ] **One italic word per heading or strap.** Count the italics. More than one means the rule was broken; fewer than one (on a heading that needs emphasis) means the heading is flat. +- [ ] **Sweep every surface that quotes the strap.** Brand guide HTML, `rules.json`, the deck master, the email signature, the VC backgrounds, the social banners, the LinkedIn and X bios. A copy fix that only lands in one place ships inconsistent surfaces. +- [ ] **Em-dash sweep (`grep -c $'\xe2\x80\x94'`) returns 0** on every HTML, JSON, markdown, and skill file before deploy. +- [ ] **"Tamperproof" sweep returns 0** for "tamper-proof" and "tamper proof" across all surfaces. +- [ ] **Bare "onchain" / "on-chain" sweep returns 0** as a noun, attribute, or selling point. Replace with the specific attribute. + +If any of the above is skipped, expect the user to flag it and ask why it was not caught. + +--- + +**Standard checklist:** + +- [ ] Describes ICP in line with the positioning section above ("Sovereign cloud. Software that's alive.") +- [ ] Pillar row, where used, follows the locked order (On-demand · Tamperproof · Always-on · Fluid · *Yours*) with italic on *Yours* - [ ] No em-dashes anywhere (the U+2014 character) - [ ] No banned vocabulary on top-of-funnel surfaces - [ ] No bare "onchain" or "on-chain". Replaced with the specific attribute (tamperproof, unstoppable, sovereign, end-to-end on the network) @@ -221,6 +317,10 @@ This skill follows semantic versioning at the brand level. ## Changelog +- **v2.6** (2026-06-30). Tracks brand guide v2.25. Adds the *Homepage hero variant* sub-section to positioning, documenting the internetcomputer.org homepage H1 (line one: "Sovereign cloud." static; line two: rotation between *Runs AIware.* and *Tamperproof, always-on.*, italic-rust in full), the sub-strap (*Create custom AIware apps and SaaS on-demand, which have fluid functionality*, italic-rust on *fluid functionality*), and the eyebrow ("§ Internet Computer Protocol (ICP) · The internet overlay for AIware"). Adds *AIware* as a locked product noun: one word, capital A, capital I, lowercase ware, proper noun, noun and adjective, not substitutable with *AI agents*, *agentic apps*, *AI-native apps*, or *agent-built apps*. The canonical strap ("Sovereign cloud. Software that's *alive.*") is unchanged and remains the master line on every off-homepage surface. Italic rule gains a homepage-only carve-out for the line-two phrase and *fluid functionality*; one italic word per line still applies everywhere else. AIware added to the proper nouns list. +- **v2.5** (2026-06-15). Tracks brand guide v2.22. Adds a *Copy QA before shipping* sub-section to the copy review checklist, codifying the lessons from the v2.21 → v2.22 cycle: render the surface and re-read every word at final size; audit the locked strap including trailing punctuation (the period after *alive* must sit inside the italic span so it inherits the rust accent); confirm pillar row order and italics; sweep every surface that quotes the strap when copy changes. The trigger case was the trailing period after *alive* shipping in body ink because the markup placed it outside the rust-colored italic span on every surface. Strap and italic-target examples updated everywhere to wrap the punctuation inside the styled span. +- **v2.4** (2026-06-15). Tracks brand guide v2.20. Version bumped to stay in lockstep with `icp-brand-design` v2.4, which re-anchors the video conference background composition: the editorial lockup carrying the locked strap and pillar row moves from the bottom of the frame to the top so speaker tiles in Zoom, Meet, and Teams cannot cover it. No changes to positioning, voice attributes, vocabulary, italic rule, or any other verbal rule. +- **v2.3** (2026-06-15). Positioning reset aligning the skill with brand guide v2.19 and the internetcomputer.org refresh. New locked top line: "Sovereign cloud. Software that's *alive*." (italic on *alive*). New locked pillar row: "On-demand · Tamperproof · Always-on · Fluid · *Yours*" (italic on *Yours*). Italic rule widens to three targets: subject noun, metaphor carrying the claim, possessive pronoun asserting sovereignty. Hyperbole ban gains a carve-out for factual metaphors (*alive*, *immune*) that describe real product properties, distinct from superlatives that describe rank or novelty. Vocabulary table updated: "frontier cloud" replaced with "sovereign cloud" in do/don't pairs, "unstoppable" replaced with "always-on" in security framings. Long-form positioning rewritten around the five public pillars. The four voice attributes (Factual, Plain, Calm, Sovereign by math) are unchanged and clarified as internal writing guardrails, distinct from the public pillars. - **v2.2** (2026-05-08). No voice changes. Version bumped to stay in lockstep with `icp-brand-design` v2.2, which sharpened the hero grid paper rule (now mandatory on hero) and the accent scope rule (single words or short phrases only). - **v2.1** (2026-05-08). Italic emphasis rule clarified: italic word lands on the subject of the heading (the noun the line is about), never a verb, copula, article, or connector. Removal test added. Versioning rule introduced. - **v2.0** (2026-05-08). Initial v2 release. Locked top line "Sovereign frontier cloud. Scaling AI that builds." Four voice attributes (Factual, Plain, Calm, Sovereign by math). Strict ban on bare "onchain" and "on-chain" as nouns, attributes, or selling points, with a context-aware replacement table. "Tamperproof" locked as one word. CLI references switched from `dfx` to `icp`. Em-dash ban (U+2014). @@ -238,7 +338,7 @@ This skill follows semantic versioning at the brand level. User: "Write the hero headline for the ICP.app landing page." -Response: Produce a Newsreader, sentence-case headline with one italicised emphasis word. No hyperbole, no "revolutionize", no em-dash. Example: "The frontier cloud your agents *actually* ship on." Pair with an Inter eyebrow above ("FOR AGENTS BUILDING APPS, SERVICES, SYSTEMS") and a JetBrains Mono metadata strip beneath if metrics belong on the page. +Response: Produce a Newsreader, sentence-case headline with one italicised emphasis word landing on the subject noun, the metaphor, or a possessive pronoun. No hyperbole, no "revolutionize", no em-dash. Example: "The sovereign cloud your agents *actually* ship on." Pair with an Inter eyebrow above ("FOR AGENTS BUILDING APPS, SERVICES, SYSTEMS") and a JetBrains Mono metadata strip beneath if metrics belong on the page. **Example 2. Reviewing release notes** @@ -250,4 +350,4 @@ Response: Walk the copy review checklist. Flag any em-dashes, hype words, "decen User: "How should we describe ICP on this new investor page?" -Response: Lead with the locked top line: "Sovereign frontier cloud. Scaling AI that builds." Then expand using the four positioning bullets in the long form section. Do not lead with "blockchain", "decentralized", "World Computer", or any reframe of the locked strap. +Response: Lead with the locked top line: "Sovereign cloud. Software that's *alive*." Then ship the locked pillar row underneath: "On-demand · Tamperproof · Always-on · Fluid · *Yours*". Expand using the five pillar paragraphs in the long form section. Do not lead with "blockchain", "decentralized", "World Computer", "frontier cloud" (retired at v2.19), or any reframe of the locked strap. diff --git a/astro.config.mjs b/astro.config.mjs index 3d9a7f84..392ee9ba 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -34,6 +34,35 @@ export default defineConfig({ ThemeSelect: "./src/components/ThemeSelect.astro", }, head: [ + // Favicon set for ICP brand guide v2.26 (see .claude/skills/icp-brand-design SKILL.md §6.5). + // Starlight emits the primary SVG (rel="shortcut icon") from the top-level favicon option; + // these entries add the .ico fallback, PNG rasters, Apple touch icon, and Safari mask. + { + tag: "link", + attrs: { rel: "alternate icon", type: "image/x-icon", href: "/favicon.ico" }, + }, + { + tag: "link", + attrs: { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32.png" }, + }, + { + tag: "link", + attrs: { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16.png" }, + }, + { + tag: "link", + attrs: { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }, + }, + { + tag: "link", + attrs: { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "#a8482b" }, + }, + // Browser chrome tint. Matches the light parchment default; the theme scripts + // update this to the dark bark value when the user opts into dark. + { + tag: "meta", + attrs: { name: "theme-color", content: "#faf9f5" }, + }, { tag: "link", attrs: { @@ -116,7 +145,6 @@ export default defineConfig({ "@fontsource/inter/400.css", "@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", diff --git a/public/apple-touch-icon-dark.png b/public/apple-touch-icon-dark.png new file mode 100644 index 00000000..ee15b585 Binary files /dev/null and b/public/apple-touch-icon-dark.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 00000000..59e42ccc Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16.png b/public/favicon-16.png new file mode 100644 index 00000000..90250990 Binary files /dev/null and b/public/favicon-16.png differ diff --git a/public/favicon-192.png b/public/favicon-192.png new file mode 100644 index 00000000..2ea50880 Binary files /dev/null and b/public/favicon-192.png differ diff --git a/public/favicon-32.png b/public/favicon-32.png new file mode 100644 index 00000000..ad2bf92b Binary files /dev/null and b/public/favicon-32.png differ diff --git a/public/favicon-48.png b/public/favicon-48.png new file mode 100644 index 00000000..0fadc7f6 Binary files /dev/null and b/public/favicon-48.png differ diff --git a/public/favicon-512.png b/public/favicon-512.png new file mode 100644 index 00000000..eb5d6207 Binary files /dev/null and b/public/favicon-512.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 00000000..e3f4ad05 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg index d774371d..a70481a4 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,3 +1,22 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg new file mode 100644 index 00000000..8b450b2c --- /dev/null +++ b/public/safari-pinned-tab.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro index 7fddc1ae..47cc5c9d 100644 --- a/src/components/ThemeProvider.astro +++ b/src/components/ThemeProvider.astro @@ -1,14 +1,17 @@ --- --- -{/* Inlined to avoid FOUC. Defaults to system prefers-color-scheme; overridden by stored user preference. */} +{/* Inlined to avoid FOUC. Light editorial parchment is the deliberate default; dark applies + only when the user has explicitly opted in. Never auto-switch on prefers-color-scheme + (ICP brand guide: light default, dark opt-in only). */}