Color

Here are the colors we currently use in the product.

Klaviyo Green

@klaviyo-green

#24CE78

Klaviyo Mid Green

@klaviyo-mid-green

#90E6BA

Klaviyo Light Green

@klaviyo-light-green

#C7F2DC

Klaviyo Yellow

@klaviyo-yellow

#F9E11B

Klaviyo Mid Yellow

@klaviyo-mid-yellow

#FCF197

Klaviyo Light Yellow

@klaviyo-light-yellow

#FDF7C5

Klaviyo Black

@klaviyo-black

#252C26

laviyo Dark Gray

@klaviyo-dark-gray

#7C807D

Klaviyo Mid Dark Gray

@klaviyo-mid-dark-gray

#ABABAB

Klaviyo Mid Gray

@klaviyo-mid-gray

#D3D5D4

Klaviyo Light Gray

@klaviyo-light-gray

#F2F3F2

Klaviyo Lightest Gray

@klaviyo-lightest-gray

#FBFBFB

Blue

@kBlue

#71ABDC

Chart Blue

@chartBlue

#4170AB

Chart Blue Dark

@chartBlueDark

#285792

Slate

@kSlate

#8D94AE

Flow Status Manual

@flow-status-manual

#F2AD25

Orange

@kOrange

#F26925

Red

@kRed

#EA6557

Flow Status Draft

@flow-status-draft

#DADADA

Icons

We use Font Awesome for our icons. You can browse the entire collection by going to the GitHub repo.

fa-bell

fa-home

fa-rocket

fa-paper-plane

fa-share

fa-newspaper

fa-users

fa-user

fa-bar-chart

fa-cloud

fa-feed

fa-image

fa-list-alt

fa-folder-open

fa-bolt

fa-gears

fa-shopping-cart

fa-heart

fa-computer

fa-question

fa-eye

fa-star

fa-warning

fa-close

fa-globe

fa-list

fa-link

fa-external-link

fa-mobile-phone

fa-bullhorn

Typography

Typeface

We use Proxima Nova as our primary typeface. It is currently accessed through Adobe's Typekit subscription service.

Proxima Nova

Proxima Nova Italic

Proxima Nova Light

Proxima Nova Light Italic

Proxima Nova Bold

Proxima Nova Bold Italic

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Klaviyo heading

 Semibold 36px

h2. Klaviyo heading

 Semibold 30px

h3. Klaviyo heading

 Semibold 24px

h4. Klaviyo heading

 Semibold 18px
h5. Klaviyo heading
 Semibold 14px
h6. Klaviyo heading
 Semibold 12px 
<h1>h1. Klaviyo heading</h1>
<h2>h2. Klaviyo heading</h2>
<h3>h3. Klaviyo heading</h3>
<h4>h4. Klaviyo heading</h4>
<h5>h5. Klaviyo heading</h5>
<h6>h6. Klaviyo heading</h6>

Body copy

Klaviyo's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Inline text elements

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Underlined text

To underline text use the <u> tag.

This line of text will render as underlined

<u>This line of text will render as underlined</u>

Make use of HTML's default emphasis tags with lightweight styles.

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Transformation classes

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

Description

A list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal description

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Auto-truncating

Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. In narrower viewports, they will change to the default stacked layout.