fix(slides): propagate design system CSS vars to all preview surfaces

templates/slides/.agents/skills/design-systems/SKILL.md

@@ -49,6 +49,15 @@ When generating slides, replace default values with design system tokens:
 - `#000000` background -> `colors.background`
 - `rgba(255,255,255,0.55)` -> `colors.textMuted`
 
+## Retroactive application
+
+To apply a design system to an existing deck:
+1. Call `apply-design-system --deckId=<id> --designSystemId=<id>`
+2. That is all. The renderer reads the linked design system and
+   applies all tokens via CSS custom properties automatically.
+Do not call get-deck or update-slide. Do not rewrite slide HTML.
+The CSS cascade handles token application instantly.
+
 ## Tweaks
 
 The Tweaks panel provides live CSS variable overrides:

templates/slides/.agents/skills/slide-editing/SKILL.md

@@ -23,24 +23,22 @@ All generated slides follow these conventions:
 
 | Element | Style |
 |---------|-------|
-| Background | `bg-[#000000]` (pure black) |
-| Font | `font-family: 'Poppins', sans-serif` on all text |
-| Section labels | `font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF` |
-| Headings | `font-size: 40px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -1px` |
-| Title slides | `font-size: 54px; font-weight: 900` with `justify-content: center` |
-| Bullet points | `●` character (8px, white), gap: 20px, font-size: 22px, color: rgba(255,255,255,0.85) |
+| Background | `var(--ds-bg)` (from the linked design system) |
+| Font | `font-family: var(--ds-heading-font), sans-serif` on all text |
+| Section labels | `font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--ds-accent)` |
+| Headings | `font-size: 40px; font-weight: var(--ds-heading-weight); color: var(--ds-text); line-height: 1.15; letter-spacing: -1px` |
+| Title slides | `font-size: 54px; font-weight: var(--ds-heading-weight)` with `justify-content: center` |
+| Bullet points | `●` character (8px, white), gap: 20px, font-size: 22px, color: var(--ds-text) |
 | Sub-bullets | `○` (open circle), padding-left: 36px |
-| Bold terms | `<strong style="font-weight: 800; color: #fff;">Term</strong>` + description in rgba(255,255,255,0.55) |
-| Accent color | `#00E5FF` (cyan) for section labels, emphasis, highlights |
+| Bold terms | `<strong style="font-weight: var(--ds-heading-weight); color: var(--ds-text);">Term</strong>` + description in var(--ds-text-muted) |
+| Accent color | `var(--ds-accent)` for section labels, emphasis, highlights |
 
 ## Updating a Slide
 
 To edit a slide's content:
 
-1. **Get the deck**: `pnpm action get-deck --id=<deckId>`
-2. **Parse the JSON**, find the slide by ID
-3. **Modify the content** HTML string
-4. **Update the deck** via `PUT /api/decks/:id` with the full updated deck JSON
+1. Use `pnpm action update-slide --deckId=<deckId> --slideId=<slideId> --find="<old text>" --replace="<new text>"` for surgical token edits
+2. Use `pnpm action update-slide --deckId=<deckId> --slideId=<slideId> --fullContent="<entire slide HTML>"` only for full slide rewrites
 
 ## Image Placeholders
 

templates/slides/app/components/deck/DeckCard.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import type { Deck } from "@/context/DeckContext";
 
