Video template brand themes: why your text color flips between them
Quick answer
Video template brand themes are the colour and type sets a single template swaps between so one layout can serve several brand contexts. Text colour flips unpredictably when an overlay reads a theme token that was defined against a background surface the overlay does not have.
Why do video template brand themes break on overlay text?
A brand theme usually defines text colour in relation to a surface. Dark text on the light surface, light text on the dark one. That pairing is the whole logic of the token, and it works everywhere a component sits on a panel or a card.
A lower third sitting directly over footage has no surface. It is floating on whatever the video happens to be showing at that second. When it reaches for the theme's text token, it inherits a decision that was made about a background that is not there.
Our design system team watched exactly this happen. A text overlay rendered black type in the light theme and white in a red theme, apparently at random, because the token it was reading assumed a surface underneath. The fix was to derive the overlay colour from the theme's primary colour instead of from its text token.
Which theme tokens are safe for video and which are not?
The split is about what each token assumes. This is the table I would put in front of anyone extending a brand system into motion.
| Token | What it assumes | Safe for overlay text in video? |
|---|---|---|
| Text on surface | A defined background panel sits behind the text | No, unless the component draws that panel itself |
| Primary | Nothing about what is behind it | Yes, and it is usually the right source |
| Border or divider | Contrast against a surface, not against footage | Only over a drawn surface |
| Semantic, such as error or success | A meaning, plus a surface | No, these carry state rather than brand |
| Neutral scale | A light or dark mode context | No, footage is neither |
The practical rule this produces: a video component either draws its own surface and may then use surface tokens, or it floats over footage and takes its colour from brand primaries. Mixing the two is where the random looking flips come from.
This is one of the concrete things people mean when they talk about what a motion design system is. The system is the set of decisions about which token a moving component is allowed to read.
What else makes brand colour look wrong in a video template?
Fading type in from full transparency is the other one, and it is a single line fix that explains a surprising amount of cheap looking motion.
A name label fading in from RGBA zero, zero, zero, zero visibly passed through grey on its way to white. Same zero alpha, but the renderer interpolates the colour channels as well as the alpha, so the type travels from black to white while it becomes visible. Changing the start colour to one, one, one, zero removed it entirely.
Nobody reports this as a bug. They report that the titles look a bit muddy, which is the kind of note that gets filed under taste and never gets fixed. It contributes directly to why video looks disjointed across a set of assets, because two components built by two people fade differently.
Who should own theme behaviour in video components?
The same person who owns the brand system, extended with one extra responsibility: deciding what a component does when there is no surface. That decision does not exist in a static design system, because static components almost always sit on something.
Write it into the system as a rule rather than leaving it to each component author. When that rule is missing, every new overlay is a fresh guess, and the guesses only disagree once someone switches themes.
The same logic applies when components are generated rather than hand built, which is the direction most systems are heading. A generator will read whatever token looks semantically right, so the brand guardrails for AI generated video need to encode the surface rule explicitly, or it will be reinvented incorrectly every time.
A worked example
Picture a speaker name overlay built and approved in the default light theme. It looks correct, it ships, and the system gains a second theme with a saturated brand colour for a campaign.
The same overlay now renders white type, because the saturated theme is classified as dark and its text token flipped. Nobody changed the component. The reviewer sees it in the campaign cut, calls it a bug, and an engineer spends an afternoon proving the component is behaving exactly as written. Deriving the colour from the theme primary at build time removes the whole afternoon.
FAQ
What are video template brand themes?
They are the swappable colour and type sets a video template uses so one layout can serve several brand contexts, such as a default look and a campaign or sub brand look.
Why does my lower third change colour between brand themes?
Because it is reading a text token defined in relation to a background surface. Over footage there is no surface, so the token's assumption does not hold and the colour flips with the theme's light or dark classification.
Which colour should overlay text in a video template use?
Derive it from the theme's primary brand colour, or have the component draw its own surface and then use the surface paired text token. Choose one and write it into the system.
Why does white text look grey while it fades in?
The renderer interpolates colour channels alongside alpha, so fading from fully transparent black travels through grey. Start the fade from the target colour at zero alpha instead.