Brand or style guidelines to govern the composition, design, and general look-and-feel of Realeyes corporate branding or the creation of marketing collateral. This document was created in 2019.

1. Brand Guidelines 1.0

2. New logo?
Don’t mind if I do
The new logo is a wordmark, and is
one word rather than two. The
marque was illustrated using
bespoke sans-serif lettering form
that contains references from the
previous logo.
The proliferation of emojis have
become a fixture in today's written
communication, and so a significant
component of the logo is the playful
smile that tells the world that
emotion is at the core of what we do.

3. The abbreviated logo
Branding applications can be diverse
- so for when space is limited, we use
an abbreviated version of our logo.
It must only be used in applications
where there isn’t sufficient space to
place the primary logo. (eg: as a
favicon, a social media avatar, an
app icon etc)

4. The smile –
versatile and playful
Along with the wordmark, our smile
can be used in many creative ways,
giving more opportunities to express
ourselves at events, digital channels
and more.

5. The logo –
some dos ‘n’ don’ts
Legibility is important so consider
contrast. Use the black logo on
white, yellow or light colours or
conversely use the white logo on
dark backgrounds. Simple.
When placing the logo on an
image, ensure that there is sufficient
contrast between the background
and the logo.
Do not add graphic elements or
images over the logo.
Don’t use the logo more than once
on the same page or asset.
Do not distort the logo, including,
stretching, flipping, rotating or
adding any effects such as glows or
shadows.
In general, if it feels wrong then it
probably is.
we are

6. Type is beautiful,
and it matters
Type articulates our message,
expressing both what we say and
how we say it.
Contemporary and easy to read,
created by Google fonts, Realeyes
uses the Roboto type family across
all communications.
Roboto has a mechanical skeleton
and like the Realeyes logo, the forms
are largely geometric. The font
features friendly and open curves,
allowing letters to be settled into
their natural width. This makes for a
more natural reading rhythm more
commonly found in humanist and
serif types.
The spectacle before us was
indeed sublime
Roboto Bold
Apparently we had reached a great height in the atmosphere, for the sky
was a dead black, and the stars had ceased to twinkle. By the same
illusion which lifts the horizon of the sea to the level of the spectator on a
hillside, the sable cloud beneath was dished out, and the car seemed to
float in the middle of an immense dark sphere, whose upper half was
strewn with silver. Looking down into the dark gulf below, I could see a
ruddy light streaming through a rift in the clouds.
Roboto Regular

7. Typography
Typography plays an essential role in
any communication.
Considered typography has the
reader in mind, it attracts and holds
the audience’s attention whilst
establishing a visual hierarchy -
making text easier to scan.
Consistent typography by keeping
your fonts aligned and in proportion
creates continuity, de-clutters and
unifies your communication.
To keep it simple, only Bold and
Regular are the only weights used
within the Roboto Family.
Scale Weight Size (Screen) Colour Used
H1
H2
H3
H4
Subtitle 1
Subtitle 2
Body 1
Body 2
BUTTON
Caption
OVERLINE
Bold
Bold
Bold
Bold
Regular
Regular
Regular
Regular
Regular
Regular
Bold
60
48
34
24
16
14
16
14
12
8
14

8. Button styles
Buttons enables users to take action,
and make choices, with a single tap.
Their form helps communicate what
actions a users can take and are
typically placed throughout the UI in
places like dialogs, modal windows,
forms, toolbars and so on.
BUTTON BUTTON
BUTTONBUTTON
Label 2 Label 3 Label 4Label 1
BUTTON BUTTON
Contained Buttons
Used for high-emphasis, the
contained button’s appearance
uses a fill colour to accentuate
importance.
Outline Buttons
The outline stroke denotes
stronger emphasis than a text
button but a lower priority than
a contained button.
Text Button with Glyph
Text buttons combined with a
glyph are typically used to
emphasise an action or to
strengthen the label’s presence
within a page of copy.
Text Button
Text buttons are typically used
for the least important action
on the page.
Toggle
These are used less often than
other button types, toggle
buttons are used to group a set
of actions.
Lozenge Button
These are used for the highest
emphasis on a page and are
typically used for an action
rather than a hyperlink to
another page, such as
completing a form.
Lozenge buttons cannot be
created within HubSpot CSS
and graphic versions (GIF or
PNG) are highly compressed
creating pixelated edges, so
rectangular buttons are
recommended.

