fix: remove placeholder favicon SVG, complete typography coverage

danielnaab · danielnaab · commit a7c40e7e1716 · 2026-04-28T17:15:09.000Z
Remove the "FL" placeholder SVG favicon — use only the real Flexion
brand mark PNGs from flexion.us. Drop the SVG icon link from &lt;head&gt;.

Add missing prose typography for markdown content:
- blockquote: left border accent, subtle text, padding
- code/pre: monospace font stack via --font-mono token, background
  tint, proper sizing (0.9em inline, --step--1 for blocks)
- hr: clean single-line rule with vertical margin
- small: maps to --step--1
- Last-child margin prevention to avoid double-spacing in containers

Extract font stacks into tokens (--font-sans, --font-mono) so
base.css and components reference a single definition.
diff --git a/src/design/assets/favicon.svg b/src/design/assets/favicon.svg
diff --git a/src/design/base.css b/src/design/base.css
@@ -3,15 +3,15 @@
     color-scheme: light;
   }
   body {
-    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: var(--font-sans);
     font-size: var(--step-0);
     color: var(--color-ink);
     background: var(--color-surface);
   }
   h1, h2, h3, h4 {
     line-height: 1.2;
     font-weight: 700;
-    font-family: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
+    font-family: var(--font-sans);
     margin-block-end: 0.5em;
   }
   h1 { font-size: var(--step-4); line-height: 1.15; }
@@ -44,6 +44,49 @@
   dd {
     margin-block-end: 0.5em;
   }
+  blockquote {
+    border-inline-start: 4px solid var(--color-surface-alt);
+    padding-inline-start: var(--space-5);
+    padding-block: var(--space-3);
+    margin-block-end: 1em;
+    color: var(--color-ink-subtle);
+    max-inline-size: var(--measure-prose);
+  }
+  code {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    background: var(--color-surface-alt);
+    padding: 0.1em 0.3em;
+    border-radius: var(--radius-sm);
+  }
+  pre {
+    font-family: var(--font-mono);
+    font-size: var(--step--1);
+    line-height: 1.6;
+    background: var(--color-surface-alt);
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    overflow-x: auto;
+    margin-block-end: 1em;
+    max-inline-size: var(--measure-wide);
+  }
+  pre code {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+  }
+  hr {
+    border: none;
+    border-block-start: 1px solid var(--color-surface-alt);
+    margin-block: var(--space-6);
+  }
+  small {
+    font-size: var(--step--1);
+  }
+  /* Prevent trailing margin on the last flow element in a container */
+  :where(h1, h2, h3, h4, p, ul, ol, dl, blockquote, pre):last-child {
+    margin-block-end: 0;
+  }
   a {
     color: var(--color-link);
     text-decoration-thickness: 0.08em;
diff --git a/src/design/common/layout.tsx b/src/design/common/layout.tsx
@@ -23,7 +23,6 @@ export function Layout({
         <link rel="stylesheet" href="design/index.css" />
         <link rel="icon" href="assets/favicon-32x32.png" sizes="32x32" type="image/png" />
         <link rel="icon" href="assets/favicon-192x192.png" sizes="192x192" type="image/png" />
-        <link rel="icon" href="assets/favicon.svg" type="image/svg+xml" />
         <link rel="apple-touch-icon" href="assets/apple-touch-icon.png" />
         <meta name="msapplication-TileImage" content="assets/mstile-270x270.png" />
         <script type="module" src="enhancements/register.js" defer></script>
diff --git a/src/design/tokens.css b/src/design/tokens.css
@@ -68,6 +68,10 @@
     --radius-lg: 1rem;
     --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06);
 
+    /* ---------- Font stacks ---------- */
+    --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono:  ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+
     /* ---------- Measure ---------- */
     --measure-prose: 65ch;
     --measure-wide:  min(96rem, 100%);
