Overview
The West Midlands Rail Executive (WMRE) Design System is a library of typography, visual styles and user interface components which are documented and updated continuously.
Use the WMRE Design System to make your service or application consistent with WMRE 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 Rail Executive Design System's minified CSS file and adding .wmre-html to the html element in your service/application.
<!DOCTYPE html>
<html lang="en-gb" class="wmre-html">
<head>
<!-- CSS for WMRE Design System -->
<link rel="stylesheet" href="https://wmcadigital.github.io/wmre-design-system/css/wmre-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 WMRE Design System
import wmreStyles from "https://wmcadigital.github.io/wmre-design-system/css/react-native/wmre-components.min.js"