Code

Code

Forty Six

Forty Six

Code Forty Six

"We’re not the first to establish a set of guiding principles — Harry Truman had ‘The buck stops here,’ and more recently my friend Mayor Pete Buttigieg’s campaign was shaped by his team’s ‘rules of the road.’

Code

Forty Six

Code Forty Six

"We’re not the first to establish a set of guiding principles — Harry Truman had ‘The buck stops here,’ and more recently my friend Mayor Pete Buttigieg’s campaign was shaped by his team’s ‘rules of the road.’

The Team We Aspire to Be

Joe's Campaign Code

When I was growing up, my mom used to always tell me, “Joey, no one is better than you. Everyone is your equal, and everyone is equal to you.”

It wasn’t just a line; it was a code for us to live by—the guardrails our family put in place to help guide our words, our thoughts, our actions, and the way we treated others. It’s the same code I passed on to my children, and that they have passed on to their children in turn.

The principles we’ll live by, reflecting the community we’ve already built, the team we aspire to be, and some of my own personal ‘rules’ as well. I’m excited to share it with you now.

Knowing what that code did for me, my sister Val, and my brothers, I wanted our campaign to have one, too. We’re not the first to establish a set of guiding principles—Harry Truman had ‘The buck stops here,’ and more recently my friend Mayor Pete Buttigieg’s campaign was shaped by his team’s ‘rules of the road.’ Being crystal clear about the values that drive you is essential to making good decisions, staying focused on what’s most important, and keeping yourself accountable. That’s why I worked with our supporters and staff to come up with a code for our campaign —

Compassion

Faith

Resiliency

Empathy

Kindness

Humility

Joy

Respect

Inclusion

Dignity


Be Who You Are

The campaign Code isn't about being someone you're not. It isn't about being "nice". If you're a pissed off New Yorker, Joe's not saying to be anything else. Pissed off New Yorker do great things. They've done it before, and they'll continue every time. There's not a single thing we can't do. Empathy, Inclusion, Dignity, and HUMILITY mean we embrace who we really are. And we embrace who you really are.

Joe's code doesn't mean you can never cuss or swear again. It means we hold ourselves to a set of standards. And if you've never seen a Kind New Yorker cussing every step of the way as they show America just exactly what kind of Resiliency and Compassion they have - you've probably never seen a New Yorker in a moment of crisis.

Part of Humility is in being who we really are. When you're genuine, and speak from the heart, it shows. Authenticity in design, or content, means being the real you. Speak however you speak, for whomever you speak - and speak from the heart.
#UnitedForBiden

Design

Design

Best Practices

General best practice tips with the Biden for President style and branding

Basics

Layout and Color

Matching the mood

It's easy to see in the examples in the slideshow which images match the message, image, mood and target the best. What's not immediately obvious is that each of these shows the same exact product

Great Design

Watch for some common mistakes in spacing, alignment and content-aware design that make all the difference in the world. Connecting on an emotional level with your audience through a still image or design can be hindered by simple things that are easy to prevent.

Matching the Imagery

There's something to be said for curating and choosing photography that works well with the Biden official branding to begin with, but, both the image and the message should pay attention to eachother. If we're talking about Georgia, we should be using photography of Georgia. And likewise, the messaging should pay attention to both the flow and the colors of the image.

Layout

On the web, responsive designers are well acquainted with how the orientation and screen width or height can effect the layout. In flat design, it's much easier to control the layout and ensure proper alignment and flow for easy to read, clear messaging.
  • Do

    Use the Dark Blue over bright backgrounds
  • Do Not

    Use Bright Red over Bright Blue
  • Do

    Use the White Biden logo over images or colored backgrounds
  • Do Not

    Use the White Biden logo over light or pale backgrounds
  • Do

    Use sharp, clear headings with 5 words or less
  • Do Not

    Use Headings for the entire content
  • Do

    If using the italic style, a sharp solid color shadow is okay
  • Do Not

    Never use a black or blurred, softened drop-shadow

Color Rules

One of the quickest ways viewers judge ads or designs as professional (and therefore trustworthy) or amateur, is by it's use of color. One soft black drop shadow can ruin an otherwise great design. Bright red on bright blue - or 4 differant colors can send the viewers eye bouncing all over and make retaining the messsage and/or call-to-action extemely difficult.

Color

Using a 60/30/10 rule, or 70/30, ensures color doesn't look abrasive or too loud to read. We need to also ensure we meet W3C compliance in contrast ratios for the poor-of-sight, so proper contrast and lightness ratios are important. With the Biden branding, some basic things to avoid are noted below...

Type Hierarchy

Headings are big, short and should never have more than 4-5 words. Subheadings are smaller, use the Brother 1816 Medium style, and are either italic or normal. Subheadings should be one or the other - never both. Body copy (text) should always use a standard Normal or 500 font-weight.

Use All-Caps sparingly

The ALL-CAPS, Black (900 weight) Brother 1816 font is fantastic. The only caveat is that volunteers and student or new designers may overuse the ALL-CAPS heading, making it difficult to read and stick the messaging. If you can help it, try to keep a nice hierarchy so that major headings (usually one or two words) use this for impact. It can also be really useful and look clean and well-designed to use am all-caps subheading with significant letter-spacing (leading) for smaller H4 or H5 subheadings.
  • Image Effects

    Photography with lots of color almost always benefits from a Screen layer effect (or Adobe blend-mode for web CSS) using the dark blue #0b1630 (RGB 11, 22, 48), and depending on the image may need a second layer using Multiply to darken the image down, as the Screen effect can sometimes wash an image to pale. In the above image, There is a gradient with Normal blend style at 64% opacity, followed by a Screen blend style at 100% opacity and a solid layer with Normal blend style at 20% opacity to dark the image back down.
  • Margins

    These Twitter images are created at 1062x722, although the ideal image size should be 16:9 at with a double margin to ensure the BIDEN logo is not cropped out, and the messaging - which follows the 3 second rule - is vertically centered. No matter what device, the message and logo will always be legible and visible.

