(You may have received a duplicate notification for this post: Patreon lost all the images in the last one, so I had to recreate it! Bluh…)

So far, I’ve been using Quantum Country’s design language for Orbit, just to help me focus on all the architectural work I’ve had to do. That was a useful constraint for a while, but Orbit’s almost ready for its first publications, so now it’s time to switch gears: how might Orbit’s visuals reinforce its ideas?

Orbit has two enormous visual design challenges.

First: Orbit initially appears as an embedded “guest” inside some other publication. As a guest, it must behave itself! It shouldn’t clash with the host’s styling choices; it shouldn’t overly distract from the surrounding content. On Quantum Country, we just used the same design language for the interactive prompts and for the book itself. You collect prompts on Quantum Country, then review them on Quantum Country. But the model for Orbit is that you collect prompts on Quantum Country (and other places), then you review them all, in aggregate, in Orbit. This is much trickier! The reader navigated to Our World in Data (or whatever), but then this weird “Orbit” thing in the article is asking them to sign up, and later they’re getting an email from Orbit asking them to do stuff. So Orbit needs to introduce itself as a distinct “partner” entity while you’re reading the host publication. Orbit’s a research platform… but given these constraints, it needs to have a “brand,” to feel something like a “product.”

The other challenge is more of an opportunity: how might Orbit use visual language to transcend the Spockian, educationalist tendencies of tools in this space? How might we emphasize “engaging more deeply with what matters to you,” not “how much trivia can I memorize”? Spaced repetition memory systems make memory a choice, but retention is not valuable for its own sake. Memory is valuable insofar as it helps people do whatever gives their lives meaning. Unfortunately, the dominant culture around memory systems leans heavily toward memory for its own sake. You’ll see people who try to remember every detail of everything they read (“just in case”), but without seriously engaging with the texts in any other way. One gets the sense that they’re terrified of ever “losing” anything; you see the same obsession drive many “note-taking” enthusiasts. I don’t want to serve or expand that culture. But early adopters for my work will often come from that culture. This is a real hazard.

My visual design chops are not up to these challenges, so I was thrilled to collaborate with the wonderful Nio Ono for a few weeks in June on art direction for Orbit. (My thanks to Taylor Rogalski for the introduction!) I should be very clear that Nio is the hero behind the work you’ll see here: I brought a compass, but she drew the map! I’ll need to walk these trails myself in the coming months, so I’m writing this post as an exercise—to more deeply understand and interpret these visual ideas by explaining them to others.

Before we dive in: I realize that many of you have never interacted with nascent design work! Let me share a few words about how to engage with this material. The purpose of work in this phase is to open doors, to find some fingerholds in the problem space, to create momentum. Since this is a visual exercise, it’s particularly about exploring how certain aesthetic approaches feel. You’ll see imagery that looks like screenshots of interfaces, and it’ll be tempting to interpret them concretely, as interfaces. They are, in one sense… but they’re really about trying to see visual language, in context. Squint your eyes a bit; pay less attention to “interface” and more attention to vibe. This exercise is about exploring the textured interplay of symbols, type, grid, color, etc. There’s an annealing process between these visual primitives and the interface they inhabit. Before this sprint, I’d partially defined Orbit’s interface, but I couldn’t go further without developing the visual language. Likewise, we’ve now spent some time on the visual language, but we can’t go much further without taking some time to push the interface structure forward using these ideas. The design will go around in circles, teetering between form and function, before things finally settle. 

Ethos

What’s Orbit’s “personality”? What ethos is it trying to communicate? To give us a rough compass, we started with this aspirational trio of principles:

earnestness, ardor, curiosity — not: duty, instrumentalism, grinding

Orbit helps you deepen your relationship with whatever you care about most. The activities are largely cognitive, but your relationship to the material is emotional. It’s for ideas and imagery that you could talk about all night. Orbit’s for the stuff which gives your life meaning. 

Orbit is not about eating your broccoli. It’s not for things you think you “should” be engaged with, things which require you to summon your willpower. It’s not “educational” in tone. Orbit results in learning, but the goal isn’t to learn: it’s to be able to do something that brings you meaning, in the world.

wu wei, effortlessness, “trust the process” — not: inboxes, graphs, knobs

