The Bahrain Government Website Design System aims to empower agencies to develop fast, accessible, and mobile-friendly websites using a common set of
UI components, patterns, and templates that align with the International Standards.
Objective
To establish a user-friendly and consistent user experience across government websites by prioritizing accessibility, efficiency, and trustworthiness.
This initiative will align with the United Nations Online Services Index and continuously adapt to meeting future user expectations and technological advancement.
Vision
Create a seamless digital experience design, setting global standards for citizens accessing the Government websites.
Mission
Build a design system that empowers government entities to develop accessible, equitable, and inclusive digital websites.
A well-defined Bahrain government website design system delivers a range of significant benefits for both content administrators and users. By adopting
standardized guidelines and reusable components, Bahrain government websites can provide an optimal experience that meets the needs of a diverse user base.
The key benefits include:
Fosters Consistency: Ensures uniform user experiences across government websites.
Reduces Design and Development Time: Streamlines the design and development process.
Enhances User Trust and Engagement: Builds confidence among users and encourages greater citizen participation.
Guarantees Compliance: Meets accessibility and usability standards effectively.
Safeguards Security and Privacy: Protects user data and enhances trust through secure information sharing.
Responsive Design: Adapts seamlessly to various devices and screen sizes.
Benefits for Designers, Content creators and Developers
Designers, content creators and developers across the government can use from the same library of components, knowing designs are accurate and up to date.
This reduces time, costs, effort and duplication, to increase efficiency while building digital content.
- Designers can easily and quickly create wireframes, high-fidelity designs and prototypes.
- Developers can access technical specifications to create pixel-perfect code.
- Content creators can design page concepts with confidence that their layouts will accurately represent the outcome.
- Business owners can review designs and provide feedback.
Government digital design systems are built upon foundational principles that ensure digital services are accessible, consistent, user-centric, and trustworthy.
These principles guide the creation and evolution of digital products across government agencies.
- User-Centered Design
- Focus on the needs, behaviors, and contexts of real users.
- Prioritize clear, simple language and intuitive navigation.
- Accessibility
- Ensure digital services are usable by everyone, including people with disabilities.
- Adhere to recognized accessibility standards (such as WCAG).
- Provide alternative text for images, keyboard navigation, and sufficient color contrast.
- Consistency
- Use standardized components, layouts, and visual styles across all services.
- Maintain a unified look and feel to build trust and familiarity.
- Efficiency and Reusability
- Provide reusable UI components and templates to speed up development.
- Reduce duplication of effort by leveraging shared resources.
- Promote modularity for easier maintenance and scalability.
- Security and Privacy
- Protect user data and ensure secure interactions.
- Comply with relevant privacy Policies and regulations.
- Continuous Improvement
- Regularly update design systems based on user feedback and technological advancements.
- Monitor performance and usability to identify areas for enhancement.
- Foster a culture of learning and adaptation.
Themes play a crucial role in defining the visual identity and user experience of government design systems.
The theme is a cohesive set of colors, typography, spacing, and stylistic elements that create a consistent look and feel across all interfaces.
For the Government Website, blue was selected as the primary theme color. This choice offers several key advantages
- Trust and Reliability: Blue is commonly associated with trust, security, and professionalism, making it a popular choice for corporate websites.
- Calming Effect: Blue has a calming effect, which can create a positive user experience and encourage users to spend more time on the site.
- Versatility: Blue pairs well with a variety of other colors, making it suitable for diverse branding and design themes.
- Readability: Text in blue often stands out well against white backgrounds, enhancing readability and user engagement.
- Accessibility: Blue is generally easier to perceive for users with color vision deficiencies. Proper contrast between blue and background colors can improve accessibility for all users.
A Government Design System typically includes several key components that ensure consistency, accessibility, and usability across government websites.
Here are the main components:
- Design Tokens
- Color Palette: Defines primary, secondary, and accent colors.
- Typography: Specifies font styles, sizes, and weights.
- Spacing and Sizing: Standardizes margins, padding, and layout dimensions.
- UI Components
Few components as listed below
- Buttons: Standardized clickable elements for actions.
- Forms: Including text inputs, checkboxes, radio buttons, select menus, and file uploads.
- Navigation: Menus, sidebars, breadcrumbs, and pagination for moving through sites.
- Alerts & Notifications: Banners, alerts, and site-wide messages for important information.
- Cards: Modular containers for grouping related content or actions.
- Accordions: Expandable/collapsible sections for managing large amounts of content.
- Tables: Structured layouts for displaying data in rows and columns.
- Tags & Badges: Labels for status, categories, or highlighting new content.
- Progress Indicators: Step indicators, progress bars, or timelines for multi-step processes.
- Tooltips: Contextual help or explanations on hover or focus.
- Date & Time Pickers: UI for selecting dates and times.
- File Uploaders: Components for attaching files to forms.
- Breadcrumbs: Show users their location within a site’s hierarchy.
- Search Bars: Input fields for searching site content.
- Headers & Footers: Consistent branding and navigation at the top and bottom of pages.
- Call to Action (CTA) Links: Prominent links or buttons encouraging user action.
- Templates
- Pre-designed layouts for common pages, home pages, About us, Executive profiles Media, and landing pages.
- Icons and Visual Assets
- A library of icons and images that align with government branding.
- Documentation
- Comprehensive guidelines on how to use the design system, including best practices for developers and designers.
- Patterns
- Reusable design patterns for common interactions and workflows, such as error messages, notifications, and loading states.
- Branding Guidelines
- Instructions on how to maintain the integrity of the government brand across digital platforms.
These components work together to create a cohesive and effective design system that enhances user experience for government services.
The homepage of a Government Design System serves as the digital gateway to public services, information, and resources for citizens, Residents,
Visitors and Businesses. It is designed to be clear, welcoming, and accessible, providing immediate insight into the government’s identity, mission,
and priority services.
Key elements include:
- Clear Navigation: Prominently displayed menus guide users efficiently to essential sections and services, keeping choices straightforward and intuitive.
- Accessibility: Adherence to recognized accessibility standards (such as WCAG) ensures the homepage is usable by everyone, including people with disabilities, with features like descriptive alt text, keyboard navigation, and sufficient color contrast.
- Responsive Design: The layout seamlessly adapts to desktops, tablets, and mobile devices, providing an optimal experience regardless of screen size.
- Prominent Search Function: A clearly visible search bar allows users to quickly locate information or services without excessive navigation.
- Calls to Action: Direct links or buttons help users access frequently requested services (e.g., “Submit” or “Start Services”) with minimal effort.
- Strong Visual Identity: Use of government logos, structured page headings, and official branding conveys trust and authenticity.
The homepage is professionaly structured to prioritize user needs and deliver a citizen-centric digital experience, ensuring all visitors can find
important content quickly and efficiently.
The following provides a concise summary of the standard homepage components essential for government websites, highlighting their purpose and typical
usage. It also includes a reference link to an Figma template to facilitate easy implementation of these components along with usage guidelines. This
overview draws on best practices to help government entities deliver clear information, intuitive navigation, and effective citizen engagement from
the homepage.
A hero banner on the homepage of a government website serves as a visually prominent, to instantly capture visitors’ attention and to
communicate the key message or goal of the site, such as important announcements, government initiatives, or major public services.
For effectiveness, a hero banner feature on government websites should include:
- Use high-quality, relevant images should set an appropriate tone and mood, telling a visual story and enhancing trust.
- Hero banners should resize and maintain clarity across various screen sizes and devices (desktops, tablets, smartphones).
- Ensure high contrast between text and background for readability; use overlays if necessary.
Mandatory/Optional: Mandatory
A Hero Banner is a mandatory feature for government websites as it Highlights key messages, services, or campaigns where it creates a powerful first impression.
The "About Us" section on the homepage of government websites serves as a vital introduction that provides citizens, residents,
visitors with a clear and concise overview of the ministry.
For effectiveness, the About Us section should include:
- Clear and concise overview of the ministry.
- A relevant image—such as a photo of the Location, leadership team, or a symbolic representation of its mission—to enhance visual engagement.
Mandatory/Optional: Mandatory
The About Us section should be mandatory on government websites.
The eServices section on the homepage of government websites is designed to provide users with
easy and immediate access to a range of key online government services, often by showcasing featured eServices. This section streamlines
the user experience by highlighting the most frequently used or important services, allowing citizens, residents, and businesses to complete
essential transactions "quickly and efficiently".
For effectiveness, the eServices section on government websites should present each service with the following elements:
- Service Name: Clearly display the name of each eService to help users quickly identify the service.
- Start Now: Include a prominent Start Now button, allowing users to immediately begin the online process without unnecessary navigation, supporting convenience and efficiency.
- Details: Provide a clear and accessible link or expandable section for users to review essential details about the service before launching it. This should include information on eligibility, required documents, steps involved, and expected processing times, enabling citizens to make informed decisions and avoid errors or delays.
Mandatory/Optional: Mandatory for entities offering eservices
The eServices section should be mandatory for government entities that offer online services.
The statistics section on government websites is designed to provide users with access to up-to-date, reliable data and indicators covering
a range of topics such as population, employment, health, economic activity, and digital service usage. This section enhances government
accountability and trust by openly sharing performance and impact data.
For effectiveness, the statistics section on government websites should include the following elements:
- Data Visualizations: Incorporate charts, maps, and tables to make statistics easy to understand and interpret for a variety of users.
- Timely and Regular Updates: Display statistics that are current and publish them as soon as they are available.
- View more statistics to prominently redirect users to a dedicated, detailed statistics page where they can explore additional indicators, visualizations, and historical trends beyond those highlighted on the homepage.
- An Open Data link should redirect users to the official Bahrain Open Data Portal, which serves as a centralized platform for accessing a wide range of public datasets in standardized, machine-readable formats.
Mandatory/Optional: Mandatory for entities engaging with Citizens
The statistics section on the main page is not mandatory for all government websites; instead, it should be required only for websites that actively engage with citizens.
The "We Care About You" section on government websites serves as a clear and visible demonstration of the government’s dedication to the
welfare of its citizens. This section highlights a comprehensive, simplified process for citizens to find and utilize government programs
and to increase public awareness of entity business processes and procedures.
For effectiveness, a “We care about you” section on government websites should include:
- Icon: Provides a quick visual cue that represents the theme of the initiative, making the section easily recognizable at a glance.
- Title: Clearly labels the topic or service being highlighted, ensuring immediate understanding of the section’s purpose.
- Placeholder for Image: Offers space to display a relevant image that illustrates the topic, helping to humanize the content and create an emotional connection.
- Read More Button: Invites users to explore further details about the service or initiative, directing them to comprehensive information and encouraging deeper engagement with government support resources.
Mandatory/Optional: Optional
The "We Care About You" section is not a mandatory requirement for government websites; however, it is considered a best practice
to include it. While official web standards do not require every government entity to display this section, using such a section enhances
the user experience by making important resources easily accessible and visible, helping to build trust and foster a citizen-centered approach.
A Laws and Regulations section on the homepage of a government website is essential for ensuring transparency, compliance, and public trust.
For effectiveness, the Laws and Regulations section should include:
- Key Legislation and Regulations: Clearly list the main laws, acts, and regulations relevant to the agency’s services and jurisdiction. Include the legislation date for each law or regulation to inform users of when they came into effect or were last amended.
- Updates and Amendments: Highlight recent changes or updates to laws and regulations to keep citizens informed and ensure content is current. Each update should display its amendment date for context
- Links to Full Texts: Offer direct access to the official, full legal texts or external authoritative sources for users who need detailed information.
Mandatory/Optional: Mandatory
A Laws and Regulation section should be mandatory for government entities, as it ensures transparency, legal compliance, and public access to
the rules and standards governing the entity's operations and services.
The Sustainable Development section on a government website homepage should highlight the government’s commitment to long-term social,
economic, and environmental well-being. Its purpose is to inform citizens about ongoing initiatives, policies, and programs aligned with
the United Nations’ Sustainable Development Goals (SDGs) and national sustainability strategies.
The “Read More" option is provided, that directs users to detailed information about the Sustainable Development Goals (SDGs), their targets, and related initiatives.
Mandatory/Optional: Mandatory
The SDG (Sustainable Development Goals) section should be mandatory on the homepage of all government entities, and it is as per UN requirements.
The Success Stories section on a government homepage highlights real-life examples of how citizens, organizations, or communities have
benefited from government services or initiatives
For effectiveness, the Success Stories section should include:
- Clear, concise narratives showing how government services positively impacted real citizens or organizations.
- Plain language and engaging visuals to make stories accessible and relatable to all users.
- Should demonstrates Impact and Value by providing proof how government services are effective and beneficial to citizens and businesses.
- Should encourages Engagement and Participation by providing relatable examples to motivate more citizens to use digital government services.
Mandatory/Optional: Mandatory for entities engaging with Citizens
The Success Stories section should be mandatory for sectors such as health, education, environment, employment, Labor, social, youth, women,
and justice in line with United Nations requirements. These sectors are directly linked to Sustainable Development Goals and international
priorities, and sharing evidence-based achievements enhances credibility and transparency.
The purpose of Our Locations along with the interactive map on a government website homepage is to enhance user engagement by providing
an intuitive, visual way for visitors to find government offices, services, and resources quickly and easily. Interactive maps enhance user
experience by allowing visitors to visually locate facilities, get directions, and access contact details efficiently, which supports
accessibility and transparency.
For effectiveness, “Our Location section” should include:
- User-friendly and responsive, enabling zoom, pan, and click functions for detailed information about each location.
- Integrated with contact details and directions, so visitors can quickly get address, phone numbers, and navigation assistance.
- Accessible across devices, ensuring mobile and desktop users have a seamless experience.
- Visually clear and branded, using recognizable icons and consistent design to match the government style guidelines.
Mandatory/Optional: Optional, but recommending for entities having multiple branches
The "Our Location" section featuring interactive maps should be mandatory on government websites to provide users with clear, easy-to-use
geographic information about office locations and service centers.
A "Knowledge Center" is a dedicated section on government websites, designed to centralize important resources and improve user support.
This section typically brings together key informational tools such as FAQs, Publications, and User Guides to assist citizens, businesses,
visitors and stakeholders in navigating government services and policies more effectively.
A "Frequently Asked Questions (FAQ)" section on the homepage of government websites plays a crucial role in improving citizen access to
information and overall user experience. The section provides immediate responses to the most common queries from citizens, reducing the
need for direct contact or lengthy site navigation. Also, reduces repetitive requests received by support or call centers, allowing staff
to focus on more complex queries.
For effectiveness, a "FAQ section" on government websites should include:
- Real and Relevant Questions.
- Clear, Concise Answers.
- Logical Organization of Questions & Answers.
- Use visual aids like graphics, or videos as needed to help explain complex topics.
- Continuously monitor user feedback and analytics to keep questions and answers accurate and up to date.
Mandatory/Optional: Mandatory for entities engaging with Citizens
The statistics section on the main page is "not mandatory for all government websites"; instead, it is required only for websites that actively engage with citizens.
The Publications section on a government website provides official documents and reports that inform the public about government activities,
policies, and research. It offers easy access to a wide range of government-issued materials such as annual reports, research papers,
and policy documents. This section ensures transparency by making authoritative information available and downloadable to all citizens.
For effectiveness, the Publications section of a government website should highlight:
- Clear, concise titles and summaries to help users quickly find relevant documents.
- Up-to-date publications organized by type, topic, or collection for easy navigation.
- A download option allowing users to easily save documents for offline access.
Mandatory/Optional: Mandatory for entities that have publications to share with the public
The Publications tab is mandatory for government entities that have publications to share with the public, as it ensures that important
documents and updates are accessible and transparent. However, for government entities that do not have any new or relevant publications,
this section is not required and can be hidden.
- The User Guide helps users navigate government website content effectively by providing clear, step-by-step instructions, plain language explanations, and intuitive categorization of services, making it easier for all users, including those with varying digital skills—to find and understand information quickly.
Mandatory/Optional: Mandatory for entities engaging with Citizens
The User Guide section is mandatory only for government entities that offer e-services for citizens, as it provides essential instructions
and support for accessing and using these services. Entities that do not offer e-services may treat this section as optional based on their
website’s purpose and content requirements.
Government websites should include a Calendar of Events to keep citizens informed about upcoming, ongoing, or past government activities, public meetings,
awareness campaigns, and important national or local events. This promotes transparency, encourages public participation, and helps users
plan their engagement with government services.
An effective Calendar of Events section should include:
- Event name, date, time, and location for each listing.
- Visuals or promotional images to highlight key events.
- Map integration for event locations, if applicable.
- View More Events Links for more event details.
Mandatory/Optional: Optional
The Calendar of Events section on government websites is not mandatory and is considered optional. While it can be a valuable tool for
informing the public about upcoming, ongoing, or past government-related events, public meetings, deadlines, and community activities.
The "Engage with Us" section—featuring Live Chat, Contact Us, Participate, and a Complaint System—serves as a comprehensive communication
hub that strengthens the relationship between citizens and government.
For effectiveness, “Engage with Us” should include:
- Live Chat provides real-time assistance, helping users resolve issues, ask questions, and receive guidance on government services instantly. If a government entity does not have the resources or infrastructure to support Live Chat, it can be considered an optional feature rather than mandatory.
- Contact Us offers multiple channels (phone, email, forms) for citizens to reach government representatives for inquiries, support, or feedback, ensuring help is always accessible.
- The National Complaint System (TAWASUL), that allows users to submit complaints or grievances about services or experiences, ensuring that concerns are addressed efficiently and transparently.
- eParticipation Platform (Sharekna), which enables citizens to contribute ideas, participate in consultations, and engage in decision-making processes, fostering a sense of inclusion and transparency in government operations.
Mandatory/Optional: Mandatory
The "Engage with Us" section—featuring Live Chat, Contact Us, eParticipate, and a Complaint System—should be mandatory for government entities.
Government websites, including a public opinion poll on their home page, can greatly enhance citizen engagement and provide valuable
insights into public needs and priorities.
Purpose of Opinion Polls on Government website Home Pages is to:
- Collect feedback on policies, services, and current issues.
- Increase transparency and trust by showing that citizen voices matter.
- Encourage wider community participation in governance.
For effectiveness, an Opinion Poll feature on government websites should:
- Embed a simple, easy-to-use polling widget on the homepage with a clear call to action – Submit.
- Provide clear options for users to choose from, ensuring that the poll contains concise, unbiased answer choices to facilitate quick and accurate responses.
- Update polls periodically to address timely topics.
- Use the data internally to shape communication or policy and externally to show responsiveness.
- Include a “Previous Polls” link that allows visitors to view past polls and their results. This feature provides continuity, shows how public input has evolved over time, and builds trust by openly sharing collected data.
Mandatory/Optional: Mandatory for entities engaging with Citizens
Opinion polls are mandatory for government entities engaging with citizens, and recommended practice for transparency and informed governance.
A Media Center on a government website serves as a centralized hub for official information dissemination, public engagement, and digital
communication. Its main elements include news section, Photos and video section, Social Media Widgets.
The News section on a government website homepage plays a vital role in keeping citizens informed with the latest updates, announcements,
and important information from the government. It should feature a clean, mobile-friendly design that allows users to quickly scan headlines
and access full articles easily by ensuring transparency and trust.
For effectiveness, “News Section” should include:
- Clear, Concise headlines and summaries for quick scanning.
- High-quality, relevant images accompanying each news item to enhance visual appeal and context.
- Publication or release dates are clearly displayed with each news item to establish timeliness and credibility.
- A dedicated news landing page linked from the homepage for comprehensive access.
Mandatory/Optional: Mandatory
The News section should be mandatory on government websites to ensure citizens have direct access to timely updates, official announcements,
and important information from public entities.
The Photos and Videos section of government websites serves as a dedicated multimedia hub, allowing citizens and stakeholders to visually
engage with government activities, events, and communications.
For effectiveness, “Photos and Video section” should include:
- Photo Galleries: collections of official event images, infographics, and documentation that allow citizens to follow government activities visually.
- Video Library : Includes press conferences, campaign videos, project summaries, and instructional content presented in an engaging and in accessible format.
- Content to be organized by event, topic, or date, allowing users to quickly find relevant visuals.
Mandatory/Optional: Mandatory
A photo gallery should be a mandatory feature on government websites as it is an authentic visual documentation of government activities, events, and community engagement.
Social media widgets, interactive tools embedded on government websites to display real-time updates and posts from official social media
accounts, helping Government entities to engage with citizens directly and expand their digital outreach.
For effectiveness, “Social Media section” should include:
- Integration of real-time feeds from platforms like Twitter (if exist), Facebook, YouTube, or Instagram directly into the website.
- Encouraging for visitors who can follow, share, or directly engage with government content without leaving the site.
Mandatory/Optional: Optional
Incorporating embedded feeds or interactive widgets—is required only for government entities that possess the proper authorization or license to implement such features.
The homepage of government websites should prominently feature government mobile apps and highlight national initiatives to ensure users
have immediate access to essential digital services. Featuring essential mobile applications ensures residents can quickly access official
digital services, enhance convenience and support Bahrain’s mobile-first public engagement strategy.
Government Entities can actively promote the official mobile apps they have developed, highlighting their features and benefits through
dedicated sections, visual links, and clear calls-to-action. If an entity does not have its own app, it should promote
national eGovernment apps. This not only improves usability and public awareness but also supports Bahrain’s digital government objectives
by leveraging mobile technology to enhance citizen engagement and service delivery.
Mandatory/Optional: Mandatory
A Government Apps section should be mandatory on government websites to ensure citizens can easily find, access, and download official mobile
applications. Mandating this section supports the Kingdom’s strategic transformation toward smart devices, enhances the visibility of trusted
government apps, and ensures the public has direct access to Government App store.
Purpose: The feedback tool helps government entities gather input on website usability, detect content gaps, and identify areas for
improvement, ultimately enhancing service quality, user satisfaction to ensure government web platforms meet the evolving needs of citizens.
For effectiveness, a User Rating feature on government websites should include:
- Simple Rating Options: Allow users to quickly express their opinion, typically with a "Yes/No" choice with thumbs up/down.
- Optional Comment Box: Provide an option for users to leave additional feedback or suggestions, helping clarify why they gave a particular rating.
- Offer fields for users to enter their email address and/or mobile number if they wish to receive a response or follow-up—emphasizing clearly that providing this information is optional and not required to submit feedback.
- The Check box option to be provided for the user to choose from the list of common issues to choose from, such as Information not up to date, Information not complete, Page contains broken links, that helps the website team quickly identify and address specific problems.
- Feedback Acknowledgment: To display a brief, thank-you message after submission to acknowledge the user’s input.
Mandatory/Optional: Mandatory
A user rating section is mandatory feature on both the homepage and internal pages of all government websites. This essential requirement
ensures that every page is open to citizen feedback, driving ongoing service improvements and enhancing accountability.
Bahrain Government websites play a vital role in delivering information, services, and engagement opportunities to citizens. To ensure consistency,
accessibility, and effective communication, specific homepage components are recommended—or required—by government web standards.
Mandatory / Optional components on Homepage
The following table outlines these standard elements, clarifying whether each component is mandatory, optional, or conditionally required based on the
functions and responsibilities of the government entity. This approach helps Government entities to present a user-friendly, transparent, and
comprehensive digital presence tailored to the diverse needs of the public.
Hero Banner |
Mandatory |
About Us |
Mandatory |
E-services |
Mandatory for entities offering eservices |
Statistics |
Mandatory for entities engaging with Citizens |
We care about you |
Optional |
Laws & Regulations |
Mandatory |
Sustainable Development |
Mandatory |
Success Stories |
Mandatory for entities engaging with Citizens |
Our Location |
Optional, but recommending for entities having multiple branches |
Knowledge Center - FAQ |
Mandatory for entities engaging with Citizens |
Knowledge Center - Publications |
Mandatory for entities that have publications to share with the public |
Knowledge Center - User guide |
Mandatory for entities engaging with Citizens |
Calendar of Events |
Optional |
Engage with us |
Mandatory |
Opinion Poll |
Mandatory for entities engaging with Citizens |
Media Center |
Mandatory |
News |
Mandatory |
Photos - Videos |
Mandatory |
Social Media |
Optional |
Government Apps |
Mandatory |
User Rating |
Mandatory |
Adding new content block / sections
While above listed components form the core of a compliant homepage, entities are also permitted to add new sections between the listed components
according to their unique needs and audiences. These additional sections may be incorporated between standard components, allowing flexibility for
Government entities to highlight special initiatives, provide tailored information, or enhance engagement, provided they maintain an organized,
user-friendly layout meeting accessibility standards.
Note :
Specifically, while adding new sections Government entities should follow the design guideline of alternating between blue and white background themes.
This color alternation not only enhances the visual appeal and readability but also helps users easily distinguish between different content areas,
ensuring a pleasant and coherent browsing experience aligned with government branding standards.
Rearranging content blocks / section
The homepage design also supports dynamic customization, allowing government entities to rearrange content blocks to prioritize information based on their
specific needs. For example, the “Statistics” section can be moved down the page while bringing the “Calendar of events” section higher up. This
flexibility enables organizations to highlight the most relevant content for their audience, improving user engagement and navigability while adhering
to the overall design and accessibility standards. However rearrange is allowed only for the below and rest all should remain in the same place.
- Statistics
- Success stories
- Calendar of events
- Knowledge center
- Our locations
Note :
Specifically, while moving/rearranging the allowed sections Government entities should follow the design guideline of alternating between blue and white
background themes. This color alternation not only enhances the visual appeal and readability but also helps users easily distinguish between different
content areas, ensuring a pleasant and coherent browsing experience aligned with government branding standards.
To facilitate the development and standardization of government websites, we are providing access to the official homepage template links below. Government
entities are encouraged to review these templates options and apply them as appropriate to ensure compliance with recommended standards and best practices.
- The templates are designed to enhance usability, accessibility, and alignment with UN guidelines.
- Adopting these templates will help deliver a consistent and user-friendly experience to all.
- Action Required:
- Please refer to the provided three homepage templates linked below.
- Apply the relevant template to your website homepage to ensure adherence to Government website standards.
- For any customization need please refer to the homepage customization
homepage customization.
- All components of the Government website design system are available for download from GitHub .
- Option 1 - (Full width Banner)
- Option 2 - (Split Banner with eservices)
-
English
-
Arabic
- Note: Entities can use either Full width banner or Split banner
- Option 3 - (Split Banner with eservices + We care about you)
-
English
-
Arabic
- Note: Entities can use either Full width banner or Split banner
Here’s a brief summary of the most common page templates used in government website design systems:
The About template provides a comprehensive overview of the ministry or entity, highlighting its purpose, history, and core values.
This template offers sections for detailing the organization's vision and mission, strategic goals, and alignment with Bahrain 2030
initiatives. It serves to inform stakeholders and the public about the entity's foundational principles and objectives, fostering
transparency and engagement.
About Us Page
The History template offers a comprehensive narrative of the ministry's origins and its development over time. It highlights important
milestones, achievements, and pivotal events that have influenced the organization. This template aims to inform stakeholders and the
public about the ministry's journey, showcasing its growth and impact on society.
History Page
The Organizational Chart template provides a structured visual representation of an organization's hierarchy, illustrating the
relationships and roles within the team. This template is designed to enhance clarity and understanding of the organizational structure,
making it easier for users to navigate and comprehend the roles and responsibilities of each member.
Organization Chart Page
The Executive Profiles page template highlights the key individuals within an organization, such as management, board members, and other
important roles. This template offers a well-organized and visually engaging method to present each person's professional background and
contributions. It promotes transparency and connection by enabling stakeholders to learn more about the leadership team steering the
organization.
Executive Profile Page
The Message from the President page template serves as a platform for the leader of the ministry or entity to communicate directly with
stakeholders and the public. This template provides an opportunity to share insights, updates, and reflections on the organization's goals,
achievements, and future direction. It highlights the president's dedication to transparency and citizen engagement, fostering a stronger
connection with the community.
Message from President Page
The Statistics template is designed to provide a flexible and comprehensive framework for presenting data and insights relevant to any
ministry or entity. This template incorporates various components from the design system, allowing for tailored presentations of
statistical information. By utilizing different sections, users can effectively communicate key metrics and performance indicators,
making it suitable for a wide array of purposes, from reports to public dashboards.
Statistics Page
The Legislation page is designed to showcase a comprehensive collection of laws, regulations, and legal documents relevant to the
government entity. Using a clear and organized card-based layout, each piece of legislation is presented as an individual card summarizing
key information such as the title, date of enactment, and a brief description. Users can easily browse through these cards and select any
legislation to access detailed information, including full texts, amendments, and related documents. This intuitive design facilitates
efficient navigation and helps users quickly find and understand the legal frameworks that govern the entity’s operations and public
services.
Legislation Summary Page
The Legislation detail page provides comprehensive and in-depth information about a specific law, regulation, or legal document. Users can
access the full text, key provisions, historical amendments, and related legal references in a clear and organized format. This page is
designed to offer transparency and ease of understanding, helping citizens, stakeholders, and government officials explore the legal
framework that guides policies and operations. Multimedia elements, such as downloadable documents or related links, may also be included
to enhance user engagement and accessibility.
Legislation Details Page
The Services template is designed to showcase the various offerings within a ministry or entity. It provides a visually appealing and
organized layout that highlights each service, making it easy for users to understand its features and benefits. With a focus on clarity
and accessibility, this template is ideal for presenting services in a way that engages and informs the audience.
Services Page
The Service Detail Page template is designed to provide comprehensive information about a specific service offered by a ministry or entity,
whether it is a physical service or an e-service. This template ensures that users have all the necessary details at their fingertips to
easily understand and avail themselves of the service. It includes essential information such as service descriptions, requirements, fees,
and procedural steps, presented in a clear and organized manner. By offering a user-friendly layout, this template enhances user experience
and facilitates seamless access to the services provided.
Service Details Page
The Projects Master page offers an intuitive, card-based layout that displays all initiatives in a visually organized manner. Each project
is represented by a distinct card summarizing key information such as the project title, and a brief overview. Users can easily scan
through the collection of project cards and select any card to access comprehensive details about the chosen initiative, including its
objectives, progress updates, and outcomes. This approach streamlines navigation, making it simple for users to discover, explore, and
understand the full scope of the ministry or entity’s projects.
Project Summary page
The Project details template is crafted to effectively present completed initiatives within a ministry or entity. This template not only
highlights the achievements of various projects but also provides detailed insights into their status and timelines. Its visually
engaging layout ensures that users can easily navigate and comprehend the information, making it a valuable tool for showcasing project
outcomes.
Project details page
The Event Details page template is designed to provide a comprehensive overview of specific events, offering users all the necessary
information they need to engage fully. This template enhances user experience by presenting event details in a clear and organized manner,
making it easy for attendees to understand what to expect and how to participate. Its visually appealing layout ensures that users can
navigate through the information seamlessly.
The following essential information should be included:
- Overview
- Description
- Location map
- Downloadable documents (if any)
- Ticket information (if any)
- Eligibility criteria
Event Details Page
The Login template is designed to provide a clean and straightforward interface for users to access their accounts. Its minimalist layout
emphasizes usability and accessibility, ensuring that users can easily input their credentials and log in to the system. This template is
suitable for various applications, offering a seamless login experience across devices.
Login Page
The FAQ template is designed to provide users with quick access to frequently asked questions and their answers, enhancing user experience
by addressing common inquiries. This template offers an organized structure that helps users navigate through various topics, allowing them
to find relevant information efficiently. By utilizing a clear layout and intuitive design, the template serves as a valuable resource for
users seeking assistance or clarification on specific matters.
FAQ Page
The Search Results page template is designed to provide users with a streamlined and efficient way to find relevant information across
various content types. This template enhances the search experience by presenting results in a clear and organized format, allowing users
to quickly identify and access the information they seek. With a user-friendly layout, it ensures that users can navigate through results
effortlessly.
Search Results Page
The Form template is designed to facilitate user input through a structured and organized layout. It is adaptable for both
application-based forms and simpler formats, making it suitable for a wide range of purposes, from complex multi-step applications to
straightforward contact or feedback forms. The template's design enhances usability and accessibility, ensuring that users can navigate
and complete forms with ease.
Form Page
The Awards & Achievements template is designed to prominently showcase the accolades and accomplishments of the ministry or entity.
This template provides a structured and visually appealing way to highlight significant milestones, fostering a sense of pride and
credibility. It serves as a valuable resource for users to explore various awards and achievements, reinforcing the reputation and
accomplishments of the ministry or entity.
Awards & Achievements Page
The "We Care About You" page uses a card-based design to clearly showcase various support services, programs, and resources offered by
the government entity. Each card provides a concise summary of a specific initiative or assistance option, allowing users to easily
browse through the offerings at a glance. Visitors can select any card to explore detailed information about the chosen card, including
eligibility, steps to access support, and contact details. This visually organized and interactive format enhances user experience by
making it simple for citizens to find and engage with the assistance that best meets their needs.
We care about you Page
The "We Care About You" page on government websites serves as a clear and prominent demonstration of the government’s dedication to the
welfare and wellbeing of its citizens. This section is designed to simplify the process for users to find, understand, and access various
government programs and services. By presenting clear, step-by-step guidance and easy-to-navigate information, it increases public
awareness of the entity’s business processes and procedures. This transparent and citizen-centered approach fosters trust, enhances
accessibility, and encourages active engagement with government initiatives aimed at improving quality of life for all community members.
We care about you details Page
The Success Stories page showcases the entity’s key achievements and impactful outcomes through a visually engaging card-based format.
Each story is presented as an individual card, featuring a concise summary and highlights of the accomplishment. To enhance usability,
a search option is provided, allowing users to quickly find specific success stories based on keywords or topics of interest. Users can
easily browse or search through the collection of success story cards, and select any card to view the full details.
Success stories Page
The Success Story detail page offers users a deeper look into each highlighted achievement, presenting comprehensive information about
the background, objectives, and impact of the story. To bring these successes to life, the page features dedicated sections for photos
and videos, allowing users to view compelling visual and multimedia content related to the accomplishment. This rich presentation format
helps users connect with and better appreciate the positive outcomes delivered by the ministry or entity, while making the experience both
informative and engaging.
Success stories details Page
The SDG (Sustainable Development Goals) page enables government entities to showcase the specific global goals that are most relevant to
their mission and activities. On this page, each entity can clearly list the SDGs they are addressing, outline their tailored objectives
for contributing to these goals, and highlight measurable achievements or progress made towards each target. This transparent presentation
allows stakeholders and the public to easily understand how the entity’s initiatives align with the broader 2030 Agenda for Sustainable
Development, while promoting accountability and demonstrating the real-world impacts of government action. By providing concise yet
comprehensive information on goals, objectives, and outcomes, the SDG page supports effective communication, encourages shared commitment,
and fosters ongoing engagement in advancing sustainability.
Sustainable Development Goals Page
The Publication Summary page employs a card-based design to neatly present a collection of reports, articles, and official documents
published by the ministry or government entity. Each card provides a succinct overview including the publication title, date, and a brief
summary, allowing users to quickly scan and identify items of interest. Visitors can use the integrated search option to easily find
specific publications based on keywords or topics. Upon selecting a card, users can access full publication details and enjoy an
interactive flip book feature that enables smooth, page-flipping navigation directly within the browser. This engaging and user-friendly
layout, combining powerful search and innovative viewing tools, enhances accessibility, encourages in-depth reading, and improves overall
user experience.
Publications Page
The Partners page presents a well-organized card-based layout that highlights the various organizations, institutions, and stakeholders
collaborating with the government entity. Each card features a concise overview of a partner, including their name, logo, and a website
link. To enhance user experience, filter options are provided, allowing users to easily sort and view partners based on their scope of
collaboration—local, international, or regional. This interactive and visually appealing format makes it simple for users to explore and
discover key partnerships, fostering transparency and showcasing the collective efforts driving government initiatives forward.
Partners Page
The Reports template is designed to effectively present a variety of documents and data insights provided by a ministry or entity. This
template focuses on delivering essential information in a structured and visually engaging manner, enabling users to easily access and
understand the contents of each report. By utilizing card components specifically tailored for reports, this template ensures clarity and
accessibility, making it a valuable resource for those seeking detailed information and analyses.
Reports Page
  -  
