By the end of this lesson you can
- Define what a visual language is and what it includes.
- Turn brand values into concrete UI decisions.
- Create a simple visual language sheet for a product.
The idea
A visual language is the consistent set of visual choices that make a product recognisable: typography, colour, shape, spacing rhythm, imagery, iconography and motion. It sits between brand guidelines (often made for marketing) and the component library.
From adjectives to decisions
Brand values are usually adjectives such as "calm", "playful" or "trustworthy". Translate each into decisions you can apply:
- Calm: generous spacing, muted colours, soft radius, slow, subtle motion.
- Playful: rounded shapes, bright accents, illustration, bouncy motion.
- Precise: tight grids, small radius, monospaced numbers, minimal decoration.
What to define
A typeface pairing and scale, a colour palette with roles, a corner radius scale, an icon style (outline or filled, stroke width), an imagery style, an elevation approach and a motion personality. Keep it small enough to apply consistently.
Why it matters in real projects
A coherent visual language makes products feel trustworthy and well made, and helps people learn the interface faster because similar things look similar. It also speeds up design decisions: instead of debating every shade, the team checks whether a choice fits the agreed language.
A realistic example
A mental health journaling app has the values "gentle", "private" and "encouraging". The designer translates these: a warm off-white background, a muted green primary colour, a rounded humanist typeface, 16px corner radius, soft illustration rather than stock photos, outline icons with 1.5px strokes and slow fade transitions.
When a developer proposes a bright red notification badge, the team checks the language sheet and uses a soft amber dot with text instead, keeping the experience calm.
Step by step
Collect brand values
Gather three to five adjectives from the brand or product strategy.
Translate each
For each adjective, list concrete decisions for type, colour, shape and motion.
Gather references
Collect examples that show the feel you want.
Make a sheet
Create one page showing type, colours, radius, icons, imagery and motion notes.
Apply to a screen
Design one key screen using only the sheet.
Review
Ask others which adjectives the screen suggests.
Common mistakes
Mistake Copying a trendy style that does not fit the brand.
Instead Start from values, not trends.
Mistake Too many typefaces and colours.
Instead Keep a small, consistent set.
Mistake Mixing icon styles.
Instead Pick one icon family and stroke width.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h
Visual language sheet
Create a visual language for a fictional product, such as a cycling club app.
Steps
- Choose three brand adjectives.
- Translate each into decisions.
- Build a one-page sheet.
- Design one screen and ask others to guess the adjectives.
Deliverable
A visual language sheet and one applied screen.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- A visual language is a consistent set of visual choices.
- Translate brand adjectives into concrete decisions.
- Keep it small enough to apply.
- It speeds decisions and builds trust.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Material Design 3: styles (opens in a new tab)Material Design 3
- GOV.UK Design System: styles (opens in a new tab)GOV.UK
A deliberately plain, trustworthy visual language.
Your notes
Marking complete updates your course and roadmap progress.