Pattern Library

Overview

Introduction

Styleguide for Applied Image

Typography

Large

Freight Disp Pro Light 72pt


                            
{{
  type.large(
    {
      element: 'p',
      text: ''
    }
  )
}}

Medium

Freight Disp Pro Light 45pt


                            
{{
  type.medium(
    {
      element: 'p',
      text: ''
    }
  )
}}

Small

Freight Disp Pro Semibold 30pt


                            
{{
  type.small(
    {
      element: 'p',
      text: ''
    }
  )
}}

Label

FreightSans Pro Light 30pt


                            
{{
  type.label(
    {
      element: 'p',
      text: ''
    }
  )
}}

Tag

Franklin Gothic URW Book 18pt


                            
{{
  type.tag(
    {
      element: 'p',
      text: ''
    }
  )
}}

Link

Explore Our Capabilities


                            
{{
  type.link(
    {
      element: 'a',
      href: '',
      target: '_blank',
      text: 'Explore Our Capabilities'
    }
  )
}}

Text

Nowhere is it disputed that clipping quills show us how snowboards can be calendars. Authors often misinterpret the card as a mousey bone, when in actuality it feels more like a paneled uncle. Extending this logic, the covers could be said to resemble hugest botanies.


                            
{{
  type.text(
    {
      element: 'p',
      text: ''
    }
  )
}}

Brand

Colors

#000

#E2E2E2

#EF3546

Logo Main

Media

Slideshow

Vertical

Microsoft, Experience Center

New York, NY


                            
{{
  media.card(
    {
      small: '',
      medium: '',
      large: '',
      href: '#',
      linkText: '',
      meta: ''
    },
    {
      orientation: 'horizontal'
    }
  )
}}

Vertical 2

Sandra Jurgenson

Chief Operating Officer


                            
{{
  media.card(
    {
      small: '',
      medium: '',
      large: '',
      href: '#',
      linkText: '',
      meta: '',
      ctaLinks: [
        {
          label: '',
          link: ''
        },
        {
          label: '',
          link: ''
        }

      ]
    },
    },
    {
      orientation: 'horizontal',
      align: 'center'
    }
  )
}}

Card


                            
{{
  media.render(
    {
      small: '',
      medium: '',
      large: '',
      meta: true,
      caption: {
        label: '',
        href: '#'
      }
    }
  )
}}

Horizontal