## INTRODUCING

# Hangar Framework

Our very own Design Framework is now Open Source!

- Download .sketch files
- View code on GitHub

## Installation

The easy way to start using Hangar is to link the assets directly from the CDN:

Alternatively, you can install hangar as a frontend package using npm:

    npm install hangar-alpha --save-dev

## Grid System

Coming from an open source company, it made sense picking open sourced typefaces for our brand.

### Desktop

940px wide grid

### Desktop

940px wide grid

## Typography

Description

- JUMBO

  # Aa

  #

      Aa

- DISPLAY

  # Aa

  #

      Aa

- TITLE

  # Aa

  #

      Aa

- SUBHEADER

  # Aa

  #

      Aa

- BODY

  # Aa

  #

      Aa

- JUMBO

  # Aa

  #

      Aa

- DISPLAY

  # Aa

  #

      Aa

- TITLE

  # Aa

  #

      Aa

- SUBHEADER

  # Aa

  #

      Aa

- BODY

  # Aa

  #

      Aa

# Colors

Coming from an open source company, it made sense picking open sourced typefaces for our brand.

## Primary colors

This is a set of our Primary Brand Colors

- Location Red

    - #### #F24440

    - .is-txtCartoRed
    - .is-bgCartoRed

  This is our main color that represents our hole company and brand.

- Prediction Blue

    - #### #0079FB

    - .is-txtBuilderBlue
    - .is-bgBuilderBlue

  The main color of CARTO Builder and the one that represents our product.

- Navy Blue

    - #### #162745

    - .is-txtNavyBlue
    - .is-bgNavyBlue

  We use Navy Blue for all the advanced environments dedicated to developers.

## Secondary colors

This is a set of our secondary and complementary colors

- Solutions Red

    - #### #FF583E

    - .is-txtSolutionsRed
    - .is-bgSolutionsRed
- Engine Blue

    - #### #2E51E8

    - .is-txtEngineBlue
    - .is-bgEngineBlue
- LDS Blue

    - #### #3D33CC

    - .is-txtLDSBlue
    - .is-bgLDSBlue
- Guides Purple

    - #### #7D21F5

    - .is-txtGuidesPurple
    - .is-bgGuidesPurple
- Tutorials Purple

    - #### #6E00DC

    - .is-txtTutorialsPurple
    - .is-bgTutorialsPurple
- Docs Purple

    - #### #3D33CC

    - .is-txtDocsPurple
    - .is-bgDocsPurple

## Buttons

Description

- JUMBO

  Sample Text

      <a href="#" class="button is-jade">
          <span>Sample Text</span>
      </a>

- REGULAR

  Sample Text

      <a href="#" class="button is-jade">
          <span>Sample Text</span>
      </a>

- SMALL

  Sample Text

      <a href="#" class="button button--small is-jade">
          <span>Sample Text</span>
      </a>

- JUMBO

  Sample Text

      <a href="#" class="button button--large is-jadeOutline">
          <span>Sample Text</span>
      </a>

- REGULAR

  Sample Text

      <a href="#" class="button is-jadeOutline">
          <span>Sample Text</span>
      </a>

- SMALL

  Sample Text

      <a href="#" class="button button--small is-jadeOutline">
          <span>Sample Text</span>
      </a>

- JUMBO

  Sample Text

      <a href="#" class="buttonLink button--large is-jade">
          <svg width="8px" height="7px" viewBox="0 0 8 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path class="buttonLink-media" d="M1.52245273,3.04854764 L3.68776506,0.883235307 C3.88225492,0.688745449 3.88821988,0.353713791 3.68525771,0.15075162 C3.4882313,-0.0462747862 3.15435142,-0.053333131 2.95277402,0.148244267 L0.147793654,2.95322464 C0.0109867585,3.09003153 -0.0325396573,3.29637729 0.0243152648,3.47738142 C-0.0325396573,3.65838554 0.0109867585,3.8647313 0.147793654,4.00153819 L2.95277402,6.80651857 C3.15435142,7.00809596 3.4882313,7.00103762 3.68525771,6.80401121 C3.88821988,6.60104904 3.88225492,6.26601738 3.68776506,6.07152753 L1.70421948,4.08798194 L7.99996393,4.08798194 L7.99996393,3.04854764 L1.52245273,3.04854764 Z" id="Combined-Shape" fill="#00B9BF " transform="translate(3.999982, 3.477381) scale(-1, 1) translate(-3.999982, -3.477381) "></path></g>
          </svg>
          Sample Text
      </a>

