feat: dot + ripple identity mark

index.html

@@ -16,8 +16,9 @@
     <!-- Manifest -->
     <link rel="manifest" href="/manifest.json" />
 
-    <!-- Favicon -->
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><circle cx=%2250%22 cy=%2250%22 r=%2240%22 fill=%22%236b3cff%22/></svg>" />
+    <!-- Favicon: violet dot + soft ripple ring. Proportions locked to the identity-pack mark
+         (dot r = 0.218·s, ring r = 0.373·s, stroke ≈ 0.0136·s, opacity 0.25) on a 220 viewBox. -->
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 220%22><circle cx=%22110%22 cy=%22110%22 r=%2282%22 fill=%22none%22 stroke=%22%236b3cff%22 stroke-width=%223%22 opacity=%220.25%22/><circle cx=%22110%22 cy=%22110%22 r=%2248%22 fill=%22%236b3cff%22/></svg>" />
     <link rel="apple-touch-icon" href="/icons/icon-192.png" />
 
     <!-- Preconnect to important origins -->

scripts/generate-icons.mjs

@@ -8,7 +8,7 @@
 //      which consumes these three files and installs the full iOS + Android
 //      size matrix into the native projects.
 
-import { GlobalFonts, createCanvas } from '@napi-rs/canvas';
+import { createCanvas } from '@napi-rs/canvas';
 import { writeFileSync } from 'node:fs';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -22,12 +22,26 @@ const VIOLET = '#6b3cff';
 const CREAM = '#fafaf7';
 const INK = '#0c0b10';
 
