Avoiding Babylon design system

Avoiding Babylon – presently an underdog Catholic podcast and YouTube channel – may someday become a sui generis brand in its demimonde. But why wait? Act like you’re a globe-spanning titan already by putting in place a design system that will make Taylor Marshall (gender pronouns: Dr./Doctor) look like a clown mass.

(What precisely is a design system? We’ll get there.)

Current logotypes

• To the extent that display type in YouTube thumbnails has any “typography” at all, it falls within the category of casual typefaces – yes, like Comic Sans, but also like the fonts seen on the covers of mid-century pulp novels, one of which has almost the best name ever: Klang.

  
  

• Variant typefaces can be found. Sometimes they’re also in the casual class –

  

  – and sometimes the fonts are just wrong, as Helvetica, a Cholla manqué, and the unwinning mix of monospace and stencil all are:

  
  
  

• Peter’s crossed keys – the Keys of Heaven – themselves open up any number of possibilities by virtue of being symmetrical and by pointing to all four corners. The obvious course of action would have been to typeset an A to the left and a B to the right. Not quite:

  

  (Letterspaced sansserif caps are a non-starter. Why is AB in its own field?)

• Apart from rare digraphs, like the AB digraph in Benguiat –

  

  – there really isn’t a way to make an A next to a B typographically interesting.

Borders

Adding a border violates the fundamental rule of graphic design, which can be articulated as “1+1=3.” (Draw a vertical line on a blank page. How many objects do you have? One. Draw another line close by. Now how many objects do you have? Three – two lines and the space between them.)

(Why are the colours reversed?)

Sometimes adding a border, while sometimes not, is the worst of both worlds.

Colourways

The yellow/red combo in present use is too easily dismissed as mustard/ketchup. Terribly obvious, yes, but the colour combination invites such banalities.

Yellow is the signature colour of Avoiding Babylon. And of a lot of things. Peter Saville so famously delivered the posters for the first Factory Records live performance late that the mythology made it into cinema, viz 24 Hour Party People: “It took ages to get the right yellow.”

Actually, let’s learn a bit more from Peter Saville:

What is Manchester? I hadn’t lived there for 20 years, and I didn’t know.... “GUNS, DRUGS & NO MONEY.” That’s an idea. A similar piece that I learned about at the time was Uwe Loesch’s proposal for the city of Leipzig. The city’s colours were blue and yellow, and Loesch proposed that on any communications material, a yellow space would be left. The user could put then any image they wanted there – if this person works in Leipzig, they can represent the city however they want.

You don’t need an entire field of yellow, least of all as a full-bleed background. Yellow will function as a trademark accent colour. (And we may wish to tweak the specific shade.)

Legibility and compositing

• The entire massive white-on-black or black-on-yellow Avoiding Babylon logotype, with or without border, is too big and too conspicuous... all while communicating less than one would expect.

• Existing logotypes do not work as any kind of background, worst of all as backgrounds behind video frames in livestreams, where bits and pieces, as of individual letters, poke out. (What pokes out will even change as video frames do.)

• Some renderings of Peter’s keys use the equivalent of an alpha channel to make the background transparent even as the background of the AB letter pair remains solid.

  

• Video bug of keys or letters plus keys, as in top right corner during livestreams, is too easily misread as the bug of the underlying video frame, i.e., of that guest.

So then: A design system

In a design system, positions or roles of components stay put while their specific form might change. We know this all too well from corporate logos transformed into rainbows: You still recognize what the underlying logo represents.

From casual to cursive

Nobody expects a Catholic media upstart to use cursive, or script, type. But you won’t use just one script typeface. Or rather, you’ll use one cursive font with umpteen built-in variations.

Batshit beanpole Dutch type designers Underware (the X in the typography of The X‑Files is theirs) have a nice new script-font system called Scribo. It’s five variant fonts whose characters almost never look the same, very much like natural handwriting.

You can render Avoiding Babylon or AB in Scribo and it’ll always look different, though perceptibly consistent and unified. (But see below concerning case.)

Half a border

The type in the new logotype will never be yellow. But the border will be – except said border won’t look like four walls. Instead, just two sides that join at a right angle will be rendered. In yellow, of course. (Stroke endings, and the actual join[t], can be chamfered, i.e., cut at angles, so the whole thing doesn’t look like a T‑square spray-painted yellow.)

Which two edges? You can vary that depending on context.

• Bug located at upper right of screen? Set the top and right borders of the imaginary logotype frame in yellow.

• Icon on Twitter or similar, situated at left? Then set the top and left borders in yellow.

• Animated full-screen opening for a video? Every one of those can be different because Scribo renders differently. But break expectations by animating a yellow brushstroke between the words Avoiding and Babylon.

No more SHOUTING in CAPITALS

Avoiding Babylon can remain “Avoiding Babylon” in a full-screen opening... but can become “avoiding babylon” (two lines, right-justified) in an onscreen bug. Then you can animate that bug so the full words shrink back into two initials, variants of which Scribo will be happy to provide. (Initial caps or all lower case? That too can be varied.)

Your design system, in a nutshell

“Avoiding Babylon” in ever-morphing script type, with yellow corners and rules that change position according to need.

Even the keys can morph

And just as people grow accustomed to type subtly changing while staying familiar, and just as they come to expect a yellow line or two, you really pull the rug out from under them by altering Peter’s keys from time to time. Or just using a different pair in a new idiom, some of which could be custom-drawn.

And on that topic...

Icons

“AB” does not cut it as an icon. (The one you’re using is sometime even circular. Everything else has been a square or a rectangle.) Peter’s keys are your icon.

The problem here is that icons are fantastically difficult to design, not least in what can easily mushroom into a couple of dozen sizes and formats. 12 × 12‑ and 512 × 512-pixel icons are two very different designs, for example. (Podcast artwork is generally 3000 px square.)

For this, hire the experts at Iconfactory. Yes, they cost – but we’ll get to that.

Merchandise

With so many variants (a hard-to-calculate but large number, certainly), mass customization of merchandise becomes possible. Everyone gets an individualized Avoiding Babylon T‑shirt, an exact clone of which nobody else has. How curious that these one-of-a-kind shirts end up priced rather high.

Your design system as revenue-generator

The way to earn money in a medium where everyone who isn’t listening to your podcast is watching you is to look like you don’t need the money. (And even podcast listeners see your artwork, unless they’re blind.)

None of your competitors offers anything resembling design. Few have “visuals” in any sense; indeed, Taylor Marshall (Dr./Doctor) relies on all-American masculine presence as a form of branding.

This proposal closes the way it opens: By calling you underdogs. Act like you own the place, and are stars already, and naturally and ineluctably dominate the medium. You do that by design, in this case a design system.

It’s going to cost up front. (I will never ask for so much as a penny.) You’ll have to learn entirely new disciplines, like not using fake-ass free fonts you downloaded from Lord knows where, then banging something out in no time flat. You’ll need a style guide, which someone you know may just be able to put together. You should indeed retroactively redesign every thumbnail and poster.

But once the new design language starts rolling out (of course you’ll shoot a video just on that subject), suddenly not only are you worth listening to but worth looking at. “Hey, these guys are doing great. I can throw them a few bucks” will be the reaction from supporters – and from neophytes who happen across your channel and podcast.

Looking like you’re worth the money makes it easier to say “We’re worth your money.” Because that would otherwise be a lie, and lies make Baby Jesus cry.

Not included here

• Note that this proposal, to the extent it even is one of those, does not come with mock-ups. Because I’m not a designer and cannot produce them.

• Type on the Web site, and type treatment of thumbnails (rather important), are also not treated here.

2023.08.30