About this site

This website is built on Squarespace. Instead of using an off-the-shelf template, we’re using Squarespace in ‘developer mode,’ which allows us deep control of the site.

Squarespace has a robust help and support knowledge base website—please refer to that site for guidance about working with the site on a day-to-day basis. They also offer many guides and tutorial videos for working with various aspects of their system. Additionally, Squarespace offers customer support directly to its users, so don’t hesitate to reach out to them as you need to.

Style Guide

On this page you'll find some notes on colors, all of the available text styles for you to use on this site, and other notes about the visual style of this site.

Colors

NCS Brand Color

The principal NCS brand color is the orange used throughout this site. Different media uses different color systems. The NCS orange is represented across color systems with the following values:

For Printed matter:

CMYK: 0, 79, 100, 0
Pantone: 1665C

For screen media:

RGB: 220, 68, 5
Hexadecimal: #DC4405

Secondary Color

The NCS brand doesn't specify a secondary color, but on the site we're using a blue for focal point elements like the Donate Now button.

For Printed matter:

CMYK: 88, 48, 0, 35
Pantone: 300 C

For screen media:

RGB: 19, 86, 165
Hexadecimal: #1356A5

Working with images

Squarespace allows the user to upload images into image boxes almost anywhere that is editable, but in addition to that, we have special header images on first-level pages.

Header images will look best if they are cropped at a 16:9 ratio, with a minimum width of 1024 pixels, in order to make sure the images are high enough resolution for retina-class displays.

When using multiple images in a grid arrangement, crop each one at a 1:1 ratio, and build the composite layout to 16:9.

Typography

The following styles correspond to the formatting options available in the Squarespace Content Editor. This paragraph is set using the Normal style in the Squarespace Content Editor

Heading 1

Heading 1 is good for titles. Use it sparingly, for the top level of your document. 

Heading 2

Heading 2 is good for multiple section headings on one page. 

Heading 3

Heading 3 works well as an alternate section heading. 

This is a quote. Lorem ipsum dolor sit amet, 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 consequat. Duis aute irure dolor in reprehenderit in 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.

Here is an ordered list:

  1. Item One
  2. Item Two
  3. Item Three

Here is an unordered list:

  • Item One
  • Item Two
    • Item Two Point One
  • Item Three

Templates and Pages

Using the Squarespace Admin, you can create as many new pages as you need. Pages must conform to one of the following Page Layout Templates:

Main Layout

  • Creates a page with a navigation sidebar and a header image. 
  • Used for most first-level pages (Mission, History, News, Events, Supportive Housing, Programs, etc)

Single Layout

  • Creates a page with a single piece of content that takes up the full width of the content space.
  • Used for second-level pages like individual events, blog posts, program pages, etc.

Landing Pages

  • Creates a page with a header image, and six call-out boxes featuring an image and some text.
  • Used on the Take Action page.

Homepage

  • Creates a grid of image blocks
  • Used only on the Homepage.

People

  • Creates a page with editable blocks laid out in two columns.
  • Used only for the People page

You can edit a page's template in the editor screen (the menu you get when you click on the little gear icon next to each page name), by changing the Page Layout field.