Site Instructions & Styles

Design Rules

  • Body copy text should never run the full width of the content container
    • The narrow row width to contain body copy is 860px
  • Border radius on cards and images is always _px
  • Border radius on buttons and labels is _px

Content Rules & Glossary

  • Headings should use _______ Case style

Images

  • Generally images should be compressed JPEGs unless the image needs to be transparent, in which case a PNG is best.
  • If an image “weighs” more than 300kb it is likely too big. That is almost a third of a megabyte and could take a while to load on slower connections.
  • Overlay effect of a 60% opacity #737373 is the preferred overlay effect for hero images. ncsis-gradient_overlay
  • Full size hero images should be no wider than 1600px.
Epicenter-Style-GuideDownload

Styling

Colors

Button Styles

Lead the way
Primary
Secondary
Primary
Secondary
Primary
Secondary
Primary
Secondary
Text Only

Typography

The site’s font is Neue Haas Grotesk from Adobe TypeKit with font-smoothing globally applied.

Font Weight options

Heading Font – Neue Haas Grotesk Display, Weight: 600-Medium

Heading Font – Neue Haas Grotesk Display, Weight: 600-Medium Italic

Heading Font – Neue Haas Grotesk Text, Weight: 400-Roman

Heading Font – Neue Haas Grotesk Text, Weight: 400-Roman Italic

The Advanced Text blocks that have a class of gradient_text will highlights the specific text.
Note: This is the first highlight option in the Advanced Text block setting

Highlight Example of H2 with H1 Styling with gradient_text class

Heading Style H1 48px 400-Regular

Heading Style H2 38px 400-Regular

Heading Style H3 29px 400-Regular

Heading Style H4 23px 400-Regular

Heading Style H5 18px 500-Medium All Caps and 3px Letter Spacing
Heading Style H6 11px regular

Body copy 18px regular Lorem ipsum dolor sit amet, link consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo bold consequat. Duis aute irure dolor in reprehenderit italics voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Modules

School

Since working with NCSI, we are able to improve more schools—more often, more efficiently, and more intentionally.

David Smith, VP & Director
ACME School

Lorem Ipsum dolar sit ametSince bringing on Collect, we are able to touch and pursue more accounts—more often, more efficiently, and more intentionally.

Fred Park, VP & Loan Operations Director
Franklin Mint Federal Credit Union

Add a short headline

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

Learn more

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

Learn more

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

Learn more

Headings

To add the blue line effect to the bottom of the heading use “headline-border” as the CSS class – this  automatically aligns it left.

If you’d like it centered use headline-border--center To make the font weight light:  font-weight--light
To make the font weight regular: font-weight--regular

Heading 1 Page Title

Heading 1 Lorem

Heading 2 Lorem

Heading 3 Lorem

Heading 4 Lorem

Heading 5 Lorem
Heading 6 Lorem

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  • Lorem bullet
  • Lorem bullet
  • Lorem bullet

Blockquote Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.”

Blue Button Ghost Blue Button