"A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications."
-Marco Suarez
The Israeli Government Design System
Every business or company has its way of communicating with clients and users, and design makes a big part of it. A design system, which is a complete set of design standards, documentation and principles along with the toolkit (reusable components and patterns) can help design teams manage designs at scale and streamline design work.
​
For a design system to work, it’s not enough to standardize components and patterns and create libraries. The most important part of a design system is its documentation and a guide on using each component. Well-designed systems can help create a stronger relationship between the user and the brand, and maintain consistency across multiple digital products.
The Difference:
Design system (DS)
A comprehensive document for defining and developing standards, improving and designing a proper and consistent digital environment. It serves as a work tool for developers and designers.
A comprehensive document for defining and developing standards, improving and designing a proper and consistent digital environment. It serves as a work tool for developers and designers.
✅ Do's and Don'ts
✅Color Palette
✅ Definition of the brand's design language
✅ All types of breakpoints
✅ Scalable grid
✅ Copy-microcopy
✅ Icons
✅ Accessibility guidelines
✅ Typography and scales
✅ Examples for applications and use
✅ Component examples
✅ Behavioral states
✅ Starter kits
✅ Guidelines for grid definition
✅ Images and graphic assets
✅ Padding/margins
✅ Animation and optimization
✅ Downloadable asset package
✅ Guidelines for different languages
✅ States for different elements
✅ Responsive design
✅ Templates
✅ Best Practices
✅ Platform specifications
✅ Navigation
✅ Modules and templates
✅ Guidelines for use
✅ Specs for development
Pattern Libraries
A structured and organized collection of design patterns that helps maintain consistency across different systems, components, and products.
Do's and Don'ts
Color Palette
Definition of the brand's design language
All types of breakpoints
Scalable grid
Copy-microcopy
Icons
Accessibility guidelines
Typography and scales
Examples for applications and use
Component examples
Behavioral states
Starter kits
Guidelines for grid definition
Images and graphic assets
Padding/margins
Animation and optimization
✅ Downloadable asset package
Guidelines for different languages
✅ States for different elements
✅ Responsive design
✅ Templates
Best Practices
Platform specifications
Navigation
Modules and templates
Guidelines for use
Specs for development
Design guide
A document that defines the rules and principles of the brand's design. It provides a framework that conveys the essence of the design system and instructions on how to implement it.
Do's and Don'ts
✅ Color Palette
Definition of the brand's design language
All types of breakpoints
Scalable grid
Copy-microcopy
✅ Icons
Accessibility guidelines
✅ Typography and scales
Examples for applications and use
Component examples
Behavioral states
Starter kits
✅ Guidelines for grid definition
✅ Images and graphic assets
✅ Padding/margins
Animation and optimization
Downloadable asset package
Guidelines for different languages
States for different elements
Responsive design
Templates
Best Practices
Platform specifications
Navigation
✅ Modules and templates
✅ Guidelines for use
Specs for development
The Challange:
We found that we were repeatedly designing the same components, each time with a different design, followed by new development for different products. Each product had its own unique language and identity. We realized that in order to save design time and resources.
More importantly, the citizen received a service where they navigated between different products with varying appearances, different menu placements, and a lack of consistency in cross-product actions. It was crucial to provide them with a holistic experience that fostered a sense of confidence and orientation, along with strong brand recognition.
we needed a solution.
The Solution
To promote digital transformation, under government decision 1366, government ministries are required to adopt the principles of the government design system.
https://www.gov.il/he/pages/dec1366_2022
• Enhances the user experience and maintains brand consistency (uniform design, consistent behavior patterns, gestures, and interactions)

• Strengthens the citizen's sense of trust and loyalty

• Saves up to 70% of UI work

• Allows focus on UX, instead of spending time on designing and recreating components

• Brings order to chaos, cleans up code, and prevents unnecessary duplication

• Improves development time and streamlines the workflow

• Enables easy cross-product changes without the need for individual adjustments to each component

