Styleguide YES!Delft

U MG G E R

L VO Y T R

S

E ING D I EV

O

VO

S M R I F TH

G IN GROW D A |

LE ION ’SUBAT

W RO | INC R O ON TI

MA TO UC

D |E NG I N D IO

IL AT BUSPIR IN

1

YES!Index YES!Index YES!Delft in words YES!Logo YES!Pay-off YES!Logo YES!Logo and Pay-off YES!Logo and Pay-off YES!Colors YES!Color distribution YES!Typefaces YES!Pattern Crystal YES!Pattern Midnight YES!Pattern & Pay-off YES!Pattern Triangle Cut YES!Footers YES!Business card YES!Headers YES!Letterhead & example report YES!Compliment Card YES!Ribbon YES!Brochure YES!Flyer YES!Poster YES!Photography YES!Photos & Text YES!Arrows YES!Logo derivatives YES!Cheat sheet Appendix: YES!Icons Appendix: YES!Tables

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 31 32

2

YES!Delft in words

VIBRANT TECHNICALLY INNOVATIVE SCALABLE

LEADING NETWORK AMBITIOUS

YES!Delft: Building tomorrow’s leading firms

YES!Delft - the Young Entrepreneurs Society – inspires, educates, coaches and supports students, professionals and researchers interested in starting a high-tech company or further developing an early stage high-tech company.

3

YES!Logo LOGO All communication materials should include the basic logo.

ON BLACK

ON BLUE

SOLID

4

YES!Pay-off FONT SIZE Font size ratio is 3/4

ON BLACK

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

ON BLUE

BUILDING TOMORROW’S LEADING FIRMS

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

INSPIRATION | EDUCATION | INCUBATION | GROWTH

SOLID

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

5

YES!Logo

SIZE&COMPOSITION MINIMAL SIZE Width: 16,5 mm Height: 8,5 mm

WHITESPACE Keep enough whitespace around the YES!Logo so as to let it stand out.

HORIZONTAL Align the top of the body text with the top of the “Y” of the YES!Logo.

LORUM IPSUM, C. Ala nordica viri, facioravo, Catus occhucivis, nonihil icustris, que res nerorus, a dis postaridiem facie pl.

Nihiciptis bonsum inatus nostre aperum esimus acem suntum nite audesulto.

VERTICAL Align the left side of the body text with the left side of the “Y” of the YES!Logo.

LORUM IPSUM, C. Ala nordica viri, facioravo, Catus occhucivis, nonihil icustris, que res nerorus, a dis postaridiem facie pl.

Nihiciptis bonsum inatus nostre aperum esimus acem suntum nite audesulto morem unum, cullemque.

6

YES!Logo and Pay-off HORIZONTAL Text: left aligned.

Keep horizontal spacing between logo & pay-off

VERTICAL, LEFT ALIGNED Text: left aligned.

Keep vertical spacing between logo & pay-off

COMPLETE LOGO, COMPOSITION

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

COMPOSITION The YES!Logo and YES!Pay-off together form the complete logo. The preferred composition is horizontally, but it can also be used vertically, or centered when it’s not possible to use the horizontal version.

When this complete logo is used, always use one of these three compositions.v

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

VERTICAL, CENTER ALIGNED Text: center aligned.

Keep vertical spacing between logo & pay-off

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

7

YES!Logo and Pay-off

DO NOT USE THE FOLLOWING LOGO TREATMENTS

What not do with the Yes!Logo / YES!Pay-off.

COLOR CONTRAST Use the right logo / pay-off with enough contrast.

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

RMS ING FI

D ROWTH S LETA ’ N|G W O I O ORR CUBA

TOMCATION | IN G N I BUILD TION | EDU

ROTATION Do not rotate the YES!Logo / YES!Payoff.

A

INSPIR

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

SCALE Do not scale without constraining the proportions.

COMPOSITION Do not change the composition of either the YES!Logo or the YES!Pay-off.

8

YES!Colors

C100 M35 Y0 K35 R0 G102 B161 #0066A1

C85 M5 Y0 K0 R0 G169 B224 #00A9E0

C65 M0 Y0 K0 R61 G183 B228 #3DB7E4

C35 M0 Y0 K0 R163 G219 B232 #A3DBE8

LIGHT & COOL Lighter colors are based on the original blue of the logo

