figmd-ui-lib

FIGmd/MRO Re-branding

Table of contents

• Quick start
• What's included
• Copyright and license

Quick start

Several quick start options are available:

• Download the latest release
• Install with npm: npm install figmd-ui-lib@1.8.9
• Import the brand refresh css using @import 'figmd-ui-lib/css/brand-refresh.css' in global css file
• Import the brand refresh logo using import logo from 'figmd-ui-lib/logos/mro_new_logo.svg';
• Please find the sample react js code below:

import logo from "figmd-ui-lib/logos/mro_new_logo.svg";
import "./global.css";

function App() {
  return (
    <nav class="navbar navbar-expand-lg navbar-white fixed-top bg-white">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src={logo} />
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarsExampleDefault"
          aria-controls="navbarsExampleDefault"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">
                Home <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#color-palette-section">
                Color Palette
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="#fonts-section">
                Typography
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="#logo-section">
                Logos
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

export default App;

Typography

Primary Font:

• Inter is a versatile, timeless, and highly legible font, carefully crafted and designed for digital-first and print applications. Inter features a tall x-height to aid in readability of mixed-case and lowercase text. Whether used at large (headlines and stats) or small (body copy and captions) sizes, Inter maintains great readability.

• Inter is an open-sourced Google font and should be used for digital and marketing collateral, such as the website, social media ads, trade-show booths, correspondence suite, brochures, and signage. Contact Marketing to obtain these fonts.

- [Google Fonts link](https://fonts.google.com/specimen/Inter) - Import the font "Inter" in CSS file using `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600&display=swap');`

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600&display=swap'); 

body {
  font-family: 'Inter', sans-serif;
}

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.

Download contents

css/
└──brand-refresh.css
logo/
├── mro_new_logo.svg
├── logo-main-white-top.svg
├── favicon.png
└──  favicon-white.png
index.html - (Sapmle HTML Page based on Bootstrap)
assets/
├── css/
│   ├── brand.css
└── logo/
    ├── mro_new_logo.svg
    ├── logo-main-white-top.svg
    ├── favicon.png
    └──  favicon-white.png
    

Documentation

We provide compiled CSS and Logos. Check index.html file for sample Color, Fonts, and Header & Footer.

Read the Design Guidelines for information on the Design system, examples, and more.

Copyright and license

Code and documentation copyright 2022–2023.