@kolkrabbi/kol-foundry 0.1.0

package/README.md

@@ -0,0 +1,24 @@
+# @kolkrabbi/kol-foundry
+
+The KOL **type-foundry system** — the type-specimen apparatus, lifted out of `@kolkrabbi/kol-component` (was the `/foundry` subpath) into its own package. It's a distinct content domain (typefaces, glyph metrics, variable-font axes — not Sanity CMS) with its own consumer (kolkrabbi.io/foundry) and versioning cadence.
+
+## What's in the box
+
+| Export | What |
+| --- | --- |
+| `TypefaceHero` | specimen hero — typeface name, styles, sample |
+| `VariableFontSection` | live weight/axis playground (`useAxisAnimation`) |
+| `GlyphMetricsGrid` | parsed-metric glyph inspector |
+| `FoundryCharacterSets` | character-set browser |
+| `TypefaceStyleSection` | per-style specimen block |
+| `FontPreviewSection` | size-ladder / preview control |
+| `SpecimenSectionHeader` | shared section header |
+| `glyphSets`, `glyphCategories`, `SPECIMEN_SAMPLE_TEXT` | glyph data |
+
+```js
+import { TypefaceHero, VariableFontSection } from '@kolkrabbi/kol-foundry'
+```
+
+## Requirements
+
+Components take flat prop bags — typeface metrics / font files are consumer-supplied. Shared primitives (`Tag`, `Pill`, `Slider`, `Button`, `Divider`, `Dropdown`, `useAxisAnimation`) stay in `@kolkrabbi/kol-component`; this package depends on them. Styling comes from `@kolkrabbi/kol-theme`. Vite + Tailwind v4 consumer (`@source "…/node_modules/@kolkrabbi/kol-foundry/src"`).

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@kolkrabbi/kol-foundry",
+  "version": "0.1.0",
+  "private": false,
+  "description": "KOL type-foundry system — the type-specimen apparatus: typeface hero, variable-font axis playground, parsed-metric glyph inspector, character-set browser, and font-preview. Typeface data is consumer-injected. Sits above @kolkrabbi/kol-{theme,icons,component}.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "dependencies": {
+    "@kolkrabbi/kol-component": "0.7.0",
+    "@kolkrabbi/kol-icons": "0.5.0",
+    "@kolkrabbi/kol-theme": "0.7.1"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0",
+    "opentype.js": "^1.3.4"
+  },
+  "peerDependenciesMeta": {
+    "opentype.js": {
+      "optional": true
+    }
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "kol",
+    "kolkrabbi",
+    "design-system",
+    "foundry",
+    "typeface",
+    "specimen",
+    "type"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tor-Grimsson/kol-ds.git",
+    "directory": "packages/foundry"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/FontPreviewSection.jsx

@@ -0,0 +1,187 @@
+import { useEffect, useRef, useState } from 'react'
+import { Dropdown } from '@kolkrabbi/kol-component'
+import { Slider } from '@kolkrabbi/kol-component'
+import SpecimenSectionHeader from './SpecimenSectionHeader.jsx'
+import { SPECIMEN_SAMPLE_TEXT } from './glyphData.js'
+
+/* taxonomy-ok: organism — nests Dropdown, Slider, SpecimenSectionHeader
+ * (relative imports) plus a same-file FontPreviewItem. */
+
+const WEIGHT_VALUES = {
+  Thin: 100,
+  Extralight: 200,
+  Light: 300,
+  Regular: 400,
+  Medium: 500,
+  Semibold: 600,
+  Bold: 700,
+  Extrabold: 800,
+  Black: 900,
+}
+
+/**
+ * FontPreviewItem (same-file) — one preview block: a weight dropdown + Size /
+ * Leading / Spacing sliders over an editable, in-family sample. Weight is
+ * seeded from the section header (re-syncs when the parent's selection changes);
+ * size/leading/spacing are local. Leading maps 0–50 → 90–140% line-height.
+ */
+function FontPreviewItem({
+  fontFamily,
+  fontStyle = 'normal',
+  text = SPECIMEN_SAMPLE_TEXT,
+  initialWeight = 'Regular',
+  initialSize = 64,
+  initialLeading = 10,
+  lineClamp = null,
+  availableWeights,
+}) {
+  const [size, setSize] = useState(initialSize)
+  const [leading, setLeading] = useState(initialLeading)
+  const [spacing, setSpacing] = useState(0)
+  const [selectedWeight, setSelectedWeight] = useState(initialWeight)
+  const editableRef = useRef(null)
+
+  useEffect(() => setSelectedWeight(initialWeight), [initialWeight])
+  useEffect(() => {
+    if (editableRef.current && editableRef.current.textContent !== text) {
+      editableRef.current.textContent = text
+    }
+  }, [text])
+
+  const weightOptions = availableWeights.map((label) => ({ label, value: label }))
+  const numericWeight = WEIGHT_VALUES[selectedWeight] || 400
+
+  return (
+    <div className="self-stretch min-h-40 p-6 rounded border border-fg-16 flex flex-col justify-start items-start gap-6 bg-surface-primary">
+      <div className="self-stretch flex justify-start items-start gap-8">
+        <div className="flex-shrink-0">
+          <Dropdown
+            options={weightOptions}
+            value={selectedWeight}
+            onChange={setSelectedWeight}
+            variant="minimal"
+          />
+        </div>
+        <div className="flex-1 flex justify-start items-start gap-8">
+          <Slider label="Size" min={12} max={200} value={size} onChange={setSize} variant="minimal" className="flex-1" />
+          <Slider
+            label="Leading"
+            min={0}
+            max={50}
+            value={leading}
+            onChange={setLeading}
+            variant="minimal"
+            className="hidden md:flex flex-1"
+            formatValue={(val) => 90 + val}
+          />
+          <Slider label="Spacing" min={-50} max={50} value={spacing} onChange={setSpacing} variant="minimal" className="hidden md:flex flex-1" />
+        </div>
+      </div>
+
+      <div className="self-stretch rounded flex justify-start items-start overflow-hidden">
+        <div
+          ref={editableRef}
+          contentEditable
+          suppressContentEditableWarning
+          className="flex-1 bg-transparent outline-none border-none text-auto"
+          style={{
+            fontFamily,
+            fontStyle,
+            fontWeight: numericWeight,
+            fontSize: `${size}px`,
+            lineHeight: `${90 + leading}%`,
+            letterSpacing: `${spacing}px`,
+            wordWrap: 'break-word',
+            overflowWrap: 'break-word',
+            whiteSpace: 'normal',
+            hyphens: 'none',
+            maxWidth: '100%',
+            ...(lineClamp && {
+              display: '-webkit-box',
+              WebkitLineClamp: lineClamp,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+            }),
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+const DEFAULT_WEIGHTS = [
+  'Thin', 'Extralight', 'Light', 'Regular', 'Medium', 'Semibold', 'Bold', 'Extrabold', 'Black',
+]
+const SIZE_LADDER = [
+  { size: 96, lines: 1 },
+  { size: 64, lines: 3 },
+  { size: 48, lines: 4 },
+  { size: 24, lines: 5, leading: 50 },
+]
+
+/**
+ * FontPreviewSection — a stacked multi-size preview: the shared header (weight +
+ * Roman/Italic dropdowns) above a ladder of preview blocks at 96 / 64 / 48 / 24
+ * px, each pre-seeded with the section's selected weight + italic state. Read a
+ * family from display down to body size at a chosen weight.
+ *
+ * Font-agnostic: the monorepo's TGMalromur/Málrómur defaults are dropped —
+ * `fontFamily` + `badgeText` are prop-driven. The size ladder + weight ramp are
+ * sensible defaults, overridable via `sizes` / `availableWeights`.
+ *
+ * Text casing: badgeText, weight labels and style labels render verbatim.
+ *
+ * @param {string} props.fontFamily - Family rendered in every preview item.
+ * @param {string} props.badgeText - Header title.
+ * @param {boolean} props.showDropdown - Render the style dropdown; seeds italic (default true).
+ * @param {string[]} props.availableWeights - Weight dropdown options (default 9-stop ramp).
+ * @param {string} props.initialWeight - Initially selected weight (default 'Regular').
+ * @param {Array<{size,lines,leading?}>} props.sizes - Size ladder (default 96/64/48/24).
+ */
+const FontPreviewSection = ({
+  fontFamily = 'system-ui, sans-serif',
+  badgeText = 'Preview',
+  showDropdown = true,
+  availableWeights = DEFAULT_WEIGHTS,
+  initialWeight = 'Regular',
+  sizes = SIZE_LADDER,
+}) => {
+  const [selectedStyleVariant, setSelectedStyleVariant] = useState(showDropdown ? 'italic' : 'roman')
+  const [selectedWeight, setSelectedWeight] = useState(initialWeight)
+  const isItalic = selectedStyleVariant === 'italic'
+  const weightOptions = availableWeights.map((label) => ({ label, value: label }))
+
+  return (
+    <section className="w-full py-12 lg:py-16">
+      <div className="max-w-[1400px] mx-auto flex flex-col gap-8">
+        <SpecimenSectionHeader
+          selectedStyle={selectedStyleVariant}
+          onStyleChange={setSelectedStyleVariant}
+          showDropdown={showDropdown}
+          badgeText={badgeText}
+          icon="foundation"
+          size="sm"
+          selectedWeight={selectedWeight}
+          onWeightChange={setSelectedWeight}
+          showWeightDropdown={availableWeights.length > 0}
+          weightOptions={weightOptions}
+        />
+
+        {sizes.map(({ size, lines, leading }) => (
+          <FontPreviewItem
+            key={size}
+            fontFamily={fontFamily}
+            fontStyle={isItalic ? 'italic' : 'normal'}
+            initialWeight={selectedWeight}
+            availableWeights={availableWeights}
+            initialSize={size}
+            initialLeading={leading}
+            lineClamp={lines}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default FontPreviewSection

package/src/FoundryCharacterSets.jsx

@@ -0,0 +1,113 @@
+import { useState } from 'react'
+import { Button } from '@kolkrabbi/kol-component'
+import SpecimenSectionHeader from './SpecimenSectionHeader.jsx'
+import { glyphSets, glyphCategories } from './glyphData.js'
+
+/* taxonomy-ok: organism — nests Button + SpecimenSectionHeader (relative
+ * imports) plus same-file GlyphCategory / GlyphItem. */
+
+/** GlyphItem (same-file) — one bordered glyph cell that flips to the inverse
+ *  surface on hover. Display-only (character sets aren't selectable). */
+function GlyphItem({ glyph, fontFamily, fontStyle }) {
+  return (
+    <div
+      className="aspect-square border rounded-lg flex items-center justify-center text-3xl leading-none transition-colors duration-300 w-16 h-16 hover:bg-surface-inverse"
+      style={{ borderColor: 'var(--kol-border-default)', fontFamily, fontStyle }}
+    >
+      {glyph}
+    </div>
+  )
+}
+
+/** GlyphCategory (same-file) — a labeled category title over a wrap grid of
+ *  GlyphItems, all rendered in the chosen family/style. */
+function GlyphCategory({ title, glyphs, fontFamily, fontStyle, className = '' }) {
+  return (
+    <div className={`w-full flex flex-col gap-4 ${className}`.trim()}>
+      <h3 className="kol-mono-12">{title}</h3>
+      <div className="flex flex-wrap gap-4 w-full">
+        {glyphs?.map((glyph, i) => (
+          <GlyphItem key={i} glyph={glyph} fontFamily={fontFamily} fontStyle={fontStyle} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * FoundryCharacterSets — the character-set browser: the shared header ("Character
+ * Set" + Roman/Italic dropdown) above a stack of glyph categories rendered in
+ * the chosen family/style. Collapsed by default to the first two categories
+ * under a fade with a "Show All Glyphs" reveal; clicking expands to every
+ * category.
+ *
+ * Light-theme fix ([source-bug]): the monorepo faded with a hardcoded
+ * `rgba(18,18,21,…)` — the app's literal dark background baked in, which broke
+ * in light theme. Here the mask runs `transparent → var(--kol-surface-primary)`
+ * so it matches whatever surface it sits on, in either theme. `fontFamily` is
+ * prop-driven (no brand default).
+ *
+ * Text casing: label, category titles and the reveal button render verbatim.
+ *
+ * @param {string} props.fontFamily - Family every glyph renders in.
+ * @param {boolean} props.showDropdown - Render the Roman/Italic dropdown (default true).
+ * @param {number} props.collapsedCount - Categories shown when collapsed (default 2).
+ */
+const FoundryCharacterSets = ({
+  fontFamily = 'system-ui, sans-serif',
+  showDropdown = true,
+  collapsedCount = 2,
+}) => {
+  const [selectedStyle, setSelectedStyle] = useState('italic')
+  const [showAll, setShowAll] = useState(false)
+
+  const visibleCategories = showAll ? glyphCategories : glyphCategories.slice(0, collapsedCount)
+  const fontStyle = selectedStyle === 'italic' ? 'italic' : 'normal'
+
+  return (
+    <section className="w-full py-12 lg:py-16">
+      <div className="max-w-[1400px] mx-auto flex flex-col gap-8">
+        <SpecimenSectionHeader
+          label="Character Set"
+          size="sm"
+          selectedStyle={selectedStyle}
+          onStyleChange={setSelectedStyle}
+          showDropdown={showDropdown}
+        />
+
+        <div className="w-full flex flex-col gap-12 relative">
+          {visibleCategories.map((category, index) => (
+            <GlyphCategory
+              key={category.key}
+              title={category.title}
+              glyphs={glyphSets[category.key]}
+              fontFamily={fontFamily}
+              fontStyle={fontStyle}
+              className={!showAll && index === collapsedCount - 1 ? 'relative' : ''}
+            />
+          ))}
+
+          {!showAll && (
+            <>
+              {/* Theme-aware fade (fixes the hardcoded rgba(18,18,21) dark mask). */}
+              <div
+                className="absolute bottom-0 left-0 right-0 h-64 pointer-events-none"
+                style={{
+                  background:
+                    'linear-gradient(to bottom, transparent 13%, var(--kol-surface-primary) 86%)',
+                }}
+              />
+              <div className="absolute bottom-0 left-0 right-0 flex justify-center">
+                <Button onClick={() => setShowAll(true)} variant="outline">
+                  Show All Glyphs
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default FoundryCharacterSets

package/src/GlyphMetricsGrid.jsx

@@ -0,0 +1,335 @@
+import { useEffect, useRef, useState } from 'react'
+import { Tag } from '@kolkrabbi/kol-component'
+import { glyphSets } from './glyphData.js'
+
+/* taxonomy-ok: organism — nests DS Tag (relative import) and owns font I/O +
+ * parsed-metric geometry. */
+
+/* ---------------------------------------------------------------------------
+ * FontLoader (same-file) — fetch → FontFace inject → best-effort opentype parse.
+ *
+ * The font face is ALWAYS injected (under a unique family name) so the big
+ * glyph + grid cells render the real file even when metric parsing is
+ * unavailable. opentype.js is loaded via a DYNAMIC import so a consumer that
+ * hasn't installed the peer dep simply gets no parsed metrics (the grid renders
+ * without the baseline/x-height/cap/ascender/descender overlay) instead of a
+ * hard crash. Folds in the fallback-chain metric extraction the monorepo's
+ * inline overlay added (os2 ?? hhea ?? literal), so incomplete fonts don't throw.
+ * ------------------------------------------------------------------------- */
+class FontLoader {
+  constructor(options = {}) {
+    this.callbacks = options
+    this.family = null
+  }
+
+  async loadFont(buffer, filename) {
+    // Inject the face first — this never needs opentype and guarantees the
+    // glyph renders in the real font.
+    const uniqueFontName = `KolFoundryFont_${Date.now()}`
+    try {
+      const fontFace = new FontFace(uniqueFontName, buffer)
+      await fontFace.load()
+      document.fonts.add(fontFace)
+      this.family = uniqueFontName
+    } catch (err) {
+      this.callbacks.onError?.(err)
+    }
+
+    // Best-effort metric parse. Dynamic import degrades gracefully when the
+    // opentype.js peer dep is absent.
+    let font = null
+    try {
+      const mod = await import('opentype.js')
+      const parse = mod.parse || mod.default?.parse || mod.default
+      font = parse(buffer)
+    } catch (err) {
+      // No metrics — the overlay just won't draw. Not fatal.
+      this.callbacks.onError?.(err)
+    }
+
+    this.callbacks.onFontLoaded?.({ font, fontFamily: this.family, filename })
+    return { font, fontFamily: this.family }
+  }
+
+  cleanup() {
+    if (typeof document === 'undefined') return
+    document.fonts.forEach((f) => {
+      if (f.family && f.family.startsWith('KolFoundryFont_')) document.fonts.delete(f)
+    })
+    this.family = null
+  }
+}
+
+/**
+ * GlyphMetricsGrid — table-style glyph inspector with real, parsed font metrics.
+ *
+ * One giant glyph carrying a live baseline / x-height / cap-height / ascender /
+ * descender overlay drawn from the font's OWN OS/2 + hhea tables, beside two
+ * clickable uppercase/lowercase glyph grids and a Unicode / decimal / hex
+ * readout. Clicking a cell pins the big glyph; hovering previews it.
+ * `variationSettings` feed straight into `font-variation-settings` so the
+ * overlay stays correct under a live variable axis driven from the parent.
+ *
+ * FONT-ASSET CONTRACT: pass a real `.ttf`/`.otf` at `fontUrl` (same-origin, so
+ * the fetch + FontFace injection succeed). The metric lines require opentype.js
+ * (a peer dep, dynamically imported) — without it the grids still render, just
+ * with no overlay. The showcase serves fonts under `/fonts/`; e.g.
+ * `/fonts/Right-Grotesk-ttf/PPRightGrotesk-Regular.ttf`.
+ *
+ * Metric extraction uses fallback chains so incomplete fonts degrade instead of
+ * throwing: unitsPerEm ← font.unitsPerEm ?? 1000; ascender ← os2.sTypoAscender
+ * ?? hhea.ascender ?? 800; descender ← os2.sTypoDescender ?? hhea.descender ??
+ * -200; capHeight ← os2.sCapHeight ?? 700; xHeight ← os2.sxHeight ?? 500.
+ *
+ * Text casing: metadata labels, grid titles and tab labels render verbatim.
+ *
+ * @param {Object} props
+ * @param {string} props.fontUrl - URL of the font to fetch + parse (required for real metrics).
+ * @param {string} props.fontFamily - CSS family fallback until the parsed face is injected.
+ * @param {'normal'|'italic'} props.fontStyle - Inline font-style + the Roman/Italic metadata label.
+ * @param {string} props.initialGlyph - Initially selected glyph (default 'f').
+ * @param {string[]} props.uppercaseGlyphs - Top grid contents.
+ * @param {string[]} props.lowercaseGlyphs - Bottom grid contents.
+ * @param {Object} props.variationSettings - axis→value map serialized to font-variation-settings.
+ */
+const GlyphMetricsGrid = ({
+  fontUrl,
+  fontFamily = 'sans-serif',
+  fontStyle = 'normal',
+  initialGlyph = 'f',
+  uppercaseGlyphs = [...glyphSets.uppercase, ...glyphSets.latin1],
+  lowercaseGlyphs = [...glyphSets.lowercase, ...glyphSets.latinExtended],
+  variationSettings = {},
+}) => {
+  const [selectedGlyph, setSelectedGlyph] = useState(initialGlyph)
+  const [hoveredGlyph, setHoveredGlyph] = useState(null)
+  const [metrics, setMetrics] = useState(null)
+  const [fontData, setFontData] = useState(null)
+  const [loadedFamily, setLoadedFamily] = useState(null)
+  const [activeTab, setActiveTab] = useState('uppercase')
+
+  const glyphRef = useRef(null)
+  const overlayRef = useRef(null)
+
+  const displayGlyph = hoveredGlyph || selectedGlyph
+  const renderFamily = loadedFamily || fontFamily
+
+  // Serialize the axis map once for the big glyph + every cell.
+  const fontVariationSettingsCSS =
+    Object.entries(variationSettings)
+      .map(([axis, value]) => `"${axis}" ${value}`)
+      .join(', ') || 'normal'
+
+  // Load font + extract metrics (keyed on fontUrl only).
+  useEffect(() => {
+    if (!fontUrl) return
+    const glyphElement = glyphRef.current
+    if (!glyphElement) return
+
+    const loader = new FontLoader({
+      onFontLoaded: ({ font, fontFamily: injectedFamily }) => {
+        if (injectedFamily) setLoadedFamily(injectedFamily)
+        glyphElement.textContent = displayGlyph
+        if (!font) return
+
+        const os2 = font.tables?.os2
+        const hhea = font.tables?.hhea
+        setFontData({ font })
+        setMetrics({
+          unitsPerEm: font.unitsPerEm || 1000,
+          ascender: os2?.sTypoAscender ?? hhea?.ascender ?? 800,
+          descender: os2?.sTypoDescender ?? hhea?.descender ?? -200,
+          capHeight: os2?.sCapHeight ?? 700,
+          xHeight: os2?.sxHeight ?? 500,
+        })
+      },
+      onError: (err) => console.warn('GlyphMetricsGrid: metrics unavailable', err),
+    })
+
+    let cancelled = false
+    ;(async () => {
+      try {
+        const response = await fetch(fontUrl)
+        const buffer = await response.arrayBuffer()
+        const filename = fontUrl.split('/').pop() || 'font.ttf'
+        if (!cancelled) await loader.loadFont(buffer, filename)
+      } catch (err) {
+        if (!cancelled) console.warn('GlyphMetricsGrid: font fetch failed', err)
+      }
+    })()
+
+    return () => {
+      cancelled = true
+      loader.cleanup()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fontUrl])
+
+  // Imperative glyph text on select/hover.
+  useEffect(() => {
+    if (glyphRef.current) glyphRef.current.textContent = displayGlyph
+  }, [displayGlyph])
+
+  // Metric-line overlay — overlay-relative coords, KOL tokens, mono type var.
+  useEffect(() => {
+    if (!fontData || !metrics || !glyphRef.current || !overlayRef.current) return
+    const glyph = glyphRef.current
+    const overlay = overlayRef.current
+
+    const render = () => {
+      const overlayRect = overlay.getBoundingClientRect()
+      const glyphRect = glyph.getBoundingClientRect()
+      const glyphTop = glyphRect.top - overlayRect.top
+
+      const fontSize = parseFloat(window.getComputedStyle(glyph).fontSize)
+      if (!fontSize || Number.isNaN(fontSize)) return
+
+      const scale = fontSize / metrics.unitsPerEm
+      const totalPixelHeight = (metrics.ascender - metrics.descender) * scale
+      const baseline =
+        glyphTop + glyphRect.height / 2 - totalPixelHeight / 2 + metrics.ascender * scale
+
+      const lines = [
+        { y: baseline - metrics.capHeight * scale, label: 'Cap Height', value: metrics.capHeight },
+        { y: baseline - metrics.ascender * scale, label: 'Ascender', value: metrics.ascender },
+        { y: baseline - metrics.xHeight * scale, label: 'x-height', value: metrics.xHeight },
+        { y: baseline, label: 'Baseline', value: 0 },
+        { y: baseline - metrics.descender * scale, label: 'Descender', value: metrics.descender },
+      ]
+
+      overlay.innerHTML = ''
+      const labelCss = (side, y) => `
+        position: absolute; ${side}: 13px; top: ${y - 18}px;
+        opacity: 0.8; color: var(--kol-surface-on-primary);
+        font-size: 12px; font-family: var(--kol-font-family-mono, monospace);
+        line-height: 12px; user-select: none;`
+      lines.forEach(({ y, label, value }) => {
+        if (!Number.isFinite(y)) return
+        const line = document.createElement('div')
+        line.style.cssText = `position: absolute; left: 0; right: 0; top: ${y}px; border-top: 1px solid var(--kol-border-default);`
+        overlay.appendChild(line)
+        const left = document.createElement('div')
+        left.style.cssText = labelCss('left', y)
+        left.textContent = label
+        overlay.appendChild(left)
+        const right = document.createElement('div')
+        right.style.cssText = labelCss('right', y)
+        right.textContent = value
+        overlay.appendChild(right)
+      })
+    }
+
+    const raf = requestAnimationFrame(render)
+    return () => cancelAnimationFrame(raf)
+  }, [fontData, metrics, displayGlyph])
+
+  const charCode = displayGlyph.charCodeAt(0)
+  const unicodeHex = charCode.toString(16).toUpperCase().padStart(4, '0')
+
+  const cellStyle = {
+    fontFamily: renderFamily,
+    fontStyle,
+    fontVariationSettings: fontVariationSettingsCSS,
+    outline: '1px solid var(--kol-border-default)',
+    outlineOffset: '-0.5px',
+  }
+
+  const renderGrid = (glyphs, title) => (
+    <div className="w-full flex flex-col gap-4">
+      <div className="text-auto text-base md:text-lg kol-mono-text leading-7">{title}</div>
+      <div
+        className="inline-flex justify-start items-start flex-wrap"
+        onMouseLeave={() => setHoveredGlyph(null)}
+      >
+        {glyphs.map((glyph, index) => {
+          const isSelected = glyph === selectedGlyph
+          return (
+            <div
+              key={index}
+              onClick={() => setSelectedGlyph(glyph)}
+              onMouseEnter={() => setHoveredGlyph(glyph)}
+              className={`w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 inline-flex flex-col justify-center items-center overflow-hidden cursor-pointer transition-colors duration-150 text-center text-lg md:text-xl lg:text-2xl leading-6 ${
+                isSelected ? 'bg-surface-inverse' : 'bg-transparent text-auto hover:bg-fg-08'
+              }`}
+              style={cellStyle}
+            >
+              {glyph}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="bg-surface-primary flex flex-col lg:flex-row justify-start items-start gap-6 md:gap-8 lg:gap-10">
+      {/* Left: glyph viewer + metrics overlay */}
+      <div className="w-full lg:flex-[504] flex flex-col justify-start items-start gap-4 md:gap-6">
+        <div className="text-auto text-base md:text-lg kol-mono-text leading-7">Glyph Viewer</div>
+
+        <div className="w-full flex flex-col justify-start items-start gap-4 md:gap-6 lg:gap-10">
+          <div className="self-stretch h-64 md:h-80 lg:h-96 relative rounded-md overflow-hidden">
+            <div className="absolute inset-0 flex items-center justify-center">
+              <span
+                ref={glyphRef}
+                className="text-center text-auto"
+                style={{
+                  fontSize: 'clamp(180px, 25vw, 316px)',
+                  lineHeight: '1',
+                  fontFamily: renderFamily,
+                  fontStyle,
+                  fontVariationSettings: fontVariationSettingsCSS,
+                }}
+              >
+                {displayGlyph}
+              </span>
+            </div>
+            <div ref={overlayRef} className="absolute inset-0 pointer-events-none" aria-hidden />
+          </div>
+
+          {/* Metadata */}
+          <div className="hidden md:inline-flex justify-start items-start gap-8">
+            <div className="opacity-80 text-auto text-sm md:text-base lg:text-lg kol-mono-text leading-7">
+              Font style<br />
+              Glyph name<br />
+              Unicode<br />
+              Decimal<br />
+              Hex
+            </div>
+            <div className="opacity-80 text-auto text-sm md:text-base lg:text-lg kol-mono-text leading-7">
+              {fontStyle === 'italic' ? 'Italic' : 'Roman'}<br />
+              {displayGlyph}<br />
+              U+{unicodeHex}<br />
+              {charCode}<br />
+              0x{unicodeHex}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right: dual grids */}
+      <div className="w-full lg:flex-[832] flex flex-col justify-start items-start gap-4 md:gap-6">
+        <div className="flex lg:hidden gap-3">
+          <Tag hash={false} active={activeTab === 'uppercase'} onClick={() => setActiveTab('uppercase')}>
+            Uppercase &amp; Latin
+          </Tag>
+          <Tag hash={false} active={activeTab === 'lowercase'} onClick={() => setActiveTab('lowercase')}>
+            Lowercase &amp; Extended
+          </Tag>
+        </div>
+
+        <div className="lg:hidden w-full">
+          {activeTab === 'uppercase' && renderGrid(uppercaseGlyphs, 'Uppercase & Latin')}
+          {activeTab === 'lowercase' && renderGrid(lowercaseGlyphs, 'Lowercase & Extended')}
+        </div>
+
+        <div className="hidden lg:flex lg:flex-col lg:gap-6 w-full">
+          {renderGrid(uppercaseGlyphs, 'Uppercase & Latin')}
+          {renderGrid(lowercaseGlyphs, 'Lowercase & Extended')}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default GlyphMetricsGrid

package/src/SpecimenSectionHeader.jsx

@@ -0,0 +1,89 @@
+import { Icon } from '@kolkrabbi/kol-icons'
+import { Dropdown } from '@kolkrabbi/kol-component'
+import { Divider } from '@kolkrabbi/kol-component'
+
+/* taxonomy-ok: nests DS Dropdown + Divider (relative imports) plus kol-icons's
+ * Icon (a package import the relative-import check can't see). */
+
+/**
+ * SpecimenSectionHeader — the shared header every type-specimen section mounts
+ * under. A title (with an optional inline icon) on the left, up to two
+ * controlled dropdowns (weight + style/axis) on the right, and a horizontal
+ * divider beneath. It is the connective tissue that makes the foundry sections
+ * read as one system, so it is built before the sections that consume it.
+ *
+ * Fully controlled and data-free: it holds no font data, only label/badge text,
+ * an icon name, and the two dropdowns' value/onChange pairs supplied by the
+ * parent section. Promoted from the monorepo's route-local `FoundrySection`;
+ * the `Foundry*` name was a route artifact, this name describes the role.
+ *
+ * Title source forks: `label` wins, else `badgeText`. `size` swaps the title
+ * type stop (`sm` → kol-mono-12, else kol-mono-16). Each dropdown is
+ * independently gated; the weight dropdown also requires a non-empty
+ * `weightOptions`.
+ *
+ * Text casing: title and option labels render verbatim as authored — no
+ * text-transform. Author "Roman" / "Italic" / "Character Set" in intended case.
+ *
+ * @param {Object} props
+ * @param {string} props.label - Title text (takes precedence over badgeText).
+ * @param {string} props.badgeText - Fallback title when label is unset.
+ * @param {string} props.icon - KOL Icon name shown after the title; omit to hide.
+ * @param {'sm'|'lg'} props.size - Title type stop (default 'lg').
+ * @param {string} props.selectedStyle - Controlled value of the style/axis dropdown.
+ * @param {Function} props.onStyleChange - Style dropdown change handler.
+ * @param {boolean} props.showDropdown - Render the style/axis dropdown (default true).
+ * @param {Array<{label,value}>} props.styleOptions - Style dropdown options (default Roman/Italic).
+ * @param {string} props.selectedWeight - Controlled value of the weight dropdown.
+ * @param {Function} props.onWeightChange - Weight dropdown change handler.
+ * @param {boolean} props.showWeightDropdown - Gate the weight dropdown (default true; also needs options).
+ * @param {Array<{label,value}>} props.weightOptions - Weight dropdown options (default []).
+ */
+const SpecimenSectionHeader = ({
+  label,
+  badgeText,
+  icon,
+  size = 'lg',
+  selectedStyle,
+  onStyleChange,
+  showDropdown = true,
+  styleOptions = [
+    { label: 'Roman', value: 'roman' },
+    { label: 'Italic', value: 'italic' },
+  ],
+  selectedWeight,
+  onWeightChange,
+  showWeightDropdown = true,
+  weightOptions = [],
+}) => {
+  const title = label || badgeText
+  // kol-mono-text-lg / kol-mono-sm-regular don't exist in the DS theme; the
+  // nearest mono stops are kol-mono-16 (lg) and kol-mono-12 (sm).
+  const titleClass = size === 'sm' ? 'kol-mono-12' : 'kol-mono-16'
+
+  return (
+    <div className="flex flex-col gap-[13px]">
+      <div className="w-full flex flex-row justify-between items-end gap-4">
+        {/* Left: title + optional icon */}
+        <div className="flex items-center gap-3 md:gap-4">
+          <span className={titleClass}>{title}</span>
+          {icon && <Icon name={icon} size={20} />}
+        </div>
+
+        {/* Right: controlled dropdowns */}
+        <div className="flex items-center gap-4">
+          {showWeightDropdown && weightOptions.length > 0 && (
+            <Dropdown options={weightOptions} value={selectedWeight} onChange={onWeightChange} />
+          )}
+          {showDropdown && (
+            <Dropdown options={styleOptions} value={selectedStyle} onChange={onStyleChange} />
+          )}
+        </div>
+      </div>
+
+      <Divider variant="horizontal" />
+    </div>
+  )
+}
+
+export default SpecimenSectionHeader

package/src/TypefaceHero.jsx

@@ -0,0 +1,107 @@
+import { Pill } from '@kolkrabbi/kol-component'
+import { Button } from '@kolkrabbi/kol-component'
+
+/* taxonomy-ok: organism — nests Pill + Button (relative imports); a full
+ * page-hero region rendering live in the specimen's own font-family. */
+
+/**
+ * TypefaceHero — the specimen hero for a typeface page: a centered stack of
+ * category pill → giant display name rendered in the typeface's OWN fontFamily
+ * → in-family description → download / view-specimen CTAs → an optional
+ * licensing caption. Data-driven from one `typeface` object; the giant name is
+ * the live font-family preview (arbitrary loaded font, inline `fontFamily`, not
+ * a fixed KOL type class — only the size stops are Tailwind).
+ *
+ * Router-decoupled: the monorepo source called `useNavigate(specimenLink)`;
+ * here the "View Specimen" CTA takes an `href` and/or `onSpecimenClick` callback
+ * so the DS never depends on a router. CTA copy + the license note are
+ * prop-driven (license default off), and `displayName` falls back to
+ * `id`/`fontFamily` when the config omits it.
+ *
+ * Text casing: displayName, category, description and CTA/license strings render
+ * verbatim as authored — no text-transform.
+ *
+ * @param {Object} props
+ * @param {Object} props.typeface - Config: { displayName?, id?, fontFamily, fontStyle?, category?, description?, specimenLink? }.
+ * @param {string} props.downloadHref - Optional href for the "Download font" CTA.
+ * @param {string} props.downloadLabel - Download CTA label (default 'Download font').
+ * @param {string} props.specimenLabel - View-specimen CTA label (default 'View Specimen').
+ * @param {Function} props.onSpecimenClick - Handler for the view-specimen CTA (receives the event).
+ * @param {string} props.licenseNote - Licensing caption; omit to hide.
+ */
+const TypefaceHero = ({
+  typeface = {},
+  downloadHref,
+  downloadLabel = 'Download font',
+  specimenLabel = 'View Specimen',
+  onSpecimenClick,
+  licenseNote,
+}) => {
+  const { displayName, id, fontFamily, fontStyle, category, description, specimenLink } = typeface
+  const name = displayName || id || fontFamily
+  const isItalic = fontStyle === 'italic'
+
+  const handleSpecimenClick = (e) => {
+    if (onSpecimenClick) {
+      e.preventDefault()
+      onSpecimenClick(e)
+    }
+  }
+
+  return (
+    <section className="py-48 md:py-72 flex flex-col justify-center text-center items-center overflow-hidden">
+      <div className="flex flex-col items-center gap-2 max-w-[1400px]">
+        {category && (
+          <div className="pb-5 flex flex-col items-center gap-2">
+            <Pill variant="subtle">{category}</Pill>
+          </div>
+        )}
+
+        <div className="pb-16 flex flex-col items-center gap-0">
+          <h1
+            className={`text-[64px] leading-[100%] md:text-[128px] font-semibold ${
+              isItalic ? 'italic' : ''
+            } text-auto transition-colors duration-300`}
+            style={{ fontFamily }}
+          >
+            {name}
+          </h1>
+
+          {description && (
+            <p
+              className={`text-xl font-semibold ${
+                isItalic ? 'italic' : ''
+              } text-auto transition-colors duration-300`}
+              style={{ fontFamily }}
+            >
+              {description}
+            </p>
+          )}
+        </div>
+
+        <div className="flex flex-col items-center gap-2">
+          <div className="flex flex-wrap items-center justify-center gap-3">
+            <Button variant="primary" href={downloadHref}>
+              {downloadLabel}
+            </Button>
+            <Button
+              variant="outline"
+              href={specimenLink}
+              onClick={onSpecimenClick ? handleSpecimenClick : undefined}
+            >
+              {specimenLabel}
+            </Button>
+          </div>
+
+          {licenseNote && (
+            <p className="kol-mono-12 text-auto pt-4 transition-colors duration-300" style={{ opacity: 0.64 }}>
+              {licenseNote}
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default TypefaceHero

package/src/TypefaceStyleSection.jsx

@@ -0,0 +1,163 @@
+import { useState } from 'react'
+import SpecimenSectionHeader from './SpecimenSectionHeader.jsx'
+
+/* taxonomy-ok: organism — nests SpecimenSectionHeader (relative import) plus a
+ * same-file StyleCard row; owns the axis/selection state. */
+
+/**
+ * StyleCard (same-file) — one style row: the label rendered live in its own
+ * weight/width/italic on the left, the numeric value on the right, with an
+ * active/hover flip. Inlined (the monorepo's `.style-card` CSS classes aren't
+ * in the DS theme) and rebuilt Tailwind-first.
+ */
+function StyleCard({ label, weight, width, italic, isActive, onHover, onClick, fontFamily }) {
+  return (
+    <div
+      onMouseEnter={onHover}
+      onClick={onClick}
+      className={`flex items-center justify-between gap-4 px-4 py-3 rounded cursor-pointer border transition-colors duration-150 ${
+        isActive ? 'bg-surface-inverse' : 'border-transparent hover:bg-fg-08'
+      }`}
+      style={{ borderColor: isActive ? 'transparent' : undefined }}
+    >
+      <span
+        className="text-2xl md:text-3xl leading-none truncate"
+        style={{
+          fontFamily,
+          fontStyle: italic ? 'italic' : 'normal',
+          fontWeight: weight || 400,
+          fontVariationSettings: width ? `'wdth' ${width}` : undefined,
+        }}
+      >
+        {label}
+      </span>
+      <span className="kol-mono-12 shrink-0 opacity-70">{width || weight}</span>
+    </div>
+  )
+}
+
+const pickDefault = (list) => list.find((s) => s.isDefault) || list[3] || list[0]
+
+/**
+ * TypefaceStyleSection — the weight/width/italic style showcase: a sticky
+ * inverted preview panel on the left (renders `AaBbCc / 01234567 / {(!@#$?&)}`
+ * in the hovered/selected style) beside a grid of every available style on the
+ * right. Derives its behavior generically from `typeface.styles`: italic →
+ * Roman/Italic dropdown; weight+width → Weight/Width axis dropdown; single-axis
+ * / static → no dropdown.
+ *
+ * Default selection prefers a style flagged `isDefault`, falling back to index
+ * (Regular ≈ [3]) — the monorepo's magic indices assumed a fixed ordering; the
+ * flag survives reordering. All preview typography stays inline from the
+ * selected style (fontFamily / fontWeight / fontStyle / wdth variation) because
+ * arbitrary loaded fonts + variable axes can't be fixed KOL type classes.
+ *
+ * Text casing: badgeText, style labels and specimen strings render verbatim.
+ *
+ * @param {Object} props.typeface - { fontFamily, badgeText, styles:{ hasWeight, hasWidth, hasItalic, defaultStyle?, weights[], widths[] } }.
+ * @param {string[]} props.sampleLines - Preview lines (default AaBbCc / 01234567 / {(!@#$?&)}).
+ */
+const TypefaceStyleSection = ({
+  typeface = {},
+  sampleLines = ['AaBbCc', '01234567', '{(!@#$?&)}'],
+}) => {
+  const { fontFamily, badgeText, styles: styleConfig = {} } = typeface
+  const {
+    hasWeight,
+    hasWidth,
+    hasItalic,
+    defaultStyle = 'weight',
+    weights = [],
+    widths = [],
+  } = styleConfig
+
+  const showDropdown = hasItalic || (hasWeight && hasWidth)
+  const styleOptions = hasItalic
+    ? [
+        { label: 'Roman', value: 'roman' },
+        { label: 'Italic', value: 'italic' },
+      ]
+    : hasWeight && hasWidth
+      ? [
+          { label: 'Weight', value: 'weight' },
+          { label: 'Width', value: 'width' },
+        ]
+      : null
+
+  const [selectedStyleVariant, setSelectedStyleVariant] = useState(
+    hasItalic ? 'italic' : defaultStyle,
+  )
+  const isItalic = selectedStyleVariant === 'italic'
+  const activeList = showDropdown && selectedStyleVariant === 'width' ? widths : weights
+
+  const [currentStyle, setCurrentStyle] = useState(() => pickDefault(activeList) || {})
+
+  const handleStyleVariantChange = (newVariant) => {
+    setSelectedStyleVariant(newVariant)
+    if (newVariant === 'width') setCurrentStyle(pickDefault(widths) || {})
+    else setCurrentStyle(pickDefault(weights) || {})
+  }
+
+  const previewStyle = {
+    fontFamily,
+    fontWeight: currentStyle.weight || 400,
+    fontStyle: isItalic ? 'italic' : 'normal',
+    ...(currentStyle.width ? { fontVariationSettings: `'wdth' ${currentStyle.width}` } : {}),
+  }
+
+  return (
+    <section className="w-full py-12 lg:py-16">
+      <div className="max-w-[1400px] mx-auto flex flex-col gap-8">
+        <SpecimenSectionHeader
+          selectedStyle={selectedStyleVariant}
+          onStyleChange={handleStyleVariantChange}
+          styleOptions={styleOptions || undefined}
+          showDropdown={showDropdown}
+          badgeText={badgeText}
+          icon="foundation"
+          size="sm"
+        />
+
+        <div className="flex flex-row gap-4 md:gap-6 lg:gap-8 items-start w-full">
+          {/* Left: sticky inverted preview panel */}
+          <div className="w-1/2 aspect-[4/3] p-6 md:p-12 transition-colors duration-300 sticky top-24 bg-surface-inverse rounded">
+            <div
+              className="text-center transition-colors duration-300 w-full h-full flex flex-col justify-center items-center gap-2"
+              style={previewStyle}
+            >
+              {sampleLines.map((line, i) => (
+                <div key={i} className="text-3xl md:text-5xl lg:text-6xl leading-none">
+                  {line}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right: styles list */}
+          <div className="w-1/2 flex flex-col gap-3">
+            {activeList.map((style, index) => (
+              <StyleCard
+                key={`${style.label}-${index}`}
+                label={style.label}
+                weight={style.weight}
+                width={style.width}
+                italic={isItalic}
+                isActive={
+                  currentStyle?.label === style.label &&
+                  (style.weight
+                    ? currentStyle?.weight === style.weight
+                    : currentStyle?.width === style.width)
+                }
+                onHover={() => setCurrentStyle(style)}
+                onClick={() => setCurrentStyle(style)}
+                fontFamily={fontFamily}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default TypefaceStyleSection

package/src/VariableFontSection.jsx

@@ -0,0 +1,158 @@
+import { useState } from 'react'
+import { Pill } from '@kolkrabbi/kol-component'
+import { Slider } from '@kolkrabbi/kol-component'
+import SpecimenSectionHeader from './SpecimenSectionHeader.jsx'
+import { useAxisAnimation } from '@kolkrabbi/kol-component'
+
+/* taxonomy-ok: organism — nests Pill, Slider, SpecimenSectionHeader (relative
+ * imports) plus a same-file PlayPauseButton; owns the axis-animation state. */
+
+/**
+ * PlayPauseButton (same-file) — CSS-shape play/pause toggle. Two bars when
+ * playing, a right-pointing triangle when paused. Pure `currentColor` shapes so
+ * it needs no icon registry and inherits the surrounding text color.
+ */
+function PlayPauseButton({ isPlaying = false, onToggle, size = 28 }) {
+  const barH = Math.round(size * 0.43)
+  const barW = Math.max(2, Math.round(size * 0.07))
+  const tri = Math.round(size * 0.21)
+  const gap = Math.max(2, Math.round(size * 0.07))
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-label={isPlaying ? 'Pause' : 'Play'}
+      aria-pressed={isPlaying}
+      className="cursor-pointer flex items-center justify-center text-auto shrink-0"
+      style={{ width: size, height: size, gap }}
+    >
+      {isPlaying ? (
+        <>
+          <span className="bg-current" style={{ width: barW, height: barH }} />
+          <span className="bg-current" style={{ width: barW, height: barH }} />
+        </>
+      ) : (
+        <span
+          className="w-0 h-0"
+          style={{
+            borderLeft: `${tri}px solid currentColor`,
+            borderTop: `${tri}px solid transparent`,
+            borderBottom: `${tri}px solid transparent`,
+            marginLeft: Math.round(size * 0.07),
+          }}
+        />
+      )}
+    </button>
+  )
+}
+
+/**
+ * VariableFontSection — the animated variable-axis playground. A big specimen
+ * word whose weight auto-oscillates between `minWeight` and `maxWeight` via
+ * `useAxisAnimation` (ping-pong rAF, reduced-motion gated), pausing the instant
+ * the user scrubs the weight slider. A SpecimenSectionHeader sits above with a
+ * Roman/Italic dropdown. "Watch the weight breathe, then grab the slider."
+ *
+ * The weight is applied as CSS `font-weight` (→ the font's wght axis), so it
+ * animates against ANY font with multiple weights — a true variable font makes
+ * the morph continuous rather than stepped. See the page's FONT-ASSET CONTRACT.
+ *
+ * Reconciliations vs the monorepo source: the crude `Date.now()`/`delta>16`
+ * throttle is replaced by the hook's `performance.now()` accumulator; the
+ * previously unguarded loop now honors `prefers-reduced-motion` (starts paused,
+ * static value); brand copy defaults ('Málrómur Aa' / 'Variable' / TGMalromur)
+ * are dropped for neutral defaults.
+ *
+ * Text casing: badgeText, text and dropdown labels render verbatim.
+ *
+ * @param {Object} props
+ * @param {string} props.fontFamily - Specimen family (default system stack).
+ * @param {string} props.badgeText - Header title (default 'Variable axis').
+ * @param {string} props.text - The big specimen word (default 'Variable').
+ * @param {number} props.minWeight - Oscillation + slider lower bound (default 300).
+ * @param {number} props.maxWeight - Oscillation + slider upper bound (default 900).
+ * @param {boolean} props.showDropdown - Show the Roman/Italic dropdown (default true).
+ */
+const VariableFontSection = ({
+  fontFamily = 'system-ui, sans-serif',
+  badgeText = 'Variable axis',
+  text = 'Variable',
+  minWeight = 300,
+  maxWeight = 900,
+  showDropdown = true,
+}) => {
+  const [isAnimating, setIsAnimating] = useState(true)
+  const [selectedStyle, setSelectedStyle] = useState(showDropdown ? 'italic' : 'roman')
+
+  const { value: weight, setValue: setWeight, reduced } = useAxisAnimation({
+    min: minWeight,
+    max: maxWeight,
+    running: isAnimating,
+    initial: 400,
+  })
+
+  const handleSliderChange = (value) => {
+    setIsAnimating(false)
+    setWeight(value)
+  }
+
+  const playing = isAnimating && !reduced
+  const fontStyle = selectedStyle === 'italic' ? 'italic' : 'normal'
+
+  return (
+    <section className="w-full py-12 lg:py-16">
+      <div className="max-w-[1400px] mx-auto flex flex-col gap-8">
+        <SpecimenSectionHeader
+          selectedStyle={selectedStyle}
+          onStyleChange={setSelectedStyle}
+          showDropdown={showDropdown}
+          badgeText={badgeText}
+          icon="foundation"
+          size="sm"
+        />
+
+        {/* VariableFontDisplay (inlined) — giant text behind, controls in front */}
+        <div className="relative w-full rounded border border-fg-16 bg-surface-primary overflow-hidden p-6 md:p-10 h-[40vh] md:h-[60vh]">
+          <p
+            className="absolute inset-0 flex items-center justify-center text-[80px] md:text-[144px] transition-colors duration-300"
+            style={{
+              fontFamily,
+              fontWeight: Math.round(weight),
+              fontStyle,
+              color: 'var(--kol-surface-on-primary)',
+            }}
+          >
+            {text}
+          </p>
+
+          <div className="relative z-10 h-full flex flex-col justify-between">
+            <div className="flex justify-between items-start">
+              <div className="flex flex-col gap-1">
+                <span className="kol-mono-10 text-fg-32">AXES:</span>
+                <span className="kol-helper-12 text-auto">WEIGHT</span>
+              </div>
+              <div className="flex gap-2">
+                <Pill variant="subtle">wght {Math.round(weight)}</Pill>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <PlayPauseButton isPlaying={playing} onToggle={() => setIsAnimating((a) => !a)} />
+              <Slider
+                label="Weight"
+                min={minWeight}
+                max={maxWeight}
+                value={Math.round(weight)}
+                onChange={handleSliderChange}
+                variant="minimal"
+                className="w-full"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default VariableFontSection

package/src/glyphData.js

@@ -0,0 +1,30 @@
+/**
+ * Foundry glyph data — static character collections + category metadata for the
+ * type-specimen sections (GlyphMetricsGrid, FoundryCharacterSets). Ported from
+ * the monorepo `@kol/ui/data` glyphSets so the DS foundry layer carries its own
+ * default coverage instead of reaching into an app data package. Consumers can
+ * override any of it via the `uppercaseGlyphs` / `lowercaseGlyphs` / category
+ * props.
+ */
+
+export const glyphSets = {
+  uppercase: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
+  lowercase: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
+  numbers: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+  punctuation: ['.', ',', '!', '?', ';', ':', '"', "'", '-', '—', '(', ')', '[', ']', '{', '}', '&', '@', '#', '$', '%'],
+  latin1: ['À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï', 'Ð', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø'],
+  latinExtended: ['Ā', 'Ă', 'Ą', 'Ć', 'Ĉ', 'Ċ', 'Č', 'Ď', 'Đ', 'Ē', 'Ĕ', 'Ė', 'Ę', 'Ě', 'Ĝ', 'Ğ', 'Ġ', 'Ģ', 'Ĥ', 'Ħ', 'Ĩ', 'Ī', 'Ĭ', 'Į'],
+}
+
+export const glyphCategories = [
+  { key: 'uppercase', title: 'Uppercase' },
+  { key: 'lowercase', title: 'Lowercase' },
+  { key: 'numbers', title: 'Numbers' },
+  { key: 'punctuation', title: 'Punctuation & Symbols' },
+  { key: 'latin1', title: 'Latin-1 Supported' },
+  { key: 'latinExtended', title: 'Latin Extended' },
+]
+
+/** Default preview pangram — neutral English, authored in intended case. */
+export const SPECIMEN_SAMPLE_TEXT =
+  'The quick brown fox jumps over the lazy dog while five wizards vex the gnomic judge.'

package/src/index.js

@@ -0,0 +1,21 @@
+/**
+ * @kol/component foundry sub-barrel — the type-specimen layer (the DS answer to
+ * the monorepo's `@kol/ui/foundry`). Exposed as the `./foundry` package subpath
+ * so the showcase specimen set can import these without touching the root
+ * src/index.js barrel. The root barrel export lines are documented in the p9
+ * wiring notes for a central merge.
+ */
+
+// molecule (shared section header)
+export { default as SpecimenSectionHeader } from './SpecimenSectionHeader.jsx'
+
+// organisms (specimen sections)
+export { default as TypefaceHero } from './TypefaceHero.jsx'
+export { default as VariableFontSection } from './VariableFontSection.jsx'
+export { default as GlyphMetricsGrid } from './GlyphMetricsGrid.jsx'
+export { default as TypefaceStyleSection } from './TypefaceStyleSection.jsx'
+export { default as FontPreviewSection } from './FontPreviewSection.jsx'
+export { default as FoundryCharacterSets } from './FoundryCharacterSets.jsx'
+
+// data
+export { glyphSets, glyphCategories, SPECIMEN_SAMPLE_TEXT } from './glyphData.js'