On this page
Let’s look at a common scenario.
A traditional jewelry brand in Varanasi wanted to build an online presence.
They hired a freelancer to design their website. On the site, their brand colour was a deep royal violet. A month later, they hired a social media manager for Instagram, who used a bright pinkish-purple. Their print brochure used a dark indigo.
To make matters worse, their website used three different font styles, and the buttons were rounded on the home page but square on the contact page.
When customers looked at their website, social media, and shop board, it felt like three completely different businesses. It looked messy, uncoordinated, and amateur.
Brand confusion kills trust. Here is how a design system solves this.
What a design system is, and what tokens are
A Design System is a single source of truth for your brand. It is a set of rules that defines exactly which colours, fonts, sizes, and spacing your business is allowed to use.
Within a design system, we use Design Tokens. Think of tokens as the basic building blocks of your brand identity:
- Colour Tokens: The exact hex codes for your primary, secondary, and background colours (e.g.
#7C3AEDfor Solvey Violet). - Typography Tokens: The exact fonts and sizes for headings, body text, and button labels.
- Spacing Tokens: The standard padding and margins (like
8px,16px,24px) to ensure buttons and boxes look balanced on every page.
When you use consistent design tokens, your website, social media, apps, and brochures all look like they belong to the same premium brand.
How to define your own brand tokens
You don’t need to be a designer to test how design tokens work together:
- Write down your brand colours as a short named list — one main colour, one accent, one text colour, one background. Four is enough to start; a list of twenty is a list nobody follows.
- Check each text-on-background pair in our free contrast checker. Anything under 4.5:1 will be hard to read on a phone in daylight, which is where most of your customers are.
- Pick three or four sizes for text and stop there — a heading, a subheading, body, and small print. Do the same for spacing, doubling as you go: 8px, 16px, 24px, 32px.
- Put all of it in one page and give it to whoever builds or prints for you, so your website, your signage and your Instagram posts use the same values instead of three people guessing.
The standard behind it
Using tokens is the modern industry standard for building scalable, responsive software interfaces.
You can read more about how major brands build systems in the Google Material Design Guidelines.
Getting the rules written down
Every identity we build ships with the tokens written down — the colour values, the type scale, the spacing steps — so your website, your printer and whoever designs your next hoarding are all working from the same numbers rather than matching by eye. The tokens come out of the identity work itself, which starts with the brief you give before anyone draws a logo.
See what a full identity system includes on our graphic design and branding page, or email us at hello@solvey.in.