01
Colours that fail accessibility
Brand colours look great in a logo but fail contrast when used for text and buttons.
06 · Branding04 of 07
Typefaces, type scales and accessible colour systems, ready for screens, print and code.
Type and colour carry your brand further than any logo. They're on every page and every slide. We choose and pair typefaces, build a type scale, and design a colour system with accessible combinations, delivered as tokens your designers and developers can use straight away.
- WCAG 2.2 contrast checked for every pairing
- AA
- WCAG 2.2 contrast checked for every pairing
- Themes defined: light and dark
- 2
- Themes defined: light and dark
- Set of tokens for Figma and code
- 1
- Set of tokens for Figma and code
Type scale
Aa
Palette · contrast · tokens
Typeface selectionFont licensingType scaleColour paletteAccessible contrastDark mode coloursDesign tokensUsage rulesTypeface selectionFont licensingType scaleColour paletteAccessible contrastDark mode coloursDesign tokensUsage rules
Sound familiar?
The problems we hear most often before someone asks us about typography & colour.
02
Too many fonts, no hierarchy
Random sizes and weights make pages look messy and hard to scan.
03
Print colours on screens
A palette designed for print looks dull or garish on screens, and nobody knows the right values.
What's included
01
Typeface selection
Headline and text typefaces chosen for personality, legibility and licensing.
02
Type scale
Sizes, weights and line heights for every level, from display to captions.
03
Colour system
Primary, secondary and neutral colours with tints and shades.
04
Accessibility checks
Text and interface combinations checked against WCAG 2.2 contrast.
05
Light and dark modes
Colour roles defined for both themes.
06
Design tokens
Values as Figma variables and CSS variables, named for how they're used.
How we do it
You follow every step live in Mission Control, your project dashboard: tasks, files, approvals and a launch forecast.
- 1
Review
Your current fonts and colours, where they're used and where they fail.
- 2
Explore
Type pairings and palette options tested on real layouts.
- 3
Systemise
Scales, roles and accessible combinations defined.
- 4
Deliver
Tokens, files and a short guide for designers and developers.
AA
WCAG 2.2 contrast checked for every pairing
2
Themes defined: light and dark
1
Set of tokens for Figma and code
Built for
Who this is for.
Brands moving more into digital
Products adding dark mode
Teams with inconsistent fonts and colours
Companies building a design system
Tools we useFigmaIllustratorBrand BrainNotion guidelines
Helpful extras
Try it yourself, or see what's built in.
Questions
Typography & colour, answered.
Something else on your mind? Ask the Zelvorm Concierge in the corner, or talk to the team.
Some typefaces need licences for web, app or desktop use. We'll explain licensing clearly and can recommend excellent free options such as Google Fonts.
More in Branding
The rest of the toolkit.
- 01Brand strategy & positioningA clear position in your market, a promise worth keeping and the proof to back it.
- 02Naming & messagingDistinctive names checked for availability, and messaging that explains you in a sentence.
- 03Logo & identity systemA distinctive mark plus the colours, type and graphic language that make it work in every place.
- 04Tone of voiceVoice principles, examples and AI-ready rules so every email, page and post sounds like you.
- 05Brand guidelinesA clear, practical guide to your brand, with real examples and every asset one click away.
- 06Rebrands & brand refreshRefresh or rebrand with a clear strategy and a rollout that protects your reputation and rankings.
From the Journal
Read before you decide.
UI/UX DesignWebsite Accessibility Checklist: WCAG 2.2 for Small Businesses
A practical WCAG 2.2 checklist for small business websites: contrast, keyboard access, forms, images, focus, target size and the new 2.2 criteria, in plain English.
6 Nov 2026 · 5 min read
BrandingBuilding a Brand Style Guide: What to Include and Why It Matters
A brand style guide is the difference between a consistent business and a different-looking company on every channel. Here's exactly what to include.
13 Jun 2026 · 5 min read
Graphic DesignWhy Consistent Visual Design Is a Revenue Lever, Not a Cost Centre
Consistent visual design isn't a nice-to-have — it measurably increases trust and conversion. Here's the actual mechanism behind why.
5 May 2026 · 5 min read
Next in Branding
Tone of voice
Start a project
Tell us what you're building. You'll hear from a human within 24 hours, with an AI Blueprint already waiting.
contact@zelvorm.com · Avg. response under 24h