Gorgias brand

Here are some of the things that make up our brand and how you can use them when talking about Gorgias.

Download all brand assets

Gorgias Logos

The gorgias logo consist of two elements. Logomark (symbol) and wordmark using the company name with proprietary letterforms. Each of these elements can be used together or separately depending on the context where the brand image is needed.

A well designed logo will always help a good product realise it’s full potential. It gives direction and attitude while the product informs the meaning.

Download all brand assets

Preferred Logotype
When we can, we use the logotype in dark.

Alternative logotype
If it doesn’t work with a black logotype, for example on imagery or a dark background, use human.

Minimum clearspace
The recommended clear space must never be reduced, but can be increased. It's equal to the height of the letter “s” in gorgias.

Gorgias Symbol

The main role of the symbol is to add mnemonic value to the logo and to operate as a branding element wherever the context doesn’t permit to use the full logo.

Some situations where you can use the symbol alone are:
App Icons, favicon, avatars on social media, top left corner within the mobile version of a web (or native)-app, brand-swag-you-name-it or artwork.

Download all brand assets

Preferred Logotype
When we can, we use the logotype in dark.

Alternative logotype
If it doesn’t work with a black logotype, for example on imagery or a dark background, use human.

Minimum clearspace
The recommended clear space must never be reduced, but can be increased. It's equal to the height of the letter “s” in gorgias.

Extend Use of gorgias' logo

These examples illustrate a few situations when we might need to extend the brand image to divergent uses.
For situation as such we can use a simple system of prefix or suffix. Different colors can be used for the smaller text but it’s not necessary. The font used is hammersmith one (with small alterations)

Download all brand assets

Cobranding

The recommended clearance when displaying the gorgias logo next to another logo is the height of the letter ‘s’ and between distance is it’s double.

Colors

Our avatar contains both our symbol and our primary colour. It carries our identity and represents us on multiple platforms from the App-icon to the facebook profile picture.

The icon is never to be used outside of profile-image cropping area or equivalent.

Dark
#161616

Human
#FFF9F4

Coral
#F58D86

Blue
#0075FF

Navy
#0024A1

Icons and badges

Our avatar contains both our symbol and our primary colour. It carries our identity and represents us on multiple platforms from the App-icon to the facebook profile picture.

The icon is never to be used outside of profile-image cropping area or equivalent.

Download all brand assets

Best practices

Much time and effort was spent into carefully crafting the gorgias Logo to be a perfect embodiment of the brand that it represents.

We ask that designers and users respect the thought and craftmanship that has gone into the logo by keeping it in it’s pure form and within the rules specified in this guide book.

Be careful when using the logo not to alter tweak, mutilate, or take any personal creative freedom that breaks the specific rules set out in this document. The following are merely a few examples of practices that would violate the logo and ultimately the Gorgias Brand.

1. Do not angle the logo.

2. Do not add drop-shadow, inner-shadow, outer-glow, inner-glow, outer border or any other effects that affect the space proximal to the original outer edge (outline) of the logo.

3. Do not in any way alter the proportions of the letters or the symbol, nor the space between them.

4. Do not alter the colors of the logo except when in accordance to color rules.

5. Do not change the type-face or font style of any part of the logo.

6. Do not in any way distort the logo, either by stretching squishing skewing etc.

7. Do not use the logo in low quality jpg.

8. Use the logo in black or white only when you design in monochrome. See monochrome use.

9. Minimum sizes: For every content, the logo has not a maximum width/height, but a minimum size has been defined.
as follows:
- Web  Logo: 80px / Symbol: 18px
- Prez Logo: 160px / Symbol: 36px
- Print Logo: 30mm  / Symbol: 7mm

10. Monochrome use When you need to use the avatar in monochrome use black and while only for maximum contrast. 
Do not use gray!

Typograhy

The ”Söhne” is the new primary typeface of Gorgias. This is a sans-serif typeface which is easy to use and look good on every web content.

Leicht

Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

1234567890@#%$
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

1234567890@#%$
Buch

Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

1234567890@#%$
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

1234567890@#%$
Kräftig
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

1234567890@#%$
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

1234567890@#%$

Colour Palette

Brand
#0075FF
Coral
#FF9090
Navy
#0024A1
Human
#FFF9F4
Dark
#161616
Gray_3
#4e5d78
Gray_2
#AFAFAF
Gray_1
#DDDDDD
Gray_0
#EEEEEE
White
#ffffff