DARK & WARM Darker colors are slightly more magenta C100 M85 Y0 K35 R0 G39 B118 #002776

C100 M65 Y0 K0 R14 G77 B166 #0E4DA6

C90 M50 Y0 K0 R22 G120 B196 #1678C4

C75 M35 Y0 K0 R76 G158 B234 #4C9EEA ICE VARIATIONS Pure greyscale ice colors

C0 M0 Y0 K65 R89 G89 B89 #595959

C0 M100 Y0 K0 R242 G41 B153 #F22999

C0 M0 Y0 K35 R166 G166 B166 #A6A6A6

C0 M70 Y100 K0 R247 G140 B45 #F78C2D

C0 M0 Y0 K15 R217 G217 B217 #D9D9D9

C0 M25 Y95 K0 R255 G220 B79 #FFDC4F

C0 M0 Y0 K0 R255 G255 B255 #FFFFFF

C40 M0 Y100 K0 R183 G216 B29 #B7D81D

ACCENT COLORS To be used in graphics, illustrations, charts, etc.

LOGO COLORS The originals C0 M0 Y0 K100 R0 G0 B0 #000000

C100 M0 Y0 K0 R0 G185 B255 #00B9FF

9

YES!Color distribution DISTRIBUTION This chart captures the color essence of the YES!Pattern. You can use the color distribution as a starting point to generate new graphics.

ACCENT COLORS As a rule of thumb, accents colors generally have the same usage percentage as the magenta color.

6.25%

12.5%

12.5%

6.25%

6.25%

12.5%

12.5%

6.25%

12.5%

25%

25%

one of these: 5%

8.75%

8.75%

1.5%

1%

12.5%

10

YES!Typefaces ORIGINAL TYPEFACE Frutiger

WEB TYPEFACE Tahoma

Frutiger black condensed LT STD Frutiger condensed LT STD Frutiger Roman LT STD Frutiger Light LT STD

Tahoma bold Tahoma

Header in Frutiger black condensed and size in 13pt. / leading 16pt.

Header in Tahoma bold and size in 13pt. / leading 16pt.

Subheader 1 in Frutiger condensed and size in 11pt. / leading 13pt.

Subheader 1 in Tahoma and size in 11pt. / leading 13pt.

Basic text in Frutiger Roman and size in 9pt. / leading 13pt. Lorem ipsum dolor sit amet, consectetur.

Basic text in Tahoma and size in 9pt. / leading 13pt.

Lorem ipsum dolor sit amet, consectetur.

Subheader 2 in Frutiger condensed and size in 9pt. / leading 11pt.

Basic text in Frutiger Roman and size in 7.5pt. / leading 11pt. Lorem ipsum dolor sit amet, consectetur.

WHEN TO USE WHICH FONT Whenever possible, use the Frutiger typeface.

For websites, or for documents that are passed between multiple computers that don’t have Frutiger, installed you can use the Tahoma typeface.

Subheader 2 in Tahoma and size in 9pt. / leading 11pt.

Basic text in Tahoma and size in 7.5pt. / leading 11pt. Lorem ipsum dolor sit amet, consectetur.

This is a footnote text in Tahoma and 7pt. / leading 11pt.

This is a footnote text in Frutiger Light and 7pt. / leading 11pt.

11

YES!Pattern Crystal MAIN PATTERN The YES!Pattern is a distinctive graphic shape which is the core of the look & feel for the YES!Delft identity.

ACCENT COLOR Magenta is the only accent color here, do not use different accent colors.

CONVERGENCE POINT Always make sure that the main convergence point is visible.

HOW TO USE Use as a striking graphic to fill up relatively large spaces.

MEANING In an abstract way, it depicts a futuristic formation, where, on the ‘surface’ of the colors of YES!Delft itself, sometimes valuable ‘magenta material’ is formed (successful technostarters). The convergence point shows that it all starts with YES!Delft, after which entrepreneurs are on their own.

MAIN CONVERGENCE POINT

12

YES!Pattern Midnight HOW TO USE Use this pattern when a more subtle texture is needed. For example, in combination with photos or text.

CONVERGENCE POINT Always make sure that the main convergence point is visible.

MAIN CONVERGENCE POINT

13

YES!Pattern & Pay-off

MS ADING FIR OW’S LE | GROWTH UBATION TOMORR BUILDINATGION | EDUCATION | INC INSPIR

