feat: add design system , theme.json, reusable components, docs

docs/design-system.md

@@ -0,0 +1,29 @@
+# Design System & Reusable Components
+
+Hyperframes supports a global design system via `theme.json` and reusable HTML components.
+
+## 1. Global Theme (`templates/theme.json`)
+
+Define your brand's colors, typography, and spacing once:
+
+```json
+{
+  "colors": { "accent": "#FF5733" },
+  "typography": { "heading": { "fontSize": "72px" } }
+}
+```
+
+All CSS variables are auto-injected at render time with the prefix `--hf-*`:
+- `--hf-color-accent`
+- `--hf-font-family`
+- `--hf-heading-size`
+- `--hf-spacing-margin`
+
+## 2. Reusable Components (`templates/components/`)
+
+Pre-built components live in `templates/components/`. Copy any into your composition:
+
+- `LowerThird.html` — name + title overlay
+- `Outro.html` — branded end card
+
+## 3. Style Inheritance Order

templates/components/LowerThird.html

@@ -0,0 +1,44 @@
+<!--
+  @component LowerThird
+  @props title, subtitle
+  @description Reusable lower-third name/title overlay.
+  Inherits colors and typography from theme.json.
+  Usage: copy this block into your composition and fill in data-title / data-subtitle.
+-->
+<div
+  id="lower-third"
+  class="clip"
+  data-start="2"
+  data-duration="4"
+  data-track-index="3"
+  style="
+    position: absolute;
+    bottom: var(--hf-spacing-margin, 48px);
+    left: var(--hf-spacing-margin, 48px);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  "
+>
+  <span
+    style="
+      font-family: var(--hf-font-family, &quot;Inter&quot;), sans-serif;
+      font-size: var(--hf-heading-size, 48px);
+      font-weight: 700;
+      color: var(--hf-color-primary, #ffffff);
+    "
+    data-bind="title"
+    >Your Name</span
+  >
+
+  <span
+    style="
+      font-family: var(--hf-font-family, &quot;Inter&quot;), sans-serif;
+      font-size: var(--hf-body-size, 28px);
+      font-weight: 400;
+      color: var(--hf-color-accent, #ff5733);
+    "
+    data-bind="subtitle"
+    >Your Title</span
+  >
+</div>

templates/components/Outro.html

@@ -0,0 +1,30 @@
+<!--
+  @component Outro
+  @description Reusable branded end card. Inherits from theme.json.
+-->
+<div
+  id="outro"
+  class="clip"
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+  style="
+    width: 100%;
+    height: 100%;
+    background: var(--hf-color-background, #0f0f0f);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  "
+>
+  <h1
+    style="
+      font-family: var(--hf-font-family, &quot;Inter&quot;), sans-serif;
+      font-size: var(--hf-heading-size, 72px);
+      font-weight: 700;
+      color: var(--hf-color-primary, #ffffff);
+    "
+  >
+    Thanks for watching.
+  </h1>
+</div>

templates/theme.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schemas/theme.json",
+  "name": "default",
+  "version": "1.0.0",
+  "colors": {
+    "background": "#0F0F0F",
+    "primary": "#FFFFFF",
+    "accent": "#FF5733",
+    "muted": "#888888"
+  },
+  "typography": {
+    "fontFamily": "Inter, sans-serif",
+    "heading": {
+      "fontSize": "72px",
+      "fontWeight": "700",
+      "lineHeight": "1.1"
+    },
+    "body": {
+      "fontSize": "32px",
+      "fontWeight": "400",
+      "lineHeight": "1.5"
+    },
+    "caption": {
+      "fontSize": "24px",
+      "fontWeight": "400"
+    }
+  },
+  "spacing": {
+    "margin": "48px",
+    "gap": "24px",
+    "padding": "32px"
+  },
+  "composition": {
+    "width": 1920,
+    "height": 1080
+  }
+}