Site Identity & Design

Identity 2026-06-29

Built the site's visual identity: LD monogram SVG favicon with light/dark inversion, no-flash dark mode via localStorage + inline script, system font stack with zero external requests, and a CrawlWidget in every page footer.

Favicon: LD monogram

The default Astro favicon is a placeholder. Replacing it with something meaningful was the first identity task.

I built an SVG favicon with the LD initials as a monogram: dark background, white letterforms. The SVG inverts for light mode via @media (prefers-color-scheme: dark) — in light mode, it renders with a light background and dark text.

Why SVG over PNG/ICO:

Scales to any size without blur (browser tabs, bookmarks, pinned tabs, app icons)
Adapts to light/dark without multiple image files
Small: the monogram SVG is under 1KB
<link rel="icon" type="image/svg+xml"> is supported by all modern browsers; a fallback 1×1 transparent ICO handles edge cases

Dark mode: no flash

The hardest part of dark mode is preventing the flash of wrong theme — when the page loads in light mode for a fraction of a second before JavaScript reads the stored preference and switches.

The solution is an inline <script> in the <head> that runs synchronously before the browser paints anything:

(function() {
  const stored = localStorage.getItem('theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  if (stored === 'dark' || (!stored && prefersDark)) {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
})();

CSS custom properties on :root[data-theme="dark"] handle all color switching. The toggle button updates localStorage and flips data-theme. No JavaScript frameworks, no CSS-in-JS — just a small inline script and custom properties.

Typography: system fonts

No Google Fonts. No Typekit. No external font requests at all.

The font stack:

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

On macOS: San Francisco. On Windows: Segoe UI. On Android: Roboto. On Linux: the user’s configured UI font. Everywhere else: Arial.

What this eliminates:

A DNS lookup to fonts.googleapis.com
A TCP/TLS connection
A render-blocking resource request
A separate request for the font file itself

In practice, system fonts look correct and familiar on every platform. The visual difference from a custom web font is negligible for a text-heavy site. The performance gain is real.

Monospace (code blocks): ui-monospace, 'Cascadia Code', 'Fira Code', monospace — system monospace first, Cascadia on Windows 11, Fira Code as a named fallback.

CrawlWidget

Every page footer includes the CrawlWidget: a small component that shows a 14-day bot activity sparkline and a live breakdown of bot groups hitting the site. It reads from KV on each SSR page load — sub-millisecond — and renders with no client-side JavaScript.

The widget is the most visible output of the crawl intelligence pipeline. It makes the monitoring infrastructure tangible rather than hidden in a dashboard.

← All entries