+import type { DesignSystemData } from "../../../shared/api";
 import SlideRenderer from "./SlideRenderer";
 
 interface DeckCardProps {
@@ -27,6 +28,7 @@ interface DeckCardProps {
   onDuplicate: (id: string) => void;
   isDuplicating?: boolean;
   designSystemTitle?: string | null;
+  designSystem?: DesignSystemData;
 }
 
 export default function DeckCard({
@@ -36,6 +38,7 @@ export default function DeckCard({
   onDuplicate,
   isDuplicating = false,
   designSystemTitle,
+  designSystem,
 }: DeckCardProps) {
   const t = useT();
   const firstSlide = deck.slides?.[0];
@@ -96,6 +99,7 @@ export default function DeckCard({
               slide={firstSlide}
               className="rounded-none"
               aspectRatio={deck.aspectRatio}
+              designSystem={designSystem}
             />
           )}
           <div className="absolute inset-0 bg-gradient-to-t from-[hsl(240,5%,8%)] via-transparent to-transparent opacity-60" />

templates/slides/app/components/deck/SlideRenderer.tsx

@@ -13,6 +13,7 @@ import rehypeRaw from "rehype-raw";
 
 import { Skeleton } from "@/components/ui/skeleton";
 import type { Slide } from "@/context/DeckContext";
+import { DEFAULT_DESIGN_SYSTEM } from "@/hooks/use-deck-design-system";
 import { type AspectRatio, getAspectRatioDims } from "@/lib/aspect-ratios";
 import {
   sanitizeCssValue,
@@ -545,25 +546,26 @@ export function SlideInner({
     height: dims.height,
   };
 
-  const bg = slide.background || "bg-[#000000]";
+  const bg = slide.background || "var(--ds-bg, #000000)";
   const isGradientClass = bg.startsWith("bg-");
   const safeBackground = !isGradientClass ? sanitizeCssValue(bg) : null;
   const bgStyle = safeBackground ? { background: safeBackground } : undefined;
   const bgClass = isGradientClass ? bg : "";
   const isCentered = slide.layout === "title";
 
-  const dsStyle = designSystem
-    ? ({
-        "--ds-accent": designSystem.colors.accent,
-        "--ds-bg": designSystem.colors.background,
-        "--ds-text": designSystem.colors.text,
-        "--ds-text-muted": designSystem.colors.textMuted,
-        "--ds-heading-font": designSystem.typography.headingFont,
-        "--ds-body-font": designSystem.typography.bodyFont,
-        "--ds-primary": designSystem.colors.primary,
-        "--ds-radius": designSystem.borders.radius,
-      } as React.CSSProperties)
-    : {};
+  const ds = designSystem ?? DEFAULT_DESIGN_SYSTEM;
+  const dsStyle = {
+    "--ds-accent": ds.colors.accent,
+    "--ds-bg": ds.colors.background,
+    "--ds-text": ds.colors.text,
+    "--ds-text-muted": ds.colors.textMuted,
+    "--ds-primary": ds.colors.primary,
+    "--ds-heading-font": ds.typography.headingFont,
+    "--ds-body-font": ds.typography.bodyFont,
+    "--ds-heading-weight": String(ds.typography.headingWeight),
+    "--ds-body-weight": String(ds.typography.bodyWeight),
+    "--ds-radius": ds.borders.radius,
+  } as React.CSSProperties;
 
   // If slide has excalidraw data, render it as a static SVG thumbnail
   if (

templates/slides/app/components/editor/EditorSidebar.tsx

@@ -36,6 +36,8 @@ import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import { toast } from "@/hooks/use-toast";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 
+import type { DesignSystemData } from "../../../shared/api";
+
 interface EditorSidebarProps {
   slides: Slide[];
   activeSlideId: string;
@@ -49,6 +51,8 @@ interface EditorSidebarProps {
   slidePresence?: Map<string, CollabUser[]>;
   /** Deck aspect ratio (defaults to 16:9 when omitted) */
   aspectRatio?: AspectRatio;
+  /** Design system to forward to SlideRenderer for CSS custom properties */
+  designSystem?: DesignSystemData;
 }
 
 const MAX_SOURCE_CONTEXT_CHARS = 60_000;
@@ -161,6 +165,7 @@ function SortableSlideThumb({
   registerButtonRef,
   presenceUsers = [],
   aspectRatio,
+  designSystem,
 }: {
   slide: Slide;
   index: number;
@@ -171,6 +176,7 @@ function SortableSlideThumb({
   registerButtonRef: (slideId: string, node: HTMLButtonElement | null) => void;
   presenceUsers?: CollabUser[];
   aspectRatio?: AspectRatio;
+  designSystem?: DesignSystemData;
 }) {
   const t = useT();
   const {
@@ -242,7 +248,11 @@ function SortableSlideThumb({
                   : "rgba(255,255,255,0.06)",
             }}
           >
-            <SlideRenderer slide={slide} aspectRatio={aspectRatio} />
+            <SlideRenderer
+              slide={slide}
+              aspectRatio={aspectRatio}
+              designSystem={designSystem}
+            />
           </div>
         </div>
       </button>
@@ -543,6 +553,7 @@ export default function EditorSidebar({
   onAddEmptySlide,
   slidePresence,
   aspectRatio,
+  designSystem,
 }: EditorSidebarProps) {
   const t = useT();
   const activeIndex = slides.findIndex((s) => s.id === activeSlideId);
@@ -647,6 +658,7 @@ export default function EditorSidebar({
               registerButtonRef={registerSlideButton}
               presenceUsers={slidePresence?.get(slide.id) ?? []}
               aspectRatio={aspectRatio}
+              designSystem={designSystem}
             />
           ))}
         </SortableContext>

templates/slides/app/components/editor/HistoryPanel.tsx

@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { Slide } from "@/context/DeckContext";
+import { useDeckDesignSystem } from "@/hooks/use-deck-design-system";
 import {
   useDeckVersion,
   useDeckVersions,
@@ -85,6 +86,9 @@ export default function HistoryPanel({
 
   const versions = versionsQuery.data?.versions ?? [];
   const selectedVersion = versionQuery.data;
+  const { designSystem: versionDesignSystem } = useDeckDesignSystem(
+    selectedVersion?.designSystemId ?? null,
+  );
   const selectedSlides = useMemo(
     () =>
       (selectedVersion?.slides ?? []).map((slide) => ({
@@ -194,6 +198,7 @@ export default function HistoryPanel({
                             | undefined
                         }
                         className="border border-border bg-black"
+                        designSystem={versionDesignSystem}
                       />
                       <p className="mt-1.5 truncate text-[11px] text-muted-foreground">
                         {t("history.slideNumber", { number: index + 1 })}

templates/slides/app/components/presentation/PresentationView.tsx

@@ -20,11 +20,14 @@ import {
   resolveSlideAnimationElement,
 } from "@/lib/slide-animation-elements";
 
+import type { DesignSystemData } from "../../../shared/api";
+
 interface PresentationViewProps {
   slides: Slide[];
   deckId: string;
   startIndex?: number;
   aspectRatio?: AspectRatio;
+  designSystem?: DesignSystemData;
 }
 
 // ─── Element animation helpers ────────────────────────────────────────────────
@@ -153,6 +156,7 @@ export default function PresentationView({
   deckId,
   startIndex = 0,
   aspectRatio,
+  designSystem,
 }: PresentationViewProps) {
   const t = useT();
   const safeSlides = useMemo(
@@ -448,6 +452,7 @@ export default function PresentationView({
             slide={safeSlides[prevIndex]}
             thumbnail={false}
             aspectRatio={aspectRatio}
+            designSystem={designSystem}
           />
         </div>
       )}
@@ -462,6 +467,7 @@ export default function PresentationView({
           slide={displaySlide}
           thumbnail={false}
           aspectRatio={aspectRatio}
+          designSystem={designSystem}
         />
       </div>
 

templates/slides/app/pages/DeckEditor.tsx

@@ -908,6 +908,7 @@ export default function DeckEditor() {
                   }}
                   slidePresence={slidePresence}
                   aspectRatio={deck.aspectRatio}
+                  designSystem={designSystem}
                 />
               </DndContext>
             </div>

templates/slides/app/pages/Index.tsx

@@ -39,6 +39,7 @@ import {
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { useDecks } from "@/context/DeckContext";
 import { useAgentGenerating } from "@/hooks/use-agent-generating";
+import { mergeDesignSystemData } from "@/hooks/use-deck-design-system";
 import { useDesignSystems } from "@/hooks/use-design-systems";
 import { toast } from "@/hooks/use-toast";
 import { savePromptToComposerDraft } from "@/lib/composer-draft";
@@ -163,6 +164,19 @@ export default function Index() {
     () => new Map(designSystems.map((ds) => [ds.id, ds.title])),
     [designSystems],
   );
+  const designSystemById = useMemo(
+    () =>
+      new Map(
+        designSystems.flatMap((ds) => {
+          try {
+            return [[ds.id, mergeDesignSystemData(JSON.parse(ds.data))]];
+          } catch {
+            return [];
+          }
+        }),
+      ),
+    [designSystems],
+  );
   const deckFilter = searchParams.get("createdBy") === "me" ? "mine" : "all";
   const visibleDecks = useMemo(
     () =>
@@ -569,6 +583,7 @@ export default function Index() {
                       ? designSystemTitleById.get(deck.designSystemId)
                       : null
                   }
+                  designSystem={designSystemById.get(deck.designSystemId ?? "")}
                 />
               ))}
               {visibleDecks.length === 0 && (

templates/slides/app/pages/Presentation.tsx

@@ -5,6 +5,7 @@ import { useParams, Navigate, useSearchParams } from "react-router";
 import PresentationView from "@/components/presentation/PresentationView";
 import { useDecks } from "@/context/DeckContext";
 import type { Deck } from "@/context/DeckContext";
+import { useDeckDesignSystem } from "@/hooks/use-deck-design-system";
 
 export default function Presentation() {
   const { id } = useParams<{ id: string }>();
@@ -18,6 +19,8 @@ export default function Presentation() {
   const contextDeck = getDeck(id || "");
   const deck = contextDeck ?? fallbackDeck;
 
+  const { designSystem } = useDeckDesignSystem(deck?.designSystemId);
+
   useEffect(() => {
     if (!id || loading || contextDeck) {
       if (contextDeck) {
@@ -64,6 +67,7 @@ export default function Presentation() {
       deckId={id}
       startIndex={startSlide}
       aspectRatio={deck.aspectRatio}
+      designSystem={designSystem}
     />
   );
 }

templates/slides/app/pages/SharedPresentation.tsx

@@ -1,11 +1,15 @@
 import { appBasePath, useT } from "@agent-native/core/client";
 import type { SharedDeckResponse } from "@shared/api";
 import { IconAlertCircle } from "@tabler/icons-react";
-import { useState, useEffect } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { useParams } from "react-router";
 
 import PresentationView from "@/components/presentation/PresentationView";
 import type { Slide } from "@/context/DeckContext";
+import {
+  DEFAULT_DESIGN_SYSTEM,
+  mergeDesignSystemData,
+} from "@/hooks/use-deck-design-system";
 
 interface SharedPresentationProps {
   initialDeck?: SharedDeckResponse | null;
@@ -21,6 +25,14 @@ export default function SharedPresentation({
   const [deck, setDeck] = useState<SharedDeckResponse | null>(initialDeck);
   const [error, setError] = useState(initialError);
   const [loading, setLoading] = useState(!initialDeck && !initialError);
+  const designSystem = useMemo(() => {
+    if (!deck?.designSystemSnapshot) return DEFAULT_DESIGN_SYSTEM;
+    try {
+      return mergeDesignSystemData(JSON.parse(deck.designSystemSnapshot));
+    } catch {
+      return DEFAULT_DESIGN_SYSTEM;
+    }
+  }, [deck?.designSystemSnapshot]);
 
   useEffect(() => {
     if (!token) return;
@@ -87,6 +99,7 @@ export default function SharedPresentation({
       slides={slides}
       deckId={`__shared__/${token}`}
       aspectRatio={deck.aspectRatio}
+      designSystem={designSystem}
     />
   );
 }