DSMU Design System for Mauritius

Design System for Mauritius

An independent, open-source, accessibility-first design system for Mauritius government websites. Tech-agnostic foundations with first-party Vue components.

This is an independent project

DSMU is not affiliated with or endorsed by the Government of Mauritius. It is offered openly as a baseline the State may choose to evaluate or adopt. This very site is built with DSMU.

Why

Government websites here are built by different vendors at different times, with inconsistent look, spacing, and accessibility, and no shared design language. DSMU provides a professional, accessible, reusable baseline — inspired by the UK GOV.UK Design System, the US USWDS, and the Netherlands' NL Design System — adapted to the Mauritian context: trilingual English / French / Mauritian Kreol, mobile-first, and WCAG 2.2 AA.

Principles

Accessibility is enforced, not documented: colour contrast lives in the tokens and is checked in CI, and components ship correct semantics by default. The mandatory contract is tokens + CSS + accessible HTML, so any backend can use it; Vue (and later React) are conveniences on top. See Get started for both the plain-HTML and Vue setups — and every example has an HTML tab.

Explore

Foundations

The flag-derived, contrast-checked colour palette, the 8px spacing scale, and the type scale.

Button

Primary and secondary actions, with link-button support.

Form field

Label, hint, input and the accessible error pattern in one component.

Alert

Notification banners for info, success, warning and error.