NYC Media Lab Website Style Guide


FONTS

This is Normal text.
This is Normal text in bold.
This is a link.

This is h1.

When to use it:

  • Any time you need to make the standard text larger for graphic impact.

  • Primarily used in the body of blog posts and portfolio items.

  • Here is an example.

This is H2

When to use it:

  • For the top header on each main page (ie: Partnerships, About, Community).

  • It is the largest text on the website.

This is H3

When to use it:

  • For the sub headers of sections on main pages.

  • For headers above applications or sections that need added impact (ie: APPLY HERE)


Copy for H2 Dropdown Code Injection:

<center><h2 id="TITLEHERE">Text To Appear</h2></center>

Button URL:

#TITLEHERE


COLORS

The color for Normal font is black (#000).

The default background color on pages is white (#FFF).

#b30986: For heading fonts and all standard links

#770B59: Darker shade for graphs and charts.

#e8e8e8: Background color for sections and for image cards.

#f9f9f9: Alternate background color for page sections.


MAIN NAVIGATION PAGES

A main is a page that appears in the top navigation (ie: Partnerships, Community, About).
Each main page is built via the Squarespace Index Page option. See details here on using Index Pages.
Each section main page are the sub headers (ie: if the Index is “Partnerships”, the sections would be “Offerings”, “Engagement Levels”, etc).

For the top of each main page, the background color is black, and the font color is white. See example here.
To do this, you must first create a header Index Section. This is how it looks:

Screen Shot 2019-01-16 at 10.08.39 AM.png

Then, you change the Custom CSS for that section:

#INSERT-SECTION-NAME-section {
background-color: #000;
color: #fff:

}

So, if your section name was “Partnerships Header, it would look like this:

#Partnerships-Header-section {
background-color: #000;
color: #fff;

}


GRAPHICS

This is a text & image block. To get it:
Image Layouts →  Card

To get the button on the block:
Click to Edit Block → Toggle Design → Image Link → Select Button

For the image, you want to have a 5:4 or a square size ratio to make sure the text + image sizing is even.

edited.jpg

TITLE OF THE BLOCK

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.

BUTTONS

COMMON CHARACTERS

Long Dash:

Text Arrows:


NYC MEDIA LAB ASSETS

To download these images: Right click, then “save image as”

For all Gallery & Summary blocks: The standard use is below.
Images have a 3:2 size ratio, and select 3 images per row.

NYC Media Lab Boilerplate:

NYC Media Lab connects media and technology companies with New York City’s universities to drive innovation, entrepreneurship and talent development. A public-private partnership launched by the New York City Economic Development Corporation, NYC Media Lab funds prototyping projects that foster collaboration across a range of disciplines core to the future of media. The Combine, an early stage accelerator for emerging media and technology startups, is now in its fourth year.