G FIRMS ’S LEADIN OWTH MORROW CUBATION | GR ILDING TO UCATION | IN

BU

HOW TO USE The YES!Pay-off can be placed on backsides of business cards, with compliments cards, flyers, etc.

COLOR The complete YES!Payoff on the YES!Pattern is white, to give it enough contrast.

N | ED

INSPIRATIO

PAY-OFF HAS SAME SIZE

SIZE Do not scale the text blindly together with the YES!pattern, as the text could lose its subtlety. Either choose for subtle text, or for big text that would have visual impact.

In this example, the text has the same size, even though the pattern dimensions differ.

ROTATION Make sure the YES!Pay-off has the same rotation as the upper line of the magenta triangle.

Give it a little bit of whitespace underneath.

14

YES!Pattern Triangle Cut HOW TO USE The YES!Pattern Crystal has the most impact when used to fill a complete surface (like the back of a business card, for example).

Sometimes it’s not possible to fill up a complete surface, therefore the pattern can also be cut off in a triangle.

Note that the pattern is deliberately cut off, as to give it an impression of being an ‘interesting zoom-in on the endless surface of YES!Delft’. This is different than the custom footers, which can be seen as ‘the borders of the surface’.

CONVERGENCE POINT You can make an interesting cut out yourself, as long as the main convergence point stays visible.

15

YES!Footers

Right aligned

Left aligned

FOOTER The footers are derived from the YES!Pattern, and have been customized to provide nice baseline graphics.

It shows a link to the YES!Pattern where completely filled surfaces can not be used.

HOW TO USE Can be used to give a design a solid base.

Depending on the contents, you can pick a variation. Please keep in mind that the total composition (with the rest of the graphics) is in balance.

Center aligned

Center aligned

Center aligned 16

YES!Business card

FRONT & BACK SIDE FOOTER A right aligned footer is chosen as to balance the ‘visual weight’ of the total front side.

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

WOUTER DE BRUIJNE T +31 (0)6 49761197 WOUTER@YESDELFT.NL MOLENGRAAFFSINGEL 12–14 2629 JD DELFT T +31 (0)15 2782816 | F +31 (0)15 7440102 INFO@YESDELFT.NL | WWW.YESDELFT.NL

MS ADING FIR OW’S LE | GROWTH UBATION TOMORR BUILDINATGION | EDUCATION | INC INSPIR

17

YES!Headers HEADERS Headers can be used in documents, reports or other visuals where more attention should be given to the contents of the YES!Header than to the YES!Logo itself.

HEADER Center aligned, with logo.

TITLE IS HIGH CAPS, 32PT. Sub title is low caps, in 24pt.

HEADER Left aligned, with logo.

TITLE IS HIGH CAPS, 32PT. Sub title is low caps, in 24pt.

18

YES!Letterhead & example report

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

TITLE IS HIGH CAPS, 32PT. Sub title is low caps, in 24pt.

MOLENGRAAFFSINGEL 12–14 2629 JD DELFT T +31 (0)15 2782816 | F +31 (0)15 7440102 INFO@YESDELFT.NL | WWW.YESDELFT.NL

19

YES!Compliment Card

FRONT & BACK SIDE FOOTER A centered footer is chosen as to balance the ‘visual weight’ of the total front side.

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

MS ING FIR LEADION | GROWTH ORROW| ’S INCUBAT ING TO| M UCATION BUILDPIR ATION ED INS

20

YES!Ribbon TYPOGRAPHY Title and subtitle font size ratio = 3/4 BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

BUILDING TOMORROW’S LEADING FIRMS

JAARVERSLAG 2010 MET EEN SUBTITEL

Text lines all are on the same baseline.

Rotation degrees on portrait A4 is: 54.737º USAGE Used for presenting a title of a document or brochure. Centered, either horizontally or diagonally. Note: the grey stroke is not part of the graphic.

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

JAARVERSLAG 2010

IN

BU

SP ILD IRA IN TIO G N TO |E M DU O CA R TIO RO N W | IN ’S CU L BA EA TIO D N ING |G RO FIR W M TH S

JA

AR

VE

RS

LA G

20

10

INSPIRATION | EDUCATION | INCUBATION | GROWTH

JAARVERSLAG 2010

21

YES!Brochure

FRONT & BACK SIDE FRONT ELEMENTS 1. A photo, preferably in warm tints, as to contrast nicely with the blues of the YES!Pattern. Make sure the photo fills the triangle completely.

