Frame Io Brand Style Guide

Brand
Style Guide
Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 01
Index 01 — Mission
Statement
Principles
03
04
05
02 — Foundations 10
Voice & Tone 11
Logo 12
Color 23
Type 28
03 — Platform 31
Light 32
Brand Photography 37
Putting it All Together 41
04 — Contact 51
Mission
Platform / Brand Photography Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 03
Empower
the world’s
storytellers.
Mission Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 04
Principles We embody our vision by living up to our
brand & craft values. We are undeniable,
premium, professional, and cinematic.
Mission / Principles Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 05
Undeniable. We are a source of
aspiration. The recognized leader
in design, technology, and innovation
for film collaboration.
Premium. Every detail is deliberate and
essential. Our customers see the same
passion and perfectionism in our brand
as they pour into their own work.
Professional. We consistently exemplify
our value and our commitment as the
most reliable, essential platform for
video collaboration.
Cinematic. We foster and connect
with our audience through our own
passion for film. We celebrate the
craft and creative process of cinema.
Foundations
Clear.
Concise.
Confident.
Authentic.
We keep it short and to the point. We speak from
a place that respects the creators and professionals
who trust our platform with their life’s work.
Foundations Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 11
Our Symbol. Our symbol is our mark
of authenticity. It’s unique and striking
and can increasingly stand alone with
its ever-growing brand awareness.
Foundations / Logo Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 12
Variants. We have three use cases for
our symbol. White on dark, black on
light, and cobalt on light.
Centering. When centering the mark,
remember to account for the ‘arrow
effect.’ Optically center the symbol by
aligning the metric center to the right
edge of the second bar in the mark.
Symbol clearspace. When our mark
is used alone, proper spatial margins
ensure a strong presence and show
confidence and respect for the brand.
X = Height of the symbol / 2
Wordmark. Our wordmark should be
used in communications, or when
speaking to audiences outside our
immediate ecosystem — basically
any situation with less instant brand
recognition. It’s the more formal
symbol of our brand.
Variants. We have four use cases for our
lockup. All white on dark, black on light,
nd cobalt symbol for both. White and black
are primary, while cobalt is secondary.
Primary Primary
Secondary Secondary
Wordmark clearspace. When using
the wordmark it’s important to
ensure generous margin to allow the
logo a strong presence where it lives.
X = Height of the symbol / 2
Adobe co-branding*. The ‘Adobe
Wordmark’ conveys our relationship
with Adobe while retaining our unique
brand identity. This is used sparingly,
and only where needed for clarity of
connection with Adobe.
* Only available on request, to avoid

usage disparities.
Property & partner lockups. We have
two foundational patterns for how we
lock up our logo mark with 1) our own
properties and communication
surfaces, and 2) our partners.
Misuse. Our logo was carefully
constructed for its intended use.
Please avoid altering the scale,
proportions, layout, or color.
DON’T Use the wordmark without the symbol DON’T Stack the symbol and wordmark
DON’T Add a gradient to the logo DON’T Adjust the proportionate relationship of the symbol and workdmark
Color Our brand colors are vibrant and bright.
They provide strong contrast to our dark
and cinematic aesthetic.
Palette. Our brand uses black space
to cinematically highlight the content we
create. Our brand colors are bright and
vibrant to contrast and attract attention.
Black
Cobalt
White
Electric
Iris
Coral
HEX
HEX
HEX
HEX
HEX
HEX
#000000
#5B53FF
#FFFFFF
#47EBEB
#8952FD
#FC856D
RGB
RGB
RGB
RGB
RGB
RGB
0, 0, 0
91, 83, 255
255, 255, 255
71, 235, 235
137, 82 ,253
252, 133, 109

Foundations / Color Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 24
Extended palette. Our extended palette
is used to provide greater range of
Cobalt Light HEX #6369FF RGB 99, 105, 255
accessibility and contrast when required

in specific context. They should never Cobalt HEX #5B53FF RGB 91, 83, 255
be used as primary applications.

Cobalt Dark HEX #5237F9 RGB 82, 55, 249
Electric Light HEX #87FFFF RGB 135, 255, 255
Electric HEX #87FFFF RGB 135, 255, 255
Electric Dark HEX #00B8B9 RGB 0, 184, 185
Iris Light HEX #9F75F9 RGB 159, 117, 249
Iris HEX #8952FD RGB 137, 82 ,253
Iris Dark HEX #632CDA RGB 99, 44, 218
Coral Light HEX #FCA493 RGB 252, 164, 147
Coral HEX #FC856D RGB 252, 133, 109
Coral Dark HEX #E36B52 RGB 227, 107, 82
Gradients. Our brand palette is
blended together to create lush
gradients to add mesmerizing
vibrance to our brand.
a
nic
am
a
mi i
Mo
ec
am
oth
rib
Miai
ta
M
/T
/G
an
//
/S
nttss
ts
ts
eien
ien
ien
ts
raaddi
ad
ien
ad
GGr
Gr
Gr
ad
Gr
Extended palette. Our extended palette Grey 00 HEX #0000000 RGB 0, 0, 0
is used to provide greater range of

