How to use EthioWDS

Get started with EthioWDS

Before getting started with EthioWDS

EthioWDS includes accessible, mobile-friendly components out of the box, ensuring consistency and saving teams the need to build everything from scratch for government and public-sector web projects in Ethiopia.

EthioWDS also provides tools and guidance—including design tokens for colors and typography, Amharic and local language support, and components built for accessibility—to make it easier to deliver inclusive digital services that meet user needs and align with emerging Ethiopian digital standards.

Key concepts and tools

You don't need to understand the following concepts to install the design system, but you will need to know them to build with it:

• Design tokens: Design tokens are predefined units of color, spacing, typography, and more that form the building blocks of the design system. See Design tokens and Colors, Typography, Spacing.
• Components: Components are simple, consistent solutions to common user interface needs, like buttons, forms, and navigation. If tokens are the building blocks of the design system, components are the building blocks of a site or service. Browse Components.
• Utilities: Utilities are single-purpose classes mapped to EthioWDS tokens. They let you prototype and style layouts quickly. See Display, Colors, Spacing.
• Guidance: Our guidance covers design principles, accessibility, and best practices so components behave the way users expect. See Guidance and Accessibility.

We've created these resources to help teams start quickly and use a shared language when customizing and updating content. The EthioWDS community is also a resource—reach out with questions or ideas before, during, or after getting started.

Adopt EthioWDS incrementally

EthioWDS helps Ethiopian government and public-sector teams design and build better digital experiences. As a toolkit for government and civic websites, the design system provides:

1. Principles: EthioWDS design principles support consistency, accessibility, and Ethiopian identity. See Guidance.
2. Guidance: UX and content guidance helps ensure components do what users expect. See Guidance.
3. Code: EthioWDS code provides an accessible, mobile-friendly experience. Teams can extend and contribute back. See Installation and Contributing.

The design system is flexible—we expect you to adapt it as you adopt it. Start by applying our design principles, then add tokens and components incrementally to best meet your agency's or project's needs.

Latest updates

Meaningful code and documentation updates are listed in the changelog. For the full release history, see Changelog and the project's releases on GitHub.