Internal Design System

    Table of Contents
  1. Internal Goodbyte is a platform.
  2. The design should not only reflect the site’s values, but encourage them.
  3. The core Goodbyte branding is referenced, but not copied.
  4. At the end of the day it should be pretty.

Internal Design System

Internal Goodbyte is a platform.

It is a space to explore ideas, grand visions, and unfinished thoughts. The site is open everyone within Goodbyte, as a platform to build the idea of Goodbyte — and then to work backwards and document it all. Internal Goodbyte’s goal is to encourage us to create and experiment with our philosophies. To work through our beliefs, and to leverage our collective thinking.

This is how Internal Goodbyte is designed in a “it was conceived to preform this function” type of way. This document goes through the design (in a “I like the design on that T-shirt” type of way) that is derived from, and works to achieve, that function.

+-------------------------------------+
│ o o o  (________________________) + │░
│ _____                               │░
│ ____                     Internal   │░
│ ______                   Goodbyte   │░
│ _____                               │░
│ _____                               │░
│ ______                              │░
│ ___                                 │░
+-------------------------------------+░
  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

In a less kumbaya way: it is a website, this is why it looks like that.

The design should not only reflect the site’s values, but encourage them.

The power of design is not to represent ideas iconographically (though it does do that), but to influence behavior (see: “Norman doors”). The design of Internal Goodbyte is intended to guide the writer of the content as much as it guides the reader. In practice, these are the same people, but in different contexts.

Goodbyte, but not quite

It is important for both readers and writers to remember the particular environment they find themselves in: within the scope of “Goodbyte”, but not in the public eye. We can create documents that are not intended for external use; or documents that don’t make sense to publish as Goodbyte; or perhaps documents that just aren’t quite ready to release. Yet, these are still writings that feel at-home within the idea that is Goodbyte. As the name suggests, it is Goodbyte but with an internal audience.

The design of the site references Goodbyte’s brand, but alters it to convey that this site is not Goodbyte proper. The exact way in which the design attempts to convey this in-between-existence is further expanded on in a later section.

Collectively owned

The pages on this site (and even the site itself) are owned by all of us. We can add to them, edit them, and use them as we wish. For this to be (and feel like) a truly collaborative space, it is not enough to simply say it.

The site uses git to allow any member to contribute easily and without oversight. There is no authority you must report to, and no approval process necessary*. The codebase can be distributed across any and all of our computers with no owner in control of the site or its content (though Quinn does own and control the domain).

* You should still open a pull request and add the previous authors if you plan on making any considerable changes to a preexisting document.

It is also necessary for content to lack attribution. For something to be co-owned it can’t say “by Jack” at the top. Readers should feel comfortable becoming writers of the content they’re consuming, and that requires not thinking of the content as “by” someone in particular (and thus have to implicitly request it be changed, “by Jack and Quinn” or “by Jack, Quinn, and Max”, etc).

This is not to say attribution is actually bad or that we should do away with the concept; after all, it is important to understand the context and biases the author comes with. And this information is available: once again by using git. Each file can be inspected for its history and collaborators, revealing a far more accurate picture. Attribution in this way is granular to the actual changes made (and when), while still presenting a final product that is attributed to us all.

Open to edits

As an open platform, Internal Goodbyte needs to not only communicate co-ownership, but encourage collaboration. It does this first and foremost by including an “EDIT PAGE” button on every document. Pages in the sidebar are ordered by last updated, surfacing pages under active development to the top.

In a less direct way, the design signals that the content is not quite finished. A page that is too beautiful is a closed door. You would never paint over a finished painting. But leaving a page slightly wonky makes it more of an unfinished basement wall than a masterpiece. The font choice of Kommuna — a purposefully uncomfortably awkward typeface — helps convey that unfinished basement. The letterforms have been haphazardly stretched into monospace proportions (subtly moving it mentally closer to your IDE, and subsequently a work under-development). From Roman Gornitsky’s post on the creation of the typeface:

It’s one of the very first things that you learn: you absolutely can not stretch type, not even by one percent. Because stretching the type destroys the elaborately organized harmony of the typesetting. But in our case, destroying the delicate harmony of proportional typesetting might be exactly the thing to look for.

I’m not quite sure what he’s referring to as “our case”, but nevertheless he’s right: destroying the delicate harmony of proportional typesetting is exactly the thing we’re look for.

Ideas expanded on