Branding

The official Biden for President logo is fantastic. Beyond invoking the traditional Red, White and Blue American flag colors - it literally reads as "President Biden". This strategic kind of design is so well thought-out. As with any business, in the beginning, we need to establish trust, reliability and stability. Strong, bold, caps fonts promote all of these qualities in logo design.
As any organization or business grows and starts to become a large entity, you'll notice that succesful ones start to shrink the size of the logo - and eventually change from the bold all-caps power symbolism to a non-threatening lowercase and thinner weight font. Walmart used to be all-caps, with big, chunky lettering. Even the star has been re-designed, and they use thin-weight and well spaced letters to be more friendly and unintimidating. Amazon's logo is another great example, as the re-designed branding effectively did two things at once: Draw a line from A-to-Z, and put a smile on every box.
  • Joe Navy

  • Honest Red

  • Coral of the Year

  • Biden Blue

  • Coral of the Year

  • Amtrack Gray

Primary Background

On the Biden Blue Background

Secondary Background

On the Joe Navy Background

Muted Background

On Gray, Pastel or Pale Backgrounds

White Background

Paper-white Backgrounds

Graphic Content Layout

Flat and Horizontal Images

Photography with straight lines and little to no depth of field
If the image has a horizontal flow, a horizon, or little to no depth-of-field, the text copy and the layout should follow suit. The Biden for President logo and branding is rectangular with hard edges, and matches this layout perfectly.

Round or Angled Images

Photography with depth, rounded our perspective content
If the image has a angles, depth, perspective or a natural tilt or focal point, the layout of text copy and the flow of messaging should follow the photography. Drop shadows are rarely used, but if necessary should always be solid with no blurring.

Basic Marketing Principles

The following are guidelines and by no means "rules" that must be obeyed, but can be trusted to result in clean, easy to read and memorable graphic content that will be effective and have the best chance at retention.
  • An image that resonates on an emotional level with the target audience
  • A 3-second or less message
  • Avoid clutter. No more than 2 font styles max. All-caps Black Brother 1816 for headings, medium or medium italic for body. Text/Copy should always align right, left or center, with the only exception being indentions to follow design
  • Limit font colors. No more than 2 main colors should be used unless it's a subtle difference for emphasis. Always use Biden for President palette.
  • Using the dark blue, most images benefit from a solid Adobe Screen blending effect or layer effect. Some images may benefit from an additional dark blue layer or gradient to transparent to make the White Biden logo "pop"
  • Margins are important and should always keep text/copy 1/4" inch or equivalent pixel ratio from the edge to leave a bleed for potentially responsive digital cropping.
  • Except in rare instances, photography of Joe Biden should always have a solid #0b1630 layer with a Screen blend style (or blend-mode in CSS) over top, giving a cool tone to his images
  • For Headings and text that "pop", On warm-toned photography, use the Dark Navy Blue for sections and text/copy background. For cool-tone photography, use the Red. Do not use the solid Red over the light blue. Instead, use the pastel/pink Red over the darkest navy blue. Contrast is important for clarity, accessibility and legibility. Bright font colors on bright background colors makes the text difficult to read for those who have accessibility needs

Dimensions & Guides

  • 1920x1080 is the resolution of iPhone 8 Plus. The iPhone 6 Plus has the same resolution, and a 16:9 display ratio. As long as there is a comfortable margin, designs at this size should fit most displays. When in doubt, create at a 16:9 ratio with a wide bleed or margin area
  • iPhone 11 Pro Max has a resolution of 2688 × 1242, at 459PPI. The below are designed at 1436 x 3113px. This is a 19.5:9 ratio - slighty skinnier. Most Widescreen TVs and Mobile devices has a 16:9 ratio and this will be the standard, whereas 19.5:9 is less common.
  • In Selecting license-free photography, we always try to avoid Postcard-like cliche images. To really resonate on an emotional level with the viewer, the photography needs to either resonate with a feeling, cause, or place that speaks to the viewer. For example, most political campaigns when tasked with creating something for Sacramento, California, would immediately design something with the Capital building. However, that building doesn't have much to do with daily life for Americans in Sacramento. The trian, however, is something everyone living in or visiting Sacramento from Northern California passes and instantly recognizes as "Sac Town". It also calls back to the VP's roots, unions, and the working-class Joe our base identifies with.

Story & Phone Wallpaper

One last thing...

Never use the three bar stlye E in any typography other than the Biden official logo. Nothing will spoil a good design quicker. The 3-bar E should only be used for the logo and nothing else.
Privately owned by a random citizen. Note that my opinons are my own, as are those of the voters Twitter accounts streamed into this website. I reserve the right to use TONS of typos and make lots of mistakes. Some language may not be suitable for children. Biden branding and campaign content used without permission. Not affiliated with or endorsed by the Biden For President Campaign, Biden 2020, or JoeBiden.com
©2020 everydayamericanjoe.com