Putting something in Orbit is like gardening. You plant the seeds; you trust that they will grow and mature. You’re not terribly concerned about the specifics of when or how often you’re going to see a given item. You feel a kind of lazy confidence that the timing will be vaguely reasonable; that over time you’ll internalize everything you add; that over time items will move to longer orbits so that they don’t overstay their welcome. Your Orbit never feels “too full.”

Your daily Orbit practice is like your daily meditation practice. You’re never “done,” exactly, and you don’t have a progress graph going up and to the right. Like your meditation practice, you don’t and can’t ask for the specific outcomes of a specific exercise. But you show up, and you follow the breath, and over time, you see more clearly.

Orbit is not an inbox which demands grooming. It’s not a red badge with a three-digit number. You don’t “dial in” your Orbit items. You don’t obsessively track the “progress” of any one item (though you do feel some broader arc of “progress”).

diligence, seriousness, agency — not: complacence, passivity, deference

Meditation involves effortlessness at one scale but diligence at another. You show up for practice every day and follow the instructions, trusting that the activities will help you become wiser without understanding the exact mechanism. But that doesn’t mean that meditation is easy! If you’re not engaging seriously, fifteen minutes can slip by without you clearly observing a single breath.

Likewise, Orbit involves both effortlessness and diligence. You show up to your daily session without specific expectations or demands, but you engage attentively with what you find there. Orbit is ultimately a tool for serious people. It’s about going deeper, understanding more clearly; it’s about dissatisfaction with prior methods, with just hoping you’ll remember to think about something.

Authors sculpt the Orbit experience by providing prompts, but Orbit is a tool you must wield for yourself. It expects and rewards your own agency—in writing your own prompts, in remixing those given to you, in ditching ones you don’t care about, in molding the system to your values.

Visual themes and inspiration

Those principles are in tension! Seriousness vs. effortlessness; curiosity vs. diligence; earnestness vs. “trust the process.” But there’s a real thread running through them. Here are a few highlights from a lengthy set of themes and inspirations.

Gravity is both effortless and inevitable. It’s serious yet invisible. Visually, this connotes heavy and contrasting weights, perhaps stolid kinetics.

Poster by Joseph Müller-Brockmann, 1958

Celestial mechanics are appropriately wondrous, “trust the process,” precise. The name “Orbit” naturally suggests this direction, of course.

Poster by Laura Csocsán for Tempus Futurum

Contrasting geometry echoes the theme of heavenly bodies, injects some notes of curiosity in the context of structured rigidity

Kenzo Hara for hy-phen.jp

Analogous color suggests the nostalgic ardor of retrofuturism.

Poster by Bo Lundberg

A core identifying graphic: the starburst

The Voyager and Pioneer probes carry a metal plate with this starburst, designed by astronomer Frank Drake:

It’s a map of the solar system relative to nearby pulsars. It’s quite striking visually, but it also encodes a great deal of information: the lengths represent relative distance; the hashes encode the pulsars’ periods.

This figure (and others from—ironically—astrology!) inspired Orbit’s central identity: an information-rich starburst figure. There’s no fixed “logo”: this shape changes each time it appears, providing data visualization and navigation affordances. It’s a reflection of each user’s individual actions over time, but it’s distinctive and consistent enough as a motif to act as a recognizable “brand” symbol.

The tapering strokes create an optical illusion of a haloed star in the negative center. Weighty lines surrounding empty space echo the effortless action of “wu wei.”

Functionally, the starburst visualizes of a collection of prompts—maybe a set you’re reviewing that day, or a given book’s prompts, or a folder of prompts you’ve made yourself. Each prompt is a stroke; each line’s length represents a prompt’s intervals. A denser starburst represents a larger collection of prompts.

In the context of a review session, the starburst becomes a kinetic radial progress indicator element, ticking clockwise with each completed prompt, using color to indicate completed items:

When visualizing large collections, we can emphasize the line “tips” rather than the strokes (left). In dense list contexts, the starburst can “unwrap” into a vertical stack of lines, each still representing one prompt (right).

Type

We explored a variety of geometric sans serifs but ultimately fell in love with Dr, an oddball from Production Type. It’s all about contrasts: circles and rectangles; heavy lines and negative space; super-contrasting proportions. It’s distinctive but flexible enough to work with many host publication styles. We can scale the weights up and down with the type size to maintain a consistent stroke:

Notice also the grid structure: there’s a disciplined rhythm to this layout. A sense of “ruled” pages carries the diligence and effortless action themes.

In the images above, we see some semblance of interface begin to take shape, but as I mentioned earlier, these aren’t trying to be “screenshots”: they’re here to explore proportion and hierarchy.

