@bendyline/squisq 1.1.0 → 1.2.0

package/src/doc/templates/coverBlock.ts

@@ -18,6 +18,7 @@ import type { Layer } from '../../schemas/Doc.js';
 import type { TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
 import type { StartBlockConfig } from '../../schemas/Doc.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 import { mapAmbientMotion } from './accentImage.js';
 
 /**
@@ -87,6 +88,7 @@ export function coverBlock(input: CoverBlockInput, context: TemplateContext): La
         text: title,
         style: {
           fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           fontWeight: 'bold',
           color: theme.colors.text,
           textAlign: 'center',
@@ -113,6 +115,7 @@ export function coverBlock(input: CoverBlockInput, context: TemplateContext): La
         text: subtitle,
         style: {
           fontSize: subtitleFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.textMuted,
           textAlign: 'center',
           lineHeight: 1.5,

package/src/doc/templates/dataTable.ts

@@ -0,0 +1,84 @@
+/**
+ * Data Table Template
+ *
+ * Renders a themed table with header row and data rows.
+ * Uses a TableLayer (foreignObject-based HTML table inside SVG)
+ * for proper table layout within the viewport.
+ *
+ * Adapts font sizes for different viewports and uses theme colors
+ * for header background, text, borders, and body cells.
+ */
+
+import type { Layer } from '../../schemas/Doc.js';
+import type { DataTableInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont, resolveColorScheme } from '../utils/themeUtils.js';
+import { createBackgroundLayer } from './captionUtils.js';
+
+export function dataTable(input: DataTableInput, context: TemplateContext): Layer[] {
+  const { title, headers, rows, align, colorScheme } = input;
+  const { theme } = context;
+
+  const colors = resolveColorScheme(context, colorScheme);
+  const titleFontSize = scaledFontSize(48, context, true);
+  const tableFontSize = scaledFontSize(28, context, false);
+
+  const layers: Layer[] = [
+    createBackgroundLayer(
+      'bg',
+      `linear-gradient(170deg, ${theme.colors.background} 0%, #0f1520 100%)`,
+    ),
+  ];
+
+  // Optional title above the table
+  if (title) {
+    layers.push({
+      type: 'text',
+      id: 'title',
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, 'title'),
+          fontWeight: 'bold',
+          color: theme.colors.text,
+          textAlign: 'center',
+          shadow: true,
+        },
+      },
+      position: { x: '50%', y: '10%', width: '80%', anchor: 'center' },
+      animation: { type: 'fadeIn', duration: 0.8 },
+    });
+  }
+
+  // Table layer
+  layers.push({
+    type: 'table',
+    id: 'table',
+    content: {
+      headers,
+      rows,
+      align,
+      style: {
+        headerBackground: colors.accent,
+        headerColor: colors.text,
+        cellBackground: 'rgba(255,255,255,0.05)',
+        cellColor: theme.colors.text,
+        borderColor: 'rgba(255,255,255,0.12)',
+        fontSize: tableFontSize,
+        fontFamily: getThemeFont(context, 'body'),
+        headerFontFamily: getThemeFont(context, 'title'),
+        borderRadius: 8,
+      },
+    },
+    position: {
+      x: '10%',
+      y: title ? '18%' : '8%',
+      width: '80%',
+      height: title ? '74%' : '84%',
+    },
+    animation: { type: 'fadeIn', duration: 1, delay: title ? 0.4 : 0 },
+  });
+
+  return layers;
+}

package/src/doc/templates/dateEvent.ts

