Skip to content

Typography

Headings should be sized to convey the hierarchy of information on the page. There should be only one H1 visible (it's OK to repeat an H1 if the elements alternate between device sizes).

Default Headings

H1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus. In justo lectus, dignissim sit amet turpis sed, consectetur tincidunt leo.

h2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus. In justo lectus, dignissim sit amet turpis sed, consectetur tincidunt leo.

H3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus. In justo lectus, dignissim sit amet turpis sed, consectetur tincidunt leo.

H4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus. In justo lectus, dignissim sit amet turpis sed, consectetur tincidunt leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus. In justo lectus, dignissim sit amet turpis sed, consectetur tincidunt leo.

H5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus. In justo lectus, dignissim sit amet turpis sed, consectetur tincidunt leo. Vestibulum a consectetur leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus. In justo lectus, dignissim sit amet turpis sed, consectetur tincidunt leo.

H6 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus. In justo lectus, dignissim sit amet turpis sed, consectetur tincidunt leo. Vestibulum a consectetur leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel purus sit amet lectus hendrerit sagittis eu eu lacus. In justo lectus, dignissim sit amet turpis sed, consectetur tincidunt leo.

Type Font-face Desktop size Mobile size Also
Hero Heading (H1-6) Bold 41px 30px  
Deck Heading (H1-6) SemiBold 16px 14px all-caps; letter-spacing: .05em
Body H1 SemiBold 36px 30px  
Body H2 SemiBold 30px 24px  
Body H3 SemiBold 24px 22px  
Body H4 SemiBold 22px 20px margin-bottom removed
Body H5 SemiBold 20px 19px margin-bottom removed
Body H6 SemiBold 18px 18px margin-bottom removed
Paragraph/Default Normal 18px 18px  

Paragraph, Strong, Em, Link

P - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tellus sagittis, tincidunt urna quis, sodales neque. Vivamus dapibus arcu ac elit rutrum elementum. Nulla quis leo blandit, tincidunt dui quis, ultricies magna. Morbi vel ex vehicula, bibendum mauris ut, eleifend metus. Ut finibus, sem vel consequat aliquet, velit libero lobortis ipsum, sit amet dapibus justo libero ut velit.

Strong/b - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Em/i - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

A - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Color Text

Basically everything can have their color changed using these modifier color names (from signifyd.com/styles):

Midnight #003087 - Phasellus a tellus sagittis, tincidunt urna quis, sodales neque. Vivamus dapibus arcu ac elit rutrum elementum.

Gold #EAAA00 - Phasellus a tellus sagittis, tincidunt urna quis, sodales neque. Vivamus dapibus arcu ac elit rutrum elementum.

Turquoise #00A3E0 - Phasellus a tellus sagittis, tincidunt urna quis, sodales neque. Vivamus dapibus arcu ac elit rutrum elementum.

Magenta #E31C79 - Phasellus a tellus sagittis, tincidunt urna quis, sodales neque. Vivamus dapibus arcu ac elit rutrum elementum.

Iris #A438A8 - Phasellus a tellus sagittis, tincidunt urna quis, sodales neque. Vivamus dapibus arcu ac elit rutrum elementum.

Amethyst #582C83 - Phasellus a tellus sagittis, tincidunt urna quis, sodales neque. Vivamus dapibus arcu ac elit rutrum elementum.

Lapis #0070BD - Phasellus a tellus sagittis, tincidunt urna quis, sodales neque. Vivamus dapibus arcu ac elit rutrum elementum.

Body Heading

On the heading module: .heading-main

This class should be applied when you want a heading in the body to look like the body's H1. It will apply the main body heading styles no matter what the heading level (h1-6). It will also set the margin on the module. If used directly on the element it will still set styles properly.

Unordered Lists

Notes

When using a different color for the list text we use the same color for the list bullet.

Base Styles/Modifiers

On the <ul> Apply .bullets-square to get the square bullets at the correct size.

Example:
  • First Item
  • Second Item
<ul class="bullets-square">
    <li>First Item</li>
    <li>Second Item</li>
</ul>ers who stop shopping on an ecommerce site after one or two bad experiences</p>

For bullet colors: Use the names of the brand colors in the style guide like <ul class="bullets-square bullets-gold"> to apply specific colors to them.

Example:
  • First Item
  • Second Item
<ul class="bullets-square bullets-gold">
    <li>First Item</li>
    <li>Second Item</li>
</ul>

For list element text colors: On the <ul> element apply .text-$color like <ul class="bullets-square bullets-magenta text-magenta">

Example:
  • First Item
  • Second Item
<ul class="bullets-square bullets-magenta text-magenta">
    <li>First Item</li>
    <li>Second Item</li>
</ul>

Lists with No Bullets

On the ul: Apply the .bullets-none class

This will remove bullet points and the li spacing

Example:
  • First Item
  • Second Item
<ul class="bullets-none">
    <li>First Item</li>
    <li>Second Item</li>
</ul>

Lists In Two Columns

On the ul: Apply the .two-columns class

This will split the list into two columns and back to a single column on mobile

Example:
  • First Item
  • Second Item
  • Third Item
  • Fourth Item
  • Fifth Item
  • Sixth Item
<ul class="two-columns bullets-square">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
    <li>Fifth Item</li>
    <li>Sixth Item</li>
</ul>

Ordered List with Background Circle

On the ol: apply .bullets-circle and .bullets-$color using one of the color options from the style guide like <ul class="bullets-circle bullets-gold">

For list element text colors: On the <ul> element apply .text-$color like <ul class="bullets-circle bullets-midnight text-magenta">

Example:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
<ol class="bullets-circle bullets-midnight text-magenta">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
</ol>

Quotes

Note: An em-dash will be included automatically on the attribution. If you would not like there to be an em-dash apply the .no-dash class to the div with the .attribution class. Quotation marks should always be included.

Standard Quote: Add a div with .quote-wrapper and two divs within it using .quote-body and .attribution respectively. Then include the text of the quote in a p tag in the .quote-body div. Add a p element in the div using .attribution to include who said the quote.

"Signifyd is really awesome. I would say especially their web development and design section shine. Every time I go to their site it makes me want to sign up for more of their excellent services."

Everyone who's seen the site

<div class="quote-wrapper">
    <div class="quote-body">
        <p>"Signifyd is really awesome. I would say especially their web development and design section shine. Every time I go to their site it makes me want to sign up for more of their excellent services."</p>
    </div>
    <div class="attribution">
        <p>Everyone who's seen the site</p>
    </div>
</div>

Paragraph with quote icon to the left: Add a div with .quote-wrapper and a p tag with .quote and .quote-$color (for the color of the icon). Then include the text of the quote in the p tag. Add a p element below with the class .attribution to include who said the quote.

This will add a quote icon with a $color circular background before the paragraph like on this page

"Signifyd is really awesome. I would say especially their web development and design section shine. Every time I go to their site it makes me want to sign up for more of their excellent services."

Everyone who's seen the site

<div class="quote-wrapper">
    <div class="quote-body quote midnight">
        <p>"Signifyd is really awesome. I would say especially their web development and design section shine. Every time I go to their site it makes me want to sign up for more of their excellent services."</p>
    </div>
    <div class="attribution">
        <p>Everyone who's seen the site</p>
    </div>
</div>

Paragraph with quote icon above: Add a div with .quote-wrapper and a p tag with .quote and .quote-$color (for the color of the icon) as well as .top. Then include the text of the quote in the p tag. Add a p element below with the class .attribution to include who said the quote.

This will add a quote icon with a $color circular background above the paragraph like on this page.

"Signifyd is really awesome. I would say especially their web development and design section shine. Every time I go to their site it makes me want to sign up for more of their excellent services."

Everyone who's seen the site

<div class="quote-wrapper">
    <div class="quote-body quote gold top">
        <p>"Signifyd is really awesome. I would say especially their web development and design section shine. Every time I go to their site it makes me want to sign up for more of their excellent services."</p>
    </div>
    <div class="attribution">
        <p>Everyone who's seen the site</p>
    </div>
</div>

Employee Quote: Set the wrapping div with .employee-quote-wrapper. Add a div around the name and position and apply the classes .employee-name and .employee-position respectively.

Zachary T.

Commercial Account Executive

“Signifyd is, in and of itself, an amazing opportunity. Being at Signifyd in Denver is icing on the cake. In this office, you have exposure to senior-level leadership sitting right across from you, so that you have a true pulse of the company, despite not being at HQ.

<div class="employee-quote-wrapper">
    <div class="employee-name">
        <h3>Zachary T.</h3>
    </div>
    <div class="employee-position">Commercial Account Executive</div>
    <div class="quote-body">
        <p>“Signifyd is, in and of itself, an amazing opportunity. Being at Signifyd in Denver is icing on the cake. In this office, you have exposure to senior-level leadership sitting right across from you, so that you have a true pulse of the company, despite not being at HQ.</p>
    </div>
</div>

Notes

Change Heading Colors (Does not apply to other text elements)

On any module or any heading element add .heading-$color where $color is one of the color names from the style guide.

Change Text Color (Does not apply to headings)

On any module or the p tag add .text-$color where $color is one of the color names from the style guide.

All text (Applies to headings as well)

On any module or any tag add .all-$color where $color is one of the color names from the style guide.

Utility Functions

Alignment

Add .align-center or .align-right or .align-left to a module or individual element (like a p or a tag to align it in the relevant position.

Fixed Header Padding

Add .fixed-header-padding to the row beneath the fixed row to add an additional 100px of top padding to prevent overlap. This is used on landing pages like this one.


Calls to Action

CTA Headings

On the heading module: Apply .cta-heading

This will apply the appropriate font stylings, margins, and responsively align the text. It can also be applied directly to the element

CTA Buttons

On the button module: Apply .button-cta

This will define the appropriate font styling, spacing etc. once it is formally decided

Buttons

Main Button

On the button module or any a tag: Apply the .button-main

This will apply the standard button styling

Example: Button Link

<a href="#" class="button-main">Button Link</a>
a.button-main {
    font-family: ProximaNova-Semibold,sans-serif;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: #eaaa00;
    font-size: 13px;
    line-height: 1;
    padding: 20px 30px 18px;
    text-transform: uppercase;
    text-shadow: none;
    width: auto;
    color: #fff;
    letter-spacing: 1.2px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}
a.button-main:hover {
    background-color: #e59e0f;
    color: #fff!important;
    border: none;
    outline: 0;
    text-decoration: none;
}

Button Text

On the button module: Apply the .button-text class

This will set up a button with the proper styling for a text button with a transparent background.

Example: Button Link

<a href="#" class="button-text">Button Link</a>

Explainers

Inline Explainers

Use two p. On the first p add a class .big-number and on the second add the class .explainer

Example:

9.5

Signifyd’s performance
on 10-point scale

<p class="big-number">9.5</p>
<p class="explainer">Signifyd’s performance <br>on 10-point scale</p>

Block Explainers

Use two p. On the first p add a class .big-number and on the second add the class .number-text

Example:

53%

Consumers who stop shopping on an ecommerce site after one or two bad experiences

<p class="big-number">53%</p>
<p class="number-text">Consumers who stop shopping on an ecommerce site after one or two bad experiences</p>

Tables

Here's a simple table with some headings and a few rows:

Heading A Heading B Heading C
Cell 1A Cell 1B Cell 1C
Cell 2A Cell 2B Cell 2C
Cell 3A Cell 3B Cell 3C

Heros

Note: .hero-container will hide the column that contains the hero text (.deck, .hero-heading, .hero-paragraph) on mobile (less than 768px wide). If you want to keep the text apply the .keep-text-on-mobile class to the row.

On the Row: .hero-container

On the Mobile Only Row: .hero-mobile-container

These will define the height, align the items etc. and handle margins on the lead-in, heading, paragraph, and buttons.

On the deck, hero heading, hero paragraph, hero button modules: .deck, .heading-hero, .text-hero, .button-main

These classes will apply the defined hero styles and will let .hero-container grab their modules and set their margins

Hero Example:

Deck - Lorem Ipsum Dolor

Hero Heading - Duis quam arcu, porttitor viverra elit nec

Hero Paragraph - Nullam tempor congue ante, sed commodo orci eleifend ut. Nulla ultricies porttitor eros, sed semper elit lobortis sit amet.

Mobile Deck - Lorem Ipsum Dolor

Mobile Hero Heading - Duis quam arcu, porttitor viverra elit nec

Mobile Hero Paragraph - Nullam tempor congue ante, sed commodo orci eleifend ut. Nulla ultricies porttitor eros, sed semper elit lobortis sit amet.


Resource Heros

On the Row: .resources-hero-container

On the hero heading, hero paragraph: .heading-hero, .text-hero

These classes will apply the defined hero styles and will let .resources-hero-container grab their modules and set their margins


Colors - Logo, Print & Web

Colors are based on Pantone originals, with alternative color spaces defined by the Pantone site.

  • Midnight
    PMS 287 C
    C=100 M=75 Y=2 K=18
    R=0 G=48 B=135
    #003087
  • Gold
    PMS 124 C
    C=0 M=30 Y=100 K=0
    R=234 G=170 B=0
    #EAAA00
  • White PMS N/A
    C=0 M=0 Y=0 K=0
    R=255 G=255 B=255
    #FFFFFF
  • Turquoise
    PMS 299 C
    C=86 M=8 Y=0 K=0
    R=0 G=163 B=224
    #00A3E0
  • Magenta
    PMS 213 C
    C=0 M=92 Y=18 K=0
    R=227 G=28 B=121
    #E31C79
  • Iris
    PMS 2069 CP
    C=47 M=81 Y=0 K=0
    R=164 G=56 B=168
    #A438A8
  • Amethyst
    PMS 268 C
    C=82 M=98 Y=0 K=12
    R=88 G=44 B=131
    #582C83
  • Lapis
    PMS 3005 C
    C=87 M=53 Y=0 K=0
    R=0 G=112 B=189
    #0070BD
  • Lilac
    C=50 M=64 Y=0 K=0
    R=139 G=108 B=176
    #8D6CC1
  • Mauve
    C=64 M=89 Y=0 K=0
    R=119 G=65 B=153
    #773F9B
  • Yale
    C=100 M=82 Y=29 K=15
    R=0 G=61 B=135
    #003D87
  • Creamsicle
    C=5 M=41 Y=73 K=0
    R=88 G=44 B=131
    #F79646
  • Carmine
    C=30 M=100 Y=24 K=1
    R=178 G=20 B=114
    #B21472

Colors - Web

  • Midnight: Headings, Accents
    rgb(0,48,135)
    #003087
  • Delft: Hero Overlay Base Color
    R=24 G=52 B=86
    #183456
  • Gold: Buttons & CTAs
    rgb(234,170,0)
    #EAAA00
  • Harvest: Button Hover
    rgb(229,158,15)
    #E59E0F
  • Turquoise: Highlight color
    R=0 G=163 B=224
    #00A3E0
  • Bondi: Links
    rgb(0,140,186)
    #008CBA
  • Cerulean: Links Hover
    rgb(0,120,160)
    #0078A0
  • Marengo: Body Text Default
    rgb(68,69,70)
    #444546
  • Licorice: Bold Text
    rgb(18,18,19)
    #121213
  • Eclipse: Footer Background
    rgb(56,56,56)
    #383838
  • Fog: Container Background
    rgb(244,244,244)
    #F4F4F4
  • Haze: Container Background
    rgb(248,248,248)
    #F8F8F8
  • White: Background Default
    rgb(255,255,255)
    #FFFFFF

Colors - Product

  • Red
    rgb(255,67,28)
    #FF431C
  • Jade
    rgb(0,187,94)
    #00BB5E
  • Slate
    rgb(99,117,143)
    #63758F
  • Yonder
    rgb(159,173,191)
    #9FADBF
  • Smoke
    rgb(204,211,220)
    #CCD3DC

  • Glitter
    rgb(232,238,246)
    #E8EEF6
  • Ghost
    rgb(245,247,251)
    #F5F7FB
  • Antiflash
    rgb(241,244,249)
    #F1F4F9

Grid

The Signifyd marketing site (www.signifyd.com) uses the Bootstrap grid system. The outer width of the grid, including outer margins, is 1100px wide. Active content within the grid takes up 1060px wide. The grid is 12 units wide, with each unit aproximately 92px wide, including margins, and about 50px for actual content. Margins are 20px wide, so gutters measure 40px.

1/1

1/2

1/2

1/3

1/3

1/3

1/4

1/4

1/4

1/4

1/5

1/5

1/5

1/5

1/5

1/6

1/6

1/6

1/6

1/6

1/6

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12