For a logotype, we’d like something which echoes the bold geometry of Dr, but with enough distinctive details to stand on its own. It shouldn’t depend on the starburst for identifiability. This is the current favorite, a riff Nio drew on Herbus:

The dominant “o” keeps the focus on circles and the celestial theme; the “r-b” ligature continues that circular motion. The rectilinear “i-t” composition contrasts distinctively with the curved forms.

Iconography

It’s hard to get far with icon design when Orbit’s interface is this nascent: we don’t yet understand what all the core actions are and how they might be arranged. But Nio observed that there’s an interesting opportunity for icons to reflect the geometric type, the tapering strokes of the starburst, and the emphasis on negative space. This collage shows how “add”, “next,” “close,” and other common actions might consistently carry the visual language we’ve already defined.

Orbit does have one unusual core action we do understand well: revealing a prompt’s answer. That action presents an opportunity to do something unique and memorable—see the “eye” at right above.

Color

Reviewing prompts in Anki can feel a bit like driving on miles of straight, unchanging roads through endless, flat fields. Color offers an opportunity to introduce some dynamism. Since the rest of our visual elements have been fairly austere and disciplined, color is also a chance to underscore that first theme—passion, excitement, curiosity.

Nio constructed a color wheel which rewards surprising, apparently-anarchic combinations. (It also, somehow, maintains WCAG-accessible contrast in most useful combinations?!?)

In this rendering, the idea is that the interface’s color scheme changes throughout the day, reinforcing the ritual notion of the review session. Perhaps if you open Orbit in the morning you’ll see orange tones, in the evening rich purples. The starburst color feels unpredictable, but it follows a simple structure: backgrounds are drawn from the inner ring of the color wheel; the starburst color is the outer spot one notch counter-clockwise (a close analogous hue).

Another exciting potential use of color is to represent source contexts. That is: Quantum Country is purple, so maybe whenever prompts from Quantum Country come up in your review session, you see a splash of purple between the blue of Our World in Data and the yellow of a Tufte book. Spaced repetition prompts can feel quite atomized and detached from the original thing you actually cared about; this approach to color can reinforce the original emotional context.

The accents here play with a variety of hue angles, from analogous to quaternary to complementary. Is it too much? Maybe! This is what I was alluding to earlier: you really can’t tell in a static presentation like this. Bold solutions often feel much too aggressive “at rest” but exciting when “in motion.” If you tone graphic choices down to feel comfortable “at rest,” you’ll end up with something anodyne. I’ll have to actually live with it for a while to know.

The images above are depicting the in-app Orbit review experience—the place you go to review all the prompts you’ve collected from a variety of places. But as I mentioned at the start, Orbit must “behave itself” when embedded within host publications. We almost certainly can’t get away with these aggressive colors in that context, and we probably shouldn’t even try: review areas shouldn’t drag your gaze away from the surrounding prose.

But that’s OK. The same approach can be applied in a much more restrained fashion. Perhaps when viewed within Quantum Country, the same colors are used with restraint, but enough to create a connection with bolder use in the Orbit app.

Note that we emphasize the complementary green rather than the host purple, since our wheel’s purple may not quite match the host’s brand color. The background wash is a desaturated triadic relative.

I expect authors will ultimately need some presentation knobs for the embedded context. A design which feels balanced in one site will feel overwhelming in another. Will people be satisfied with choosing from Orbit’s color wheel, rather than using their precise brand color? Probably a monochromatic option should be available, particularly for places where the “brand color” is monochrome, like gwern.net.

My sprint with Nio is over, so the next steps are on my shoulders. I’ll now bring this visual language to life. I’ll use it for my daily SRS practice, and I’ll prototype how it behaves in various host publication contexts. I’m sure lots of things will break, lots of new questions will be raised, etc etc.

The platform’s making lots of progress week over week. I’d targeted the end of July for the first articles with Orbit prompts being publishable, and I still think that’s not wildly wrong. I’m looking forward to having more bandwidth to work with author-collaborators.

(Incidentally: “Orbit prompts”… are they “Bits”? Premature, maybe.)

In a real sense, if you enjoyed this work, you have yourselves to thank for it: I’m still operating in the red, but your collective patronage has slowed the burn enough that I can intermittently engage professionals like Nio. In fact, an upcoming post will share another exciting project with a different visual collaborator.