TABLE OF CONTENTS. One eye sees, the other feels. Principles, elements and tone Wordmark Color palatte Typefaces Studio influences 3,

Transcription

1 brand style guide

2 TABLE OF CONTENTS Principles, elements and tone Wordmark Color palatte Typefaces Studio influences 3, One eye sees, the other feels. -Paul Klee 2

3 PRINCIPLES, ELEMENTS & TONE BRAND HIERARCHY Studio Luma is the first in a collection of technical education curricula under the Studio brand. Studio s goal is to make technical education work for today s student. It does so by replacing traditional textbooks, lectures and tests with richly contextual, scenario-based learning. It represents the intersection of learning, art and technology. WORD MEANINGS Studio refers to an artists workroom a place where art is taught or studied. Its Latin root means to study with diligence or zeal, conveying a passion for learning. The Studio brand draws inspiration from art, film, recording, dance and even yoga studios. It suggests a place where apprentices learn from masters in the field, where artisans hone their craft, and where creativity flourishes. Luma suggests luminosity, light and inspiration. In video, luma refers to the brightness of an image, sometime called its luminance. Luma is reminiscent of luna, the Latin root of lunar, which lends Luma a feminine, ethereal feel. LEARNING DESIGN PRINCIPLES The learning product development process is informed by six guiding principles: Simplicity Get to the point. Eliminate the noise. Relentlessly drive toward the essentials of learning, the things that matter. Storytelling Draw students in. Connect the dots. Engage students emotionally in discovering their own path to success and imagining the storyline of their careers. Discovery Point the way. Open new doors. Challenge students to make choices and search for answers as a way to build their resourcefulness and confidence. Feedback Monitor. Adjust. Provide feedback that is constant, specific, timely and incremental. Tell students where they are and help them correct their course. Repetition Do it again and again until it s a habit. Reinforce a core set of learning points to build good habits. Maximize guest traffic to enable students to refine those habits in the real world. Measurement Drop stand-alone tests. Weave testing into the learning process so it doesn t feel like testing. Provide reliable data and measurement on mastery of the concepts. 3

4 PRINCIPLES, ELEMENTS & TONE DESIGN APPROACH The design approach incorporates five characteristics: Light to illuminate Texture to add interest Color splashes to create energy and draw attention Contrast makes elements pop Dimension that adds depth adds an edgy element that makes the brand feel accessible, authentic and playful. Color Studio Luma s timeless combination of white, off-white and gray forms a clean canvas on which to layer other colors. Two shades of blue serve as the signature colors. The lipstick red, burnt orange and spring green accent colors add energy, interest and contrast. The accent colors can be swapped out as fashion trends change. LOGO The logo is clean, crisp, simple and sophisticated. It is described as refined, artistic, airy and feminine. Dots The sequence of increasingly large dots adds energy, movement and visual interest to the all-type logo. The row suggests progress, growth, momentum, anticipation and take-off. Used outside the logo in various sizes, colors and patterns, they become a versatile graphic element. Ghosted back, they reinforce the luminous nature of the Luma name. TONE The brand s tone is sophisticated but accessible, contemporary, aspirational, artsy and a bit edgy. DESIGN ELEMENTS Font Sofio Pro Light and Source Sans Pro are clean, light and contemporary fonts. They give off an upscale, fashion-forward vibe and suggest a feminine sensibility. The hand-written Studio Luma Hand font Icons A collection of graphic icons matches the clean, sophisticated feel of the logo font. The symbols serve as a visual shorthand for a generation of media-savvy users. Magical pixie dust -- A collection of shimmering orbs that often are animated Poetic principles A collection of memorable phrases that capture fundamental LEARNING principles. 4

5 WORDMARK COLOR APPLICATION BLACK & WHITE APPLICATION Logo safe area The Studio Luma logo is a rectangular element. Leave padding around the logo to give it breathing room. Design elements should not invade the safe area of the logo. 5

6 COLOR PALETTE PRIMARY White Off-white Cool gray 9 Blue White* C0 M0 Y0 K0 #ffffff C4 M2 Y5 K0 #F2F2EE Cool gray 9 C56 M47 Y44 K11 #a5aeb6 Pantone 7461 C95 M37 Y5 K0 #0082c0 Pantone 7541** SECONDARY Powder blue Cool gray 11 Pantone 7458 C55 M13 Y13 K0 #6eb4cd Cool Gray 11 C67 M59 Y53 K34 #4d4e53 ACCENT Burnt orange Red Green Pantone 179 C7 M91 Y100 K1 #dd3e26 Pantone 1925 Pantone 368 C5 M100 Y59 K1 #e30450 C64 M0 Y100 K0 #66bc29 * Although opaque white inks exist, Pantone does not provide a reference for white. Generally, if you are printing on white paper and apply no ink to an area, you will achieve white. When ink is needed, it should simply be specified as opaque white, without a Pantone reference. ** The off-white screen color and Pantone color are not an exact conversion. 6

7 TYPEFACES SOFIA PRO LIGHT SOFIA PRO LIFT Source Sans Pro body copy* dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. SOFIA PRO, LIGHT, 100 TRACKING SOFIA PRO, EXTRA LIGHT, 100 TRACKING Source Sans Pro, regular, 0 tracking Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Studio Luma Hand font Studio Luma Hand, regular, 0 tracking The Studio Luma Hand font may be used in lower case or initial cap. Please do not use in all caps. Vigorous writing is concise. -William Strunk, Jr. and E. B. White *Helvetica is an alternate typeface for body copy, such as in communications where the end users may not have the Source Sans Pro font installed on their computer device. 7

8 STUDIO INFLUENCES Creating the atmosphere of Studio Luma FLOOR WALLS White and clean Just enough texture Irregular vertical lines on the wall Concrete with texture that is clean Display art on the wall as an accent Diagonal lines Moderate amount of shine but not too much Cool colors with shades of gray to create texture Good design is good business. -Thomas J Watson, Jr. 8

9 STUDIO INFLUENCES Creating the atmosphere of Studio Luma WINDOWS Light White metals in the windows Clean not grunge 9

10 STUDIO INFLUENCES Creating the atmosphere of Studio Luma ACCENT LIGHTING BACKGROUND LIGHTING 10

11 STUDIO INFLUENCES Creating the atmosphere of Studio Luma PLANT STYLES FURNITURE / FABRICS FRAMES Strikes a balance between art and function Pop color Shape Accent shape of the plant Stark contrast 11

12 ST UDIO INF LUE N C ES Creating the atmosphere of Studio Luma AC CE NT G L AS S & C RYSTA L BAC KG ROUND GL AS S & CRYSTAL 12

13 STUDIO INFLUENCES Creating the atmosphere of Studio Luma ART Edgy but not off-putting 13

14 Copyright Studio Luma