makerSPHERE Style Guide

maker SPHERE styleGUIDE

CITY COLLEGE OF SAN FRANCISCO

maker SPHERE CITY COLLEGE OF SAN FRANCISCO

2

4

6

8

10

12

15 16

18 20

Brand Overview Logos Variations Spacing Typefaces Colors Logo Misuse Layouts Contact Information 3

BRAND OVERVIEW maker SPHERE is about making, creativity, and interdisciplinary experiences. This promise is reflected in the branding with the connection between the main and sub-logos.

It reflects the versitality of the maker SPHERE initiative and the energy of the students and instructors that are involved.

Energy, connection and versatility jump-start the mind to make, create and experience.

4

LOGO

The maker SPHERE is the preferred logo for the entire maker initiative at City College of San Francisco. The three parts of the "M" represent the three spaces of the initiative.

Sub-logos were designed to reflect the different spaces within the maker SPHERE initiative. They retain the same shape as the "M" but depict the first letters of each other spaces:

s · smart i · industrial c · collaboratory

smart HUB

CITY COLLEGE OF SAN FRANCISCO

industrialLAB

CITY COLLEGE OF SAN FRANCISCO

The sub-logos are to be used when referencing the sub-spaces of the initiative.

For the purpose of this style guide, only the preferred logo will be used as examples but all of the rules listed in this guide applies to the sub-logos as well.

6

collaboratorySPACE CITY COLLEGE OF SAN FRANCISCO

Preferred Print Logo

maker SPHERE CITY COLLEGE OF SAN FRANCISCO

Preferred Web Logo + Alternate Print Logo

maker

SPHERE CITY COLLEGE OF SAN FRANCISCO

7

VARIATIONS: COLOR + DIRECTIO DIRECTION

Option #2

There are various versions of the logo depending on usage. The maker SPHERE logo should be reproduced in color whenever possible.

White is the most effective background on which to reproduce the color logo because it provides a clean, crisp contrast for the logo’s color and elements.

