Code

Code

Forty Six

Forty Six

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.’

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.
For Designers & Content Creators
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

More About Faith & Human Decency

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.

Who We Are
#UnitedForBiden

Design

Design

Best Practices

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

Files

Fonts & Misc.

Decimal Black
Decimal Bold
Mercury Roman
Brother 1816

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.

46 Branding

The official Biden for President logo was fantastic. Beyond invoking the traditional Red, White and Blue American flag colors - it literally read 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. Americans got used to associating "Biden" with "President" every time they saw that logo.
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.

New Branding

We are making updates live and as we can, to reflect the new look of the Biden Administration. Decimal and Mercury Roman (bold or heavy weights, all-caps with appropriate spacing) will be detailed shortly.

  • Joe Navy

  • Biden Blue

  • Amtrack Gray

  • Presidential Bronze

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

Basic Marketing Principles

The following are guidelines that can be trusted to result in clean, easy-to-read and memorable graphic content that follows the Biden-Harris Administration's branding. Following these simple guidelines will be effective and have the best chance at viewer engagement and 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 Decimal Black for headings, Decimal Bold for Subheadings, Mercury Roman in bold (with letter spacing) for body. Paragraphs can use normal (non-caps) Decimal.
  • 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

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.
Chris

Written on

Video coming. I haven’t done one of these in awhile, but today I want to reach out and specifically to Christians about how off track Christianity has strayed in America from the teachings of Christ. As a former Atheist, this isn’t to favor any belief, but to address a problem.
Chris

Written on

RT @Sbh08Mae: 4 Days Until Sanity Makes A Come Back #wtpBLUE #wtpBiden #DemVoice1 #Fresh #BluePath
Chris

Written on

We honor those with the Courage to stand against hate. “Non-violence is a powerful and Just weapon. It enobles the man who wields it. It is a sword that heals” - Dr #MLK Jr #BlackLivesMatter Give People Light. They will find a way. everydayamericanjoe.com 🙏
Chris

Written on

From the beginning when we started this campaign, it’s always been about The People. It’s about us. Everyday, regular people. When everyday people thrive—everyone thrives. We didn’t win by being elite or special. Just real, everyday Americans. Be as you are. And #KeepTheFaith
Chris

Written on

Four hours of policies have been added to our website today that outline specific policy for Black Americans, Racial Justice and Disadvantaged communities of color. By no means a complete catalog of the Plans—but much more than we had. everydayamericanjoe.com/2021-we-the-pe… 🦅#BlackLivesMatter
Chris

Written on

Our All-New Newsroom is live and feeding #PresidentElectBiden #PresidentBiden #InaugurationDay #VPHarris news now! Save on your Home Screen and get all the latest #BidenHarrisToSaveAmerica news as it’s happening #202Won #ForThePeople -Allies of the Light everydayamericanjoe.com/newsroom
Chris

Written on

👋 @feliciaw5853 😉 This ones all you.
Chris

Written on

On the Road Ahead and where we go from here—what to do with the Trump’s and the permanent damage they’ve caused for our Democracy and our Nation, I call on all #Resistance #Democrats and #Americans to learn from the wisdom of history. The Japanese Monarchy is the oldest..
Chris

Written on

I’m so happy to see States stepping up their efforts. It’s appalling how low we rank. Our children and our teachers deserve so much better. We need more of this, and we need the #BidenHarris Administration’s plan to invest in our education nationally. everydayamericanjoe.com/2021-we-the-pe… twitter.com/Sbh08Mae/statu…
Chris

Written on

Sound Up...It’s the Final Countdown. #OneScaramucci #PresidentBiden #VPHarris #BidenHarris2020 #202Won #wtp #wtpBlue #FreshVoicesRise #WeGotAVoice @Everyday_Joes everydayamericanjoe.com 🦅🇺🇸

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

Latest News

Newsroom

The Atlantic

Pew Research Center

The New York Times

Fox Settled a Lawsuit Over Its Lies. But It Insisted on One Unusual Condition.

Written on

Why did the network insist an agreement with the family of a murdered young man remain undisclosed until after the election?

Continue reading on The New York Times »

Inside Twitter’s Decision to Cut Off Trump

Written on

Jack Dorsey, the chief executive, had reservations about locking the president’s account. But the calls for violence that his tweets…

Continue reading on The New York Times »

After Banning Trump, Facebook and Twitter Face Scrutiny About Inaction Abroad

Written on

Human rights groups and activists have spent years urging the companies to do more to remove content that encouraged violence

Continue reading on The New York Times »

How Trump’s Worldview Is Ingrained in State and Local Republicans

Written on

As President Trump prepares to exit the White House, his ideas, including falsehoods and conspiracy theories, continue to exert a…

Continue reading on The New York Times »

Here's The Deal Podcast

NPR Politics Podcast

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
©2019-2021 everydayamericanjoe.com
Designed & Developed by The Microtechs