Files
hyperframes/docs/studio-app/brand-kits.mdx
Ular Kimsanov 7224812143 docs(studio-app): show the app working, three new pages, today's UI (#6223)
* docs(studio-app): show the app working, three new pages, today's UI

* docs(studio-app): correct what the app does today (fact-checked against both repos' main)

Script: audio goes to HeyGen to transcribe; cuts wait in Pending video edits until Send; today's toolbar; suggested
cuts. Continue from Claude Code: Mac only, inside an agent session, catch-up after that hand-off, real output.
GitHub Copilot added. 4K price, 10-minute sign-in, Auto as the default, real sign-in errors, motion-guide limit,
the right-panel row. Looping clips pause and respect reduced motion.

* docs(studio-app): hold the Share page until Share launches (desktop-share is at 0%)

* docs(studio-app): Home screenshot from a regular account on b467 (Make, Reference, Script)

* Revert "docs(studio-app): hold the Share page until Share launches (desktop-share is at 0%)"

This reverts commit 201070ac7b7a551c5515c1a770be4a5e8ab36ab9.

* docs(studio-app): Export link label names its page

* docs(studio-app): where-is-it clips re-recorded on a regular account, b467

Staff-only items are gone (Pit Crew Academy, View as a user, the HyperFrames agent, Learn). # opens tools by typing;
the tools list and the @ menu match a regular account; the import clip ends before the folder list.

* docs(studio-app): new Script clip on a regular account: Cut, Pending video edits, Send 1 edit, 0:22 to 0:17

* docs(studio-app): Draw clip re-recorded on a regular account (Send 1 edit to Claude Code, 1 min 52 s edit)

* docs(studio-app): Export clip re-recorded on a regular account (1080p, 16 s); cloud rendering as the app shows it

* docs(studio-app): Video 1 change-a-clip demo re-recorded on a regular account (Up to $1.09 shown before Make)

* docs(studio-app): Share clips re-recorded on a regular account; the page mentions HeyGen's Checking step

* docs(studio-app): first-video demo re-recorded on a regular account (question cards, Send answer, 29 min storyboard, 10 min build)

* docs(studio-app): Reference page follows today's flow (the app reads the video, then Copy editing style or Video brief; What to swap); demo re-recorded on a regular account

* docs(studio-app): autoplaying demos start muted so browsers play them; Automatic updates in troubleshooting

* docs(studio-app): update home.jpg in place instead of replacing it

* docs(snippets): DocsVideo stops an autoplaying loop when Reduce Motion turns on mid-visit; play loads it again

* docs(studio-app): motion guides need the person's picture; drop a pending cut by deleting its row; remove two unused stills
2026-10-24 21:37:57 +00:00

73 lines
3.5 KiB
Plaintext

---
title: "Use your brand kit"
sidebarTitle: "Brand kits"
description: "Make every video in your brand: build a brand kit from your website or your own files, then use it for a project in the HyperFrames Studio app."
---
import { HoverVideo } from "/snippets/hover-video.jsx";
A **brand kit** holds your colors, fonts, logos and files. Pick one for a project and the agent builds every video
in it: your main logo leads titles and end cards, and your colors and text styles set the look.
Brand kits need you to be signed in. If the app says **Sign in to use brand kits.**, sign in first. If it says brand
kits aren't switched on for your workspace yet, your workspace doesn't have the feature.
## Make a kit
<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/brand-kits-nav-v2.mp4" poster="/public/images/studio-app/spots/brand-kits-nav-v2.jpg" hasAudio={false} label="Brand kits in the sidebar" />
Open **Brand kits** in the sidebar, under **Home**.
<Tabs>
<Tab title="From your website">
On the **New brand kit** card, type your site, such as `yoursite.com`, and choose **Scan my site**. The app reads
your colors, fonts, logos and screenshots from it.
</Tab>
<Tab title="From your own files">
From a project's brand kit menu, choose **New kit from your own files**. You can also drop files into a chat and
ask Framey to put them in a kit.
</Tab>
</Tabs>
The agent can make a kit from a site too. It shows one approval card before it changes a kit.
## What a kit holds
| Part | What it does |
| --- | --- |
| **Colors** | Each has a role: Main, Secondary, Accent, Text, Background or Neutral |
| **Logos** | The **Main logo** leads every title and end card. Add a full logo or a symbol |
| **Text styles and fonts** | The type the video uses, with your font files |
| **Files** | Screenshots, product images and audio the agent can use |
| **Rules** | Plain-language rules, plus a brand guide PDF if you have one |
To change a kit, open it and choose **Edit**: add a color, a text style, a logo or a rule, or remove what you don't
want. Choose **Done** when you finish. The next website scan keeps what you added.
Kit files can be images (PNG, JPEG, WebP, AVIF, GIF, ICO, SVG), audio (MP3, M4A, AAC, OGG, WAV) or fonts (WOFF2, WOFF,
TTF, OTF).
## Use a kit for a project
<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/brandkit-chip-v2.mp4" poster="/public/images/studio-app/spots/brandkit-chip-v2.jpg" hasAudio={false} label="The brand kit menu in a project" />
Each project keeps its own kit. Open the brand kit menu in the project, **Brand kit for this project**, and pick a kit,
or **No brand kit** to let Framey choose plain styles. A project that never picked one uses your workspace's default
kit.
From a kit's page you can also choose **Use this kit**, or start **New project with this kit**.
The agent reads the kit with every message, and the app copies the kit's files into the project's
`assets/brand-kit` folder, so the video still renders the same anywhere.
## Shared kits
Kits other people share with you appear under **Shared with you**. You can use them but not change them. Only a
workspace owner or admin can change the workspace's brand settings.
## Related topics
- [Make your first video in the Studio app](/studio-app/first-video)
- [Edit a video with the agent](/studio-app/edit-with-the-agent)
- [Brand, templates and storyboards](/prompting/design-systems)