Copy these system instructions to bootstrap specialized A.I. agents (in ChatGPT, Claude, or Gemini) from the very beginning of your conversation. These prompts contain all constraints for our brands and templates.

Animate Your Designs Programmatically

Convert the PNG slides you download from Design Studio into MP4 videos using **Remotion** (React Video Framework). Here is a standard, working boilerplate component showing how to overlay lofi background music, sync voiceover audio, apply spring entrance scales, and render a linear progress bar.

Boilerplate React Component (`Composition.tsx`):

import { AbsoluteFill, Img, Audio, spring, interpolate, useCurrentFrame, useVideoConfig, staticFile } from 'remotion';

export const ShortVideo = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  // Smooth entrance spring
  const entrance = spring({ frame, fps, config: { damping: 14 } });
  const scale = interpolate(entrance, [0, 1], [0.9, 1]);
  const opacity = interpolate(entrance, [0, 1], [0, 1]);

  // Linear progress bar width
  const progress = frame / durationInFrames;
  const progressBarWidth = interpolate(progress, [0, 1], [0, 100]);

  return (
    <AbsoluteFill style={{ backgroundColor: '#0b0f19', justifyContent: 'center', alignItems: 'center' }}>
      {/* Background Music */}
      <Audio src={staticFile("lofi_bg.mp3")} volume={0.12} loop />
      
      {/* Voiceover Audios */}
      <Audio src={staticFile("voiceover.mp3")} volume={0.9} />

      {/* Slide PNG exported from MaxiMind */}
      <div style={{ transform: `scale(${scale})`, opacity, width: 1080, height: 1350, boxShadow: '0 25px 50px rgba(0,0,0,0.6)' }}>
        <Img src={staticFile("slide_01.png")} style={{ width: '100%', height: '100%' }} />
      </div>

      {/* Bottom Progress Indicator */}
      <div style={{ position: 'absolute', bottom: 50, left: 80, right: 80, height: 8, backgroundColor: 'rgba(255,255,255,0.15)', borderRadius: 4, overflow: 'hidden' }}>
        <div style={{ width: `${progressBarWidth}%`, height: '100%', backgroundColor: '#6b46c1' }} />
      </div>
    </AbsoluteFill>
  );
};

Ready-to-Use Brand Styling & Design Prompts

Copy these style prompts directly into image generators or copywriting bots. They specify brand rules, fonts, and hex colors for **SVFF**, **Vietlingo**, and **Ledoly** so they design the assets correctly.

Style Guide: SVFF Brand. Accent color is Red (#CC0000), Dark shade is #8A1A1A. Logo is 'SVFF' or logo image at '/app/logos/svff.png'. Font: 'Be Vietnam Pro' (sans-serif) for Vietnamese and Playfair Display (serif) or italic styles for English translations. Use solid backgrounds or clean, modern radial textures.

Style Guide: Vietlingo Brand. Color scheme varies by region: North is Gold (#FCB500, dark #B07E00), Central is Purple (#734FBB, dark #4B2F86), South is Crimson (#C91D1D, dark #8A1414). Logo is 'vietlingo' with image at '/app/logos/vietlingo.png'. Add regional badge 'NORTH', 'CENTRAL', or 'SOUTH' in matching accent colors.

Style Guide: Ledoly Brand. Accent color is Slate Blue (#6F5FE6), Dark shade is #5B4FD6. Logo is 'Ledoly' with image at '/app/logos/ledoly.png'. Theme is optimized for American English learning, featuring white cards with clean borders on a soft blue background.