Skip to main content

General information

The TYPO3 logo (symbol and word mark) should always be placed in the left upper corner of documents, flyers or websites. The minimum clear space surrounding the logo is 2 times x, where the value of x is derived from a third of the height of the letters of TYPO3. Whenever possible leave more white space to let the logo breathe!

The gridlines are not part of the logo

 

The additional text line (taglines) (as shown below) should only be used to give additional information such as a name of a trade fair (with location) or TYPO3 internal events. The gridlines shown in the example indicate the area around the logo, which should be kept clear of competing text, images or other graphics.

Events & Subbrand Logos

General

The TYPO3 Association hosts events such as TYPO3 Developer Days or T3Board. Apart from that the community host many events such as camps. The title of the events are quite different and the logos, yet the recognition with the brand TYPO3 is desired.

In this documentation we want to offer a guideline for the minimum requirements.

The TYPO3 logo with word and figurative mark is used for the brand. To distinguish the event logos from the brand only part of this logo should be used. The figurative mark is an eye catcher and offers enough recognition with TYPO3. Therefore it is the minimum element which should be integrated into every event logo.

The event logo should convey a positive feeling.

Figurative Mark

The figurative mark can be edited under following conditions:

  • The silhouette must not be changed or altered
  • Respect the protected space around the figurative mark
  • Protected area of figurative mark is ¼ size of the its width

Font

The font “Share” is reserved for the brand logo and may not be used for the text mark. Apart from that any font can be used for the word mark of the event logo.

Color

The figurative mark, when used in its original design, should only be used in following colors: orange, white and black with gradations.

For the event word mark any color can be chosen.

Contrast

The figurative and word mark should have enough contrast (ratio at least 3:1) to the background, so that it meets the guidelines for accessibility.

To check the contrast you can use a contrast checker  e.g.:
https://webaim.org/resources/contrastchecker/

 

 

 

Examples

Examples of existing logos and some suggestions for developing new event logos.

Old

✓  Figurative mark is orange

Share font is used for word mark

✘ Protected space is not respected

New one

Protected space is respected

Word marks with another font than Share

Example with image or pattern used in the figurative mark. The figurative mark remains recognizable. The outline is preserved.

New one

Protected space is respected

Word marks with another font than Share

Example with image or pattern used in the figurative mark. The figurative mark remains recognizable. The outline is preserved.

Do you Have Any Questions?

If you have any trouble using this style guide, please don't hesitate to contact us via Slack or mail to designteam(at)typo3.org