G

20

10

2. The YES!Ribbon, rotated diagonally.

Make sure the ribbon is centered both horizontally & vertically.

IN UIL SP D IRA IN TIO G N TO |E M DU O CA R TIO RO N W | IN ’S CU L BA EA TIO D N ING |G RO FIR W M TH S

JA

AR

VE

RS

LA

3. The YES!Pattern Midnight. Make sure the convergence point of the pattern is visible and the pattern fills the triangle completely

B

BACK ELEMENTS The back consists of the solid YES!Delft color and the YES!Pay-off to ‘conclude’ the document.

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

22

YES!Flyer

FRONTSIDE VARIATIONS FRONT ELEMENTS 1. YES!Logo 2. Attention grabber, in magenta.

ATTENTION GRABBER IS CENTERED AND 48PT.

ATTENTION GRABBER IS CENTERED AND 48PT.

3. Incentive & call to action.

4. YES!Pay-off.

5. YES!Pattern 6. Sticker, for extra incentive.

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

YOUR OM CUST X TE T

YOUR OM CUST X TE T

23

YES!Poster FRONT ELEMENTS 1. YES!Logo

ATTENTION GRABBER IS CENTERED, 48PT.

2. Attention grabber, in magenta.

3. Photo, wide.

4. Incentive & call to action.

5. YES!Pay-off.

6. Sticker, for extra incentive.

BACK ELEMENTS 1. YES!Logo 2. Text

YOUR OM CUST TEXT

3. YES!Pattern Crystal Triangle Cut.

INCENTIVE IS HIGH CAPS, 32PT. Call to action is low caps, in 24pt.

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

24

YES!Photography CORPORATE: COMMUNICATION FROM THE ORGANISATION Photos show only groups of people.

IMPROVEMENT OF EXISTING PHOTOS

STAFF PHOTOGRAPHER YES!Delft works with a staff photographer: Jorrit Lousberg, www.lightatwork.nl PHOTOS TONE General rule for the tone of the photos: Professional, smart, sophisticated, energetic.

PHOTO COLORS Generally the colors should be warm, as to contrast nicely with the YES!Colors. To avoid an overly ‘cold’ look & feel, don’t use the same Yes!Blue hue in the photos.

TECHNOSTARTERS: COMMUNICATION FROM THE COMPANIES Photos show the product in the foreground (people in the background)

Don’t use people in the foreground and products in the background

Improving by making a relevant cutout. It’s more focused on the product now.

Improving by transforming the colors.

These warmer colors complement the YES!Colors nicely.

25

YES!Photos & Text

Subheader 1 in Frutiger condensed and size in 11pt. / leading 13pt.

Subheader 1 in Frutiger condensed and size in 11pt. / leading 13pt.

Basic text in Frutiger Roman and size in 9pt. / leading 13pt. Lorem ipsum dolor sit amet, consectetur. Aliquam ut dui accumsan metus malesuada ultrices sed at sapien. Donec nec risus dolor. Donec semper eleifend elit, sed ultricies tellus convallis in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vulputate urna a odio ultrices ut dapibus nulla elementum. Maecenas in augue eget sem cursus sollicitudin nec non mauris. Nulla at interdum nunc. Sed quis libero odio, sit amet placerat mi. Sed volutpat luctus elit vitae tempor.

Nulla vitae nunc ut neque bibendum cursus a ut magna. Integer euismod mauris libero, consectetur vulputate quam. Nulla aliquam viverra justo, in tempor neque fringilla non. Donec ac metus a dolor venenatis ultrices eu eget est. Morbi vehicula enim ut quam ornare sit amet tempor leo suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac volutpat libero.

Subheader 2 in Frutiger condensed and size in 9pt. / leading 11pt.

Basic text in Frutiger Roman and size in 9pt. / leading 13pt. Lorem ipsum dolor sit amet, consectetur.

Aliquam ut dui accumsan metus malesuada ultrices sed at sapien. Donec nec risus dolor. Donec semper eleifend elit, sed ultricies tellus convallis in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vulputate urna a odio ultrices ut dapibus nulla elementum. Mae-

cenas in augue eget sem cursus sollicitudin nec non mauris. Nulla at interdum nunc. Sed quis libero odio, sit amet placerat mi. Sed volutpat luctus elit vitae tempor. Nulla vitae nunc ut neque bibendum cursus a ut magna. Integer euismod mauris libero.