- REGULAR

  Sample Text

      <a href="#" class="buttonLink is-jade">
              <svg width="8px" height="7px" viewBox="0 0 8 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path class="buttonLink-media" d="M1.52245273,3.04854764 L3.68776506,0.883235307 C3.88225492,0.688745449 3.88821988,0.353713791 3.68525771,0.15075162 C3.4882313,-0.0462747862 3.15435142,-0.053333131 2.95277402,0.148244267 L0.147793654,2.95322464 C0.0109867585,3.09003153 -0.0325396573,3.29637729 0.0243152648,3.47738142 C-0.0325396573,3.65838554 0.0109867585,3.8647313 0.147793654,4.00153819 L2.95277402,6.80651857 C3.15435142,7.00809596 3.4882313,7.00103762 3.68525771,6.80401121 C3.88821988,6.60104904 3.88225492,6.26601738 3.68776506,6.07152753 L1.70421948,4.08798194 L7.99996393,4.08798194 L7.99996393,3.04854764 L1.52245273,3.04854764 Z" id="Combined-Shape" fill="#00B9BF " transform="translate(3.999982, 3.477381) scale(-1, 1) translate(-3.999982, -3.477381) "></path></g>
              </svg>
              Sample Text
      </a>

- SMALL

  Sample Text

      <a href="#" class="buttonLink button--small is-jade">
          <svg width="8px" height="7px" viewBox="0 0 8 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path class="buttonLink-media" d="M1.52245273,3.04854764 L3.68776506,0.883235307 C3.88225492,0.688745449 3.88821988,0.353713791 3.68525771,0.15075162 C3.4882313,-0.0462747862 3.15435142,-0.053333131 2.95277402,0.148244267 L0.147793654,2.95322464 C0.0109867585,3.09003153 -0.0325396573,3.29637729 0.0243152648,3.47738142 C-0.0325396573,3.65838554 0.0109867585,3.8647313 0.147793654,4.00153819 L2.95277402,6.80651857 C3.15435142,7.00809596 3.4882313,7.00103762 3.68525771,6.80401121 C3.88821988,6.60104904 3.88225492,6.26601738 3.68776506,6.07152753 L1.70421948,4.08798194 L7.99996393,4.08798194 L7.99996393,3.04854764 L1.52245273,3.04854764 Z" id="Combined-Shape" fill="#00B9BF " transform="translate(3.999982, 3.477381) scale(-1, 1) translate(-3.999982, -3.477381) "></path></g>
          </svg>
          Sample Text
      </a>

# Forms

Description

- REGULAR

      <input type="text" class="input" placeholder="John">

- DROPDOWN

      <select class="select">
          <option value="value1">Value 1</option>
          <option value="value2" selected>Value 2</option>
          <option value="value3">Value 3</option>
      </select>

- ERROR

      <input type="text" class="input is-error" placeholder="Error">

- RADIO BUTTONS

      <div class="u-flex">
          <span class="radio" style="margin-right: 20px;">
              <input class="radio-input" type="radio" name="contact" value="01">
              <span class="radio-decoration"></span>
          </span>
          <span class="radio" style="margin-right: 20px;">
              <input class="radio-input" type="radio" name="contact" value="02" checked>
              <span class="radio-decoration"></span>
          </span>
                  </div>

- CHECKBOXES

      <div class="u-flex">
          <span class="checkbox" style="margin-right: 20px;">
              <input class="checkbox-input" type="checkbox" name="contact" value="01">
              <span class="checkbox-decoration">
              <svg width="12px" height="12" class="checkbox-decorationMedia">
                  <g fill="none">
                   <polyline class="checkbox-check" points="1.65093994 3.80255127 4.48919678 6.97192383 10.3794556 0.717346191"></polyline>
                  </g>
              </svg>
              </span>
          </span>
          <span class="checkbox" style="margin-right: 20px;">
              <input class="checkbox-input" type="checkBox" name="contact" value="02" checked>
              <span class="checkbox-decoration">
              <svg width="12px" height="12" class="checkbox-decorationMedia">
              <g fill="none">
              <polyline class="checkbox-check" points="1.65093994 3.80255127 4.48919678 6.97192383 10.3794556 0.717346191"></polyline>
              </g>
              </svg>
              </span>
          </span>
      </div>

# Components

Description

- ### Tab bars

  This is a set of our differents types of tab bars navigations

  - - Item 1
    - Item 2
    - Item 3
    - Item 4

- ### Tooltips

  This is a set of our differents types of tooltips

  - Left arrow

    Show

        <a href="#" tooltip-position="right" tooltip-text="Sample text.">Show</a>

  - Right arrow

    Show

        <a href="#" tooltip-position="left" tooltip-text="Sample text.">Show</a>

  - Bottom arrow

    Show

        <a href="#" tooltip-position="top" tooltip-text="Sample text.">Show</a>

  - Top arrow

    Show

        <a href="#" tooltip-position="bottom" tooltip-text="Sample text.">Show</a>