9. Contact us
Save changes
Let’s talk
Don’t Do
Writing and tone
of voice
Our choice of words and how we
communicate is just as important as
how we look.
Our business is far from boring, so be
positive, passionate and energetic - lift
the mood of your reader.
Yes we’re geeky because we’re
scientists, we’re data lovers, but we
should avoid using unnecessary
jargon. If technical terms are required,
then explain what they mean to the
reader. Text should be understandable
by anyone, anywhere, regardless of
their culture or language. So buzzwords
- don’t go there. Just talk straight, be
yourself - be human.
• Be concise - edit ruthlessy
• Write for all reading levels
• Use simple, direct language
• Replace a phrase with a word
• Replace negatives with affirmatives
• We’re realeyes not RealEyes
• We use American-English
Reach out Ask
Circle back Talk again
Would you like to save your
changes?
Verify your emailYou must verify your email
address before you can continue
Click ContinueClick the Continue button
Try againAccess denied!
Applicants with more than five years of
experience can bypass human resources and
call for an interview.
If you do not have more than five
years of experience, do not call for
an interview if you have not already
spoken to human resources.
Somebody has said that words are a lot like
inflated money - the more of the that you use, the
less each one of them is worth. Search out and
Annihilate all unneccessary words, and sentences
– even entire paragraphs.

10. Color
Life happens in color. Color ellicits
emotions, it connects people and
adds vibrancy to your
communication.
White and Realeyes Black both play
a significant role and some specific
colors that help create the Realeyes
palette are among the most
recognizable and unifying elements
of our visual identity.
#273235 #CDD5D7 #F2F2F2 #FFFFFF
#2DC0A2 #16A086 #FFCB5B #FB5C63

11. The spectacle before us
was indeed sublime
Apparently we had reached a great height in the
atmosphere, for the sky was a dead black, and the
stars had ceased to twinkle.
By the same illusion which lifts the horizon of the
sea to the level of the spectator on a hillside, the
sable cloud beneath was dished out, and the car
seemed to float in the middle of an immense dark
sphere, whose upper half was strewn with silver.
Looking down into the dark gulf below, I could see a
ruddy light streaming through a rift in the clouds.
Layouts – think grid
Even when you can’t see it, the grid
is the most important organizational
tool in the visual identity. It’s what
every layout is built on.
Grids help balance your layout, they
help define your spacing and
organization of content. Without it
you invite a level of chaos that will
hinder your communication and
challenge your reader.
Whether it’s a slide or a conference
stage, starting with a well-defined
grid will give your design a solid
foundation.

12. Photography
We use authentic and positive
imagery that tells a story and
captures world we live in.

13. Life at Realeyes
We love to share our working life at
Realeyes with the outside world. As
with all communication, consider
layout, use of color and the story it
conveys.
Not every shot requires subjects
looking directly at the camera, if
anything, the image is likely to be
more dynamic and true to life at
Realeyes when images aren’t staged.

14. Staff portraits
We have developed an approach to
our emplyee portraits that enables
photographers to achieve
consistency regardless of when or
where the portrait was taken.
The black and white portraits don’t
include backgrounds or focus on
clothing - the attention is on the face
and the subject’s expression.

15. Illustration
& Diagrams
We have developed an abstract 3D
world inhabited by emojis that
enables us to bring color and fun to
big concepts.
Diagrams are less decorative and
intended to inform, making complex
concepts easier to understand.

16. Illustration examples
Illustration is used to add fun,
creativity and vibrancy to a
communication. Unlike a diagram or
data chart, illustrations are more
decorative in nature.
Landing page content uses a 3D
vignette approach whereas blog
posts are more flexible but sill work
strictly within the color palette and
use graphic motifs to make it
distinctively Realeyes.

17. Diagram examples
Unlike an illustration, a diagram is
used to communicate an idea or a
process for example. It should be
effective in supporting and
illustrating what is within the
written content.

18. We are our data
Important business decisions are
made from our data visualizations,
they make data easier for people to
understand, making it easier to
detect patterns, trends, outliers in
groups and so on.

20. Iconography & Glyphs
Icons are used to illustrate features,
whereas the smaller glyphs are used
to signpost or highten the
prominence of a label in a toolbar or
button for example.
Icons are single stroke keylines
whereas glyphs are solid with fewer
details.
8

21. Interiors
As well as external communications.
it’s important to bring our interiors in
line with our branding to help
reinforce our culture and identity.

22. Thank you
If you’ve read these guidelines, it’s
very much appreciated. We know
that applying these principles takes
time and effort, but it’s what makes
the difference between any
communication and a Realeyes
communication.
If you ever have additional questions
about our visual identity and its
application in design, please don’t
hesitate to contact:
colin.pye@realeyesit.com