West Midlands Combined Authority
Design System

Overview

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.

Contribute

Github code repository

Zeplin designs

Contribute to our design system

Report an issue

Design System

Styles

Make your service look and feel like wmcads: colours, icons, typography and utility classes

Components

Reusable parts of the user interface: content, map and form elements; buttons and messages

Patterns

Commonly used sets of components

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">
    <head>
      <!-- CSS for WMCA Design System -->
      <link rel="stylesheet" href="http://localhost:3000/css/wmcads-components.min.css" />
    </head>
    <body>
      <!-- site content... -->
    </body>
  </html>

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"

West Midlands Combined AuthorityDesign System