How This Site Is Made

Inter is self-hosted from src/assets/fonts through the Astro Fonts API as a Latin-focused variable WOFF2 subset. The normal face is preloaded; italic loads on demand. OpenType features include standard ligatures, contextual alternates, and slashed zeros, with font-optical-sizing: auto. Body and UI text keep normal letter spacing; headings tighten on a small tracking scale (-0.006em to -0.02em) as sizes grow, following Inter's dynamic metrics.

JetBrains Mono covers inline code, code blocks, timestamps, labels, eyebrows, and category tags at 13px with tabular figures and slashed zeros. Desktop and mobile share the same compressed variable fonts, including real italics and the full Inter weight range.

MDX articles use the .prose-site scale: 17px body copy at 1.75 line height, capped near 68 characters. Headings stay semibold and compact — page titles scale up to text-6xl, section headings sit around text-2xl to text-4xl, and eyebrows are uppercase mono labels with a cyan-to-magenta gradient.

Colors live as CSS custom properties in src/styles/global.css. ink and paper anchor primary text and page backgrounds; surface lifts cards and inputs; muted, soft, and faint step supporting copy from body text down to dates and metadata.

cyan is the primary interaction color — links, selected topic filters, primary-button hovers, and scrollbars. magenta is editorial: blockquote borders and eyebrow accents. blue and violet handle quieter structural moments; electric-cyan and electric-magenta appear in gradients, the favicon, and the soft radial glows behind the page.

Light, dark, and system modes resolve before paint via an inline script in BaseLayout.astro, stored in localStorage as site-theme. Hex and rgba values are the baseline; browsers on wide-gamut P3 displays get OKLCH overrides. Text selection inverts the ink/paper pairing so highlighted copy stays readable in both modes.