Typography

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

Hero image overlay heading (h1 or h2). 41px/1 ProximaNova-Bold - prefer sentence case/down style

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.


*This is a reference item for the content above.

1 This is another style of reference item for the content above.


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=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 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
  • Lilac
    C=46 M=56 Y=17 K=0
    R=0 G=163 B=224
    #8D6CC1
  • Mauve
    C=52 M=75 Y=28 K=7
    R=227 G=28 B=121
    #773F9B
  • Yale
    C=100 M=82 Y=29 K=15
    R=164 G=56 B=168
    #003D87
  • Creamsicle
    C=5 M=41 Y=73 K=0
    R=88 G=44 B=131
    #F79646
  • Carmine
    C=24 M=95 Y=55 K=9
    R=0 G=112 B=189
    #B21472

Colors - Web (Updated 5/2019)

  • 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
  • White: Background Default
    rgb(255,255,255)
    #FFFFFF
  • Marengo: Body Text Default
    rgb(68,69,70)
    #444546
  • Licorice: Bold Text
    rgb(18,18,19)
    #121213
  • Fog: Container Background
    rgb(244,244,244)
    #F4F4F4
  • Haze: Container Background
    rgb(248,248,248)
    #F8F8F8
  • Magenta: Highlight color
    rgb(227,28,121)
    #E31C79
  • Iris: Highlight color
    rgb(164,56,168)
    #A438A8
  • Amethyst: Highlight color
    rgb(88,44,131)
    #582C83
  • Eclipse: Footer Background
    rgb(56,56,56)
    #383838

Colors - App

  • 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