Logo

The mark is made up of unique parts that connect in an arrow-like form, representing forward momentum, an upward trajectory communicating positivity, and the more literal northeast direction. Its geometric construction utilizes a square grid, a reference to pixels and digital technology, while its asymmetry and modern forms reflects the hub's innovative personality.

Clear space & sizing

Part of the effectiveness of the logo is how well it can be scaled up or down and be integrated in a variety of applications. When using only the icon, it's size can be reduced to 1/4" in print and 20px by 20px, which looks like this:

Full logo with text, regardless of the lockup (more on that later), should be no smaller than 1" in print and 150px on screen:

Because the icon was constructed using a grid, clear space (below) can be determined by using one square as a reference point between the logo (with or without lockup) and anything/everything else. This does not apply to lockup text, which is set one half square distance from the icon.

Lockups

There are two different versions of text treatments for the full logo, both with vertical and horizontal lockups. The longhand version of the text– "NSF I-Corps Hub Interior Northeast"– should be used when there is any doubt as to who or what the organization is. The shorthand version of the logo "IN I-Corps" Should only be used for audiences already familiar with the hub.

Logo Color

We recommend keeping the logo in black (or very dark gray) or white (or very light gray) in most contexts. Occasionally the logo icon may appear in an accent color with the logo text remaining in black or white.

The downloads in the logo packages included here are in the RGB color space for use in digital applications. When producing materials for print, check with your printer about specific color conversion requirements. A CMYK value for the accent color has been provided, but many digital printers are using RGB values these days.

Combining logo with photos and video

The logo can be used in white overlaid on vibrant imagery or video, or animated to convey an additional dimension of motion and forward momentum.

The logo can also be used as a window to this imagery. We recommend only masking one photo rather than trying to reveal multiple images within the logo.

Type

Because I-Corps spans 10 different institutions (a number which will only increase) with distributed staff, we developed a type system that's all open source and available for free on Google Fonts for ease and accessibility. This also means that the fonts are available in Google Docs/Sheets/Slides as well as Figma. We're using three families that compliment each other nicely and have certain purposes depending on context.

Manrope

Google Font Page

To call this sans-serif typeface "plain" is a compliment here. It's a neutral, modern take on the grotesque style and doesn't include italics, but emphasis can be shown by increasing the weight or using a color highlight. Bold and ExtraBold are used for the logo, and lighter weights provide flexible options for body copy. You could use this for almost everything, and there might be times when that is what's appropriate.

Because Manrope is modest and more functional than flashy, it's easy to use without messing it up. The other two typefaces need to be used a little more carefully.

Anton

Google Font Page

When horizontal space is limited but you still need to make an impact, Anton–with only a single style–is recommended. It's for short headlines and calls to action. While the font does contain lowercase characters, it's easiest to read and most effective in ALL CAPS. Because of that, we don't encourage its use when acronyms are involved, because they will read like non-existent words. Even "IN ICORPS" is unclear if set this way, which is why this is a supplement to Manrope and the next typeface.

IBM Plex Mono

Google Font Page

Rounding out the brand is a monospace (all characters/punctuation are the same width) family in seven weights with upright and italic styles. It's a little more accessible than Anton but more memorable than Manrope. Because every letter and number takes up the same amount of space, you can alternate between weights or italics without altering the layout (no shift of spacing/lines). IBM Plex Mono is also a nod to the innovation focus of I-Corps, as a code-friendly font with subtle references to terminal fonts of early computing.

This family is incredibly versatile and can be used in almost any context in moderation. It performs well at large sizes for headlines, with the italic styles conveying the strongest personality. While it could be used for body text, large chunks of type set in monospace fonts can be hard to read, so be cautious about using it for longer sentences or paragraphs. It does, however, work incredibly well at small sizes for short snippets such as small subheads, URLs, dates, and other supporting details.

Photography

In general

Photography should be natural, honest, and not overly staged. Take care to use images that are the appropriate size and resolution. Poor quality images convey a lack of attention to quality overall.

Use faces and places that feel welcoming and familiar to create a scene that your audience can see themselves in, either literally (actually showing your partners) or by proxy (show people they can easily relate to).

Authenticity is key. Seeing people in action communicates the collaboration and humanity necessary for scientific and technological progress. Additional details about sourcing images in the “For Partners” and “For Hub Staff” sections.

Photo Treatments

A beautiful color photograph probably doesn’t need any modification. But if the photo was in bad light, or color requirements are such that the color version doesn’t look great, we’ve relied on a simple but effective method in stylizing images within your brand.

Patterns

To continue the pixel-inspired aesthetic from the logo, a semi-random pattern was made for background and overlay effects.

How-to

You can do a lot with this one provided pattern. But it is also fun and relatively simple to create a new pattern element. The aesthetic is equal parts Conway's Game of Life (?!) and space invaders, with some corners softened.

