Introducing the Gengo Style Guide
Since our founding in 2008, the web and its technology have changed significantly. In that time our product has grown organically as well, making it a challenge for us to scale at speed in all areas of our platform.
To carry us into the future, we’ve created a style guide. This guide will help us build consistently and quickly without needing oversight for every pixel and will also help us focus more on workflows and logic rather than bits and pieces like buttons and list items. This style guide outlines:
- Logo, color, and asset usage
- Voice, tone, and style
- Platform components and layout
It’s also a living reference tool for developers, designers, marketers, product managers and others, including our partners and those who want to build on top of our brand or use our assets.
About Gengo style
With our brand, we aim to be simple but not simplistic, clean without being cold and efficient but not soulless in both our visual and written style—or, in the words of Dieter Rams, "Less, but better" (Weniger, aber besser).
Simplicity isn’t all that we strive for, however. Because we’re a tech company that offers human translation, we want our brand and product to reflect the human aspect of our service. We do this primarily through color, typography and form.
Gengo’s colors are inspired by nature, with three shades of green (plant life), blue (water), beige (light), red (fire) and our supporting color, warm gray (soil). Our brand’s font, Open Sans, is a humanist font with gentle lines and high legibility across media, digital and print, and we use soft forms like rounded corners and circles.
Building a scalable platform
When it comes to UI, we’re building scalably with Bootstrap, which has the following advantages:
- Uses a solid 12-column grid system
- Makes using responsive media queries simple
- Takes a modular approach to styling through Sass
Our users live all around the globe—so it’s essential to create a platform that functions in very different work environments and tools. Building on Bootstrap will benefit translators and customers alike as we continue to adapt our product to different screen sizes and devices.
Our vision is to empower talented people with access to new opportunities, so they can help anyone reach across language barriers. From building our brand to expanding our platform, this style guide allows for us to create with the same simplicity. We hope it serves you well, too.
Logo usage
The Gengo logotype is custom-designed to embody many of the aspirational qualities of the brand. The letterforms are highly efficient and based on oval shapes with subtly contrasted stroke weight. The "g" and "e" blend into the background as the letters adapt to any environment they are placed in.
Preferred
Acceptable
More neutral branding
On a dark background image
On white background
Translator-facing
Developer-facing
Colors
Primary
Secondary
Supporting
Typography
Header 1
Header 2
Header 3
Header 4
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>Default paragraph
Gengo is using a sans-serif Google Font called Open Sans, designed by Steve Matteson. We have chosen this font because of its organic, friendly and neutral appearance and its high legibility across all digital devices. It was important for us to chose a humanist typeface because we are a company that offers human translation.
<p>...</p>Small paragraph
Gengo is using a sans-serif Google Font called Open Sans, designed by Steve Matteson. We have chosen this font because of its organic, friendly and neutral appearance and its high legibility across all digital devices. It was important for us to chose a humanist typeface because we are a company that offers human translation.
<p class="small">...</p>Dotted list
A paragraph of text that’s before the list:
- List item one
- List item two
- List item three
- List item four
<ul>
<li>...</li>
</ul>Numbered list
A paragraph of text that’s before the list:
- List item one
- List item two
- List item three
- List item four
<ol>
<li>...</li>
</ol>Quotes
A paragraph of text that’s before the quote:
Gengo is using a sans-serif Google Font called Open Sans, designed by Steve Matteson. We have chosen this font because of its organic, friendly and neutral appearance and its high legibility across all digital devices. It was important for us to chose a humanist typeface because we are a company that offers human translation.
<blockquote>
<p>...</p>
</blockquote>Favicon
<link rel="icon" href="assets/favicons/gengo.ico" type="image/x-icon">
<link rel="icon" href="assets/favicons/customer.ico" type="image/x-icon">
<link rel="icon" href="assets/favicons/translator.ico" type="image/x-icon">Icons
<i class="icon-user"></i>
<i class="icon-email"></i>
<i class="icon-settings"></i>Doctype icons
<!-- file -->
<i class="doctype-def"></i>
<!-- tm -->
<i class="doctype-tm"></i>
<!-- text -->
<i class="doctype-txt"></i>
<!-- word -->
<i class="doctype-doc"></i>
<!-- excel -->
<i class="doctype-xls"></i>
<!-- rtf -->
<i class="doctype-rtf"></i>
<!-- ppt -->
<i class="doctype-ppt"></i>
<!-- pdf -->
<i class="doctype-pdf"></i>
<!-- odt -->
<i class="doctype-odt"></i>
<!-- check -->
<i class="doctype-check"></i>
<!-- glossary -->
<i class="doctype-gls"></i>
<!-- group -->
<i class="doctype-grp"></i>