logo + type + color exploration

[thundernixon]

I did some sketching on paper and on screen, and I'd like to get your thoughts, @chrisdhanaraj.

Logo

I kept coming back towards book shapes, as these come so readily from combining an M and ↓.

So, none of these are totally final yet, but here are a few directions I like (try to ignore color for now – that can obviously change around):

1. The first is basically an extension of the pictographic logo of MDX, which itself extends a common icon for markdown. I mostly like it, but it's hard to give a similar "monolinear" stroke look to the book icon without it looking like a pizza box, so I had to give it a bit of contrast. If this is a route we like, I might want to play around with this some more.
2. The second is one direction we could take the book-shape monogram. It's more solid and the arrow is slightly more abstracted.
3. The third also takes from the book-monogram, but makes it monolinear so the tail of the arrow can be included without the fussy shape that happens if it is kept in the more-solid version. Aside from aesthetics, making it monolinear might allow for some fun CSS animations. If we like this direction, I would play around with angles a bit, to see if the diagonal of the X looks better when parallel with the other lines.

Type

For type, I looked at a few combinations of open-source and system fonts, to make it easy for others to download and run this on their local system. Below are a few I like, but we would obviously want to try these out in the actual theme to get a better idea how they work together.

I haven't yet tried these in-context. For some reason, even though I was able to serve the theme example yesterday, it's failing for me today, even on previous commits 🤔... However, I think that Inter UI / Plex Serif / a system mono might be my preferred route. I think it would give it a look that is somewhere between default, bookish, and modern.

Color

On the whole, I think it might be fun if the system used a Gatsby-like purple, but its own logo and typographic palette. This would give an indication that it's a Gatsby theme, but allow for its own vibe. Also, purple is just a useful color – it's vibrant while retaining readability. Again, though, this choice would need further design exploration, in the context of the actual theme.

[chrisdhanaraj]

@thundernixon

First off, this is awesome and thank you so much for the help! Let me go section by section

Logo

I really like the direction you're going with this, especially this line combining an M and ↓. So I'm leaning to 1 - when I start building this out more and more documentation, I think I'll be playing up the mdx side of this much more (also - I named it because of that so :D). The one thing is throwing me off is the serif font for the name (mdxbook) - the book part is inheriting from gitbook, but in general I kind of want to stay away from serif.

As a sidebar, when I think of open source logos I actually remember, here are a few

• https://github.com/mdx-js/mdx
• https://github.com/zeit/next.js/
• https://github.com/avajs/ava

Type

HAH I like the use of Plex :D IBM will be so pleased. Let me know what error you're getting with running the server, let's debug it so we can try out a few. As far as the stacks go, I'd prefer if we went something like this

Header: Web font Body: System font Code: Web font / System font

I want the main content to not get blocked by font loading, but I don't mind adding the typographical flair to the header and code blocks. For your preferred Inter UI / Plex Serif stack, why the choice of Inter UI over Roboto? One of my designers here was actually tossing around Inter UI as an option for a while and then tossed it, so curious on your input

Color

Good call on the Gatsby purple, I like that

[thundernixon]

Happy to contribute! This is a project that might come in handy for me at some point, and it combines several things I am excited about.

Logo

Thanks for the example logos! Those are some nice ones.

I'm a little unclear what you mean by these two seemingly-conflicting statements:

I really like the direction you're going with this, especially this line combining an M and ↓.

So I'm leaning to 1 - when I start building this out more and more documentation, I think I'll be playing up the mdx side of this much more

By 1 do you mean the top row, or the middle row?

I've played around with the abstracted route a bit further, and if we want to embrace more of a next.js/react futury aesthetic, we could do something like this:

As a visual bonus, it includes several < and > shapes as a knod to MDX syntax. Obviously, though, people may not see the monogram as easily. Also, I'm not sure if this is a bit too heavy-metal. ¯\_(ツ)_/¯