In the video above we use Adobe Illustrator, with the grid showing, and "snap to grid" enabled (under the VIEW menu). The video starts with an 8x8 grid of squares (64 total). From there, that whole shape is duplicated, then squares are removed at (somewhat) random. Once done removing (it's "done" when you think it looks good) that remaining shape of squares is duplicated. From here we used the pathfinder tool (available under the WINDOW menu if you don't already see it), select all the squares, and use the top left "Unite" option to unite our remaining shapes into one. From here, we use the direct select tool (shortkey "a") to select the shape, and pull in the corner radius value to be slightly rounded. From here, directly clicking on any round corner node then clicking while dragging on the same node a second time will allow you to return it to a 90º angle. Again, you're done whenever you want to be.

Co-Branding

One of our priorities in building out this brand system was ensuring that the character of each institution was not lost or overridden, but that the hub’s materials felt cohesive across institutions. We build a set of design conventions that take a co-branding approach: they inherit each institution's brand colors and allow for prominent placement of the college or university’s logo and imagery, while maintaining consistency through type treatments, layout, and hub logo placement.

Inheriting Color

Most materials produced in collaboration with partner institutions will feature the institution’s primary color. The color palette of partners is diverse and robust. By featuring the institution’s primary color, the materials will feel customized and familiar while emphasizing participation in a larger program.

Creating balance through logo placement

Materials utilizing the co-branding approach should give equal weight to both the institution and the hub logos. They should be roughly the same size. Due to large variations in aspect ratio, scale, and design of partner logos, we suggest using layouts that don’t position the partner logo and the hub logo directly next to each other. See implementation examples below for ideas on how to maintain brand parity without making a “logo salad”.

The IN I-Corps logo can be placed in a partner color when appropriate, but especially when the logos are close to each other in the layout, using a simple black or white treatment creates a sense of distinction while the equal sizing conveys unity and partnership.

Utilizing Institutional Imagery

Taking advantage of place-based imagery will bring an extra level of customization to the co-branded materials. Whenever possible, choose images that clearly communicate a sense of place or that clearly show members of the campus community.

Sense of place: These images should include a human element, motion, or action whenever possible. Broadly speaking, these may include:

• Campus aerials
• Architectural shots

Community:

• familiar faces such as established instructors or past program participants
• people wearing clothes with the university/college name
• subjects contextualized in a familiar campus environment

Examples

The system works in a variety of contexts. These examples demonstrate how the logo, type, color, and institutional co-branding come together to form a balanced brand system.

Fundamentals Approach

There will be the occasional instance in which hub materials will not be affiliated with a specific institution. In that case, we rely heavily on vibrant imagery to bring color and energy to the materials, with coral accent color for an extra pop.

Accent Color

Because the partner institutions utilize the majority of the color spectrum, the IN I-Corps accent that will stand out (and probably not be duplicated by any future schools) is Coral. Hex #ED5259 •

As a whole, the palette is simple, from black to white with appropriate shades in between. Materials from the hub that aren't specific to a partner university can include the Coral accent color (preferably for design elements/backgrounds) if it enhances the presentation. Vibrant color photography should be the priority when infusing materials with color.

Black and white gradients should be used to add depth in appropriate circumstances, as well as a Coral gradient (fading either to black or white). Reminder, these color suggestions apply only to non-photography elements.

Color Usage

While the logo can adopt the coral accent in some instances, most of the time the accent will remain a flourish for highlighting or injecting a memorable splash of color. It can color backgrounds and patterns, overlay over grayscale images, or serve as a highlight color for hyperlinked text (though a colored underline accent, see above) or secondary headlines. Think of the coral accent as something that should only be used if it is necessary to balance out a design. Here are some hard and fast rules to ensure accessibility:

• Any text set below 18pt should be in black or white.
• Headlines can be set in coral, but only on a black background.
• If the background is coral, any overlaid text should be black.
• Coral and white may be overlaid / adjacent for design elements such as patterning or outlining, but never for text.
• Links should not be set in coral, but can use a coral underline paired with bolded text.

Sourcing Imagery

If possible, images should come from partner institutions and feature institution-specific elements and architecture. Prioritize images of actual events and real program participants over stock imagery. If stock imagery is necessary, choose photos that look authentic and skip over images that are obviously generic stock. Tells include simplistic graphs, blank device screens, and forced laughs. Unsplash.com and Pixabay.com are both great resources for free stock imagery, but require a bit of work to find authentic and usable resources.

Examples

The system works in a variety of contexts. These examples demonstrate how the logo, type, and accent color work together to convey the brand in fundamental materials not affiliated with a specific institution.

Downloads

• LOGO
• Vector Formats for Screen - RGB ↓
• Vector Formats for Print - CMYK ↓
• Raster Formats for Screen - RGB ↓
• Animated (.aep file) ↓

• TYPEFACES
• Manrope ↓
• Anton ↓
• IBM Plex Mono ↓

• Figma (links)
• All logos →
• Patterns, colors, & treatments →
• Implementation examples→

Partner Materials: Binghamton ↓ Buffalo ↓ Cornell ↓ Dartmouth ↓ Pittsburgh ↓ RIT ↓ University of Rochester ↓ Syracuse ↓ Vermont ↓ West Virginia ↓

NOTES: The Figma project that is linked to above will need to be copied to your account in order to become editable (basic accounts are free). The typefaces here are available on Google Fonts should you wish to implement them on the web.