Module Two: Design Systems and Visual Language – Level Two
Module Two: Design Systems and Visual Language
Introduction
Welcome to Module Two! In Module One, you learned how to do
advanced user research. You learned how to find hidden needs.
You learned how to synthesise your findings into clear insights.
Now, in Module Two, we will learn about design systems and
visual language. This is how designers create beautiful,
consistent, and easy-to-use products.
Have you ever used an app where every screen looked different?
One screen had blue buttons. Another had green buttons.
One screen used big text. Another used small text.
That app probably did not have a design system.
A design system is like a rulebook. It tells everyone how
the product should look and feel. It makes sure everything
is consistent. It makes design faster and easier.
In this module, you will learn how to create colours,
typography, spacing, and components that work together.
You will learn how to build a design system of your own.
Let us begin this exciting journey.
Learning Objectives
After finishing this module, you should be able to:
- Explain what a design system is and why it matters.
- Describe what design tokens are and how to use them.
- Create a simple style guide for a product.
- Build a component library with reusable parts.
- Use grid systems for responsive layouts.
- Apply colour accessibility rules for contrast.
- Create typography scales and visual hierarchy.
- Design simple icons and illustrations.
- Give examples of design systems from Nigeria and around the world.
- Apply design system thinking to your own projects.
Warm-up Story: Kelechi's Inconsistent Website
Kelechi is a 14-year-old boy who lives in Lagos. He loves
building websites. He built a website for his father's
small business selling shoes.
The website had five pages: Home, About, Products, Contact,
and FAQs. Kelechi worked hard on each page. But he did not
plan ahead. He designed each page separately.
The Home page had blue buttons. The About page had green buttons.
The Products page had red buttons. The Contact page had purple buttons.
The FAQs page had orange buttons.
The Home page used a big, bold font. The About page used
a small, thin font. The Products page used a fancy font.
The Contact page used a plain font.
When customers visited the website, they got confused.
"Is this the same business?" they asked.
"Why does everything look different?"
Kelechi's father said, "Kelechi, the website is not good.
It does not feel like one business. It feels like five
different businesses."
Kelechi was sad. He had worked so hard. But he understood.
He decided to fix it.
He started by choosing one colour: blue. He chose one font:
a clean, simple font. He chose one button style.
He chose one spacing rule.
Then he applied these rules to every page.
Now the website looked like one business.
Customers were happy. They understood the website.
They bought more shoes.
Kelechi did not know it, but he had created a design system.
He created rules for colours, fonts, buttons, and spacing.
Then he applied those rules everywhere.
That is exactly what we will learn in this module.
Kelechi's Design Journey
|
V
Builds website page by page
|
V
Each page looks different
|
V
Customers get confused
|
V
Father says, "Fix it"
|
V
Kelechi creates rules
|
V
Chooses one colour, one font, one style
|
V
Applies rules everywhere
|
V
Website looks consistent! 🎉
Main Lessons
Lesson 1: What Is a Design System?
Definition
A design system is a set of rules and parts
that designers use to build products. It includes colours,
fonts, buttons, spacing, and more. It makes sure everything
looks and works the same way.
Why It Is Important
Without a design system, products look messy.
Each page looks different. Users get confused.
A design system makes products consistent, faster to build,
and easier to use.
Simple Explanation
Imagine you are building a house. You could use any bricks,
any paint, any doors. But if you use the same bricks,
the same paint, and the same doors, the house looks
beautiful and strong. A design system is like choosing
the same bricks and paint for your product.
Real-Life Example
Google has a design system called Material Design.
Every Google app uses the same colours, buttons,
and spacing. Gmail, YouTube, and Google Maps all
look and feel similar. That is a design system.
School Example
Your school has a uniform. Everyone wears the same
colours and style. The school looks organised and
united. A design system is like a uniform for products.
Home Example
Your mother has a set of plates. They are all the same
design. When guests come, the table looks beautiful.
A design system is like having matching plates
for your product.
Nigerian Example
A Nigerian bank has a design system. All their branches
use the same colours. All their apps look the same.
All their letters have the same logo.
Customers recognise the bank anywhere.
That is a design system.
Illustration
Design System
-------------
Without Design System:
Page 1: Blue button, big font
Page 2: Green button, small font
Page 3: Red button, fancy font
|
V
Looks messy. Users confused.
With Design System:
Page 1: Blue button, clean font
Page 2: Blue button, clean font
Page 3: Blue button, clean font
|
V
Looks consistent. Users happy.
Mini Summary
A design system is a set of rules and parts for building
products. It makes products consistent and easy to use.
It is like a uniform for your product.
Lesson 2: Design Tokens
Definition
Design tokens are the smallest parts of a
design system. They are the specific values for colours,
fonts, spacing, and more. They are like the ingredients
in a recipe.
Why It Is Important
Design tokens make it easy to change things. If you change
the token for "primary colour," every button, link, and
heading that uses that colour changes automatically.
It saves time and prevents mistakes.
Simple Explanation
Imagine you are baking a cake. The recipe says:
2 cups of flour, 1 cup of sugar, 3 eggs.
Those are the tokens. If you change the recipe
to 3 cups of flour, every cake you make changes.
Design tokens are the same.
Real-Life Example
A company has a design token for "primary blue."
The value is #1A73E8. Every button, link, and
heading uses this token. When the company decides
to change the blue, they change the token once.
Everything updates. That is a design token.
School Example
Your school has a rule: "All posters must use
the school colour, which is green." That is a token.
Every poster uses the same green. If the school
changes to blue, every poster changes.
Home Example
Your family has a rule: "All cups must be blue."
That is a token. Every cup is blue. If you change
the rule to "All cups must be red," every cup changes.
Nigerian Example
A Nigerian fashion designer has a token for
"primary fabric colour: ankara print." Every outfit
uses this fabric. If they change to a new fabric,
every outfit changes. That is a design token.
Illustration
Design Tokens
-------------
Colour Tokens:
- Primary: #1A73E8 (Blue)
- Secondary: #34A853 (Green)
- Danger: #EA4335 (Red)
Font Tokens:
- Heading: Roboto Bold, 24px
- Body: Roboto Regular, 16px
Spacing Tokens:
- Small: 8px
- Medium: 16px
- Large: 24px
Mini Summary
Design tokens are the smallest parts of a design system.
They are specific values for colours, fonts, and spacing.
Changing a token changes everything that uses it.
Lesson 3: Style Guides
Definition
A style guide is a document that shows
all the design tokens and rules. It shows the colours,
fonts, buttons, and spacing. It is like a map of your
design system.
Why It Is Important
A style guide helps everyone stay on the same page.
New designers can look at the style guide and know
what to do. It prevents mistakes. It saves time.
Simple Explanation
Imagine you are cooking with a recipe book. The recipe
book shows you what ingredients to use and how to cook.
A style guide is like a recipe book for design.
It shows you what colours to use and how to design.
Real-Life Example
A company has a style guide. It shows all the colours,
fonts, and buttons. When a new designer joins, they
read the style guide. They know exactly how to design.
That is a style guide.
School Example
Your school has a style guide for posters.
It shows the school colours, the school logo,
and the school font. Every poster follows the guide.
That is a style guide.
Home Example
Your family has a style guide for the kitchen.
It shows where plates go, where cups go,
and where pots go. Everyone follows the guide.
The kitchen stays organised. That is a style guide.
Nigerian Example
A Nigerian restaurant has a style guide.
It shows the restaurant colours (green and white),
the logo, and the font for menus. Every menu,
sign, and receipt follows the guide.
That is a style guide.
Illustration
Style Guide
-----------
Colours:
[Blue #1A73E8] [Green #34A853] [Red #EA4335]
Fonts:
Heading: Roboto Bold
Body: Roboto Regular
Buttons:
[ Primary Button ] --> Blue background, white text
[ Secondary Button ] --> White background, blue text
Spacing:
8px, 16px, 24px, 32px
Mini Summary
A style guide is a document that shows all the design
tokens and rules. It helps everyone stay consistent.
It is like a recipe book for design.
Lesson 4: Component Libraries
Definition
A component library is a collection of
reusable parts. It includes buttons, forms, cards,
and navigation bars. Designers use these parts to
build products faster.
Why It Is Important
Without a component library, designers build every button
from scratch. That takes time. A component library gives
you ready-made parts. You just drag and drop.
It saves time and keeps things consistent.
Simple Explanation
Imagine you are building a Lego house. You have
many Lego pieces. You can use the same pieces
to build a house, a car, or a tree. A component
library is like a box of Lego pieces for design.
Real-Life Example
A design team has a component library. It includes
buttons, text fields, dropdowns, and cards.
When they design a new screen, they use these
parts. They do not build from scratch.
That is a component library.
School Example
Your class has a box of art supplies. It includes
markers, crayons, and coloured paper. When you
make a poster, you use these supplies.
That is a component library.
Home Example
Your kitchen has a set of pots and pans.
When you cook, you use these pots and pans.
You do not buy new ones every time.
That is a component library.
Nigerian Example
A Nigerian tailor has a box of buttons, zippers,
and threads. When they sew, they use these parts.
They do not make buttons from scratch.
That is a component library.
Illustration
Component Library
------------------
[ Button ] [ Text Field ] [ Card ]
| | |
V V V
All ready to use in any design!
[ Navigation ] [ Form ] [ Modal ]
| | |
V V V
Just drag and drop!
Mini Summary
A component library is a collection of reusable parts.
It includes buttons, forms, and cards. It saves time
and keeps designs consistent.
Lesson 5: Grid Systems
Definition
A grid system is a set of invisible lines
that help you arrange things on a page. It helps you
align text, images, and buttons neatly.
Why It Is Important
Without a grid, designs look messy. Things are not aligned.
A grid makes designs look clean and organised.
It also helps with responsive design (design that works
on phones, tablets, and computers).
Simple Explanation
Imagine you are writing in a notebook. The notebook has
lines. The lines help you write neatly. A grid system
is like the lines in a notebook. It helps you design neatly.
Real-Life Example
A newspaper uses a grid. The text and images are arranged
in columns. Everything is aligned. The newspaper looks
clean and organised. That is a grid system.
School Example
Your classroom has desks arranged in rows.
The rows are the grid. They keep the classroom
organised. A grid system does the same for design.
Home Example
Your kitchen has tiles on the floor. The tiles form
a grid. They keep the floor organised. A grid system
does the same for design.
Nigerian Example
A Nigerian market has stalls arranged in rows.
The rows are the grid. They keep the market organised.
A grid system does the same for design.
Illustration
Grid System
-----------
| | | | |
| | | | |
| | | | |
| | | | |
Columns help you align:
[ Header ]
[ Text ] [ Image ]
[ Button ]
Mini Summary
A grid system is a set of invisible lines for arranging
things. It makes designs look clean and organised.
It helps with responsive design.
Lesson 6: Colour Accessibility
Definition
Colour accessibility means choosing colours
that everyone can see and understand. It means making sure
text is easy to read against its background.
Why It Is Important
Some people cannot see certain colours. Some people
have trouble reading low-contrast text.
Colour accessibility makes your design usable
for everyone.
Simple Explanation
Imagine writing with a yellow pen on white paper.
It is very hard to read. Now imagine writing with
a black pen on white paper. It is easy to read.
That is colour contrast. Good contrast means
easy to read.
Real-Life Example
A website uses dark grey text on a white background.
The contrast is high. Everyone can read it.
Another website uses light grey text on a white
background. The contrast is low. Some people
cannot read it. Good design uses high contrast.
School Example
Your teacher writes on the board with a black marker.
The board is white. Everyone can read it.
If the teacher used a yellow marker, nobody could read it.
That is colour accessibility.
Home Example
Your family has a remote control. The buttons are
black with white text. Everyone can read them.
If the buttons were grey with light grey text,
nobody could read them. That is colour accessibility.
Nigerian Example
A Nigerian bank has an ATM. The screen has white text
on a blue background. The contrast is high.
Everyone can read it. That is colour accessibility.
Illustration
Colour Contrast
---------------
GOOD: Black text on white background
[ Hello World ] <-- Easy to read
GOOD: White text on dark blue background
[ Hello World ] <-- Easy to read
BAD: Light grey text on white background
[ Hello World ] <-- Hard to read
BAD: Yellow text on white background
[ Hello World ] <-- Very hard to read
Mini Summary
Colour accessibility means choosing colours that everyone
can see. It means high contrast between text and background.
Good contrast makes designs easy to read.
Lesson 7: Typography Scales
Definition
A typography scale is a set of font sizes
for different types of text. It includes sizes for headings,
subheadings, body text, and captions.
Why It Is Important
A typography scale creates hierarchy. It shows what is
important. Big text is important. Small text is less
important. It helps users read and understand.
Simple Explanation
Imagine a newspaper. The headline is big. The subheadings
are medium. The body text is small. The captions are
very small. That is a typography scale.
Real-Life Example
A website has a typography scale:
- Heading 1: 48px
- Heading 2: 36px
- Heading 3: 24px
- Body: 16px
- Caption: 12px
This scale creates clear hierarchy.
School Example
Your textbook has a typography scale:
- Chapter title: Big and bold
- Section heading: Medium and bold
- Body text: Small and regular
- Notes: Small and italic
That is a typography scale.
Home Example
Your family calendar has a typography scale:
- Month: Big and bold
- Days: Medium
- Events: Small
That is a typography scale.
Nigerian Example
A Nigerian newspaper has a typography scale:
- Headline: Very big and bold
- Subheadings: Medium and bold
- Body: Small
- Adverts: Different sizes
That is a typography scale.
Illustration
Typography Scale
----------------
Heading 1: 48px [ BIG TITLE ]
Heading 2: 36px [ Section Title ]
Heading 3: 24px [ Subsection ]
Body: 16px [ Normal text goes here. ]
Caption: 12px [ Small note ]
Mini Summary
A typography scale is a set of font sizes for different
types of text. It creates hierarchy. It shows what is
important and what is less important.
Lesson 8: Visual Hierarchy
Definition
Visual hierarchy is arranging design elements
in order of importance. It guides the user's eye to what
matters most.
Why It Is Important
Without hierarchy, everything looks equally important.
Users do not know where to look. Visual hierarchy
helps users find information quickly.
Simple Explanation
Imagine a sign at a hospital. The word "EMERGENCY"
is big and red. The other words are smaller.
Your eye goes to "EMERGENCY" first.
That is visual hierarchy.
Real-Life Example
A news website has visual hierarchy. The main story
has a big headline and a large image. Other stories
have smaller headlines. Your eye goes to the main
story first. That is visual hierarchy.
School Example
Your school notice board has visual hierarchy.
The most important notice is at the top with
big letters. Other notices are smaller.
Your eye goes to the important notice first.
That is visual hierarchy.
Home Example
Your family shopping list has visual hierarchy.
The most important items are at the top with
stars. Other items are below. Your eye goes
to the important items first.
That is visual hierarchy.
Nigerian Example
A Nigerian election poster has visual hierarchy.
The candidate's name is big and bold. The party logo
is medium. The slogan is smaller. Your eye goes to
the name first. That is visual hierarchy.
Illustration
Visual Hierarchy
----------------
[ BIG HEADLINE ] <-- Eye goes here first
|
V
[ Medium Subheading ] <-- Then here
|
V
[ Small body text ] <-- Then here
|
V
[ Tiny caption ] <-- Last
Mini Summary
Visual hierarchy is arranging elements by importance.
It guides the user's eye. It helps users find
information quickly.
Lesson 9: Iconography Basics
Definition
Iconography is the design of icons.
Icons are small pictures that represent actions or ideas.
They help users understand without reading words.
Why It Is Important
Icons are quick to understand. They work in any language.
A good icon helps users find what they need.
Bad icons confuse users.
Simple Explanation
Imagine a door. It has a sign with a picture of a man
and a woman. You know it is a toilet. You do not need
to read words. That is an icon.
Real-Life Example
A phone has a home button. It has a picture of a house.
You know that pressing it takes you home.
That is an icon.
School Example
Your school library has signs. One sign has a picture
of a book. You know that is the library.
That is an icon.
Home Example
Your remote control has icons. A triangle means play.
Two lines mean pause. A square means stop.
Those are icons.
Nigerian Example
A Nigerian bank has an ATM. The screen has icons.
A picture of a card means insert card.
A picture of money means cash.
Those are icons.
Illustration
Common Icons
------------
[ Home ] --> House shape
[ Search ] --> Magnifying glass
[ Settings ] --> Gear shape
[ User ] --> Person shape
[ Menu ] --> Three lines
[ Close ] --> X shape
[ Back ] --> Left arrow
[ Forward ] --> Right arrow
Mini Summary
Icons are small pictures that represent actions.
They help users understand without words.
Good icons are clear and simple.
Lesson 10: Illustration Basics
Definition
Illustration is drawing pictures to explain
ideas or make designs look better. It can be simple
or complex. It can be used in apps, websites, and books.
Why It Is Important
Illustrations make designs friendly and interesting.
They can explain difficult ideas. They can make
users feel happy. They can make your product
stand out.
Simple Explanation
Imagine a children's book. It has many pictures.
The pictures help you understand the story.
Illustrations in design do the same thing.
They help users understand and enjoy.
Real-Life Example
A weather app has illustrations. When it is sunny,
it shows a sun. When it is rainy, it shows a cloud
with rain. The illustrations make the app friendly.
That is illustration.
School Example
Your science textbook has illustrations. It shows
a plant with roots, stem, and leaves. The illustration
helps you understand. That is illustration.
Home Example
Your family photo album has pictures. The pictures
tell the story of your family. That is illustration.
Nigerian Example
A Nigerian food app has illustrations. It shows
pictures of jollof rice, pounded yam, and egusi soup.
The illustrations make users hungry and happy.
That is illustration.
Illustration
Illustration Styles
-------------------
Simple: (^_^) Happy face
Detailed: [Detailed drawing of a house]
Flat: [Simple shapes, no shadows]
3D: [Shapes with shadows and depth]
Mini Summary
Illustration is drawing pictures to explain ideas
or make designs look better. It makes designs
friendly and interesting.
Lesson 11: Responsive Design
Definition
Responsive design means designing products
that work on different screen sizes. It means the design
changes to fit phones, tablets, and computers.
Why It Is Important
People use different devices. Some use phones.
Some use tablets. Some use computers.
Responsive design makes sure everyone can use
your product, no matter what device they have.
Simple Explanation
Imagine you have a piece of clothing. If it fits
only one person, it is not useful. But if it stretches
to fit different people, it is very useful.
Responsive design is like stretchy clothing
for your product.
Real-Life Example
A news website is responsive. On a computer, it shows
three columns. On a tablet, it shows two columns.
On a phone, it shows one column. That is responsive design.
School Example
Your school timetable is responsive. On the wall,
it is big. In your notebook, it is small.
The information is the same, but the size changes.
That is responsive design.
Home Example
Your family has a dining table. When guests come,
you add more chairs. When it is just family,
you use fewer chairs. That is responsive design.
Nigerian Example
A Nigerian market stall is responsive. When there
are few customers, the stall is small. When there
are many customers, the stall expands.
That is responsive design.
Illustration
Responsive Design
-----------------
Computer: [ Column 1 ] [ Column 2 ] [ Column 3 ]
Tablet: [ Column 1 ] [ Column 2 ]
Phone: [ Column 1 ]
[ Column 2 ]
[ Column 3 ]
Same content, different layout.
Mini Summary
Responsive design means designing for different
screen sizes. It makes sure everyone can use
your product, no matter what device they have.
Lesson 12: Consistency in Design
Definition
Consistency means using the same design
elements in the same way throughout a product.
It means buttons look the same. Colours are the same.
Spacing is the same.
Why It Is Important
Consistency makes products easy to learn.
Once users learn how a button works, they know
how all buttons work. Consistency builds trust.
It makes products feel professional.
Simple Explanation
Imagine a school. All classrooms have the same
layout. The teacher's desk is always at the front.
The board is always at the back. Students know
where to sit. That is consistency.
Real-Life Example
A phone app is consistent. Every screen has
the back button in the same place. Every screen
uses the same colours. Every screen uses the same
font. That is consistency.
School Example
Your school uniform is consistent. Everyone wears
the same colours. Everyone wears the same style.
The school looks organised. That is consistency.
Home Example
Your kitchen is consistent. Plates are in one cupboard.
Cups are in another. Pots are in another.
You always know where to find things.
That is consistency.
Nigerian Example
A Nigerian bank is consistent. Every branch has
the same colours. Every ATM has the same design.
Every letter has the same logo.
Customers recognise the bank anywhere.
That is consistency.
Illustration
Consistency
------------
Inconsistent:
Page 1: Blue button
Page 2: Green button
Page 3: Red button
--> Users confused
Consistent:
Page 1: Blue button
Page 2: Blue button
Page 3: Blue button
--> Users happy
Mini Summary
Consistency means using the same design elements
in the same way. It makes products easy to learn
and builds trust.
Lesson 13: Documenting Your Design System
Definition
Documenting means writing down your design
system. It means creating a document that shows all
the colours, fonts, buttons, and rules.
Why It Is Important
Documentation helps others use your design system.
New designers can read it. Developers can follow it.
It keeps everyone on the same page.
Simple Explanation
Imagine you have a secret recipe. If you do not write
it down, only you can make the dish. If you write it down,
anyone can make it. Documentation is writing down
your design recipe.
Real-Life Example
A design team documents their design system.
They write down all the colours, fonts, and buttons.
They take screenshots. They explain the rules.
New designers read the document and know what to do.
That is documentation.
School Example
Your class documents the rules for the class garden.
You write down when to water, when to weed,
and when to harvest. Everyone follows the rules.
That is documentation.
Home Example
Your family documents the rules for the house.
You write down who does which chore and when.
Everyone knows what to do. That is documentation.
Nigerian Example
A Nigerian restaurant documents its recipes.
It writes down the ingredients and cooking steps.
Any chef can follow the recipe and make the same dish.
That is documentation.
Illustration
Documenting Your Design System
-------------------------------
1. Colours
- Primary: #1A73E8
- Secondary: #34A853
- Danger: #EA4335
2. Fonts
- Heading: Roboto Bold
- Body: Roboto Regular
3. Buttons
- Primary: Blue background, white text
- Secondary: White background, blue text
4. Spacing
- Small: 8px
- Medium: 16px
- Large: 24px
Mini Summary
Documenting means writing down your design system.
It helps others use your system. It keeps everyone
on the same page.
Lesson 14: Using Design Systems in Real Projects
Definition
Using a design system in real projects means applying
the rules and components to build actual products.
It means using the same colours, fonts, and buttons
in every screen.
Why It Is Important
A design system is only useful if you use it.
Using it makes your products consistent and fast
to build. It makes your team work better together.
Simple Explanation
Imagine you have a recipe book. It is only useful
if you cook from it. A design system is the same.
It is only useful if you design from it.
Real-Life Example
A design team builds a new app. They use their
design system. They use the same button component
on every screen. They use the same colours.
They use the same spacing. The app looks consistent.
That is using a design system.
School Example
Your class makes posters for the school play.
You use the same colours, fonts, and layout
for every poster. The posters look consistent.
That is using a design system.
Home Example
Your family plans a party. You use the same
decorations, the same plates, and the same music
for every part of the party. Everything matches.
That is using a design system.
Nigerian Example
A Nigerian bank builds a new app. They use their
design system. Every screen uses the same colours,
fonts, and buttons. The app looks professional.
That is using a design system.
Illustration
Using a Design System
---------------------
Design System:
[ Colours ] [ Fonts ] [ Buttons ] [ Spacing ]
| | | |
V V V V
Screen 1: [ Blue button, Roboto, 16px ]
Screen 2: [ Blue button, Roboto, 16px ]
Screen 3: [ Blue button, Roboto, 16px ]
|
V
Consistent app! 🎉
Mini Summary
Using a design system means applying the rules
and components to real projects. It makes products
consistent and fast to build.
Lesson 15: Putting It All Together
Definition
This lesson brings together everything we learned
in Module Two. It shows how design tokens, style guides,
component libraries, grids, colours, typography,
and consistency all work together.
Why It Is Important
Seeing the whole picture helps you understand
the design system. Each part matters. When all parts
work together, you create beautiful, consistent products.
Simple Explanation
Think of it like building a house. You need bricks (tokens),
a plan (style guide), tools (components), and rules (grids).
If any part is missing, the house is not complete.
Real-Life Example
A design team creates a design system.
They define tokens (colours, fonts).
They create a style guide.
They build a component library.
They set up a grid system.
They check colour accessibility.
They create a typography scale.
They design icons and illustrations.
They make everything responsive.
They ensure consistency.
They document everything.
They use it in real projects.
That is a complete design system.
School Example
Your class creates a design system for school posters.
You choose colours. You choose fonts.
You create a poster template. You set rules.
Every poster follows the system.
That is a design system.
Home Example
Your family creates a design system for the house.
You choose colours for walls. You choose furniture style.
You choose where things go. Everything matches.
That is a design system.
Nigerian Example
A Nigerian company creates a design system.
They define colours, fonts, and buttons.
They create a style guide.
They build a component library.
Every product they make follows the system.
That is a design system.
Illustration
Module Two: The Full Design System
===================================
Tokens --> Style Guide --> Components --> Grids
| | | |
V V V V
Colours Rules Buttons Layout
Fonts Examples Forms Alignment
Spacing Documentation Cards Responsive
| | | |
+-----------+--------------+------------+
|
V
Colour Accessibility
|
V
Typography Scale
|
V
Visual Hierarchy
|
V
Icons & Illustrations
|
V
Consistency & Documentation
|
V
Beautiful, consistent products! 🎉
Mini Summary
Module Two is about design systems. It starts with tokens
and ends with documentation. It includes style guides,
components, grids, colours, typography, and consistency.
When you do all these steps, you create beautiful,
consistent products.
Key Vocabulary
| Word |
Simple Definition |
| Design System |
A set of rules and parts for building products. |
| Design Tokens |
The smallest parts of a design system (colours, fonts, spacing). |
| Style Guide |
A document showing all design tokens and rules. |
| Component Library |
A collection of reusable parts (buttons, forms, cards). |
| Grid System |
A set of invisible lines for arranging things. |
| Colour Accessibility |
Choosing colours that everyone can see. |
| Typography Scale |
A set of font sizes for different types of text. |
| Visual Hierarchy |
Arranging elements by importance. |
| Iconography |
The design of icons (small pictures). |
| Illustration |
Drawing pictures to explain ideas. |
| Responsive Design |
Designing for different screen sizes. |
| Consistency |
Using the same design elements in the same way. |
| Documentation |
Writing down your design system. |
| Component |
A reusable part of a design (button, form, card). |
| Hierarchy |
Order of importance. |
Important Concepts
-
Consistency is key: Using the same design
elements makes products easy to learn and trust.
-
Tokens are the building blocks: Design tokens
are the smallest parts of a design system.
-
Style guides keep everyone aligned: They show
all the rules and tokens.
-
Components save time: Reusable parts make
design faster.
-
Grids keep designs clean: Invisible lines
help you align everything.
-
Accessibility matters: Good colour contrast
helps everyone read.
-
Typography creates hierarchy: Different font
sizes show what is important.
-
Visual hierarchy guides the eye: It helps
users find information quickly.
-
Icons speak without words: Good icons are
clear and simple.
-
Document everything: Writing down your system
helps others use it.
Step-by-Step Explanations
How to Create a Design System (Step by Step)
-
Choose your colours. Pick a primary colour,
a secondary colour, and a danger colour.
-
Choose your fonts. Pick a heading font
and a body font.
-
Define your spacing. Choose small, medium,
and large spacing values.
-
Create design tokens. Write down the exact
values for colours, fonts, and spacing.
-
Build a style guide. Create a document
showing all your tokens.
-
Build a component library. Create buttons,
forms, cards, and other parts.
-
Set up a grid system. Choose how many columns
your design will use.
-
Check colour accessibility. Make sure text
is easy to read.
-
Create a typography scale. Choose sizes
for headings, body, and captions.
-
Design icons and illustrations. Create
simple, clear images.
-
Make it responsive. Test your design
on different screen sizes.
-
Document everything. Write down all
your rules and examples.
Real-Life Examples
-
Google Material Design: A design system
used by all Google apps.
-
Apple Human Interface Guidelines: A design
system for all Apple products.
-
IBM Carbon: A design system for IBM products.
-
Shopify Polaris: A design system for
Shopify stores.
-
Atlassian Design System: A design system
for Jira, Confluence, and other tools.
Nigerian Examples
-
Nigerian bank apps: Most Nigerian banks
have a design system for their apps.
-
Nigerian e-commerce: Jumia and Konga
use design systems for their websites.
-
Nigerian fintech: Paystack and Flutterwave
use design systems for their payment apps.
-
Nigerian media: Punch and Vanguard
use design systems for their news websites.
-
Nigerian telecom: MTN and Glo use
design systems for their apps and websites.
Fun Examples Children Can Relate To
-
Video game UI: Games use design systems
for menus, buttons, and health bars.
-
Lego instructions: Every Lego set uses
the same style of instructions. That is a design system.
-
Bicycle parts: All bicycles use similar
parts (wheels, pedals, handlebars). That is a design system.
-
Ice cream shop: All ice cream cones
look similar. That is a design system.
-
Pencil case: All your pencils are
the same brand and colour. That is a design system.
Everyday Examples
- Toothbrush: All toothbrushes in a pack look the same.
- Plate: All plates in a set look the same.
- Cup: All cups in a set look the same.
- Chair: All chairs in a classroom look the same.
- Shoe: All shoes in a pair look the same.
- Comb: All combs in a pack look the same.
Parent Tips
-
Point out design systems in everyday life (matching plates,
consistent apps).
-
Help your child notice when designs are inconsistent.
-
Encourage your child to create their own design system
for school projects.
-
Praise your child's attention to detail.
-
Help your child organise their design work.
-
Talk about how consistency makes things easier to use.
Interesting Facts
-
Google Material Design was released in 2014.
-
Apple's Human Interface Guidelines were first published
in 1987.
-
Design systems can save companies millions of dollars
by speeding up design and development.
-
The first design system was created by NASA for the
Apollo space program.
-
Many companies now have full-time design system teams.
Did You Know?
-
Did you know that design tokens can be shared between
designers and developers?
-
Did you know that a good design system can reduce design
time by 50%?
-
Did you know that colour contrast is measured using
a ratio?
-
Did you know that typography scales are based on
mathematical ratios?
-
Did you know that many popular apps use the same
design system?
Remember This
- A design system is a set of rules and parts for products.
- Design tokens are the smallest parts (colours, fonts, spacing).
- A style guide documents all the tokens and rules.
- A component library is a collection of reusable parts.
- Grid systems help you arrange things neatly.
- Colour accessibility means good contrast for readability.
- Typography scales create hierarchy.
- Visual hierarchy guides the user's eye.
- Icons and illustrations make designs friendly.
- Responsive design works on all screen sizes.
- Consistency builds trust and makes products easy to learn.
- Documentation helps others use your design system.
Common Mistakes
-
Not using a design system: Designing
each page differently.
-
Using too many colours: Making designs
look messy.
-
Low colour contrast: Making text
hard to read.
-
Inconsistent spacing: Making designs
look unorganised.
-
Not documenting: Forgetting to write
down your rules.
-
Ignoring responsive design: Making
designs that only work on one screen size.
Best Practices
- Create a design system before you start designing.
- Use design tokens for colours, fonts, and spacing.
- Build a style guide and share it with your team.
- Create a component library of reusable parts.
- Use a grid system for alignment.
- Check colour contrast for accessibility.
- Create a typography scale for hierarchy.
- Design simple, clear icons.
- Test your design on different screen sizes.
- Document everything.
More ASCII Illustrations
Design System Timeline
Week 1: Choose colours and fonts
Week 2: Define spacing and tokens
Week 3: Create style guide
Week 4: Build component library
Week 5: Set up grid system
Week 6: Check accessibility
Week 7: Create typography scale
Week 8: Design icons and illustrations
Week 9: Test responsiveness
Week 10: Document everything
Design System Flowchart
Tokens --> Style Guide --> Components --> Grids
| | | |
V V V V
Colours Rules Buttons Layout
Fonts Examples Forms Alignment
Spacing Documentation Cards Responsive
| | | |
+-----------+--------------+------------+
|
V
Accessibility & Hierarchy
|
V
Icons & Illustrations
|
V
Consistency & Documentation
|
V
Beautiful, consistent products! 🎉
From Design System to Product
Design System --> Apply to Screens --> Consistent Product
| | |
V V V
Tokens, Every screen Users happy
Components, uses same Trust built
Rules colours, fonts Fast to build
and spacing
Comparison Tables
Without Design System vs. With Design System
| Without Design System |
With Design System |
| Inconsistent designs |
Consistent designs |
| Slow to build |
Fast to build |
| Users confused |
Users happy |
| Hard to maintain |
Easy to maintain |
| Looks unprofessional |
Looks professional |
Good Colour Contrast vs. Bad Colour Contrast
| Good Contrast |
Bad Contrast |
| Black text on white |
Light grey text on white |
| White text on dark blue |
Yellow text on white |
| Easy to read |
Hard to read |
| Accessible to all |
Not accessible |
| Professional |
Unprofessional |
Summary After Every Lesson
Lesson 1 Summary
A design system is a set of rules and parts for building products.
Lesson 2 Summary
Design tokens are the smallest parts of a design system.
Lesson 3 Summary
A style guide is a document showing all design tokens and rules.
Lesson 4 Summary
A component library is a collection of reusable parts.
Lesson 5 Summary
A grid system is a set of invisible lines for arranging things.
Lesson 6 Summary
Colour accessibility means choosing colours that everyone can see.
Lesson 7 Summary
A typography scale is a set of font sizes for different types of text.
Lesson 8 Summary
Visual hierarchy is arranging elements by importance.
Lesson 9 Summary
Icons are small pictures that represent actions or ideas.
Lesson 10 Summary
Illustration is drawing pictures to explain ideas or make designs better.
Lesson 11 Summary
Responsive design means designing for different screen sizes.
Lesson 12 Summary
Consistency means using the same design elements in the same way.
Lesson 13 Summary
Documenting means writing down your design system.
Lesson 14 Summary
Using a design system means applying the rules to real projects.
Lesson 15 Summary
Putting it all together: tokens, style guides, components, grids,
colours, typography, icons, illustrations, and consistency.
End-of-Module Summary
Congratulations! You have completed Module Two: Design Systems
and Visual Language. You have learned a lot. Let us review.
- A design system is a set of rules and parts for products.
- Design tokens are the smallest parts (colours, fonts, spacing).
- A style guide documents all the tokens and rules.
- A component library is a collection of reusable parts.
- Grid systems help you arrange things neatly.
- Colour accessibility means good contrast for readability.
- Typography scales create hierarchy.
- Visual hierarchy guides the user's eye.
- Icons are small pictures that represent actions.
- Illustrations make designs friendly and interesting.
- Responsive design works on all screen sizes.
- Consistency builds trust and makes products easy to learn.
- Documentation helps others use your design system.
You now know how to create a design system. You know how to
choose colours, fonts, and spacing. You know how to build
components and grids. You know how to ensure consistency
and accessibility. These skills will help you design
beautiful, professional products.
You are now a better designer. You can create products
that look consistent and are easy to use.
That is the power of a design system.
Frequently Asked Questions (10 Questions)
-
What is a design system?
A design system is a set of rules and parts for building products.
-
What are design tokens?
Design tokens are the smallest parts of a design system
(colours, fonts, spacing).
-
What is a style guide?
A style guide is a document showing all design tokens and rules.
-
What is a component library?
A component library is a collection of reusable parts
(buttons, forms, cards).
-
Why is colour accessibility important?
Colour accessibility makes sure everyone can read your design.
-
What is a typography scale?
A typography scale is a set of font sizes for different
types of text.
-
What is visual hierarchy?
Visual hierarchy is arranging elements by importance.
-
What is responsive design?
Responsive design means designing products that work
on different screen sizes.
-
Why is consistency important?
Consistency makes products easy to learn and builds trust.
-
Why should I document my design system?
Documentation helps others use your design system
and keeps everyone on the same page.
Matching Exercises
Match the word on the left with its definition on the right.
| Word |
Definition |
| 1. Design Token |
A. A collection of reusable parts |
| 2. Style Guide |
B. The smallest parts of a design system |
| 3. Component Library |
C. A set of invisible lines for arranging things |
| 4. Grid System |
D. A document showing all design tokens and rules |
| 5. Visual Hierarchy |
E. Arranging elements by importance |
Answers: 1-B, 2-D, 3-A, 4-C, 5-E
Scenario-Based Exercises
Scenario 1: The School Website
Your school wants to build a website. But every page
looks different. The colours are different. The fonts
are different. The buttons are different.
Questions:
- What is the problem?
- How would you create a design system for the website?
- What colours would you choose?
- What fonts would you choose?
- How would you make the website consistent?
Scenario 2: The Mobile App
A company is building a mobile app. They want it
to look professional and be easy to use.
Questions:
- What design tokens would you create?
- How would you build a component library?
- How would you ensure colour accessibility?
- How would you make the app responsive?
- How would you document the design system?
Scenario 3: The Market Stall
A Nigerian market trader wants to make their stall
look more professional. They want customers to
recognise their brand.
Questions:
- What design system would you create for the stall?
- What colours would you use?
- What signs would you create?
- How would you make everything consistent?
- How would you document the design system?
Group Activity
Activity: Create a Design System
- Form groups of 4–5 students.
- Choose a product to design (app, website, poster).
- Create design tokens:
- Choose 3 colours (primary, secondary, danger).
- Choose 2 fonts (heading, body).
- Choose 3 spacing values (small, medium, large).
- Create a style guide showing your tokens.
- Build a component library (buttons, forms, cards).
- Set up a grid system.
- Check colour accessibility.
- Create a typography scale.
- Design 3 icons.
- Present your design system to the class.
Individual Activity
Activity: Create Your Personal Design System
- Choose a personal project (blog, portfolio, poster).
- Create design tokens:
- Choose 3 colours.
- Choose 2 fonts.
- Choose 3 spacing values.
- Create a style guide.
- Build a simple component library.
- Check colour accessibility.
- Create a typography scale.
- Design 3 icons.
- Present your design system to your class.
Mini Project
Project: Design System for a School Club
- Choose a school club (debate, science, sports).
- Create a design system for the club:
- Colours
- Fonts
- Logo
- Poster template
- Social media template
- Create a style guide.
- Build a component library.
- Design 3 icons for the club.
- Create a poster using your design system.
- Present your project to your class.
Practical Assignment
Assignment: Design System Report
- Choose a product (app, website, or physical product).
- Create a design system for it.
- Write a report (2–3 pages) that includes:
- What is the product?
- What colours did you choose and why?
- What fonts did you choose and why?
- What components did you create?
- How did you check accessibility?
- How did you ensure consistency?
- Your style guide.
- Include screenshots or drawings.
- Submit your report to your teacher.
Key Takeaways
- A design system is a set of rules and parts for products.
- Design tokens are the smallest parts (colours, fonts, spacing).
- A style guide documents all the tokens and rules.
- A component library is a collection of reusable parts.
- Grid systems help you arrange things neatly.
- Colour accessibility means good contrast for readability.
- Typography scales create hierarchy.
- Visual hierarchy guides the user's eye.
- Icons and illustrations make designs friendly.
- Responsive design works on all screen sizes.
- Consistency builds trust and makes products easy to learn.
- Documentation helps others use your design system.
Classroom Discussion Questions
- Why is a design system important?
- What are design tokens? Can you give examples?
- What is a style guide? Why does it matter?
- What is a component library? How does it help?
- How do grid systems help designers?
- Why is colour accessibility important?
- What is a typography scale?
- What is visual hierarchy? Can you give an example?
- Why is consistency important in design?
- What did you enjoy most in this module?
Preparation for the Next Module
In Module Three, we will learn about Interaction Design
and Prototyping. We will learn how to create micro-interactions,
motion design, high-fidelity prototypes, and how to test
them at scale.
Before the next module, try this:
- Look at an app you use often.
- Notice the micro-interactions (animations, feedback).
- Ask yourself: How does the app respond when I tap a button?
- How does it feel when something loads?
- Write down your observations.
- Bring your notes to the next class.
Get ready to dive deeper into the world of product design.
See you in Module Three!
End of Module Two: Design Systems and Visual Language
Level Two – Fundamentals of Product Design