christiansalazar-wk/ai-lore

HyperFrames Creative

Color Palettes

• Corporate / SaaS: deep navy + white + one accent (electric blue, teal, or green)
• Consumer / Lifestyle: warm neutrals + saturated accent
• Tech / Developer: dark background (#0d1117) + monochrome + neon accent
• Healthcare / Finance: muted blues + greens + white space
• Creative / Agency: bold contrasts, duotone, or gradient washes

:root {
  --bg:       #0d1117;
  --surface:  #161b22;
  --accent:   #58a6ff;
  --accent-2: #3fb950;
  --text:     #e6edf3;
  --muted:    #8b949e;
}

Typography

Style	Font	Usage
Display / Hero	Inter, Sora, Outfit	headlines, titles
Body	Inter, DM Sans	narration text, bullets
Code / Tech	JetBrains Mono, Fira Code	code overlays
Editorial	Playfair Display, Lora	documentary, explainer

.hero-title   { font-size: 96px; font-weight: 900; line-height: 1.05; }
.section-title{ font-size: 64px; font-weight: 700; line-height: 1.1; }
.body-lg      { font-size: 36px; font-weight: 400; line-height: 1.5; }
.caption      { font-size: 24px; font-weight: 400; line-height: 1.6; }

Narration Writing

1. One idea per sentence.
2. Active voice.
3. Narration leads visuals by 0.5s.
4. ~130–150 words per minute in TTS.
5. Insert [pause] or [pause 0.5s] for breath room.

<div data-hf-clip data-hf-tts="Welcome to the overview. [pause] Let's start with the dashboard."
     data-hf-tts-voice="en-US-neural-f1" data-hf-start="1s"></div>

Beat Sheet Template

00:00 — HOOK      Open with the problem or bold claim
00:05 — CONTEXT   Establish who this is for
00:15 — DEMO 1    First feature or proof point
00:30 — DEMO 2    Second feature, builds on first
00:45 — SOCIAL    Quote, stat, or proof
00:55 — CTA       Call to action, URL, next step
01:00 — END CARD  Logo hold, music fade

• Hook: fast cuts, < 2s per clip, music up
• Demo: 3–5s per clip, narration drives
• CTA: hold ≥ 3s

Visual Hierarchy Checklist

• One dominant element per scene
• Text contrast ratio ≥ 4.5:1
• Key message in first 3 seconds
• CTA has accent color
• Logo in opening and closing scenes