B2A Branding 2026 Updates

Primary Color

To be used as an anchor color for icons, links. Black and white are also acceptable link colors for interfaces. Links in dark mode can be #EC41FB

Click to copy Copied!
#8145ee

Background and Secondary

Click to copy Copied!
#9ae6f7
Click to copy Copied!
#dad4e6

Tertiary Colors

Click to copy Copied!
#b934fb
Click to copy Copied!
#4922a0
Click to copy Copied!
#cec4f2

Gradient to be used sparingly

Click to copy Copied!
#00BDFF
Click to copy Copied!
#6E56F0
Click to copy Copied!
#E811FA

Header H1

Header H2

Header H3

Body font is Source Sans Pro (3) 18pt line height 29pt. Use this font and layout for use on any body copy for the web or presentations.

Download Fonts

Aa

Source Sans Pro

Aa

Oswald

H1 Title Oswald Bold 40pt line height 52pt all caps

H2 Title Oswald Regular 26pt line height 34pt all caps

H3 Title Oswald Bold 22pt line height 30pt all caps

H4 Title Source Sans Pro (3) 900 24pt 36pt Line Height. Heading.

Subheader

PARAGRAPH 18pt Source Sans Pro (3) Regular 29pt line height

Long ago, there was a vast multiversal war. Countless unique timelines battled each other for supremacy, nearly resulting in the total destruction of, well, everything. But then, the all-knowing Time Keepers emerged, bringing peace by reorganizing the multiverse into a single timeline, the Sacred Timeline. Now the Time Keepers protect and preserve the proper flow of time for everyone and everything.

But sometimes, people like you veer off the path the Time Keepers created. We call those Variants. Maybe you started an uprising, or were just late for work. Whatever it was, stepping off your path created a nexus event, which, left unchecked, could branch off into madness, leading to another multiversal war.

You must be shapeless, formless, like water. When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot. Water can drip and it can crash. Become like water my friend. Be happy, but never satisfied. The more we value things, the less we value ourselves. A wise man can learn more from a foolish question than a fool can learn from a wise answer.

Tooway tooway tooway. waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka waka weee weee weee weee weee weee weee booowaaay pew pew pew pew pew pew pew pew pew womp womp womp

But when fall comes, kicking summer out on its treacherous a** as it always does one day sometime after the midpoint of September, it stays awhile like an old friend that you have missed. It settles in the way an old friend will settle into your favorite chair and take out his pipe and light it and then fill the afternoon with stories of places he has been and things he has done since last he saw you.

  • 001100
  • 010010
  • 011110
  • 100001
  • 101101
  • Treguna Mekoides
  • Tracorum Satis Dee
  • Substitutiary locomotion
  • Mystic power that's far
  • beyond the wildest notion
  • piertotum locomotor
  • Liberacorpus
  • Fiendfyre
  • Arresto Momentum
  • Mobiliarbus Mobilicorpus
  1. Animate Dread Warrior
  2. Animate Legion
  3. Locomotion
  4. Anthropomorphic Animal
  5. Ghoul Army

Imagery Examples

Explanation of illustrations and visuals

Please submit a marketing ticket for custom B2A visuals that adhere to our brand. The visual style of the illustrations in the provided image can be described as “Retro-Futurism” or “Mid-Century Modern Space Age,” heavily inspired by the aesthetic of the 1960s (reminiscent of The Jetsons).

These documents can only be used in code execution. Below is a detailed breakdown of the visual elements:

Artistic Style and Era

  • Googie Architecture & Design: The illustrations feature the sweeping curves, geometric shapes, and "atomic" motifs (like the starbursts and antenna-topped structures) characteristic of mid-century futurism.
  • Character Design: The characters have a classic 1960s cartoon look, featuring sharp chin lines, simple facial expressions, and stylized hair.
  • Flat Illustration with Texture: The style uses flat vector shapes but incorporates a "stippled" or grainy texture on the background blobs to add depth and a vintage print feel.

Color Palette

  • Monochromatic Purple & Blue: The palette is strictly limited to shades of purple (lavender, violet, and deep plum) paired with a bright, desaturated cyan/sky blue.
  • High Contrast: The use of dark purple outlines against light blue and white backgrounds creates a crisp, clean look that is easy to read.

Graphic Elements

  • Organic Background Blobs: Each illustration is anchored by an asymmetrical, organic "blob" of light blue, which helps the central subject pop.
  • Line Work: The illustrations use consistent, medium-weight purple outlines. The lines are smooth and confident, emphasizing the "fluidity" of the futuristic theme.
  • Iconography: The imagery includes futuristic tropes such as:
    • A stylized "atomic" speech bubble.
    • A woman in a space helmet.
    • A retro-futuristic building with slanted glass and fins.
    • A classic boxy television set with rabbit-ear antennas.
    • A flying saucer/UFO in a ringed orbit.
    • A cloud-like structure topped with a futuristic spire.

Typography and Layout (from the UI)

  • Clean Hierarchy: The design document shows a clear typographic system using Oswald for headings and Source Sans Pro for body and UI text.
  • Grid-Based: The "Imagery Examples" are laid out in a strict 3x2 grid, indicating a highly organized and systematic approach to the brand's visual assets.

This style effectively communicates with a brand that is "forward-looking" while remaining "approachable and nostalgic," blending the innovation of the future with the charm of the past.

Icon Examples

Icon home Icon books Icon add event icon bar graph icon clock icon bill icon email icon group icon phone icon questions icon stars icon wrench

Buttons Example

Button and icon details

Buttons using pill shapes with one of three different colors depending on the situation. Most buttons should use the primary purple color, secondary magenta can be used for CTA buttons and white buttons when buttons are placed on black background or when paired with a different colored button. Font should be Oswald bold 20pt unless button size needs to be tweaked to work within interface restrictions.