Basic text in Frutiger Roman and size in 9pt. / leading 13pt. Lorem ipsum dolor sit amet, consectetur. Aliquam ut dui accumsan metus malesuada ultrices sed at sapien. Donec nec risus dolor. Donec semper eleifend elit, sed ultricies tellus convallis in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vulputate urna a odio ultrices ut dapibus nulla elementum. Maecenas in augue eget sem cursus sollicitudin nec non mauris. Nulla at interdum nunc. Sed quis libero odio, sit amet placerat mi. Sed volutpat luctus elit vitae tempor.

Nulla vitae nunc ut neque bibendum cursus a ut magna. Integer euismod mauris libero, consectetur vulputate quam. Nulla aliquam viverra justo, in tempor neque fringilla non. Donec ac metus a dolor venenatis ultrices eu eget est. Morbi vehicula enim ut quam ornare sit amet tempor leo suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac volutpat libero.

USAGE OF PHOTOS & TEXT Photos are plotted on the grid of the layout.

In this case, a sixcolumn grid is used, with spacing of 4mm.

Make sure all photos fill their designated rectangular areas.

For a professional look, a wide photo can be used that is stretched along the text column.

For high impact photos, a square placed over more than one column can be used.

For less important photos, the photos can be scaled to fill one column of the grid.

Photos don’t need extra visual treatment or graphic effects, as long as they are consistently placed on the grid. The complete result gives a professional look.

26

YES!Arrows ARROWS Arrows can be used to zoom in on illustrations, or to highlight certain things. When used with text, use long arrows like the black ones below.

50%

50%

50%

50%

50%

50% 50%

50%

50% 50%

27

YES!Logo derivatives

POWERED BY

VRIENDEN VAN

POWERED BY

‘POWERED BY’ Technostarters can use this logo to communicate that their company is supported

by YES!Delft.

‘VRIENDEN VAN’ Supporters of YES!Delft can use this logo in their communications.

VRIENDEN VAN

28

YES!Cheat sheet p.3

IN WORDS VIBRANT TECHNICALLY INNOVATIVE SCALABLE LEADING NETWORK AMBITIOUS

p.8

LOGO & PAY-OFF

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

p.9

COLORS & DISTRIBUTION

C0 M0 Y0 K100 R0 G0 B0 #000000

STYLE GUIDE CD

C100 M0 Y0 K0 R0 G185 B255 #00B9FF

C0 M100 Y0 K0 R242 G41 B153 #F22999

C0 M70 Y100 K0 R247 G140 B45 #F78C2D

TYPOGRAPHY

p.11

C0 M25 Y95 K0 R255 G220 B79 #FFDC4F

C40 M0 Y100 K0 R183 G216 B29 #B7D81D

PATTERN

p.12

DERIVATIVES

p.28

Header in Frutiger black condensed and size in 13pt. / leading 16pt.

Subheader 1 in Frutiger condensed and size in 11pt. / leading 13pt.

Basic text in Frutiger Roman and size in 9pt. / leading 13pt.

POWERED BY

VRIENDEN VAN

Design: Booreiland.nl

BUILDING TOMORROW’S LEADING FIRMS INSPIRATION | EDUCATION | INCUBATION | GROWTH

Appendix: YES!Icons

Education

Growth

Incubation

Inspiration

ICONS Icons are used to depict the subdivisions of YES!Delft. They can be used on stickers or stand-alone. The accent colors are used to emphasize the subdivisions. Therefore, please be consistent in the use of colors.

STICKERS Stickers can be used to give attention to certain text.

YOUR OM CUST TEXT empty sticker

incentive sticker

31

Appendix: YES!Tables TABLES & ALTERNATIVE TABLES For normal tables, use the YES!Delft main colors, for alternative tables use accent colors (and icons) for headers.

Table title (13pt) value (9pt)

value

value

value

highlighted

value

value

value

value

value

value

value

Table Education

Table Incubation

value

value

value

value

value

value

value

value

highlighted

value

value

value

highlighted

value

value

value

value

value

value

value

value

value

value

value

Table Growth

highlighted

Table Inspiration

value

value

value

value

value

value

value

value

value

value

highlighted

value

value

value

value

value

value

value

value

value

value

32