Typography Styles

Headings

Aa Bb Cc Dd Ee

Heading 1
3,5rem

Aa Bb Cc Dd Ee

Heading 2
3rem

Aa Bb Cc Dd Ee

Heading 2 idem h1
44px

Aa Bb Cc Dd Ee

Heading 3
36px

Aa Bb Cc Dd Ee

Heading 4
34px
Aa Bb Cc Dd Ee
Heading 5
28px
Aa Bb Cc Dd Ee
Heading 6
24px

Body Copy

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Large
18px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal
16px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Small
14px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Detail Messages
12px

Quotes

The ultimate Interface component kit built to create harmony across your products.
Plain Quote Block
18px

Additional Copy Elements

  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Dots
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Numbers
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Letters
16px

Additional Copy Elements

This line rendered as bold text.

Bold Text
18px

This line rendered as italicized text.

Italicized Text
18px

This line of text is meant to be treated as deleted text.

Deleted Text
18px

This line of text is meant to be treated as deleted text.

Underline Text
18px

You can use the mark tag to highlight text.

Highlight Text
18px

You can use the mark tag to link text.

Link Text
18px

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

dsds
  • list 1
  • list 2
  1. one
  2. two

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
sdqsdqsdqsd sqdqs

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

text test

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

dsds
  • list 1
  • list 2
  1. one
  2. two

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
sdqsdqsdqsd sqdqs

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

text test

The Style Guide

Typography

Work Hard &
Be Nice To People

H1

Work Hard &
Be Nice To People

H2

Work Hard &
Be Nice To People

H3

Work Hard &
Be Nice To People

H4
Work Hard &
Be Nice To People
H5
Work Hard &
Be Nice To People
H6
Work Hard &
Be Nice To People
H6 - 18px

God, she thought lying in bed naked and re-reading Aldington's Portrait of a Genius, But... he's an impostor! Not D.H. Lawrence, but her husband-Henry-with his bauble of a belly and all the hair he never combed and the way he stood around in his shorts, and the way he stood naked before the window like an Arabian and howled; and he told her that he was turning into a toad and that he wanted to buy a Buddha and that he wanted to be old and drown in the sea, and that he was going to grow a beard and that he felt as if he was turning into a woman.

And Henry was poor, poor and worthless and miserable and sick. And he wanted to join the Mahler Society. His breath was bad, his father was insane and his mother was dying of cancer.

And Henry was poor, poor and worthless and miserable and sick. And he wanted to join the Mahler Society. His breath was bad, his father was insane and his mother was dying of cancer.

And Henry was poor, poor and worthless and miserable and sick. And he wanted to join the Mahler Society. His breath was bad, his father was insane and his mother was dying of cancer.

P
Text Link
Link underline
Text Link
Link

Rich text for blog post - What is rich text?

Static and dynamic content editing

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

test

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Elevation & Shadows

Looking for something else? View the glossary

Elevation and Shadows

Outter Shadow, Inner Shadow
Shadow
S1
Shadow
S2
Shadow
S3
Shadow
S4
Shadow
S5
Shadow
S1
Shadow
S2
Shadow
S3

Avatars

Looking for something else? View the glossary

Primary Buttons

Corner Radius
X Large
96px
Large
40px
Medium
32px
Small
24px
X Small
18px

TB

X Large
96px

TB

Large
40px

T

Medium
32px

T

Small
24px

T

X Small
18px

Buttons

Field Elements

Looking for something else? View the glossary

Form Fields

Input Fields

Field Elements

Input Fields
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form Fields

Input Fields

Field Elements

Input Fields
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Alert Bars

Looking for something else? View the glossary

Notification

Input Fields
Looks like we're having trouble
Default Alert Error
Looks like we're having trouble
Warning Alert
Looks like we're having trouble
Error Alert
Your information has been saved.
Default Alert Check
Your information has been saved.
Default Alert Grey
Your information has been saved.
Confirm Alert

Badges

Looking for something else? View the glossary

Pill Badges

Corner Radius
5
32
32
32
32
5
32
3
22
3

Contextual Badges

Corner Radius
Default
Primary
Success
Warning
Error
Default
Primary
Success
Success
Success

Version Control

Corner Radius
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0

Icons

Icon Set

Feather Icons by @ (WIP)