Overview

Introduction

Hello. This is an empty pattern library boilerplate.

Branding


                            
{{
  svg.render({
    name: 'urbane-logo',
    iconClasses: true,
    alt: 'Urbane Logo'
  })
}}

                          
Urbane Logo

                            
{{
  svg.render({
    name: 'urbane-logo-white',
    iconClasses: true,
    alt: 'Urbane Logo'
  })
}}

                          
Colors
Dark Blue #101B26
Medium Blue #1B2F41
Regular Blue #23465E
Dark Purple #2B1C38
Light Purple #593478
Light Blue #C0F5FF
Orange #FD7E64
Light Gray #f5f5f5
Black #000

Typography

Largest Title

The quick brown fox jumps over the lazy dog

Extra large Title

The quick brown fox jumps over the lazy dog

Large Title

The quick brown fox jumps over the lazy dog

Medium Title

The quick brown fox jumps over the lazy dog

Small Title

The quick brown fox jumps over the lazy dog

Label

Label - Black

Label - Cyan

Label - Orange

Label - Purple

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Small

Small - Serif

Pull Quote

Pull Quote

Primary Button
Secondary Button