@@ -13,6 +13,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { DateEventInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
 
 const MOOD_COLORS = {
@@ -60,6 +61,7 @@ export function dateEvent(input: DateEventInput, context: TemplateContext): Laye
       text: date,
       style: {
         fontSize: dateFontSize,
+        fontFamily: getThemeFont(context, 'title'),
         fontWeight: 'bold',
         color: colors.date,
         shadow: !!accentImage,
@@ -81,6 +83,7 @@ export function dateEvent(input: DateEventInput, context: TemplateContext): Laye
       text: description,
       style: {
         fontSize: descFontSize,
+        fontFamily: getThemeFont(context, 'body'),
         color: colors.text,
         textAlign: 'center',
         lineHeight: 1.8,
@@ -105,6 +108,7 @@ export function dateEvent(input: DateEventInput, context: TemplateContext): Laye
         text: footer,
         style: {
           fontSize: footerFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.textMuted,
           shadow: !!accentImage,
         },

package/src/doc/templates/definitionCard.ts

@@ -11,7 +11,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { DefinitionCardInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { resolveColorScheme } from '../utils/themeUtils.js';
+import { resolveColorScheme, getThemeFont } from '../utils/themeUtils.js';
 import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
 import { createBackgroundLayer } from './captionUtils.js';
 
@@ -47,6 +47,7 @@ export function definitionCard(input: DefinitionCardInput, context: TemplateCont
       text: term,
       style: {
         fontSize: termFontSize,
+        fontFamily: getThemeFont(context, 'title'),
         fontWeight: 'bold',
         color: colors.text,
         textAlign: 'center',
@@ -86,6 +87,7 @@ export function definitionCard(input: DefinitionCardInput, context: TemplateCont
       text: definition,
       style: {
         fontSize: defFontSize,
+        fontFamily: getThemeFont(context, 'body'),
         color: theme.colors.text,
         textAlign: 'center',
         lineHeight: 1.6,
@@ -111,6 +113,7 @@ export function definitionCard(input: DefinitionCardInput, context: TemplateCont
         text: origin,
         style: {
           fontSize: originFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.textMuted,
           textAlign: 'center',
           shadow: !!accentImage,

package/src/doc/templates/factCard.ts

@@ -13,6 +13,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { FactCardInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
 import { createBackgroundLayer } from './captionUtils.js';
 
@@ -48,6 +49,7 @@ export function factCard(input: FactCardInput, context: TemplateContext): Layer[
       text: fact,
       style: {
         fontSize: factFontSize,
+        fontFamily: getThemeFont(context, 'title'),
         fontWeight: 'bold',
         color: theme.colors.text,
         textAlign: 'center',
@@ -72,6 +74,7 @@ export function factCard(input: FactCardInput, context: TemplateContext): Layer[
       text: explanation,
       style: {
         fontSize: explainFontSize,
+        fontFamily: getThemeFont(context, 'body'),
         color: theme.colors.textMuted,
         textAlign: 'center',
         lineHeight: 1.5,
@@ -96,6 +99,7 @@ export function factCard(input: FactCardInput, context: TemplateContext): Layer[
         text: source,
         style: {
           fontSize: sourceFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.textMuted,
           textAlign: 'center',
           shadow: !!accentImage,

package/src/doc/templates/fullBleedQuote.ts

@@ -11,7 +11,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { FullBleedQuoteInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { resolveColorScheme } from '../utils/themeUtils.js';
+import { resolveColorScheme, getThemeFont } from '../utils/themeUtils.js';
 
 export function fullBleedQuote(input: FullBleedQuoteInput, context: TemplateContext): Layer[] {
   const { text, colorScheme = 'blue' } = input;
@@ -40,6 +40,7 @@ export function fullBleedQuote(input: FullBleedQuoteInput, context: TemplateCont
         text,
         style: {
           fontSize: textFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           fontWeight: 'bold',
           color: colors.text,
           textAlign: 'center',

package/src/doc/templates/imageWithCaption.ts

@@ -11,6 +11,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { ImageWithCaptionInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 import { cleanCaption } from './captionUtils.js';
 import { mapAmbientMotion } from './accentImage.js';
 
@@ -80,6 +81,7 @@ export function imageWithCaption(input: ImageWithCaptionInput, context: Template
         text: caption,
         style: {
           fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           fontWeight: 'bold',
           color: theme.colors.text,
           textAlign: 'center',
@@ -104,6 +106,7 @@ export function imageWithCaption(input: ImageWithCaptionInput, context: Template
           text: subtitle,
           style: {
             fontSize: subtitleFontSize,
+            fontFamily: getThemeFont(context, 'body'),
             color: theme.colors.textMuted,
             textAlign: 'center',
             lineHeight: 1.5,
@@ -148,6 +151,7 @@ export function imageWithCaption(input: ImageWithCaptionInput, context: Template
         text: caption,
         style: {
           fontSize: captionFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.text,
           textAlign: 'center',
           shadow: true,

package/src/doc/templates/index.ts

@@ -44,6 +44,7 @@ import { comparisonBar } from './comparisonBar.js';
 import { pullQuote } from './pullQuote.js';
 import { videoWithCaption } from './videoWithCaption.js';
 import { videoPullQuote } from './videoPullQuote.js';
+import { dataTable } from './dataTable.js';
 
 /**
  * Registry mapping template names to their implementation functions.
@@ -68,6 +69,7 @@ export const templateRegistry: TemplateRegistry = {
   pullQuote,
   videoWithCaption,
   videoPullQuote,
+  dataTable,
 };
 
 /**
@@ -565,6 +567,7 @@ export { comparisonBar } from './comparisonBar.js';
 export { pullQuote } from './pullQuote.js';
 export { videoWithCaption } from './videoWithCaption.js';
 export { videoPullQuote } from './videoPullQuote.js';
+export { dataTable } from './dataTable.js';
 
 // Re-export accent image utilities
 export { getAccentLayout, createAccentLayers, adjustY, DEFAULT_LAYOUT } from './accentImage.js';

package/src/doc/templates/listBlock.ts

@@ -11,6 +11,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { ListBlockInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
 
 export function listBlock(input: ListBlockInput, context: TemplateContext): Layer[] {
@@ -51,6 +52,7 @@ export function listBlock(input: ListBlockInput, context: TemplateContext): Laye
         text: title,
         style: {
           fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           fontWeight: 'bold',
           color: theme.colors.text,
           textAlign: 'center',
@@ -82,6 +84,7 @@ export function listBlock(input: ListBlockInput, context: TemplateContext): Laye
         text: itemText,
         style: {
           fontSize: itemFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.text,
           lineHeight: 1.4,
           shadow: !!accentImage,

package/src/doc/templates/mapBlock.ts

@@ -15,6 +15,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { MapBlockInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 import { mapAmbientMotion } from './accentImage.js';
 
 export function mapBlock(input: MapBlockInput, context: TemplateContext): Layer[] {
@@ -76,6 +77,7 @@ export function mapBlock(input: MapBlockInput, context: TemplateContext): Layer[
         text: title,
         style: {
           fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           fontWeight: 'bold',
           color: theme.colors.text,
           textAlign: 'center',
@@ -113,6 +115,7 @@ export function mapBlock(input: MapBlockInput, context: TemplateContext): Layer[
         text: caption,
         style: {
           fontSize: captionFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.text,
           textAlign: 'center',
           shadow: true,

package/src/doc/templates/photoGrid.ts

@@ -18,6 +18,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { PhotoGridInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 import { cleanCaption } from './captionUtils.js';
 
 /** Gap between images as percentage */
@@ -72,6 +73,7 @@ export function photoGrid(input: PhotoGridInput, context: TemplateContext): Laye
           text: img.alt,
           style: {
             fontSize: altFontSize,
+            fontFamily: getThemeFont(context, 'body'),
             color: theme.colors.textMuted,
             textAlign: 'center' as const,
           },
@@ -126,6 +128,7 @@ export function photoGrid(input: PhotoGridInput, context: TemplateContext): Laye
         text: caption,
         style: {
           fontSize: captionFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.text,
           textAlign: 'center',
           shadow: true,

package/src/doc/templates/pullQuote.ts

@@ -11,6 +11,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { PullQuoteInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 
 export function pullQuote(input: PullQuoteInput, context: TemplateContext): Layer[] {
   const { text, attribution, backgroundImage, ambientMotion } = input;
@@ -57,6 +58,7 @@ export function pullQuote(input: PullQuoteInput, context: TemplateContext): Laye
         text: '\u201C',
         style: {
           fontSize: decoFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           color: 'rgba(255, 255, 255, 0.08)',
           textAlign: 'center',
         },
@@ -76,6 +78,7 @@ export function pullQuote(input: PullQuoteInput, context: TemplateContext): Laye
         text,
         style: {
           fontSize: quoteFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           color: '#ffffff',
           textAlign: 'center',
           lineHeight: 1.5,
@@ -101,6 +104,7 @@ export function pullQuote(input: PullQuoteInput, context: TemplateContext): Laye
         text: `\u2014 ${attribution}`,
         style: {
           fontSize: attrFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: 'rgba(255, 255, 255, 0.7)',
           textAlign: 'center',
           shadow: true,

package/src/doc/templates/quoteBlock.ts

@@ -13,6 +13,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { QuoteBlockInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
 import { createBackgroundLayer } from './captionUtils.js';
 
@@ -50,6 +51,7 @@ export function quoteBlock(input: QuoteBlockInput, context: TemplateContext): La
       text: '\u201C',
       style: {
         fontSize: decorativeQuoteFontSize,
+        fontFamily: getThemeFont(context, 'title'),
         color: 'rgba(255, 255, 255, 0.06)',
         textAlign: 'center',
       },
@@ -70,6 +72,7 @@ export function quoteBlock(input: QuoteBlockInput, context: TemplateContext): La
       text: quote,
       style: {
         fontSize: quoteFontSize,
+        fontFamily: getThemeFont(context, 'title'),
         color: theme.colors.text,
         textAlign: 'center',
         lineHeight: 1.6,
@@ -94,6 +97,7 @@ export function quoteBlock(input: QuoteBlockInput, context: TemplateContext): La
         text: `— ${attribution}`,
         style: {
           fontSize: attrFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.textMuted,
           textAlign: 'center',
           shadow: !!accentImage,

package/src/doc/templates/sectionHeader.ts

@@ -12,10 +12,10 @@
 import type { Layer, AnimationType } from '../../schemas/Doc.js';
 import type { SectionHeaderInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { resolveColorScheme } from '../utils/themeUtils.js';
+import { resolveColorScheme, getThemeFont } from '../utils/themeUtils.js';
 
 export function sectionHeader(input: SectionHeaderInput, context: TemplateContext): Layer[] {
-  const { title, colorScheme = 'blue', imageSrc, imageAlt, ambientMotion } = input;
+  const { title = '', colorScheme = 'blue', imageSrc, imageAlt, ambientMotion } = input;
   const { layout } = context;
   const colors = resolveColorScheme(context, colorScheme);
 
@@ -86,6 +86,7 @@ export function sectionHeader(input: SectionHeaderInput, context: TemplateContex
       text: title,
       style: {
         fontSize: titleFontSize,
+        fontFamily: getThemeFont(context, 'title'),
         fontWeight: 'bold',
         color: imageSrc ? '#ffffff' : colors.text,
         textAlign: 'center',

package/src/doc/templates/statHighlight.ts

@@ -13,7 +13,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { StatHighlightInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { resolveColorScheme } from '../utils/themeUtils.js';
+import { resolveColorScheme, getThemeFont } from '../utils/themeUtils.js';
 import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
 import { createBackgroundLayer } from './captionUtils.js';
 
@@ -50,6 +50,7 @@ export function statHighlight(input: StatHighlightInput, context: TemplateContex
       text: stat,
       style: {
         fontSize: statFontSize,
+        fontFamily: getThemeFont(context, 'title'),
         fontWeight: 'bold',
         color: colors.text,
         shadow: !!accentImage,
@@ -71,6 +72,7 @@ export function statHighlight(input: StatHighlightInput, context: TemplateContex
       text: description,
       style: {
         fontSize: descFontSize,
+        fontFamily: getThemeFont(context, 'body'),
         color: theme.colors.textMuted,
         textAlign: 'center',
         lineHeight: 1.6,
@@ -95,6 +97,7 @@ export function statHighlight(input: StatHighlightInput, context: TemplateContex
         text: detail,
         style: {
           fontSize: detailFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: colors.accent,
           textAlign: 'center',
           shadow: !!accentImage,

package/src/doc/templates/titleBlock.ts

@@ -11,6 +11,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { TitleBlockInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 
 export function titleBlock(input: TitleBlockInput, context: TemplateContext): Layer[] {
   const { title, subtitle, backgroundColor } = input;
@@ -56,6 +57,7 @@ export function titleBlock(input: TitleBlockInput, context: TemplateContext): La
         text: title,
         style: {
           fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           fontWeight: 'bold',
           color: theme.colors.text,
           textAlign: 'center',
@@ -81,6 +83,7 @@ export function titleBlock(input: TitleBlockInput, context: TemplateContext): La
         text: subtitle,
         style: {
           fontSize: subtitleFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.textMuted,
           textAlign: 'center',
           lineHeight: 1.5,

package/src/doc/templates/twoColumn.ts

@@ -13,7 +13,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { TwoColumnInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { resolveColorScheme } from '../utils/themeUtils.js';
+import { resolveColorScheme, getThemeFont } from '../utils/themeUtils.js';
 import { getTwoColumnPositions } from '../../schemas/LayoutStrategy.js';
 
 export function twoColumn(input: TwoColumnInput, context: TemplateContext): Layer[] {
@@ -87,6 +87,7 @@ export function twoColumn(input: TwoColumnInput, context: TemplateContext): Laye
         text: header,
         style: {
           fontSize: headerFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           color: theme.colors.textMuted,
           textAlign: 'center',
         },
@@ -126,6 +127,7 @@ export function twoColumn(input: TwoColumnInput, context: TemplateContext): Laye
       text: left.label,
       style: {
         fontSize: labelFontSize,
+        fontFamily: getThemeFont(context, 'body'),
         fontWeight: 'bold',
         color: leftColors.text,
         textAlign: 'center',
@@ -149,6 +151,7 @@ export function twoColumn(input: TwoColumnInput, context: TemplateContext): Laye
         text: left.sublabel,
         style: {
           fontSize: sublabelFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.textMuted,
           textAlign: 'center',
           lineHeight: 1.4,
@@ -176,6 +179,7 @@ export function twoColumn(input: TwoColumnInput, context: TemplateContext): Laye
       text: connectorSymbol,
       style: {
         fontSize: connectorFontSize,
+        fontFamily: getThemeFont(context, 'title'),
         fontWeight: 'bold',
         color: 'rgba(255, 255, 255, 0.6)',
         textAlign: 'center',
@@ -197,6 +201,7 @@ export function twoColumn(input: TwoColumnInput, context: TemplateContext): Laye
       text: right.label,
       style: {
         fontSize: labelFontSize,
+        fontFamily: getThemeFont(context, 'body'),
         fontWeight: 'bold',
         color: rightColors.text,
         textAlign: 'center',
@@ -220,6 +225,7 @@ export function twoColumn(input: TwoColumnInput, context: TemplateContext): Laye
         text: right.sublabel,
         style: {
           fontSize: sublabelFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.textMuted,
           textAlign: 'center',
           lineHeight: 1.4,

package/src/doc/templates/videoPullQuote.ts

@@ -18,6 +18,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { VideoPullQuoteInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 
 export function videoPullQuote(input: VideoPullQuoteInput, context: TemplateContext): Layer[] {
   const { text, attribution, backgroundVideo } = input;
@@ -66,6 +67,7 @@ export function videoPullQuote(input: VideoPullQuoteInput, context: TemplateCont
         text: '\u201C',
         style: {
           fontSize: decoFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           color: 'rgba(255, 255, 255, 0.08)',
           textAlign: 'center',
         },
@@ -85,6 +87,7 @@ export function videoPullQuote(input: VideoPullQuoteInput, context: TemplateCont
         text,
         style: {
           fontSize: quoteFontSize,
+          fontFamily: getThemeFont(context, 'title'),
           color: '#ffffff',
           textAlign: 'center',
           lineHeight: 1.5,
@@ -110,6 +113,7 @@ export function videoPullQuote(input: VideoPullQuoteInput, context: TemplateCont
         text: `\u2014 ${attribution}`,
         style: {
           fontSize: attrFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: 'rgba(255, 255, 255, 0.7)',
           textAlign: 'center',
           shadow: true,

package/src/doc/templates/videoWithCaption.ts

@@ -18,6 +18,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { VideoWithCaptionInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont } from '../utils/themeUtils.js';
 import { cleanCaption } from './captionUtils.js';
 
 export function videoWithCaption(input: VideoWithCaptionInput, context: TemplateContext): Layer[] {
@@ -86,6 +87,7 @@ export function videoWithCaption(input: VideoWithCaptionInput, context: Template
         text: caption,
         style: {
           fontSize: captionFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.text,
           textAlign: 'center',
           shadow: true,
@@ -110,6 +112,7 @@ export function videoWithCaption(input: VideoWithCaptionInput, context: Template
         text: videoCredit,
         style: {
           fontSize: creditFontSize,
+          fontFamily: getThemeFont(context, 'body'),
           color: 'rgba(255, 255, 255, 0.5)',
           textAlign: 'right',
         },

package/src/doc/utils/themeUtils.ts

@@ -37,6 +37,35 @@ export function resolveColorScheme(
   return FALLBACK_COLOR_SCHEME;
 }
 
+// ============================================
+// Font Family Resolution
+// ============================================
+
+/** Safe system font fallbacks. */
+const FALLBACK_BODY = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+const FALLBACK_TITLE = 'Georgia, "Times New Roman", serif';
+const FALLBACK_MONO = 'Consolas, "Courier New", monospace';
+
+/**
+ * Get the theme font family for a given role.
+ * Templates call this to set `fontFamily` on text layers.
+ *
+ * @param context Template context (includes theme with typography settings)
+ * @param role    'title' for headings, 'body' for descriptions, 'mono' for code
+ * @returns A CSS font-family string with the theme's font and safe fallbacks
+ */
+export function getThemeFont(context: TemplateContext, role: 'title' | 'body' | 'mono'): string {
+  const { typography } = context.theme;
+  switch (role) {
+    case 'title':
+      return typography.titleFontFamily || FALLBACK_TITLE;
+    case 'body':
+      return typography.bodyFontFamily || FALLBACK_BODY;
+    case 'mono':
+      return typography.monoFontFamily || FALLBACK_MONO;
+  }
+}
+
 // ============================================
 // Font Sizing
 // ============================================