The final behavior the design hopes to encourage is one of writing. Often (and I speak from experience), writers bury the lede, hoping to reveal their point at an epic climax. Often (and I speak from experience), readers just find it hard to navigate. The Internal writing styleguide suggests that documents are given descriptive yet concise titles, and headings that not only capture the thesis of the section, but can be strung together to form a logical thought.

These are writing best-practices that make documents like the ones this site is for as clear and easy to navigate as possible. The design encourages this style by quite literally stringing the document’s headings together into a paragraph itself. If you want this portion to actually look good, you gotta make your headings descriptive!

+-----+-----------+---------------+
|     |           |               |
|     |           |               |
|     |           |               |
| (1) |    (2)    |      (3)      |
|     |           |               |
|     |           |               |
|     |           |               |
+-----+-----------+---------------+

The site’s layout (at least, on desktop) reflects the expanding nature of this writing strategy. Titles (1) are given the smallest space, as they should be the most concise wording of the documents purpose. The pages’s outline (2) is given twice the space, and the page’s actual content (3) is given three-times the space, as it is the most expanded version of the idea. This also affords the reader to work in reverse: distilling the idea further and further.

The core Goodbyte branding is referenced, but not copied.

As a part of the Goodbyte brand, Internal Goodbyte should resemble and reenforce its brand voice. However, Internal Goodbyte is its own thing — and not a public thing either. This gives us room to experiment, as well as gain some practical benefits:

  1. The Internal site can work towards its own design goals.
  2. There is a clear visual separator to differentiate public vs. private space.
  3. We can discuss and display the core brand, without the discussion space itself seeping into the conversation.

We can create something that stretches the core brand into a new context. Still referencing the brand at-large, while distorting it at will.

Palette


The colors are green. Big surprise. These greens are considerably desaturated, presenting something more akin to a calculator screen. This helps achieve a more academic look that is easier on the eyes for extended reading. As a non-public brand, it doesn’t require the high-energy colors of Goodbyte proper.

Typography

As previously mentioned, Internal Goodbyte uses Kommuna from the type foundry The Temporary State. Like the main brand’s Editorial New, it’s a revived and narrowed edition of a classic serif category (Clarendon and Garamond, respectively).

Unlike the Goodbyte brand, however, there are no supporting typefaces here. The single font (in its single style: Narrow 400) serves as a display and body face.

It also differs in its proportions; the Internal brand need-not add an (additional) monospace — it is already! The benefits of such a choice have already been listed above, however, Roman Gornitsky adds some more from his (partially tongue-in-cheek) article Monospace Typography:

The abandon of proportional typesetting is a long awaited and necessary reform of the Latin alphabet and only the bourgeois tastes of the general public, who adore the outdated “beauty” of proportional typesetting, hinder the inevitable progress.

When it comes to everyday use, the proportional typefaces may be acceptable for English, German or French, but are completely unsuitable for JavaScript, Python or C++. Despite the popularity and wide spread of programming languages, one still requires a special text processor in order to read or write, as the default proportional font of an e-mail or messenger interface will most likely render your code unreadable.

The mere convenience is not the only advantage here, as the switch to monospace typography will allow us to develop a fully new perspective on the layout systems in general. The grid revolution of the Western modernism will finally be expanded further, as now not only will we have the opportunity to align elements of our design to fixed horizontal (baseline) grids, but will get a regular vertical grid as well, which will open completely new approaches to the text composition and alignment.

And the last but not least, the monospace typefaces present much better opportunities for non-verbal communication:

     |\_/|
     | O o   Woof!
     |   <>              _
     |  _/\—————_____   | |))
     |               '——' |
 ____|_       ___|   |___.'
/_/_____/____/_______|

Illustration

The illustration style of Internal Goodbyte is that of Goodbyte proper: ASCII art. As Gornitsky points out above, such an art form becomes available when using monospace type. ASCII art not only lowers the bar of entry (all you need is a text editor), it also speeds up page load times as no additional images must be downloaded. The style also ensures consistency across the brand despite many participants, since the intense limitations keep all illustrations within the same aesthetic range.

At the end of the day it should be pretty.

It is silly to pretend that all these decisions are purely practical or driven by measurable user benefit. Some things are just to look pretty. And even those that are for “more important” reasons are done with a bias for aesthetics. After all, our second tenet is “Make it nice”.

You may correctly question the use of “pretty” to describe anything here. Pretty weird, perhaps. And it’s true to a degree, though I do find beauty in the weird and brutalist. However, this is a private site and that allows us the freedom to create something beautiful to us. It can be too pretty to be widely usable, and too weird to be widely considered pretty.