• Saves significant time and resources, optimizing the entire work cycle.
Benchmark:
Success at the Organizational Level:
32% -
Increased Revenue
A study by McKinsey found that businesses implementing design systems generate 32% more revenue and 56% higher shareholder returns on average.
75% -
Reduced Design Time
A study by IBM found that companies using design systems can reduce design time by 75%.
33% -
Reduced Development Time
A study by Vision found that companies using design systems can reduce development time by 33%.
A study by Vision found that companies using design systems can reduce development time by 33%.
40% - Increased User Satisfaction
A study by Google found that companies using design systems can improve user satisfaction by 40%.
20% - Increased Retention Rate
A study by Nielsen Norman Group found that companies using design systems can increase their retention rate by 20%.
Sources of inspiration:
companies:
Governments:
Professional studies and articles:
Personas:
Primary Audience:
UX Designers in the Government
Secondary Audience:
Developers in the Government
Third Audience:
Managers and Decision Makers
in the Government
Vision & Goals
Defining a clear goal and vision for the government design system project is crucial as it ensures alignment across all teams and stakeholders, providing a unified direction. It helps prioritize efforts, guides decision-making, and ultimately contributes to a consistent, effective, and user-centered digital experience.
BHAG
A Design System that provides solutions for all government digital services and accelerates digital transformation.
North star
Creating unified and accessible digital public services, for the benefit of all citizens of Israel,
Vision
To use digital tools to improve the lives of Israeli citizens on a personal and societal level.
The mission
We will create a digital experience that will enable everyone to get the most out of state services, exercise their rights and perform tasks comfortably and equally.
BRAND
Visaual language and tone of voice
Our Personality: The Ideal School Principal
For the principal, the success of the students is the success of the school.
She manages students, parents, teachers, staff, and interfaces with the Ministry of Education, other ministries, and the local authority.
She is responsible for all areas of life at the school: education, health, care, welfare, finances, administration, law, environment, and well-being.
Principles and Promise to the User:
-Human and Professional: Clear, respectful communication.
-Direct and Precise: Accurate and straightforward information.
-Simple and Accessible: Easy-to-use design for all users.
-Trust and Partnership: Transparency and reliability in every step.
-Clarity and Efficiency: Fast, high-quality results.
-Israeli Energy: Local, culturally aware approach.
​
The conversation with her is:
Human and attentive, she first asks how you're doing before getting to the point.
Precise, speaking only what's necessary without trying to please or impress.
Simple, making sure everyone, from students to authorities, understands her clearly.
Clear and trustworthy, you believe what she says without needing to check.
Israeli, with a genuine, honest energy, understanding the dynamics and language, but always tactful.
The product's tone of voice will be:
Human, professional, direct, and precise. It will speak in a simple, clear, and accessible language, maintaining a balance between personal warmth and efficiency. It will create a sense of trust and treat the user as an equal partner, with attention to their needs without compromising on quality and accuracy. The product will be understandable and easy to use for all users, while adhering to clear principles, free from tactlessness or rudeness, with a touch of Israeli energy that understands the local dynamics and culture.
-
According to surveys, blue is the most preferred color (by both genders).
-
From a UI perspective – compared to other colors (green, red, orange, etc.) – blue conveys authority.
-
Blue is associated with innovation and technology.
-
Blue represents trust, "Who can I count on?" – services and friendliness. It is used in branding banks, governments, social organizations, and security.
-
Blue is considered the most accessible color. Most types of color vision deficiencies can see blue on various backgrounds.
Interface colors: BLUE
The goals we set for our illustrations
-
To convey a warm and human feel, the illustrations should feel slightly rough.
-
Illustrations need to be assertive but not overly prominent, so they don't overshadow the content or "scream" too much, evoking unnecessary emotional intensity.
-
The characters should feel "neutral" – not overly stylized, avoiding stereotypical markers such as skin color or religious affiliation.
The goals we set for our Components
Our components are interactive building blocks for creating a user interface.
We add and improve components experience consistently. If it's adding a brand new component or adding a new varient to an excisting component- or even improving our docomentation.
We try to keep our components simple and provide consistent solutions to common user-interface needs.