One reason I'm experimenting with serif type in the logo is that without it, the word ends up reminding me of the "MacBook" wordmarks – especially if it's all lowercase.

Because part of it is meant to be read as an acronym and part is a word, it doesn't work quite as well in all-caps, either:

Type

I am attracted to serif type for body copy (and potentially even as part of the wordmark) because it reflects a theme of bookishness and readability. One thing I like about reading the Gatsby docs is that they use Spectral for body copy. This pushes it away from a stock "docs" look, and a bit towards long-form content like Medium, the NY Times, or books. IBM Plex Serif just happens to be one of the best-made serif typefaces available as an open-source font. It's made by amazing designers and got a really careful treatment in the fine details like kerning and hinting, which not all open-source fonts do to quite the same level.

As for InterUI over Roboto, the main benefit is that it a bit fresher, and has a slightly higher-end look. Part of this is due to the fact that Inter UI is close to fonts like SF and Graphik, while Roboto is used everywhere, to the extent that it looks like less consideration was put into the product. Of course, this isn't completely fair, as Roboto is certainly readable and probably slightly better-spaced, kerned, and hinted. Still, InterUI just looks nicer to me. As a bonus, InterUI will most likely be available as a variable font sooner via Google Fonts (I'll be working on this in the coming weeks!), or we could just use the existing WOFFs to self-host it now (I'm not sure which is the more performant route). Because InterUI is close to SF, we could potentially make the sans stack SF, then InterUI.

For mono type, if we want to have something playful my favorites would be Zeitung or Gintronic. It looks like either would be about 80€ for Roman + Italic web use. As for open-source monospaced type, Roboto Mono could actually work well for something straightforward, Plex Mono is great but might be boring if we do use Plex Serif, and Source Mono is nice but feels maybe slightly "soft" to me. I think Space Mono is better suited for headlines or posters than for code, and Dank Mono is ... not my favorite.

[thundernixon]

Here's a less-metal version of the above:

[chrisdhanaraj]

I am a big fan of the last one (I am also a huge sucker for gradients).

Type:

Well you sold me, that makes sense! Were you thinking Inter UI header, Plex Serif body, and then Zeintung / Gintronic for code? Maybe a less known one is also Dank.sh - I actually use Dank for basically all my code stuff right now locally

[thundernixon]

Cool! Yeah, I think this last one is the strongest, and the straightforward, sans-serif wordmark seems to hit the right tone (that D-X needs some kerning, though...). I'll tweak it a bit in Illustrator to make things fit a bit more precisely, and I think we may have it. If there's a good reason to animate this, I'd have fun taking a go at it with this one.

Type

Dank Mono is fun, and I'm glad it's picked up some usage! But ... I personally find it pretty distracting, and always end up changing or overriding it on sites, because some of the letters really throw off my reading.

My preferred type stack at this point (admittedly, without trying these in context, though the context will inevitably change with typographic / visual design updates) is:

• Headings: 'Inter UI', sans-serif`, possibly with SF on macs, but with Inter UI for the logo either way
• Body: 'IBM Plex Serif' (maybe even with a sans-serif fallback...? Serif fonts like Georgia or Times don't match it all that well)
• Code: Zeitung Mono is my favorite with Plex Serif. I think it manages to look warm but also very precise, so it plays well off of Plex. It's best when spaced slightly tighter than default ... for whatever reason, the normal one has tracking that is noticeably wider than most other monos. I also like Gintronic, but I feel like maybe it looks a little too ... casual? Also, the Gintronic italic isn't quite as fun as others. Plex Mono is really amazing and is open source, but may feel a bit too IBMy if paired with Plex Serif. 😄Operator Mono is fantastic as well, but it might get a tad too much "airtime" already (just being the font of choice for CSS Tricks, Wes Bos, previously Styled Components, and probably more).

GitHub probably compresses these images too much to be very useful, but here's how I looked at things on my end so far:

[thundernixon]

Here are the images above with a decent resolution: type-samples.zip