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>

INTRODUCING

Hangar Framework

Installation

Grid System

Desktop

Desktop

Typography

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Colors

Primary colors

#F24440

#0079FB

#162745

Secondary colors

#FF583E

#2E51E8

#3D33CC

#7D21F5

#6E00DC

#3D33CC

Buttons

Forms

Components

Tab bars

Tooltips