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