Government of Rwanda Websites Guideline This document outlines the official guidelines for the design, development, and management of websites  across Government of Rwanda institutions. It provides a unified framework to ensure all government digital platforms are consistent, user-friendly, accessible, and secure. The guidelines serve as a reference for designers, developers, and content managers to create websites that reflect the government’s digital vision and uphold high standards of quality and trust. Scope and Objectives To ensure that all Government of Rwanda websites follow a consistent, professional, and user-focused approach to design and content management. By adhering to these standards, institutions will achieve the following benefits: Consistency and Branding Maintain a uniform look and feel across all government web pages, reinforcing a strong and recognizable national digital identity. Improved User Experience (UX) Ensure navigation, content structure, and accessibility features are optimized to deliver an intuitive and inclusive experience for all users. Faster Development and Maintenance Enable developers and designers to work more efficiently by minimizing inconsistencies, streamlining workflows, and reducing the need for repetitive revisions. Content Management System (CMS) Recommended CMS: TYPO3 All Government of Rwanda websites should be developed using TYPO3, an open-source, enterprise-level Content Management System (CMS). TYPO3 has been selected for its reliability, scalability, and security features, which make it particularly suitable for government websites. Preferred Version : Government websites are required to use the latest stable Long-Term Support (LTS) release of TYPO3, currently version 13 LTS, to ensure long-term support, security, and compatibility with modern web technologies. Institutions are encouraged to upgrade promptly to the latest stable release as soon as it becomes available. Why TYPO3? Security and Compliance TYPO3 provides advanced security features, including user access controls, secure workflows, and compliance with data protection standards essential for government institutions handling sensitive information. Scalability and Performance TYPO3 can handle large, high-traffic websites and complex content structures, ensuring consistent performance as government portals grow. Multilingual Support TYPO3 provides powerful built-in tools for managing content in multiple languages. It supports over 85 languages and offers flexible configuration for locales, reading directions, and fallback behavior. This ensures a consistent, accessible, and professional multilingual web presence. Consistency and Standardization Using TYPO3 ensures that all government websites follow a unified structure and design approach, simplifying maintenance and updates across institutions. Local Capacity and Open Source TYPO3 is open-source, which reduces licensing costs and allows customization to meet government needs. Local developers are trained in TYPO3, supporting local expertise and sustainability. For more information on TYPO3 and its features, visit the official TYPO3 website: https://typo3.org/   Branding Elements Establish clear rules for logo usage, color palette, and cultural patterns that maintain brand integrity and enhance visual coherence. Logo Text & Symbol Spacings, Proportions & Safety Areas Symbol and Text Spacing: 1/3 Symbol Height Text size: 1/2 Symbol Height, vertically aligned middle Letter Spacing: -2% Safety Area: 1/3 Symbol Height around the Logo Symbol and Text Spacing: The space between the symbol and the text should be set at 1/3 of the symbol's height. Text Size: The text should have a height that is 1/2 of the symbol's height and should be vertically aligned to the middle of the symbol. Letter Spacing: Adjust the letter spacing to -2% for optimal visual balance and legibility. Safety Area: A clear space around the logo should be maintained, equivalent to 1/3 of the symbol's height. This area ensures that no other elements interfere with the visual integrity of the logo. These proportions and guidelines ensure that the logo remains balanced and visually consistent across all applications. Brand Color Names & Codes of the Rwanda Flag Branding colors are not directly utilized in the identity manual, the colors that are implemented are variations derived from those original hues. Colors Primary with Variations The intent of this Success Criterion is to provide enough contrast between text and its background, so that it can be read by people with moderately low vision or impaired contrast perception, without the use of contrast-enhancing assistive technology. The Primary Blue and its variations will be used in the Main Government Website. The Primary Green and its variations can be used in other categories of Government Websites, such as Institutions, which can be defined later. Secondary with Variations  The Secondary Gold and its variations can be used in a different category of Government Websites, such as National Bank or other which can be defined later. State & Achromatic  State colors enhance user experience by providing intuitive feedback, making it easier for users to understand the status of their interactions at a glance. They help guide users through processes while also ensuring clarity and prompt action where necessary. Black -Display Text Used for Display & Heading Texts, with specific details of usage in Typography (Display 1, Display 2, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6) Black 2 - Body Text Used for Paragraphs and Captions, with specific details of usage in Typography (Paragraph 1, Paragraph 2, Paragraph 3, Caption) Black 3 - Subheading Used for Subheadings, with specific details of usage in Typography (Subheading) White White Used as inverted color for all the Black colors defined, e.g Hero Intro Text with background-image, Gradient or Solid Colored Background Gray Variants Used for coloring various types of text formats, such as labels, input borders, and icons, with specific details of usage in User Interface Elements Gradients Primary with Variations Blue/Green Variants Used as background color with no opacity on various types of web elements, such as Hero Intro, Footer, etc., or as image overlays with opacity on elements with an image background. Patterns Various Pattern Variants  Should be used as subtle background textures or decorative borders, can be applied to sections such as Footer, banners, or dividers, but should not overpower the content. Branding Elements Document Typography Typography plays a key role in readability, accessibility, and overall presentation of information. Inter:  Google Font (Recommended) Inter is a modern, highly legible sans-serif font designed by Rasmus Andersson, optimized for digital interfaces. With tall x-heights and open letterforms, it ensures clarity at smaller sizes, enhancing readability across various devices and screen resolutions. This makes Inter ideal for user interfaces and web design where clear and accessible text is crucial. Inter supports a wide range of languages, including Kinyarwanda, and offers multiple weights - Regular, Semi Bold , Bold , and Extra Bold - providing versatility for different text styles, from body copy to bold headlines. These distinct weights help establish a clear visual hierarchy, aiding in content comprehension and improving the overall user experience. Readability Inter is specifically crafted to maximize readability. Its clean and spacious letterforms reduce eye strain, making it easier for users to read lengthy texts and navigate through complex interfaces. The generous spacing and well-balanced proportions ensure that each character is easily distinguishable, which is essential for maintaining legibility in various contexts, such as mobile devices and high-resolution displays. Accessibility Designed with accessibility in mind, Inter enhances the usability of digital content for all users, including those with visual impairments. The font’s clear distinctions between similar characters (like "1" and "l" or "0" and "O") minimize confusion and errors. Additionally, Inter's support for high contrast settings and scalable design ensures compatibility with screen readers and other assistive technologies, making digital content more inclusive and easier to navigate for everyone. Versatility and Aesthetic Its clean and minimalist design has made Inter a popular choice for creating a sleek, professional look across digital platforms. Whether used for body text, headings, or UI elements, Inter maintains a consistent and harmonious appearance that adapts seamlessly to various design needs. In summary, Inter stands out as a font that not only offers aesthetic flexibility but also prioritizes readability and accessibility, ensuring that digital content is both visually appealing and easy to engage with for a diverse audience. Typography Document Navigation Design Main Menu Main Navigation Purpose: Serves as the primary navigation for the site, guiding users to the most important sections of the website Use clear, descriptive labels for each level menu item, avoid jargon to ensure language is understandable by any user. Limit the number of top level items to prevent visual clutter. Use drop-down for subcategories. On mobile devices a hamburger or toggle menu should be used. All menu items should have hover, focus and active states. Secondary Navbar Secondary navigation Purpose: Secondary navigation should provide contextual or secondary navigation used on subpages. Accepted Variant Font-weight: Bold Text: Uppercase Font size: 16px Line height: 32px Letter spacing: 0 Secondary menu will be positioned sticky on webpage scroll and relative to website header. To be used on subpages if necessary. Use clear, descriptive labels for each level menu item, avoid jargon to ensure language is understandable by any user. Limit the number of top level items to prevent visual clutter. On mobile devices a hamburger or toggle menu should be used. Al menu items should have hover, focus and active states. Side Menu Side Navigation Purpose: Side menu navigation should provide contextual or secondary navigation used on subpages. Footer Menu Footer Navigation Purpose: Contains secondary links that are important for legal, informational and support purposes Breadcrumbs Breadcrumbs Navigation Purpose: Breadcrumbs should provide a visual trail of the user’s location in the site hierarchy helping with navigation and orientation Accepted Breadcrumbs Variants Font size: 14px Line height: 32px Letter spacing:0 Navigation Design Document Search Functionality Search trigger & form Rules: Use a universally recognized search icon (magnifying glass) in the header and ensure icon is easily clickable/tappable and stands out from the other header elements Provide an accessible label using area-label to describe the icon (e.g “Open search”) and enable keyboard focus and activation for users who navigate via keyboard. Icon should remain visible on all devices, if space is limited on smaller screens consider alternative placement that do not compromise accessibility. Clicking the search icon will open a full screen modal with a close button and the search input text and submit. Results Page Rules: Display the user’s search query so they know what was searched Present results in a clean and organized list with clear headings with link, short description and any relevant metadata like dates or categories. Limit the number of results and provide pagination if there are multiple results. Clearly indicate if there are no results found, and offer alternative search option. Maintain visual consistency with the rest of the site’s design, ensuring that typography, spacings and colors follow the proposed design. Use proper hover and focus states for the links. Search Functionality Document Layout & Structure Grid Bootstrap Grid System Purpose: Content should support responsive design and should be organized in a visually harmonious way, using Bootstrap Use Bootstrap’s .container class for fixed-width or   .container-fluid class for full-width to wrap the page content. Use .row class to create horizontal groups of columns helping the management of gutters between columns and .col-* classes to control the layout across different breakpoints. Use predefined column classes ensuring that columns add up to 12 per row at each breakpoint for proper alignment. Ensure that all developers and designers adhere to these guidelines when implementing the layout using Bootstrap’s grid system. Ensure that any custom modifications to the Bootstrap grid system are applied without altering the recommendations in this guideline. Header Purpose: Create a clear, engaging entry point for users that includes branding, navigation elements, language switcher and other essential tools (like search or contact button). Position the logo in a prominent and consistent location (top-left) and ensure the header follows the visual identity with proper spacing and colors. Integrate the main navigation and other key utilities like search icon or contact button. The header components should adapt for smaller screens (e.g. hamburger menu for navigation). Ensure all interactive elements remain accessible and readable on all devices and are keyboard navigable. Header should be sticky to ensure smooth user experience and easy access to navigation while scrolling the page. Footer Purpose: Provide a space for secondary information, additional navigation, legal disclaimers, and contact details. Footer should be divided into clearly defined sections (e.g., About, Legal, Contact, Social Media, Copyright, etc) having critical links (privacy policies, contact info) easily locatable. Footer should be adapted well on small screens with collapsing sections into accordions if necessary. Include necessary legal information (e.g. accessibility statements, privacy policies) Layout & Structure Document UI Elements Uniforms important User Interface elements Content Voice Copywriting Style Purpose : These recommendations will ensure that the website content remains consistent, accessible, and engaging for a diverse audience Tone and Voice Use plain language that is easy to understand. Government websites should avoid jargon and overly technical language. Find balance between a formal, reliable tone and a friendly, accessible approach. Structure and Readability Use descriptive headings and subheadings to break up content and guide the reader. Keep paragraphs brief and to the point. Use bullet points or numbered lists where necessary. Ensure language is inclusive and respectful of all audience segments. Imagery Visual Treatment Purpose : These recommendations will ensure that the website content remains consistent, accessible, and engaging for a diverse audience Relevance and Clarity Choose images that clearly reflect the message of the content. Images should be relevant to the subject matter. Use imagery that reflects the diversity of the audience. Ensure people, places, and services represented in imagery are inclusive and representative of the community. Use high-resolution images that look professional across different devices and screen sizes and ensure they are optimized to maintain fast load times. Accessibility Provide descriptive alternative text (alt text) for all images to support screen readers and improve SEO. The alt text should describe the image’s purpose. Use images that are either government-approved or properly licensed. Call-to-Action (CTA) Design & Interaction Purpose: These recommendations will ensure that the website content remains consistent, accessible, and engaging for a diverse audience Clarity and Messaging Use direct, action-oriented language that clearly tells the user what to do (e.g., “Apply Now,” “Learn More,” “Contact Us”). Where possible, explain the benefit of taking the action. For example, “Sign Up for Updates” can be enhanced to “Sign Up to Stay Informed.” Design and Visibility Position CTAs where they are easily noticeable without overwhelming the user. Often, CTAs are best placed near related content. Ensure that the button size and shape are consistent and align with the design system described in the guideline. Usability CTAs must be accessible via keyboard navigation and properly announced by screen readers. Use semantic HTML (e.g.,