Typography

leadin-label - h5. 14px/1.4, ProximaNova-Semibold, #EAAA00, line-spacing: 1.2px

h1. 36px/1.4 ProximaNova-Semibold Heading 1 bold, italic, bold italic

18px/1.5 ProximaNova-Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sem vel mauris laoreet vulputate. Nullam vel nibh est. Cras dui orci, auctor id rhoncus cursus, varius ut nisi. Nulla tristique cursus lacus, at convallis libero dapibus vitae. Mauris euismod auctor rutrum. Integer id justo justo, eget hendrerit tortor. Aliquam erat volutpat. Maecenas pharetra magna at tellus fermentum vulputate.

Headings default color: #003087

Body default color: #444546

Bold text color: #121213

h2. 30px/1.4 ProximaNova-Semibold Heading 2 plus bold, plus italic, plus bold italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sem vel mauris laoreet vulputate. Nullam vel nibh est. Cras dui orci, auctor id rhoncus cursus, varius ut nisi. Nulla tristique cursus lacus, at convallis libero dapibus vitae. Mauris euismod auctor rutrum. Integer id justo justo, eget hendrerit tortor. Aliquam erat volutpat. Maecenas pharetra magna at tellus fermentum vulputate.

17.5px/1/5 ProximaNova-Regular This is the style for a blockquote. Use it to call out text you
want to emphasize in a paragraph, or in a quote or testimonial.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sem vel mauris laoreet vulputate. Nullam vel nibh est. Cras dui orci, auctor id rhoncus cursus, varius ut nisi. Nulla tristique cursus lacus, at convallis libero dapibus vitae. Mauris euismod auctor rutrum. Integer id justo justo, eget hendrerit tortor. Aliquam erat volutpat. Maecenas pharetra magna at tellus fermentum vulputate.

h3. 24px/1.4 ProximaNova-Semibold Heading 3 plus bold, plus italic, plus bold italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sem vel mauris laoreet vulputate. Nullam vel nibh est. Cras dui orci, auctor id rhoncus cursus, varius ut nisi. Nulla tristique cursus lacus, at convallis libero dapibus vitae. Mauris euismod auctor rutrum. Integer id justo justo, eget hendrerit tortor. Aliquam erat volutpat. Maecenas pharetra magna at tellus fermentum vulputate.

h4. 22px/1.4 ProximaNova-Semibold Heading 4 plus bold, plus italic, plus bold italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sem vel mauris laoreet vulputate. Nullam vel nibh est. Cras dui orci, auctor id rhoncus cursus, varius ut nisi. Nulla tristique cursus lacus, at convallis libero dapibus vitae. Mauris euismod auctor rutrum. Integer id justo justo, eget hendrerit tortor. Aliquam erat volutpat. Maecenas pharetra magna at tellus fermentum vulputate.

h5. 20px/1.4 ProximaNova-Semibold Heading 5 plus bold, plus italic, plus bold italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sem vel mauris laoreet vulputate. Nullam vel nibh est. Cras dui orci, auctor id rhoncus cursus, varius ut nisi. Nulla tristique cursus lacus, at convallis libero dapibus vitae. Mauris euismod auctor rutrum. Integer id justo justo, eget hendrerit tortor. Aliquam erat volutpat. Maecenas pharetra magna at tellus fermentum vulputate.

h6. 18px/1.4 ProximaNova-Semibold Heading 6 plus bold, plus italic, plus bold italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sem vel mauris laoreet vulputate. Nullam vel nibh est. Cras dui orci, auctor id rhoncus cursus, varius ut nisi. Nulla tristique cursus lacus, at convallis libero dapibus vitae. Mauris euismod auctor rutrum. Integer id justo justo, eget hendrerit tortor. Aliquam erat volutpat. Maecenas pharetra magna at tellus fermentum vulputate.


Lists

Here is an Unordered (bullet) List:

  • 16px/1.5 ProximaNova-Regular This is a List Item.
  • This is a long item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sem vel mauris laoreet vulputate. Nullam vel nibh est. Cras dui orci, auctor id rhoncus cursus, varius ut nisi. Nulla tristique cursus lacus, at convallis libero dapibus vitae. Mauris euismod auctor rutrum. Integer id justo justo, eget hendrerit tortor. Aliquam erat volutpat. Maecenas pharetra magna at tellus fermentum vulputate.
  • This is another item.
  • This is yet another item.

Here is an Ordered (numbered) List:

  1. 16px/1.5 ProximaNova-Regular This is a List Item.
  2. This is a long item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sem vel mauris laoreet vulputate. Nullam vel nibh est. Cras dui orci, auctor id rhoncus cursus, varius ut nisi. Nulla tristique cursus lacus, at convallis libero dapibus vitae. Mauris euismod auctor rutrum. Integer id justo justo, eget hendrerit tortor. Aliquam erat volutpat. Maecenas pharetra magna at tellus fermentum vulputate.
  3. This is yet another item.
  4. This is another item.
  5. This is yet another item.
  6. This is another item.
  7. This is yet another item.
  8. This is another item.
  9. This is yet another item.
  10. This is another item.

Links

Links can be inside headings

Links can also wrap headings (valid in HTML5)

Links can be internal within a Web page (like to the Table of Contents at the top), or they can be to external web pages or pictures on the same website, or they can be to websites, pages, or pictures anywhere else in the world.


Buttons

font-size: 14px;   background-color: #EAAA00;   box-shadow: -3px 3px 7px rgba(0, 0, 0, .2);   padding: 1em 1.5em;   letter-spacing: 1.2px; hover -> background-color: #E59E0F;

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

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=0 M=0 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 C
    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

Colors - Web (Updated 2/2018)

  • Midnight: Headings, Accents
    rgb(0,48,135)
    #003087
  • Hero Overlay Base Color
    R=24 G=52 B=86
    #183456
  • Gold: Buttons & CTAs
    rgb(234,170,0)
    #EAAA00
  • Button Hover
    rgb(229,158,15)
    #E59E0F
  • Turquoise
    R=0 G=163 B=224
    #00A3E0
  • Link Blue
    rgb(0,140,186)
    #008CBA
  • Hover Blue
    rgb(0,120,160)
    #0078A0
  • Background Default (White)
    rgb(255,255,255)
    #FFFFFF
  • Body Text Default
    rgb(68,69,70)
    #444546
  • Bold Text
    rgb(18,18,19)
    #121213
  • Container Background
    rgb(244,244,244)
    #F4F4F4
  • Container Background, Light
    rgb(248,248,248)
    #F8F8F8
  • Magenta
    rgb(227,28,121)
    #E31C79
  • Iris
    rgb(164,56,168)
    #A438A8
  • Amethyst
    rgb(88,44,131)
    #582C83
  • Footer Background
    rgb(56,56,56)
    #383838

Colors - App

  • Jade
    rgb(0,187,94)
    #00BB5E
  • Red
    rgb(255,67,28)
    #FF431C

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