Reports Detail Page
The General Page template is a versatile and adaptable template designed to accommodate the diverse content needs of government entities.
Two templates are provided as a structured yet flexible layout that allows for the inclusion of various types of information, multimedia,
and interactive elements tailored to the particular objectives and audience of the page.
General Template 1 Page
  -  
General Template 2 Page
The Photos and Videos page features a card-based layout showcasing a diverse collection of multimedia content related to the ministry or
government entity. Each card represents a specific photo gallery or video, providing a brief description or title to help users quickly
identify the content of interest. Visitors can easily browse or use the integrated search option to quickly find specific photos or videos
based on keywords or topics. Upon selecting a card, users can view the full media, with videos playable directly on the page via a built-in
player, offering an engaging and interactive experience. This organized and multimedia-friendly format enhances accessibility and enables
users to explore the entity’s activities, events, and achievements through compelling visual storytelling.
Photos and videos Page
The News page template is designed to provide a comprehensive and engaging platform for displaying news articles and blog posts.
It serves as an essential resource for users seeking in-depth information on various topics, fostering a connection between the content
and its audience. With a focus on clarity and accessibility, this template enhances user experience by allowing easy navigation and
interaction with the content.
News Page
The News List template is designed to present a comprehensive list of content, accommodating either news articles, or blog posts. This
template facilitates user engagement by allowing easy navigation to detailed pages for each item. With a clean
layout and organized structure, it ensures that users can quickly find and access relevant information, making it an effective resource
for staying updated on the latest news, or insightful blog entries.
News List Page
The News Details page template is designed to provide a comprehensive and engaging platform for displaying news articles and blog posts.
It serves as an essential resource for users seeking in-depth information on various topics, fostering a connection between the content
and its audience. With a focus on clarity and accessibility, this template enhances user experience by allowing easy navigation and
interaction with the content.
News Detail Page
The Contact Us template is designed to provide users with all necessary information to connect with the ministry or entity effectively.
This template serves as a comprehensive resource for facilitating communication and ensuring that users can easily find and reach out to
the appropriate contacts. Its organized layout enhances user experience by presenting essential details in a clear and accessible manner.
Contact Us Page
To ensure a smooth, safe, and legally compliant user experience, it is important for websites to include key policies such as Terms of Use,
Privacy Policy, Accessibility, and eParticipation Policy.
It is crucial that these policies are clearly displayed and easily accessible from every page of the website. They should be linked in the
footer to ensure all users can review and understand their rights and obligations while using the site.
Here are recommended open-source and free tools for accessibility and web performance testing, including those beneficial for implementing the Bahrain
Government Website Design System:
- WAVE Web Accessibility Evaluation Tools
Widely used for evaluating compliance with accessibility guidelines, WAVE provides visual feedback and suggestions to
help developers identify issues quickly. WAVE Chrome, Firefox, and Edge browser extensions are available for testing accessibility directly within
your web browser.
- Lighthouse
The tool measures user-centric metrics like page load speed, visual stability, interactivity, and accessibility,
providing practical recommendations for optimization. Lighthouse can be used directly in Chrome DevTools, and with just a few clicks, Lighthouse
can run audits on any web page—public or behind authentication—and generate detailed reports covering key areas such as performance, accessibility,
SEO, best practices, and progressive web app capabilities.
- Testing with Assistive Technology
The Bahrain Government Website Design System encourages testing using tools like screen readers (NVDA , JAWS , VoiceOver ),
keyboard-only navigation, and compatibility with assistive labs.
- WCAG Color Contrast Checker | Contrast Checker
A WCAG color contrast checker and tpgi are the tools used to assess the difference in luminance or color between text
and its background on a digital interface. It ensures that text is easily readable against its background, especially for people with visual
impairments.
- IBM Equal Access Accessibility Checker
The IBM Equal Access Accessibility Checker is an open-source tool for web developers and auditors that utilizes IBM's
accessibility rule engine, which detects accessibility issues for web pages and web applications. The extension integrates into browser development
tools, providing an integrated checking experience, helping users quickly identify the source of accessibility issues and try fixes.
- GTMETRIX
GTmetrix is a popular and comprehensive website performance testing tool that enables users to analyze the speed and
efficiency of their web pages. By simply entering a website URL, GTmetrix generates a detailed performance report, grading the site using metrics
like Google Lighthouse scores, Core Web Vitals (LCP, TBT, CLS), and YSlow recommendations. The platform highlights key performance issues and
provides actionable suggestions for optimization, such as improving load times, reducing page sizes, and optimizing server requests.
A Bahrain Government Design System provides a set of reusable components, styles, and guidelines to help government teams build consistent,
accessible, and user-friendly Websites.
The system is intended for designers, developers, content creators working on government websites to ensure consistency and usability across all platforms.
Common components include templates, buttons, forms, navigation menus, tables, error messages, and other user interface elements
designed with accessibility and usability in mind.
You can start by reviewing the style guides, installing component packages or libraries, and using available templates and documentation
to create a new website.
The government design system recommends using standardized, accessible, and web-safe fonts to ensure consistency, readability, and
compatibility across all digital platforms. For Arabic content, the preferred typeface is Noto Kufi, which provides excellent legibility
and a modern appearance. For English content, Public Sans is recommended due to its clarity and versatility. Using these official typefaces
as specified in the design guidelines ensures a cohesive brand identity and supports accessibility for diverse user groups. For more
details please refer to Bahrain Government Design System 1.0 - 🖥 Components.Web .
Yes, the Bahrain Government Design System is fully compliant with HTML and CSS validation standards, ensuring zero errors in code quality.
It also strictly adheres to the WCAG 2.2 accessibility guidelines at the AA level, guaranteeing accessible and inclusive experiences for
all users. The system is regularly tested against validators and accessibility checkers to maintain this high standard of compliance for
government websites.
Bahrain Government Design System provides frontend templates that define layouts for common page types to speed up development and ensure consistency.
No, entity should not use the same images provided in the Bahrain Government Website Design System templates. These images are for
illustrative purposes only and must be replaced with your own original or appropriately licensed images that represent your identity.
Using unique images ensures that it remains authentic, complies with copyright laws, and better meets the needs of the users.
Updates and improvements are made through a governance framework involving user feedback, design and development teams, and
documentation updates to ensure the system evolves with user needs.
Official Bahrain Government design system typically includes detailed documentation, examples, and guidelines , as well as contact methods
for support or feedback.
The design system components are tested for compatibility with commonly used browsers and mobile devices to ensure a consistent and accessible experience for all users.
Regularly check for updates to the design system on nea.gov.bh to stay informed of new components, guidelines, and changes.
The design system’s components and layouts are built to be fully responsive, ensuring government websites provide a seamless experience
on all devices—including desktops, tablets, and smartphones. This guarantees accessibility and usability for all users, regardless of
screen size or device type.
You can find comprehensive standards for performance and website optimization from the reference.
The source code for the Bahrain Government Design System are publicly available
on GitHub at IGA-BH . From there, you can download the entire repository as a ZIP file or clone it using Git, making it
simple to access all necessary files.
Visit NEA Website
- Go to www.nea.gov.bh.
- Access the Bahrain Government Website Design System.
Download the Design System
Build the Website
- Create a new website using the downloaded templates and components.
- Customize using the CMS (logo, banners, menu items, footer, images, etc.).
Initiate iGA Review
- Notify iGA for a pre–go-live audit.
- iGA will validate the site for accessibility, performance, and compliance with UN standards.
Obtain iGA Approval
- iGA certifies the website and communicates approval to the entity.
Launch the Website
- Entity proceeds with the official go-live.
Government entities can download the government design system directly from GitHub, where the official repository provides all necessary code for
integrating the system into your website projects.
To get started, simply visit the GitHub repository and follow the provided steps for downloading
as a zip file.
We welcome suggestions and feedback on the website design guidelines. Any input will help enhance and refine the guidelines, making this Government
website design system more comprehensive and relevant.
Please share your suggestions, feedback, clarifications, and queries by filling out the feedback form .