Scribd Logo
Upload

Welcome to Scribd!

  • 90 views

    BEES Bank Brand Guidelines V4

    Uploaded by

    Jean Valdir
    This document outlines branding guidelines for BEES Bank. It includes sections on brand architecture, color palette, logos, brand devices, user interface guidance, and how the brand comes to life. The key elements of the BEES Bank brand identity are a yellow to blue gradient, crisp white, wordmark built from stripes, and product icon constructed from the same stripes. Guidance is provided on proper usage of these elements to ensure a cohesive brand expression.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    BEES Bank Brand Guidelines V4

    Uploaded by

    Jean Valdir
    90 views31 pages
    This document outlines branding guidelines for BEES Bank. It includes sections on brand architecture, color palette, logos, brand devices, user interface guidance, and how the brand comes to life. The key elements of the BEES Bank brand identity are a yellow to blue gradient, crisp white, wordmark built from stripes, and product icon constructed from the same stripes. Guidance is provided on proper usage of these elements to ensure a cohesive brand expression.

    Original Title

    BEES Bank Brand Guidelines V4 (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document outlines branding guidelines for BEES Bank. It includes sections on brand architecture, color palette, logos, brand devices, user interface guidance, and how the brand comes to life. The key elements of the BEES Bank brand identity are a yellow to blue gradient, crisp white, wordmark built from stripes, and product icon constructed from the same stripes. Guidance is provided on proper usage of these elements to ensure a cohesive brand expression.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    90 views31 pages

    BEES Bank Brand Guidelines V4

    Uploaded by

    Jean Valdir
    This document outlines branding guidelines for BEES Bank. It includes sections on brand architecture, color palette, logos, brand devices, user interface guidance, and how the brand comes to life. The key elements of the BEES Bank brand identity are a yellow to blue gradient, crisp white, wordmark built from stripes, and product icon constructed from the same stripes. Guidance is provided on proper usage of these elements to ensure a cohesive brand expression.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 31

    Brand Guidelines

    January 2022 – V 2.0


    Contents
    Introduction 3
    Brand Architecture 5
    Toolkit Overview 6

    Color 7
    Gradient Do's + Don'ts 10
    Color In Action 11

    Logos 12
    Wordmark Construction 13
    Product Icon Construction 15
    Clear Space 16

    Brand Devices 17
    The Role of Buzz 18
    Brand Pictograms 19
    Brand Stripes 20

    User Interface 22
    UI Color Application 23
    Principles Overview 24
    Accessibility Guidance 26

    Brand In Action 27

    Contact 33

    2 | BEES Bank Guidelines


    Introduction

    3 | BEES Bank Guidelines


    Introduction
    TBC

    4 | BEES Bank Guidelines


    Our Brand Architecture -
    a Hybrid Framework Sub brands Endorsed brands

    Core Brand
    Club

    Black

    A straightforward branded ÝÝçđÑãÎâçôÄĸÄĒÑ»ÑÝÑüēÍçô


    house approach for products our core initiatives to market
    and services complementing (brand loyalty program,
    the BEES offer. ÄĒüÄôã°Ý°¼üÑĐ°üÑçã÷Ƀȩ

    5 | BEES Bank Guidelines


    Wordmark Product icon Color

    Toolkit
    Overview

    This is the BEES Bank toolkit. The combination


    çÍüÐÄ÷Ä°÷÷Äü÷¼ôÄ°üÄçþôÄĒñôÄ÷÷Ñçãȩ

    Wordmark
    Always used to clearly signpost the product.

    Product icon
    Never locked up with the wordmark but
    never used without the mention of BEES Bank.

    Color
    ×ƋƐǷū and
    Lead with white FǢŀţƐūƲǷproduct
    and gradient productcolor,
    color,
    supported
    supported by
    by black
    white and
    and grey.
    grey. Visual language Typography

    Visual language
    Leading with 3D white stripes in our gradient
    environment, with a secondary gradient stripes
    in a white environment.

    Typography
    Follows core BEES brand guidance.
    Power up
    LÐÄ H °ãÝüççÝÜÑüÑ÷°ãÄĒüÄã÷ÑçãçÍüÐÄ H
    brand guidelines, which can be found here:
    your payments
    beesbrand.buzz
    Username: brandbees
    with BEES Bank
    Password: bbeesguidelines

    6 | BEES Bank Guidelines


    Color

    7 | BEES Bank Guidelines


    Primary colors

    Color
    Gradient (Digital)
    +
    Yellow
    Yellow Blue
    Blue
    Primary colors #FFFF00
    ȹƴƴ #66FFFF
    ȹƹƹ
    Our primary color palette is our yellow R:255
    R:255G:255
    G:255B:000
    B:000 R:102
    R:85 G:255
    G:255 B:255
    B:234
    + blue gradent and crisp white.

    Secondary colors
    We use light grey and contrasting white
    White
    as supporting colors. ȹ
    R:255 G:255 B:255
    C:0 M:0 Y:0 K:0

    Gradient (Print)
    + +
    Yellow Green Blue
    C:0 M:0 Y:100 K:0 C:40 M:0 Y:80 K:0 C:60 M:0 Y:0
    C:60 M:0 Y:0 K:0
    K:0
    PANTONE
    PANTONE YELLOW
    YELLOW C C PANTONE 317
    PANTONE: 317 C
    C

    Secondary color

    Gray Black
    ȹFLjEDFC ȹƴƴƴƴƴƴ
    R:240 G:236 B:252 R:0 G:0 B:0
    ȣƻ3ȣƻZȣĒƴ-ȣƴ C:100 M:35 Y:0 K:100
    PANTONE Cool Gray 1 C PANTONE BLACK 6C
    8 | BEES Bank Guidelines
    Primary color wordmark and icon application

    Color
    Application

    Our wordmark and icon are primarily seen


    on our BEES Bank gradient. Depending on the
    constraints of the application, they may also
    be seen on gray, white and black.

    When present on black the wordmark and


    icon can be used in white in in the BEES
    Bank gradient.

    Secondary color wordmark and icon application

    9 | BEES Bank Guidelines


    Gradient
    Do's + Don'ts

    Do
    Ensure the BEES Bank gradient transitions
    ÍôçâēÄÝÝçđüçÝÑÎÐü»ÝþÄɂÑãÍ°ĐçþôçÍēÄÝÝçđɃ
    at an angle of 25.

    Do
    Pair a black icon/wordmark with our BEES
    Bank gradient. In some instances, this can
    be inverted (i.e. gradient wordmark against
    »Ý°¼ÜɃȩ

    Don't
    Pair white or any other colour wordmark
    alongside our BEES Bank gradient.

    Don't
    Use the gradient wordmark and background
    in combination, nor outline the wordmark in
    any way.

    10 | BEES Bank Guidelines


    Color
    In Action

    Lead with gradient for Use mostly white with additional gradient Too much black creates an overly dark and unbalanced look
    high impact applications and black for more minimal applications HçâÄÄĒ¼ÄñüÑçã÷â°ē°ññÝēɎÄȩÎȩÀ°ôÜâçÀÄN#ÀÄ÷ÑÎã

    11 | BEES Bank Guidelines


    Logos

    12 | BEES Bank Guidelines


    Wordmark
    Construction

    The 'Bank' in our BEES Bank wordmark


    is set in a custom version of Barlow
    ɂ ÄÄ÷HüôÑñÄɃ°ãÀа÷°ÐÄÑÎÐüâ°ü¼ÐÄÀ
    to the BEES mark.

    In certain applications (e.g. bank


    ¼°ôÀɃçþôĐÄôüѼ°ÝđçôÀâ°ôÜâ°ē
    be required. In this instance, 'Bank'
    should match the width of the 'BEES'
    mark. Both words should be separated
    by a distance equal to the thickness of
    one stripe from the BEES mark.

    13 | BEES Bank Guidelines


    Secondary
    Wordmark

    In markets where we are unable


    to use the name ‘BEES Bank’, we
    should revert to our secondary
    ‘BEES Pay’ wordmark.

    Whenever our secondary


    wordmark is required in a vertical
    format, 'Pay' should match the
    width of 'BEE' in the BEES mark.
    Both words should be separated
    by a distance equal to the
    thickness of one stripe from the
    BEES mark.

    14 | BEES Bank Guidelines


    Product Icon
    Construction

    Our icon is built from the same stripes


    as our core BEES wordmark and icon.

    15 | BEES Bank Guidelines


    Clear Space

    The clear space around the wordmark and


    product icon should equal the portions of X
    shown here.

    Height of X 1/6 of height of X

    Height of X

    16 | BEES Bank Guidelines


    Brand Devices

    17 | BEES Bank Guidelines


    The Role of BUZZ

    Within BEES Bank, BUZZ plays the role


    of our virtual assistant. A guide ready
    to aid and inform our users across our
    digital touchpoints*.

    *BUZZ should only be used on digital applications


    ÷þ¼Ð°÷¼°ôÀôÄ°ÀÄô÷ȤÑãɎ°ññ°ãÀ÷ç¼Ñ°Ý¼çãüÄãüȩ

    18 | BEES Bank Guidelines


    Brand
    Pictograms

    Pictograms can be used in combination


    with any of our brand colors and can be
    used to illustrate products and services.

    19 | BEES Bank Guidelines


    Primary stripe

    Brand Stripes

    Our primery stipe uses is white set


    against the BEES Bank gradient.

    contrasting this is our inverted


    secondery, colored by the BEES Bank
    gradient ans set angainst white.

    The tertiary stipe must be used when


    ãļÄ÷÷°ôēçã÷ñļÑķ¼üçþ¼ÐñçÑãü÷
    such as the BEES Bankcard.

    Secondary stripe Tertiary stripe

    20 | BEES Bank Guidelines


    Brand Stripes
    Do's + Don'ts

    Do
    Use the white stripe against the BEES Bank
    gradient or the gradient stripe against white.

    Do
    Use stripes to complement pictograms and
    products as long as the stripe is not too
    much of an obstruction.

    Don't
    Alter the color of either stripe.

    Don't
    Severely obstruct other brand elements.

    Don't
    Use the gradient stripe in combination with
    the BEES Bank gradient and avoid overlaying

    Power up
    üÐÄ÷üôÑñÄđÑüÐüÄĒüȟȩ

    your payments
    ȟãÄĒ¼ÄñüÑçã¼°ã»Äâ°ÀÄđÐÄãçĐÄôÝ°ēÑãÎüÐÄXçôÀâ°ôÜ

    with BEES Bank


    21 | BEES Bank Guidelines
    User Interface

    22 | BEES Bank Guidelines


    Primary colors

    UI Color
    Application

    When designing within the BEES Bank


    app, our optimised color pallet is to
    Black
    be used, ensuring the accessibility of ȹƵƵƵ
    the user interface whilst maintaining R:30 G:30 B:30
    brand cohesion.
    White
    Note: A softer black is used for UI
    elements to improve accessibility. ȹ
    R:255 G:255 B:255

    Secondary color
    Gray
    ȹFLjEDFC
    R:240 G:236 B:252

    Gradient(Digital)
    Gradient (Digital)
    Yellow
    Yellow
    #FFFF00
    R:255
    ȹƴƴ + Blue
    Blue
    #66FFFF
    ȹƹƹ
    R:255 G:255
    G:255 B:000
    B:000 R:102
    R:85 G:255
    G:255 B:255
    B:234
    23 | BEES Bank Guidelines
    Do's + Don'ts

    Accessibility
    Guidance Do Don't
    Min contrast ratio Fail

    Our product will be used by individuals


    with varying levels of eyesight. The
    WCAG AA provides guidance on how to
    accommodate all individuals through
    the following recommendations:

    To meet the AA standard, the


    contrast ratio at a min must be: Black on Black on White on BEES gradient
    BEES gradient BEES gray BEES gradient on BEES gray
    ȢƷȣƵÍçôȬÝ°ôÎÄÍçãü÷ȤȬƵƼñüɂƶƸñĒɃ 
    ôÄÎþÝ°ôđÄÑÎÐüçôƵƸñüɂƵƽñĒɃ»çÝÀ
    • 4:5:1 for "small font," or anything
    smaller or lighter than large fonts
    ȢƷȣƵÍçôѼçã÷°ãÀãçãɎüÄĒüÄÝÄâÄãü÷

    Exceptions
    HçâļçââçãÄĒ¼ÄñüÑçã÷üçüÐÄ
    contrast ratio requirements listed BEES yellow BEES blue White on White on
    °»çĐÄÍçôüÄĒüÑã¼ÝþÀÄÀļçô°üÑĐÄüÄĒüȤ on black on black BEES yellow BEES blue
    ÀÑ÷°»ÝÄÀçôɂÑã°¼üÑĐÄɃN#ÄÝÄâÄãü÷ȩ

    Useful tools
    You may use the adjacent contrast
    analyzing tool to help determine if
    your color use meets the minimum
    standards for AA accessibility.

    *To ensure a more accurate reading, use color White on Black on BEES yellow BEES blue
    HEX codes rather than the eyedropper tool. black white on white on white

    26 | BEES Bank Guidelines


    Brand In Action

    27 | BEES Bank Guidelines


    Brand in Action

    9:41

    BEES VENDO BEES Bank

    28 | BEES Bank Guidelines


    Brand in Action

    29 | BEES Bank Guidelines


    Brand in Action

    30 | BEES Bank Guidelines


    Brand in Action

    31 | BEES Bank Guidelines


    Brand in
    Action

    32 | BEES Bank Guidelines


    Contact Details
    For more information on how to apply the
    BEES brand identity or request artwork
    ũăÐĮȣĨăЭĮÐÆďĊĴ­ÆĴĴìÐĴЭĉ­ĴȤ

    jaime.colom@ab-inbev.com

    33 | BEES Bank Guidelines

    You might also like