Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4...

16
Style Guide Design

Transcript of Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4...

Page 1: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

Style Guide Design

Page 2: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

Creative Services Team Jeremiah Berger, Creative Director Peter Plotica, Senior Designer Yangin Shieh, Designer

Page 3: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

3

Table of Contents

Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography 12–14

Page 4: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

4

This is the old logo. Don’t use it.

Page 5: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

5

This is the current logo. Don’t change it.

Saved in different formats here: Marketing > private > Design > Branding > Cultural Vistas Logo

Page 6: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

6

1⁄4

Leave space based on 1⁄4 the size of the logo.Keep things away from the logo.

Page 7: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

7

Minimum size 0.75 inch wide (print) 125 pixels wide (web)

Logo needs to be legible and scaled properly. Press & hold Shift when scaling.

Page 8: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

8

(white on background)

These are permitted logo variations.

Page 9: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

9

Print Web

PANTONE Process Cyan C #00ADEF c100 m0 y0 k0 r0 g173 b239 #009FDA (text)

PANTONE Warm Gray 9 C #82786F c17 m25 y25 k49 r130 g120 b111PANTONE Warm Gray 10 C (text)

PANTONE Orange 021 C #FF5800 c0 m68 y100 k0 r255 g88 b0

PANTONE 376 C (Green) #7AB800 c53 m0 y96 k0 r122 g184 b0c53 m0 y96 k20 (text)

PANTONE Violet C #4B08A1 c92 m98 y0 k0 r75 g8 b161

CMYK looks light on screen, RGB looks off on paper. Use the appropriate color formats for print and web.

Page 10: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

10

Examples of how we use the logo.

Templates available here:Marketing > private > Design > Resources > Templates

Page 11: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

11

We use the Text-only version for special cases.Mainly promotional material.

Page 12: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

12

Title Bold 30/32 Cultural VistasSubtitle Bold 16/18 Experience the global workforce

Body Text Bold 9.5/12.75 To enrich minds, advance global skills, build careers, and connect lives through international exchange.

Footer Text Bold 7/9.5 Cultural Vistas is a 501(c)(3) nonprofit organization.

This is standard text formatting for print. We use Proxima Nova for everything.

Font is synced through Typekit. Follow the Paragraph Styles in the templates.

Page 13: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

13

Title Bold 30/32 Cultural VistasSubtitle Bold 16/20 Experience the global workforce

Body Text Bold 9.5/13.5 To enrich minds, advance global skills, build careers, and connect lives through international exchange.

Footer Text Bold 7/10.25 Cultural Vistas is a 501(c)(3) nonprofit organization.

This is standard text formatting for web. Web copy needs more leading.

Bold is .5pt larger than its original size. There is also a condensed version—format it the same way.

Page 14: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

14

Title Bold 30/31 Cultural VistasSubtitle Bold 16/18 Experience the global workforce

Body Text Bold 9/12 To enrich minds, advance global skills, build careers, and con-nect lives through international exchange.

Footer Text Bold 7/9 Cultural Vistas is a 501(c)(3) nonprofit organization.

Everyone else uses Calibri. Web-safe alternative is Arial. Damn shame.

Page 15: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography

15

Style Guide is located here: Marketing > public > Style Guide

Page 16: Style Guide Design - Cultural Vistas · Yangin Shieh, Designer. 3 Table of Contents Old Logo 4 Current Logo 5 Spacing 6 Scaling 7 Variations 8 Colors 9 Examples 10–11 Typography