Bahrain Government Website Design System

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.

Key Benefits

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.

Design Principles

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.

  1. User-Centered Design
    • Focus on the needs, behaviors, and contexts of real users.
    • Prioritize clear, simple language and intuitive navigation.
  2. 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.
  3. Consistency
    • Use standardized components, layouts, and visual styles across all services.
    • Maintain a unified look and feel to build trust and familiarity.
  4. 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.
  5. Security and Privacy
    • Protect user data and ensure secure interactions.
    • Comply with relevant privacy Policies and regulations.
  6. 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.

Choice of Colours

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.

Website Components

A Government Design System typically includes several key components that ensure consistency, accessibility, and usability across government websites. Here are the main components:

  1. 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.
  2. 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.
  3. Templates
    • Pre-designed layouts for common pages, home pages, About us, Executive profiles Media, and landing pages.
  4. Icons and Visual Assets
    • A library of icons and images that align with government branding.
  5. Documentation
    • Comprehensive guidelines on how to use the design system, including best practices for developers and designers.
  6. Patterns
    • Reusable design patterns for common interactions and workflows, such as error messages, notifications, and loading states.
  7. 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.

About Homepage

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.

Components of Homepage

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

  • 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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Guideline Reference

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.

Homepage Customization

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.

  1. Statistics
  2. Success stories
  3. Calendar of events
  4. Knowledge center
  5. 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.

Homepage HTML

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.
  1. 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 .
  2. Option 1 - (Full width Banner)
  3. Option 2 - (Split Banner with eservices)
    • English
    • Arabic
    • Note: Entities can use either Full width banner or Split banner
  4. Option 3 - (Split Banner with eservices + We care about you)
    • English
    • Arabic
    • Note: Entities can use either Full width banner or Split banner

Common Templates

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.

Recommended Tools

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.

FAQ

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 accessibility, such as the Web Content Accessibility Guidelines (WCAG), on the World Wide Web Consortium (W3C) website and in Nea website.

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.

Process

1

Visit NEA Website

  • Go to www.nea.gov.bh.
  • Access the Bahrain Government Website Design System.
2

Download the Design System

3

Build the Website

  • Create a new website using the downloaded templates and components.
  • Customize using the CMS (logo, banners, menu items, footer, images, etc.).
4

Initiate iGA Review

  • Notify iGA for a pre–go-live audit.
  • iGA will validate the site for accessibility, performance, and compliance with UN standards.
5

Obtain iGA Approval

  • iGA certifies the website and communicates approval to the entity.
6

Launch the Website

  • Entity proceeds with the official go-live.

Download

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.

Suggestions & Feedback

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 .