Chartio Branding Guide

Chartio Logo

SVG, EPS, PNG.

Colors

$text-color
$brand-color, $primary-color
$accent-color
$success-color
$helper-color
$strong-color

Typography

Page Title Headline Even When It's Long

h1 {font-family: 'Roboto Slab';}

Section Headlines

h3 {font-family: 'Roboto Slab';}

Paragraph text. The regular 'ol "body copy" size. And here is an inline-link too. Some example text: Out-of-the-box connections to your data sources from Amazon Redshift to CSV files, so you can start exploring data immediately.

p {font-family: 'Open Sans';}
Anchor Link
a, i.fa-long-arrow
button.btn-primary
button

Blockquotes and stat headlines

h2 {font-family: 'Open Sans';}

Lg Labels

h4 {font-family: 'Open Sans'; text-transform: uppercase;
font-size: 16px; line-height: 24px;}
Md Labels
h5 {font-family: 'Open Sans'; font-style: italics;
font-size: 16px; line-height: 24px;}
Sm Labels
h6 {font-family: 'Open Sans'; font-weight: 700;
text-transform: uppercase; font-size: 12px;}

hello@chartio.com
222 Kearny Street Suite 525
San Francisco, California
94108

p.small-font, figcaption {font-size: 12px}
  • Unordered lists

  • Items must be

  • wrapped in something

  • Like a header or paragraph tag

ul, ul > li.no-list-style, ul li

Tables

Standard Table

Function Description
Filter Rows Ability to filter rows based on certain conditions.
Limit Rows Limit the number of rows included in your query results and can be used when applied after a sort.
Sort Rows Apply a sort to one or more columns.

Table with Collapsable Section

Row
Function Description
Filter Rows Ability to filter rows based on certain conditions.
Limit Rows Limit the number of rows included in your query results and can be used when applied after a sort.
Sort Rows Apply a sort to one or more columns.