Brand Colors as Tokens: Keeping Every Customer's Brand Intact
Hundreds of different organizations can build websites on the same platform: a church in deep blue and gold, a bakery in warm cream and red, a coaching practice in soft greens, a software company in plum and silver. They all use the same page builder, the same blocks and the same publishing system. Yet each site should look unmistakably like itself.
The way we make that possible is theme tokens: named values for colors, fonts, spacing and shapes that each organization sets for its own site, and that every building block uses instead of hard-coded styles.
What a theme contains
Each website's theme defines a set of values, such as:
- Colors: primary, secondary and accent colors, backgrounds, text and borders
- Fonts: a heading font and a body font, with fallbacks
- Shapes: how rounded corners, buttons and cards should be
- Layout: container widths and section spacing
- Navigation: header and footer colors, link colors and hover states
When an organization changes a value, every page and every block that uses it updates together.
Blocks use tokens, not raw values
Our page builder's blocks reference theme tokens rather than specific colors. A button uses the "primary" token; a card uses the "surface" and "border" tokens; a heading uses the heading font token. The same block looks blue and gold on one site and plum and silver on another, without anyone editing the block.
This is what lets us offer a shared library of blocks to every organization. A new testimonial layout or pricing table works on every site the day it is released, already wearing each site's colors.
The platform never overrides a customer's brand
It would be easy for a platform to sprinkle its own branding across customer sites: its colors in default buttons, its logo in footers, its fonts in forms. We deliberately do not. Our own brand appears in our own admin area and on our own websites. A customer's public site wears the customer's theme.
That rule even applies during big platform changes. When our own platform went through a brand update, the work explicitly avoided forcing the new platform brand onto customer websites. Their sites stayed theirs.
Dark mode is the customer's choice
Some organizations want their website to offer a dark mode; others do not. Because colors are tokens, a theme can define values for both modes, or simply use one. Our admin area supports light and dark modes for the people working in it, but a customer's public site follows its own theme's decisions. We cover the admin side in designing for light and dark mode from the start.
Fonts that travel with the site
When we import a site from another platform, its fonts are downloaded into the site's own storage and attached to its theme, so the site's typography keeps working after the old platform is gone. Our own sites serve their fonts the same way. You can read more in why we self-host every font.
Custom styles, kept in their place
Some organizations want styles beyond what tokens offer: a special animation, a unique section treatment, a custom footer layout. Our platform allows custom styles at the page level and site level, kept in clearly labeled places that are loaded consistently. Even then, we encourage styles that build on tokens, so a future color change still flows through.
Building our own site the same way
When we rebuilt this website inside our platform, we used the same system any customer would. Our plum and silver live in a theme. Our fonts are self-hosted. The header, footer and menus are managed in the same admin screens. We did not give ourselves any special treatment, which means everything we learned improves the experience for every other organization.
Frequently asked questions
Can I use my own brand colors on a VoVo website?
Yes. Each website has its own theme where you set colors, fonts and styles, and every block uses those values.
Will VoVo add its own branding to my public website?
No. Your public website uses your theme and branding. The platform's brand appears in its own admin area and websites.
What happens to my design if I change my brand color later?
Because blocks use theme tokens, changing a color in your theme updates every page and block that uses it.
Related Posts
Custom Domains and Canonical URLs in a Multi-Tenant Platform
A website might be reachable at a platform address and its own domain. Here is how we choose the preferred address for canonical links, sitemaps and redirects.
Writing Error Messages People Can Act On
An error message is often the moment someone decides whether to keep trusting software. Here is how we write messages that explain what happened and what to do next.
Letting Customers Get Paid Directly With Connected Accounts
When an organization sells through our platform, the money should land in its own account. Here is how connected accounts, platform fees, refunds and disputes work.
Keeping AI Model Choices Current
AI models change every few months, and yesterday's best choice can quietly become outdated. Here is how we keep model choices current without breaking features.
Designing Kill Switches for Live Features
Live video cannot be edited after the fact. Here is how we designed kill switches at the channel and platform level, who can use them and when they act on their own.
Comments (0)
No comments yet. Be the first to share your thoughts!