This is the main logo of Portal 2: Community Edition. It is the logo used for any public branding and announcements.
It should be used whenever there is enough space horizontally to display it. As a rule of thumb, the entire logo should be at least 40px high.
There should always be a safe-margin around the logo to ensure readability. It should always be 15% of the logo height around the entire logo.
This is the logo of the development tools for Portal 2: Community Edition. The usecases range from an SDK launcher to any additional tools used to create content for the game.
It should be used whenever there is enough space horizontally to display it. As a rule of thumb, the entire logo should be at least 40px high.
There should always be a safe-margin around the logo to ensure readability. It should always be 5% of the logo height around the entire logo.
This is the main icon of Portal 2: Community Edition. It is the icon used for any public branding and announcements.
It should be used whenever there is NOT enough space horizontally to display the full logo.
There should always be a safe-margin around the icon to ensure readability. It should always be 15% of the icon height around the entire icon.
This is the icon of the development tools for Portal 2: Community Edition. The usecases range from an SDK launcher to any additional tools used to create content for the game.
It should be used whenever there is NOT enough space horizontally to display the full logo.
There should always be a safe-margin around the icon to ensure readability. It should always be 15% of the icon height around the entire icon.
In our branding, we are using three main colors. A creamy white, a soft grey and a vibrant orange. These three colors were designed to be compatible with each other as much as possible, enforcing a strong readability on both bright and dark layouts.
These three main colors were expanded to a full shade palette. If, for example, you design an interface with #ec6726, the primary-500 color, you can add a button with the background of #f08547, one shade to the left, to have a fitting hover color while the text color on the button can use #fef6ee, the brightest color in the primary shade. This approach unifies all coloring in interfaces and means you do not need to manually colorpick a darker/brighter color for variations of our brand colors. Full white/black should not be used, as it actually hinders readability.
This color-range should be used for backgrounds, containers, borders and text colors. Shading can be applied by using the next darker color in the palette.
This color-range defines the primary band color. Shading can be applied by using the next darker color in the palette.
Color 500 resembles the "primary color" for all branding purposes while the other colors can be used for shading or contrast usages.
Lexend Deca is the primary font used for our website and UIs where-ever possible.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima cumque, placeat asperiores consequatur omnis qui unde iste error non inventore officiis ut consequuntur at corrupti rerum commodi. Quisquam, excepturi commodi?
Social Media
Twitter
Discord
Mastodon
YouTube