Web pattern library overview

▼

Welcome to the pattern library section of the Metro style guide for digital services

The objective of the Metro pattern library is to document visual language, such as header styles and color palettes, used to create the Metro website, and provide guidance for future web design and development work on Metro’s website. It contains real working examples, code snippets, documentation, style guidelines for UI components.

The Metro style guide for digital services is the parent of this section that documents the design system for digital services. Its audience is broader: any discipline, any employee or contractor making online artifacts or using the design system. That is where to find design principles and guidelines covering areas like voice and tone, writing and accessibility, photography, iconography, and browser support.

In the pattern library, expand an item's downarrow for usage guidelines and an html snippet containing the markup to make the object.

This is version 0.80 dated Jan 9, 2019

Primary colors

▼
  • Ocean
    #003b5c;   RGB: 0, 59, 92
    $color-ocean
  • Olive
    #a3ad38;   RGB: 183, 173, 56
    $color-olive

Secondary colors

▼
  • Sapphire
    #16a8b5;   RGB: 23, 168, 181
    $color-sapphire
  • Sapphire-darker
    #00828c;   RGB: 0, 130, 140
    $color-sapphire-darker
  • Dijon
    #d8a833;   RGB: 217, 168, 51
    $color-dijon

Neutral colors

▼
  • Blue Gray
    #46646b;   RGB: 70, 100, 107
    $color-blue-gray
  • PMS Cool Gray 7C
    #97999b;   RGB: 151, 153, 155
    $color-cool-gray-7c
  • PMS Cool Gray 1C
    #97999b;   RGB: 217, 217, 214
    $color-cool-gray-1c
  • PMS Warm Gray 1C
    #d7d2cb;   RGB: 215, 210, 203
    $color-warm-gray-1c
  • White
    #ffffff;   RGB: 255, 255, 255
    $color-white

Brand fonts

▼

Primary font: "adelle", "Palatino Linotype", "Book Antiqua", Palatino, serif;

Primary font italic: "adelle", "Palatino Linotype", "Book Antiqua", Palatino, serif;

Primary font bold; "adelle", "Palatino Linotype", "Book Antiqua", Palatino, serif;

Primary alternate font: "adelle-condensed", "Palatino Linotype", "Book Antiqua", Palatino, serif;

Primary alternate font italic: "adelle-condensed", "Palatino Linotype", "Book Antiqua", Palatino, serif;

Primary alternate font bold; "adelle-condensed", "Palatino Linotype", "Book Antiqua", Palatino, serif;

Secondary font: "adelle-sans", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Secondary font italic: "adelle-sans", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Secondary font bold: "adelle-sans", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Secondary alternate font: "AdelleSansCondensed", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Secondary alternate font italic: "AdelleSansCondensed", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Secondary alternate font bold: "AdelleSansCondensed", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

animations

▼
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)

visibility

▼

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens