infra: brand favicon set and light-default theme

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",

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). */}
 <script is:inline>
 	window.StarlightThemeProvider = (() => {
 		const storedTheme =
 			typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
-		const prefersTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-		const theme = storedTheme || prefersTheme;
-		document.documentElement.dataset.theme = theme === 'dark' ? 'dark' : 'light';
+		const theme = storedTheme === 'dark' ? 'dark' : 'light';
+		document.documentElement.dataset.theme = theme;
+		const themeColor = document.querySelector('meta[name="theme-color"]');
+		if (themeColor) themeColor.setAttribute('content', theme === 'dark' ? '#14110d' : '#faf9f5');
 		return {
 			updatePickers(theme = storedTheme || 'auto') {
 				document.querySelectorAll('starlight-theme-select').forEach((picker) => {

src/components/ThemeSelect.astro

@@ -23,10 +23,11 @@
 
 	const storageKey = 'starlight-theme';
 
+	// Light is the deliberate default; dark applies only on an explicit stored choice.
+	// Never fall back to prefers-color-scheme (ICP brand guide: light default, dark opt-in only).
 	const loadTheme = (): Theme => {
 		const stored = typeof localStorage !== 'undefined' ? localStorage.getItem(storageKey) : null;
-		if (stored === 'dark' || stored === 'light') return stored;
-		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		return stored === 'dark' ? 'dark' : 'light';
 	};
 
 	function storeTheme(theme: Theme): void {
@@ -38,6 +39,8 @@
 	function applyTheme(theme: Theme): void {
 		document.documentElement.dataset.theme = theme;
 		storeTheme(theme);
+		const themeColor = document.querySelector('meta[name="theme-color"]');
+		if (themeColor) themeColor.setAttribute('content', theme === 'dark' ? '#14110d' : '#faf9f5');
 		document.querySelectorAll('starlight-theme-select button').forEach((btn) => {
 			btn.setAttribute(
 				'aria-label',

src/styles/custom.css

@@ -1,10 +1,11 @@
 /*
- * ICP Developer Docs — Custom Theme
+ * ICP Developer Docs: Custom Theme
  *
- * Brand: ICP / DFINITY v2.2 (2026-05-08)
+ * Brand: ICP / DFINITY brand guide v2.27 (design skill v2.7)
  * Light editorial parchment is the default theme.
- * Dark mode is opt-in via data-theme="dark" on <html> — never auto from prefers-color-scheme.
+ * Dark mode is opt-in via data-theme="dark" on <html>: never auto from prefers-color-scheme.
  * Three-face type system: Newsreader (editorial), Inter (UI chrome), JetBrains Mono (technical).
+ * Inter ships 400/500/600 only; bold prose maps to 600 (no 700+ in the system).
  * One primary accent: rust #a8482b.
  */
 
@@ -206,6 +207,14 @@ code, pre, kbd, samp,
   font-family: var(--icp-mono);
 }
 
+/* Inter tops out at 600 in the three-face system (no 700 face is loaded).
+   Map bold prose to 600 so emphasized text renders a real loaded weight. */
+strong, b,
+.sl-markdown-content strong,
+.sl-markdown-content b {
+  font-weight: 600;
+}
+
 /* ── Light mode — Starlight token overrides ─────────────────── */
 
 :root[data-theme='light'] {