Design Guidelines - Firstbird€¦ · CMYK: 10 | 0 | 100 | 0 PANTONE: 809 Brand-Design | Color Palette RGB color codes are only used for digital representation. CMYK color codes are

Design Guidelines

Logo

Mr. Finch Writing

Our logo is a combination of Mr. Finch and the firstbird writing in a specially developed font.This horizontal logo is the first logo and should be used the most. The logo must not be changed!

Brand-Design | Logo

| 50

The square logo should be used in cases where the horizontal logo cannot be used, e.g. due to various format specifications, etc. Otherwise the logo must not be changed!

Logo

Mr. Finch

Writing

Brand-Design | Logo Version

| 51

Make sure that there is always sufficient distance between the logo and the surrounding elements. The minimum distance is the font size of the logo. When it comes to presenting our logo next to others, the distance to the side is always the same - Mr. Finch‘s size.

Brand-Design | Logo Positioning

| 52

Brand-Design | Logo Negative

GREEN 1 for headings, brushes, graphics

RGB: 176 | 236 | 181 #B0ECB5

CMYK: 38 | 0 | 32 | 0

GREEN 3for headings, brushes, graphics

RGB: 37 | 141 | 138 #258D8A

CMYK: 75 | 22 | 40 | 5

GREEN 2 for headings, brushes, graphics

RGB: 85 | 205 | 181 #55CDB5

CMYK: 60 | 0 | 30 | 0

BLUE 1 color variant for diagrams

RGB: 0 | 60 | 89 #003C59

CMYK: 100 | 48 | 6 | 30

BLUE 2for continuous text

RGB: 0 | 38 | 53 #002635

CMYK: 100 | 63 | 12 | 67

YELLOWonly for brushes/surfaces

RGB: 230 | 250 | 0 #E6FA00

CMYK: 10 | 0 | 100 | 0

PANTONE: 809

Brand-Design | Color Palette

RGB color codes are only used for digital representation.CMYK color codes are used for printing only. | 54

On a color area with Green 3, use white font. On a color area with Yellow, Green1 or Green2 use Blue 2 for the font.

Brand-Design | Graphic element - Brush

| 55

Adobe Illustrator - Open Brush Library

Brush:Kohle - Spitz zulaufend

Brush:Kohle - Federleicht

Brand-Design | Graphic element - Brush

| 56

Brand-Design | Graphic element - Brush

These brush strokes are a design element and may be rotated slightly to fit into the overall image of the document. The basic colour is yellow, the green tones can represent different chapters. | 57

Brand-Design | Graphic element - Icons

These icons may only be used sparingly and are located centrally above a text block. | 58

TEXTText Text Text Text Text

TEXTText Text Text Text Text

TEXTText Text Text Text Text

Brand-Design | Key Visual

The tree is our main key visual.

Brand-Design | Key Visual

Brand | Imagery

Bright, friendly imagery.

If images are used for webinars, presentations etc., the speaker images must always be square!

- Arnim Wahls - CEO & Founder, Firstbird

Brand | Picture Usage

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789Hello!

Cronos Pro, regular

Headings

Google Fonts header;

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789Hello!

Proza Libre, regular

Continuous Text

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789How are you?

Nunito light

Graphics program header:

Brand-Design | Fonts

| 63

Brand-Design | Font Usage

| 64

Headline 1 Cronos Pro, regular, 26pt

Headline 2 Cronos Pro, semibold, 18pt

Continuous Text Nunito, light, 10pt

Highlighting im Fließtext Nunito, semibold, 10pt

List square

List square

List square

Highlighting im Fließtext Nunito, light italic, 10pt

Register now

Register now

HEADLINE 3 (ONLY IF ONE TERM) CRONOS PRO, REGULAR, 12PT

Headline 2 (In the case of the intermediate film, the heading may be underlined.)

Brand-Design | Use of Google Fonts

| 65

Google Fonts (Slides, Docs)Google Fonts Headings: Proza Libre, regular

Google Fonts Continous Text: Nunito, light

Installation

1. Check if you already have the font (Steps on the images)2. If not please visit: https://fonts.google.com/ and search for the fonts, simply press the + and continue with the steps on the screenshots.

Shaping together.