Official Websites
Brand Guidelines
2021
Brand Summary
Mission
- The Ember brand aims to provide a warm, creative, and approachable identity for its technologies and community, emphasizing simplicity and clarity in its visual and messaging style [^1].
Core Values
- creativity
- approachability
- simplicity
- clarity
- community
- playfulness
Target Audience
- Developers, technology communities, and event participants seeking a friendly, creative, and accessible environment [^2].
Personality Traits
- warm
- playful
- creative
- friendly
- approachable
Visual Identity Overview
- The visual identity centers on a bold, cursive logotype, a warm reddish-orange color palette, playful mascot illustrations, minimalist backgrounds, and consistent logo usage rules. The style is clean, energetic, and inviting, with strong emphasis on contrast, legibility, and accessibility [^3].
Categories
Brand Imagery
- The image should feature the word ’ember’ in large, white, stylized cursive script across the center. The background is a solid, warm reddish-orange color, possibly with a slight gradient to add depth. The text is prominently displayed and well-centered, with smooth, flowing lines characteristic of a casual, handwritten font style. The overall composition emphasizes simplicity and warmth, reflecting a cozy or creative brand aesthetic.
- The image should depict a simple, minimalistic design with a light beige or cream background, empty of any objects, text, or detailed patterns, emphasizing a clean and uncluttered appearance, possibly serving as a neutral canvas or placeholder.
- The image contains three horizontal rectangular sections stacked vertically, each with a different background color and containing the word ’ember’ written in a distinct style. The top section has a dark gray background with a subtle dotted texture and features the word ’ember’ in white, cursive font centered horizontally. The middle section has a solid reddish-orange background, slightly brighter, with the word ’ember’ in white, cursive font also centered. The bottom section presents a gan-colored transparent background with a pattern resembling a checkered or transparent grid, and the word ’ember’ is written in black, cursive font, similarly centered. The overall composition emphasizes the contrast of colors and styles for the word ’ember’ across the three sections.
- The red logo is preferred for use on black or white backgrounds. In other scenarios, use a solid black or white logo to contrast your background. Only the white logo should be used over the Ember-red background.
- A fun alternative to the primary logotype is the Tomster lockup. It’s designed with a white stroke which allows it to work on all background colors without modification.
- The image should feature a cartoon-style hamster character with a round face, prominent front teeth, and small, rounded ears with pink insides. The hamster is wearing large, black-framed glasses that cover most of its face, with visible white eye areas and black pupils. It has a light pink nose, a wide, open-mouthed smile, with sua teeth visible and a small tongue. The hamster’s fur is a mix of cream and light brown, with cream covering the face, belly, and around the mouth, and light brown on the ears, top of the head, and back. The character’s right paw is raised in a waving gesture, and the paws are pink with visible fingers. Beneath the hamster, the word ’ember’ is written in bold, red, cursive script with a slight tilt, outlined in white. The background should be plain and dark, making the cartoon hamster and red text stand out prominently, with a clean, simple style reminiscent of a logo or mascot.
Color Palette
- The red logo is preferred for use on black or white backgrounds. In other scenarios, use a solid black or white logo to contrast your background. Only the white logo should be used over the Ember-red background.
- Don’t use unapproved colors.
- Our primary palette is composed of black, white and Ember red, with occasional accents of blue and yellow. Tints and shades of these colors may be used as long as they don’t overpower the main colors.
- $ember PMS 7417C #E04E39
- $black #212121
- $burnt- ember #9B2918
- $gray #817F7F
- $blue #1E719B
- $light-blue #74B0CE
- $faint-gray #EFEBEA
- $linen #FDF7F6
- $yellow #FBC840
- $white #FDFDFD
- Both lockups follow the color rules established for the primary logo: Use the full-color marks on really light or dark backgrounds and in other situations, use the one-color variants.
Typography
- Roboto is used for all typography except code samples, which use the monospaced Source Code Pro.
- Bold - 700 Medium - 500 Regular - 400
- In addition to using semantic HTML tags, it’s important to size and color text in accordance with WCAG AA requirements. Use the WebAIM Contrast Checker to make sure your typography has passable contrast.
- SMALL TEXT (12PT MIN)
Logo Usage
- This is the mark to be used on websites, mobile apps, or in printed materials to indicate use of Ember technologies—assuming there is no chance it might imply official status or project/core team endorsement.
- The red logo is preferred for use on black or white backgrounds. In other scenarios, use a solid black or white logo to contrast your background. Only the white logo should be used over the Ember-red background.
- A fun alternative to the primary logotype is the Tomster lockup. It’s designed with a white stroke which allows it to work on all background colors without modification.
- Don’t remove the ® mark.
- Don’t use unapproved colors.
- Don’t alter the logotype.
- Don’t use unapproved lockups.
- Don’t add effects to the logo.
- Don’t stretch or distort the logo.
- Don’t box the logo in.
- Don’t imply official endorsement.
- Don’t alter or misuse the logo. You have better things to do.
Visual Style
- The image should feature the word ’ember’ in large, white, stylized cursive script across the center. The background is a solid, warm reddish-orange color, possibly with a slight gradient to add depth. The text is prominently displayed and well-centered, with smooth, flowing lines characteristic of a casual, handwritten font style. The overall composition emphasizes simplicity and warmth, reflecting a cozy or creative brand aesthetic.
- The image should depict a simple, minimalistic design with a light beige or cream background, empty of any objects, text, or detailed patterns, emphasizing a clean and uncluttered appearance, possibly serving as a neutral canvas or placeholder.
- The image contains three horizontal rectangular sections stacked vertically, each with a different background color and containing the word ’ember’ written in a distinct style. The top section has a dark gray background with a subtle dotted texture and features the word ’ember’ in white, cursive font centered horizontally. The middle section has a solid reddish-orange background, slightly brighter, with the word ’ember’ in white, cursive font also centered. The bottom section presents a gan-colored transparent background with a pattern resembling a checkered or transparent grid, and the word ’ember’ is written in black, cursive font, similarly centered. The overall composition emphasizes the contrast of colors and styles for the word ’ember’ across the three sections.
- The red logo is preferred for use on black or white backgrounds. In other scenarios, use a solid black or white logo to contrast your background. Only the white logo should be used over the Ember-red background.
- A fun alternative to the primary logotype is the Tomster lockup. It’s designed with a white stroke which allows it to work on all background colors without modification.
Iconography
- In situations where the primary logos aren’t legible (e.g., avatars, favicons) you can use the simple “E” icon. Choose the container shape that suits the context, and be sure to follow the same rules established for the primary logo.
Layout And Composition
- The image should feature the word ’ember’ in large, white, stylized cursive script across the center. The background is a solid, warm reddish-orange color, possibly with a slight gradient to add depth. The text is prominently displayed and well-centered, with smooth, flowing lines characteristic of a casual, handwritten font style. The overall composition emphasizes simplicity and warmth, reflecting a cozy or creative brand aesthetic.
- The image should depict a simple, minimalistic design with a light beige or cream background, empty of any objects, text, or detailed patterns, emphasizing a clean and uncluttered appearance, possibly serving as a neutral canvas or placeholder.
- The image contains three horizontal rectangular sections stacked vertically, each with a different background color and containing the word ’ember’ written in a distinct style. The top section has a dark gray background with a subtle dotted texture and features the word ’ember’ in white, cursive font centered horizontally. The middle section has a solid reddish-orange background, slightly brighter, with the word ’ember’ in white, cursive font also centered. The bottom section presents a gan-colored transparent background with a pattern resembling a checkered or transparent grid, and the word ’ember’ is written in black, cursive font, similarly centered. The overall composition emphasizes the contrast of colors and styles for the word ’ember’ across the three sections.
- The red logo is preferred for use on black or white backgrounds. In other scenarios, use a solid black or white logo to contrast your background. Only the white logo should be used over the Ember-red background.
- A fun alternative to the primary logotype is the Tomster lockup. It’s designed with a white stroke which allows it to work on all background colors without modification.
Accessibility Guidelines
- We follow Web Content Accessibility Guidelines so that our content is accessible to people with disabilities.
- In addition to using semantic HTML tags, it’s important to size and color text in accordance with WCAG AA requirements. Use the WebAIM Contrast Checker to make sure your typography has passable contrast.
- SMALL TEXT (12PT MIN)
Naming Conventions
- Avoid naming projects and events anything that implies official endorsement. Keep this in mind when selecting domain names as well.
- You can use Ember in the name of local meetups, which are well understood to be unofficial, as well as for other events, assuming the Ember logo is never made part of the name or logo for the unofficial event.
- EmberConf and EmberCamp are both used for official purposes and cannot otherwise be used.