Grey 05 HEX #0D0D18 RGB 13, 13, 24
accessibility and contrast when required
in specific context. They should never Grey 08 HEX #12131D RGB 18, 19, 29
be used as primary applications. Grey 10 HEX #161722 RGB 22, 23, 34
Grey 12 HEX #1D1F2C RGB 29, 31, 44
Grey 15 HEX #252736 RGB 37, 39, 54
Grey 20 HEX #2E2F40 RGB 46, 47, 64
Grey 30 HEX #36384A RGB 54, 56, 74
Grey 40 HEX #4F5167 RGB 79, 81, 103
Grey 50 HEX #6A6B83 RGB 106, 107, 131
Grey 60 HEX #81859F RGB 129, 133, 159
Grey 70 HEX #A3A4BF RGB 163, 164, 191
Grey 80 HEX #C1C2D9 RGB 193, 194, 217
Grey 88 HEX #D5D6EA RGB 213, 214, 234
Grey 90 HEX #DEDFEE RGB 222, 223, 238
Grey 93 HEX #E8E9F3 RGB 232, 233, 243
Grey 95 HEX #F0F0F7 RGB 240, 240, 247
Grey 97 HEX #F5F5F8 RGB 245, 245, 248
Grey 100 HEX #FCFCFC RGB 252, 252, 252
Type Our typeface, Frame Gothic, is a modernist
sans serif. It lends confidence and clarity to
our voice, and it’s uniquely ours.
Frame Gothic. Our primary brand
typeface, it is to be used across all
surfaces of communication when
representing frame.io.
Foundations / Type Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 29
Frame Gothic. Our primary brand
typeface, it is to be used across all
surfaces of communication when
Frame Gothic Thin
representing frame.io.
Frame Gothic UltraLight
Frame Gothic Light
Frame Gothic Regular
Frame Gothic Medium
Frame Gothic SemiBold
Frame Gothic Bold
Frame Gothic UltraBold
Frame Gothic Black
Foundations / Type Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 30
Platform
Light Light is an essential part of film and
cinema, and we use lighting in three
distinct ways to showcase our brand,
bring content to life, and create a unique
and ownable consistency.
Platform Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 32
Cast light. Capturing the ambience of a
filmic workspace — a darkened edit bay,
soundstage, etc. Cast light reflects the
dominant colors in an asset and often
radiates beyond its boundaries for
a heightened presence on the page.
Platform / Light Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 33
Spotlights. Shapes echoing the
frame.io brand mark are used when
the brand needs to stand on its own,
such as presentation decks,
advertising, or social media.
Area lighting. In bespoke interpretations
of our brand palette, we provide a
flexible yet consistent look and feel
to individual campaigns, events,
or content series.
Brand The theme of light as a brand expression
carries over to our photography and
Photography video art direction.
Aspirational storytelling. We celebrate
creators working their craft at the
highest levels, in cinematic moments
of behind-the-scenes collaboration
and expression.
Putting it Our foundations work together to create
a unified and cohesive brand language.
all together We bring together the elements of our

colors, photography, and distinct
lighting treatments that define our
unique brand identity.
Platform / Putting it All Together Brand Style Guide — October ‘22 © 2022 Adobe Inc. All rights reserved. 42
Agencies
Brands
Influencers
Productions
Sports franchises
That’s
a wrap.
fio-brand-studio@adobe.com
#fio-brand-studio

Frame Io Brand Style Guide

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Frame Io Brand Style Guide

Uploaded by

Copyright:

Available Formats

Brand

Putting it All Together 41

X = Height of the symbol / 2

X = Height of the symbol / 2

* Only available on request, to avoid

91, 83, 255

255, 255, 255

71, 235, 235

252, 133, 109

accessibility and contrast when required

be used as primary applications.

Electric Light HEX #87FFFF RGB 135, 255, 255

Electric HEX #87FFFF RGB 135, 255, 255

Electric Dark HEX #00B8B9 RGB 0, 184, 185

Iris Light HEX #9F75F9 RGB 159, 117, 249

Iris HEX #8952FD RGB 137, 82 ,253

Iris Dark HEX #632CDA RGB 99, 44, 218

Coral Light HEX #FCA493 RGB 252, 164, 147

Coral HEX #FC856D RGB 252, 133, 109

Coral Dark HEX #E36B52 RGB 227, 107, 82

is used to provide greater range of

be used as primary applications. Grey 10 HEX #161722 RGB 22, 23, 34

Grey 12 HEX #1D1F2C RGB 29, 31, 44

Grey 15 HEX #252736 RGB 37, 39, 54

Grey 20 HEX #2E2F40 RGB 46, 47, 64

Grey 30 HEX #36384A RGB 54, 56, 74

Grey 40 HEX #4F5167 RGB 79, 81, 103

Grey 50 HEX #6A6B83 RGB 106, 107, 131

Grey 60 HEX #81859F RGB 129, 133, 159

Grey 70 HEX #A3A4BF RGB 163, 164, 191

Grey 80 HEX #C1C2D9 RGB 193, 194, 217

Grey 88 HEX #D5D6EA RGB 213, 214, 234

Grey 90 HEX #DEDFEE RGB 222, 223, 238

Grey 93 HEX #E8E9F3 RGB 232, 233, 243

Grey 95 HEX #F0F0F7 RGB 240, 240, 247

Grey 97 HEX #F5F5F8 RGB 245, 245, 248

Grey 100 HEX #FCFCFC RGB 252, 252, 252

Photography video art direction.

all together We bring together the elements of our

You might also like