If color reproduction is not available or is not a viable option, the logo should be reproduced with the black and white version or as a reverse logo on a pattern or color background. (option #2) When the logo is placed on a photographic image, the image must be light enough to provide contrast for the positive logo or dark enough to provide contrast for the reverse logo. (options #3)

8

maker SPHERE CITY COLLEGE OF SAN FRANCISCO

maker

SPHERE CITY COLLEGE OF SAN FRANCISCO

Option #3

maker SPHERE CITY COLLEGE OF SAN FRANCISCO

maker

SPHERE CITY COLLEGE OF SAN FRANCISCO

9

SPACING: PADDING

To preserve the maker SPHERE logo’s integrity, always maintain a minimum clear space around the logo. This clear space isolates the logo from competing graphic elements such as other logos, copy, photography or background patterns that may divert attention.

This minimum space should be maintained as the logo is proportionally enlarged or reduced in size.

10

S

The minimum clear space for the alternate vertical logo is twice the height of “S.”

S

maker SPHERE CITY COLLEGE OF SAN FRANCISCO

S S

S maker SPHERE S

S

S

The minimum clear space for the maker SPHERE logo and the alternate horizontal logo is defined as the height of the “S” in the wordmark.

S S

S S

S S

CITY COLLEGE OF SAN FRANCISCO

SPACING: MINIMUM SIZE

The maker SPHERE logo retains its visual strength in a wide range of sizes.

However, when the logo is reproduced in print too small, it is no longer legible and its impact is diminished.

The minimum size of the logo for print is determined by the width of the maker SPHERE wordmark, which should not be reproduced in a size smaller than 1.5" in height for the preferred logo, 2"in width for the alternate horizontal logo, as illustrated.

1.25" maker SPHERE CITY COLLEGE OF SAN FRANCISCO

maker

SPHERE CITY COLLEGE OF SAN FRANCISCO

2"

11

TYPEFACES To help provide a consistent, unified look in the maker SPHERE brand’s use of typography, the Fira Sans and Meta Pro typefaces should be used for all print and web content.

META PRO Meta Pro typeface should only be use for print materials: brochures, business cards, letterheads, etc.

The recommended weights of Meta Pro are Regular and Black. Italics and bold are also appropriate for emphasis values.

FIRA SANS Fira Sans should only be used for branding purposes and for any and all web content, including emails, websites and any digital-only collaterals.

The recommended weights for Fira Sans are Regular and Bold. Thin and Bold are also apprpriate for emphasis values.

12

PRINT: META PRO THIS IS A HEADER. 12/14 This is body copy. 10/12 This is italics.

This is bold.

font size/line-spacing

WEB: FIRA SANS

THIS IS A HEADER. 20/24 This is body copy. 16/19 This is italics.

This is bold. makerSPHERE Fira Sans Bold Fira Sans Regular

Fira Sans Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!?.,;’” used only for branding and web content

Fira Sans Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!?.,;’” used only for branding and web content

Meta Pro Black ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!?.,;’” used for print only

Meta Pro Normal ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!?.,;’” used for print only

13

reate • Diversity • Le ry • Connection • Pro STEAM pathways • O tion • Engagement Maker experience • ntrepreneurship • 14

SECONDARY COLORS

PRIMARY COLORS

earn • Discovery • Con oblem-solving • Inn Opportun • st • 21 cen ry•skills • Co • Diverse Create • PRINT

DIGITAL

WEB

CMYK 4 · 2 · 0 · 52

RGB 118 · 120 · 123

HEX #76787B

Pantone 319 C

CMYK 85 · 5 · 0 · 17

RGB 28 · 202 · 212

HEX #1CCAD4

Pantone 368 C

CMYK 38 · 0 · 81 · 26

RGB 118 · 189 · 25

HEX #76BD23

Pantone 219 C

CMYK 0 · 90 · 42· 12

RGB 225 · 22 · 131

HEX #E11683

Pantone 129 C

CMYK 0 · 25 · 86 · 0

RGB 250 · 175 · 63

HEX #FAAF3F

Pantone Cool Grey 9C

15

LOGO MISUSE: WHAT NOT TO DO

Incorrect use of the maker SPHERE logo compromises its integrity and effectiveness.

The examples of logo misuse below are not comprehensive; they are only a small sample of possible misuses of the logo.

maker SPHERE

CITY COLLEGE OF SAN FRANCISCO

Don't typeset the wordmark with the logomark.

To ensure accurate, consistent reproduction of the logo, never alter, add to, or attempt to recreate it in any way. Always use the approved digital artwork provided by the Dean.

maker SPHERE

maker SPHERE

Don't use patterns or gradients within the logo.

Never change the color of the logo.

CITY COLLEGE OF SAN FRANCISCO

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam-

CITY COLLEGE OF SAN FRANCISCO

maker

maker SPHERE

SPHERE

maker SPHERE CITY COLLEGE OF SAN FRANCISCO

Never change the shape of the badge.

maker SPHERE

CITY COLLEGE OF SAN FRANCISCO

CITY COLLEGE OF SAN FRANCISCO

CITY COLLEGE OF SAN FRANCISCO

Don't place text on top of the full color logo.

Don’t stretch the logo disproportionately

Never change the size of the wordmark or logo.

Never change any elements of the logo.

LOGO MISUSE: SUB-LOGOS For consistency and clarity of branding, the maker SPHERE logo should never be placed next to any of the sub-logos in branding collaterals. This will cause confusion and ultimately dissolve the identity of the makersphere initiative.

An option would be to tint back one of the logos as a graphical element.

Come on in!

explore

collaborate

make

experiment OPEN TO EVERYONE!

maker

smart

CITY COLLEGE OF SAN FRANCISCO

CITY COLLEGE OF SAN FRANCISCO

SPHERE

HUB

Two full color logos side by side causes inconsistency with branding.

Tinted back makerSPHERE logomark as a graphical element only.

One full color logo

17

LAYOUT: PRINT

logo boundry margin

In a print layout, there needs to be enough margin, logo padding and hierarchy for best readiblity.

Margin: Logo spacing letter size: upper left

top: 3p3

left: 3p3

content margin logo spacing margin

poster size: lower right Margin: Logo placement

top: 4p9

left: 4p9 Margin: Content

top: 14p6

bottom: 6p0

left: 15p3

right: 5p6 Baseline The imaginary line upon which a line of text rests.

Alignment Always align text to the left.

18

maker SPHERE CITY COLLEGE OF SAN FRANCISCO

baseline

50 Phelan Ave San Francisco · CA 94112 www.ccsf.edu

07.27.17

CITY COLLEGE OF SAN FRANCISCO RECEIVES $350,000 IN GRANT FUNDING TO BUILD A MAKERSPACE COMMUNITY

Funding will provide access to interdisciplinary spaces necessary to prepare students for 21st century careers

alignment

SAN FRANCISCO - The California Community College Chancellor’s Office awarded City College of San Francisco (CCSF) $350,000 in funding, renewable for a second year, through a competitive process to create an inclusive makerspace community, prepare students with skills in Science, Technology, Engineering, Art and Mathematics (STEAM), and launch a maker certificate in fall of 2018.

Twenty-four colleges received funding to participate in the California Community College (CCC) Maker Initiative and collaborate across the state, sharing best practices and developing a model for creating college makerspace communities.

The grant will allow the College to launch three makerspace locations that each offer varying tools and grow different skills. One location will offer access to “light” making with a focus on ideation and computer work; a “medium” space with access to tools such as laser cutters, drill presses and 3D printing; and a “heavy” space with soldering, heavy equipment, and construction. The interdisciplinary spaces will be knitted together with technology provided by the College’s industry partner, Cisco Systems.

Industry professionals share the view that success in the STEM (Science, Technology, Engineering, and Math) fields require an eye for design and strong problem-solving skills that are provided by the arts.

“CCSF students have been makers for years,” said Theresa Rowland, CCSF Associate Vice Chancellor of Workforce Development. “This fall, CCSF expands making at the College with labs to expand inter-disciplinary learning and high-tech approaches.

What happens when you have fashion students collaborating with IT students?

Amazing innovations that we can’t even anticipate today.”

“Providing students with access to makerspaces is essential for preparing students to enter 21st century careers,” said Dr. Mark Rocha, Chancellor of CCSF. “Thanks to the diligent work of our faculty, we look forward to providing students access to spaces dedicated to these important activities.”

The vision of the statewide initiative is to drive innovation in education and prepare California Community College students for success in STEM/STEAM careers that demand 21st century skills. “Through the CCC Maker initiative, colleges engage with businesses in new ways, students are inspired by learning by doing, career skills are incorporated into education, students develop interests in emerging technologies and community colleges contribute to a thriving statewide economy,” said Carol PepperKittredge, Project Director of the CCC Maker program.

LAYOUT: WEB The grid system is composed of eight flexible columns with a gutter between columns of 30px. Combined columns will create varying column widths.

In general, full width columns are reserved only for big image landing pages or headers while the ideal column width for body copy will be between 1/2 to 1/3 column widths . Also, shorter copy needs shorter columns while longer copy need wider columns.

The ideal number of characters—counting both letters and spaces—for a multiple column layout is between 40 to 50 characters.

The ideal typeface size should be 16 points with 20 points of leading. Leading is the space between the lines of text in a body of copy.

GRID SYSTEMS Full width column

1/2 width column

1/3 width column

1/4 width column

1/8 width column

The width of a web page will vary depending on the device being used so all web design should be responsive.

19

CONTACT INFORMATION To obtain any logo files, please contact: Kristina Whalen, PhD Dean for School of Fine, Applied + Communication Arts kwhalen@ccsf.edu

logos and style guide designed by: ericalegari.com

20

21