-const fontOk = GlobalFonts.registerFromPath(
-  join(RES, 'fonts', 'Nunito-Black.ttf'),
-  'Nunito',
-);
-if (!fontOk) {
-  throw new Error('Failed to register Nunito-Black.ttf — check resources/fonts/');
+// The mark: a filled dot with a soft ripple ring, proportions locked to the
+// identity pack — dot r = 0.218·s, ring r = 0.373·s, stroke = max(1.5, 0.0136·s).
+function drawMark(ctx, cx, cy, s, { dotColor, ringColor, ringOpacity = 0.25 }) {
+  const dotR = s * 0.218;
+  const ringR = s * 0.373;
+  const strokeW = Math.max(1.5, s * 0.0136);
+
+  ctx.save();
+  ctx.globalAlpha = ringOpacity;
+  ctx.strokeStyle = ringColor;
+  ctx.lineWidth = strokeW;
+  ctx.beginPath();
+  ctx.arc(cx, cy, ringR, 0, Math.PI * 2);
+  ctx.stroke();
+  ctx.restore();
+
+  ctx.fillStyle = dotColor;
+  ctx.beginPath();
+  ctx.arc(cx, cy, dotR, 0, Math.PI * 2);
+  ctx.fill();
 }
 
 function renderIcon() {
@@ -39,13 +53,13 @@ function renderIcon() {
   ctx.fillStyle = VIOLET;
   ctx.fillRect(0, 0, size, size);
 
-  // Cream `b` glyph. Optical-centre nudge up 3% because `b` has an ascender
-  // but no descender — geometric centring leaves it looking low.
-  ctx.fillStyle = CREAM;
-  ctx.font = `900 ${size * 0.68}px Nunito`;
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-  ctx.fillText('b', size / 2, size / 2 - size * 0.03);
+  // Cream dot + ripple — the "iOS rounded" artboard from the identity pack.
+  // Ring opacity bumps to 0.4 so the cream stroke holds against violet.
+  drawMark(ctx, size / 2, size / 2, size, {
+    dotColor: CREAM,
+    ringColor: CREAM,
+    ringOpacity: 0.4,
+  });
 
   return c.toBuffer('image/png');
 }
@@ -58,11 +72,13 @@ function renderSplash({ bg, fg }) {
   ctx.fillStyle = bg;
   ctx.fillRect(0, 0, size, size);
 
-  // Violet dot ~18% of the short-edge diameter.
-  ctx.fillStyle = fg;
-  ctx.beginPath();
-  ctx.arc(size / 2, size / 2, size * 0.09, 0, Math.PI * 2);
-  ctx.fill();
+  // Dot ~18% diameter (r ≈ 0.09·size) — keep that by sizing the mark so its
+  // dot resolves to the same radius: markSize = (0.09 / 0.218)·size.
+  drawMark(ctx, size / 2, size / 2, size * 0.413, {
+    dotColor: fg,
+    ringColor: fg,
+    ringOpacity: 0.25,
+  });
 
   return c.toBuffer('image/png');
 }

src/index.css

@@ -391,13 +391,28 @@ html {
 }
 .dark .boop-wordmark { color: #f1eef9; }
 .boop-dot {
+  position: relative;
   display: inline-block;
   width: 0.73em;
   height: 0.73em;
   border-radius: 50%;
   background: var(--boop-accent);
   flex: none;
 }
+/* Soft ripple ring — the design's "01 · Original" mark. */
+.boop-dot::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1.25em;
+  height: 1.25em;
+  border-radius: 50%;
+  border: max(1.5px, 0.025em) solid var(--boop-accent);
+  opacity: 0.25;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
 
 /* Hide focus ring for mouse users */
 :focus:not(:focus-visible) {

src/pages/Landing.css

@@ -33,9 +33,12 @@
 .boop-landing .nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: rgba(250,250,247,0.75); border-bottom: 1px solid var(--lineSoft); }
 .boop-landing .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
 .boop-landing .wordmark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rounded); font-weight: 800; font-size: 22px; letter-spacing: -0.8px; color: var(--ink); white-space: nowrap; }
-.boop-landing .wordmark .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
+.boop-landing .wordmark .dot { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
+/* Soft ripple ring from the identity pack (ring-to-dot diameter ratio ≈ 1.71). */
+.boop-landing .wordmark .dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 27px; height: 27px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0.25; transform: translate(-50%, -50%); pointer-events: none; }
 .boop-landing .wordmark-sm { font-size: 18px; gap: 6px; }
 .boop-landing .wordmark-sm .dot { width: 13px; height: 13px; }
+.boop-landing .wordmark-sm .dot::after { width: 22px; height: 22px; }
 .boop-landing .nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--muted); }
 .boop-landing .nav-links a:hover { color: var(--ink); }
 .boop-landing .nav-cta { display: flex; gap: 10px; align-items: center; }
@@ -48,7 +51,8 @@
 
 .boop-landing .hero { padding: 64px 0 60px; position: relative; }
 .boop-landing .hero h1 { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 20px); flex-wrap: nowrap; font-family: var(--rounded); font-weight: 900; font-size: clamp(48px, 8vw, 108px); letter-spacing: -3px; line-height: 0.95; margin: 0 0 24px; max-width: 900px; }
-.boop-landing .hero h1 .mark { display: block; width: clamp(40px, 7vw, 90px); height: clamp(40px, 7vw, 90px); border-radius: 50%; background: var(--accent); flex-shrink: 0; }
+.boop-landing .hero h1 .mark { position: relative; display: block; width: clamp(40px, 7vw, 90px); height: clamp(40px, 7vw, 90px); border-radius: 50%; background: var(--accent); flex-shrink: 0; }
+.boop-landing .hero h1 .mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: clamp(68px, 11.97vw, 154px); height: clamp(68px, 11.97vw, 154px); border-radius: 50%; border: 2px solid var(--accent); opacity: 0.25; transform: translate(-50%, -50%); pointer-events: none; }
 .boop-landing .hero-signin { margin-top: 20px; font-size: 14px; color: var(--muted); }
 .boop-landing .hero-signin a { color: var(--accent); font-weight: 600; }
 .boop-landing .hero-signin a:hover { text-decoration: underline; }