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

For general public

For general public

Minimal spacing

Acceptable

More neutral branding

On a dark background image

On white background

Translator-facing

Developer-facing

Colors


Primary

Secondary

Supporting

GENGO GREEN #1CAD7E
GENGO LEMON #C3EA94
GENGO GREY #4D4843
TRANSLATOR BLUE #98D7CC
GENGO LGREEN #AEDBB3
GENGO BG #EEEEEE
DEVELOPER RED #EA5E47
GENGO BEIGE #F1F2C8
WHITE #FFFFFF

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:

  1. List item one
  2. List item two
  3. List item three
  4. 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

gengo
gengo
customer
customer
translator
translator
developer
developer
admin
admin
<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

half
circle
funnel
info
success
warning
error
hold
validation
tooltip
memory
menu
settings
more
top
previous
next
down
check
close
start
play
global
expand
minimize
vertical
horizontal
search
share
flag
notification
activity
unlocked
locked
database
file
transfer
download
download2
star
print
create
edit
user
email
comment
refresh
archive
trash
heart
<i class="icon-user"></i>
<i class="icon-email"></i>
<i class="icon-settings"></i>

Doctype icons

file
tm
text
word
excel
rtf
ppt
pdf
odt
check
glossary
group
<!-- 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>

Apple touch icons

Customer
Translator
Developer
Admin
<!-- Customer -->
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icons/gengo_c_app.png">
<!-- Translator -->
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icons/gengo_t_app.png">
<!-- Developer -->
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icons/gengo_d_app.png">
<!-- Admin -->
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icons/gengo_a_app.png">