Skip to main content

This is a new service - your feedback will help us to improve it.

West Midlands Combined Authority
Design System


The West Midlands Combined Authority (WMCA) Design System is a library of typography, visual styles and user interface components which are documented and updated continuously.

Use the WMCA Design System to make your service or application consistent with wmcads design and styles.

Our design system aims to be platform/framework agnostic. This allows designers and developers from all practices to utilise our design system and avoid repeating work that's already been done.

Design System

Quick start

Web projects

Getting started is as simple as including West Midlands Combined Authority Design System's minified CSS file and adding .wmcads-html to the html element in your service/application.

  <!DOCTYPE html>
  <html lang="en-gb" class="wmcads-html">
      <!-- CSS for WMCA Design System -->
      <link rel="stylesheet" href="http://localhost:3000/css/wmcads-components.min.css" />
      <!-- site content... -->

Want to use our icons, or using a component that references an icon?

Please see the icons page .

Mobile app projects (React Native)

If you are using React Native, you can import our styles like below.

    // Import react native styles for WMCA Design System
    import wmcadsStyles from "http://localhost:3000/css/react-native/wmcads-components.min.js"