Skip to content

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

Open
Hamzaa6296 wants to merge 1 commit intoheygen-com:mainfrom
Hamzaa6296:feature/design-system-support
Open

feat: add design system , theme.json, reusable components, docs#347
Hamzaa6296 wants to merge 1 commit intoheygen-com:mainfrom
Hamzaa6296:feature/design-system-support

Conversation

@Hamzaa6296
Copy link
Copy Markdown

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

Adds theme.json global tokens, reusable LowerThird and Outro components,
and documentation for style inheritance. Addresses issue heygen-com#340.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant