Berriton Brand Style Guide Version 1
About Berriton Berriton is a casual web-based adventure game. Cute characters and unexpected endings make Berriton different from other adventure games. In Berriton you choose your character and choose your own path to form a story for your character. Depending on what you choose at various interaction points throughout the game, the story will unfold differently.
Logo The Beriton logo is a combination of a bear (the default character in the game) and a berry (the most important item in the game). It is a minimalistic representation of both elements in order to be descriptive and visually appealing, yet simple and memorable. The stem of the berry should always be green (#649081). The body of the berry should always be red (#D46D64). The name should always be black (#1E1E1E).
The main version of the logo is the berry/bear emblem with the name written below. This is the preferred version of the logo and should be considered first as needed.
The alternate verison of the logo is the name, with the berry/bear emblem replacing the “o.” This version should only be used in places where space is limited and the main version cannot fit.
Logo Clear Space The clear space around the main version of the logo must be 10% of the height of the logo. For example, if the logo is 250pt in height, then the clear space on each side of the logo must be 25pt.
25pt
The same rule applies for the alternate version of the logo. However, the clear space must be 10% of the width, rather than the height. 250pt
25pt
25pt
25pt
250pt
Logo Guidelines Do not...
Change the color of any logo element
Change the orientation of the emblem
Change the aspect ratio of any element of the logo
Rotate the logo
Place the name above the emblem
Typeface Quicksand will be the sole typeface used throughout Berriton.
Light
Regular
There are four variations of the typeface, and each should be used based on the following guidelines:
Light is to be used for written sounds and inner dialogue
Regular is to be used for dialogue, menu, and informative type
Medium
Bold
Medium is to be used for hints and emphasis
Bold is to be used for titles and headings
Color Palette Due to the nature of the project, there will be a wide range of colors used. However, they should be mostly seperated in order to create a sense of diversity between the scenes. The white and black colors used are slightly offset. True white and true black should not be used. Colors may be tinted, so long as they aren’t made brighter than the white color used.
Main Color Palette This is the main color palette for interactive objects, menus, dialogue boxes, and buttons.
HEX: #649081 RGB: 100, 144, 129
HEX: #7AB1F1 RGB: 122, 177, 241
HEX: #F0F0F0 RGB: 240, 240, 240
HEX: #1E1E1E RGB: 30, 30, 30
These colors may be mixed in with other palettes as well.
HEX: #F7C69B RGB: 247, 198, 155
HEX: #D373BD RGB: 211, 115, 189
HEX: #D46D64 RGB: 212, 109, 100
Forest Color Palette This is the color palette that will be used to illustrate the forest-like environments.
HEX: #42442C RGB: 66, 68, 84
HEX: #808958 HEX: #9CB779 RGB: 128, 137, 88 RGB: 156, 132, 121
HEX: #3D3A32 RGB: 61, 58, 50
HEX: #605A4C RGB: 96, 90, 76
HEX: #E9C300 RGB: 233, 195, 0
Mountain & Sky Color Palette This is the color palette that will be used to illustrate the mountains and sky.
HEX: #5F5F9E HEX: #9AA5A5 RGB: 154, 165, 165 RGB: 95, 95, 158
HEX: #652A70 HEX: #366877 RGB: 101, 42, 112 RGB: 54, 104, 119
Visual Mockups Mobile
This is the character select screen that will appear when users begin their journey through Berriton. This includes the ďŹ rst form that users will encounter, and will allow them to choose their character model, as well as name their character.
Desktop
Visual Mockups Mobile
This is the opening setting of the game. This also demonstrates how users may discover the berries hidden throughout Berriton.
Desktop
Visual Mockups Mobile
This is one of the encounters that users may encounter along their journey. This also demonstrates use of infographics.
Desktop
Visual Mockups Mobile
This is one of the encounters that users may encounter along their journey. This also demonstrates use of infographics.
Desktop