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

[Hamzaa6296]

Summary

Closes / contributes to #340

Adds a foundational Design System layer to Hyperframes so creators can maintain
consistent brand identity across multiple video compositions without repeating styles.

Changes

• templates/theme.json , global design tokens (colors, typography, spacing)
• templates/components/LowerThird.html , reusable branded lower-third overlay
• templates/components/Outro.html , reusable branded end card
• docs/design-system.md , documentation for the design system

How it works

• Theme values are declared once in theme.json
• CSS variables (--hf-color-accent, --hf-font-family, etc.) are injected at render
• Components in templates/components/ can be copied into any composition
• Style inheritance: theme.json → composition → inline

Testing

1. npx hyperframes init my-video
2. Copy theme.json and a component into the project
3. Run npx hyperframes preview , tokens should resolve correctly

[jrusso1020]

Thanks for the contribution @Hamzaa6296 !

We are thinking about this a bit more holistically internally, we will have some more details in the coming days how we are thinking about this long term

will leave this PR and the issue open for now while we discuss

[qodo-ai-reviewer]

Hi, LowerThird.html uses data-bind="title"/"subtitle" with empty <span> nodes, but nothing in the codebase processes data-bind (or data-title/data-subtitle), so the component displays no text unless the user adds custom JS.

Severity: action required | Category: correctness

How to fix: Remove binding or implement it

Agent prompt to fix - you can give this to your LLM of choice:

Issue description

LowerThird’s text nodes are empty and rely on data-bind/data-title attributes that the framework does not implement.

Issue Context

• The component comment instructs users to fill data-title/data-subtitle.
• The spans are empty and only have data-bind.

Fix Focus Areas

• templates/components/LowerThird.html[1-44]
• packages/core/src/runtime/init.ts (if binding should be runtime)
• packages/core/src/compiler/* (if binding should be compile-time)

Notes

Choose one:

1. Make the component self-contained by placing default text content inside the spans (no binding).
2. Implement a binding convention (e.g., set span.textContent from parent dataset keys) and document it clearly.

We noticed a couple of other issues in this PR as well - happy to share if helpful.

---

Found by Qodo code review. FYI, Qodo is free for open-source.

[qodo-ai-reviewer]

Hi, The fallback in font-family: var(--hf-font-family, "Inter, sans-serif") quotes the entire comma-separated list, making it a single invalid font name and preventing a sans-serif fallback.

Severity: remediation recommended | Category: correctness

How to fix: Fix font-family fallback syntax

Agent prompt to fix - you can give this to your LLM of choice:

Issue description

The font-family fallback is incorrectly quoted, so the generic sans-serif fallback won’t apply.

Fix Focus Areas

• templates/components/LowerThird.html[26-31]
• templates/components/Outro.html[20-26]

Suggested change

Use an unquoted list:

• font-family: var(--hf-font-family, Inter, sans-serif);
  Or quote only the named font:
• font-family: var(--hf-font-family, "Inter"), sans-serif;

We noticed a couple of other issues in this PR as well - happy to share if helpful.

---

Found by Qodo code review

[Hamzaa6296]

Hi, The fallback in font-family: var(--hf-font-family, "Inter, sans-serif") quotes the entire comma-separated list, making it a single invalid font name and preventing a sans-serif fallback.

Severity: remediation recommended | Category: correctness

How to fix: Fix font-family fallback syntax

Agent prompt to fix - you can give this to your LLM of choice:

Issue description

The font-family fallback is incorrectly quoted, so the generic sans-serif fallback won’t apply.

Fix Focus Areas

• templates/components/LowerThird.html[26-31]
• templates/components/Outro.html[20-26]

Suggested change

Use an unquoted list:

• font-family: var(--hf-font-family, Inter, sans-serif);
  Or quote only the named font:
• font-family: var(--hf-font-family, "Inter"), sans-serif;

We noticed a couple of other issues in this PR as well - happy to share if helpful.

Found by Qodo code review

[Hamzaa6296]

Thanks for the review! Both issues have been fixed in the latest commit:

Replaced data-bind with static default text content, component is now fully self-contained
Fixed font-family fallback syntax to var(--hf-font-family, "Inter"), sans-serif in both LowerThird.html and Outro.html