The making of The Morning Context: A design perspective

When we came together with the idea of The Morning Context, we reached out to the design collective FOLO to bring it to life. Today, the FOLO team offers a peek into the creative thinking that went into building a visual identity for The Morning Context. Read on.

It all began when a small group of experienced journalists approached FOLO with their mandate document—they wanted to tell stories making sense of a world in which the internet sits at the junction of business, human need and endeavour.

Companies from Uber to Swiggy to Flipkart earn stratospheric valuations banking on mass consumer-behaviour change at historically unprecedented rates. Along the way, everything from restaurants to the domestic gas cylinder business is disrupted. And we as consumers and enterprises face market volatility as an “instrument of truth”.

This is the uncertain territory from which The Morning Context promised to rescue sense, and bring to their readers “ambitious, timely, deeply researched and well-written stories”. On the mix of startups, people and technology, along with a healthy dash of chaos and wider, big business stories.

And understanding this background was crucial to FOLO’s pursuit of designing a home for these stories. We had to produce a canvas that was authoritative, minimal and contemporary, and which subtly communicated the core idea of context every morning—context wrested from the unique conditions of today’s radical uncertainty.

We started with “morning”. Our first pick was a rising sun with a gentle gradient to represent a dawn; over time, we refined it into a full sun, and then a simple stylized circle. We kept the gradient—with three colours that we picked out to embody the Internet, Business, Chaos framework.

For Internet, a light, pink-hued red—warm, yet with a sense of connection, since the internet is the life-blood of information transfer across industries today.

For Business, green was a no-brainer. It’s also a cooler colour, balancing Internet’s heat.

And for Chaos, a violet that is a very much “in-between” colour that is neither very warm nor very cool, and ever so slightly reminiscent of turbulence.

These colours act as accents and markers throughout The Morning Context. To complement them, we didn’t want to just settle for a black or greyscale look for the rest of the site. After a lot of wrangling, we arrived at a dark, midnight blue (keeping with our sun/morning theme) that gels with all of our primary colours, without being overbearing.

We put all of these together on an expansive canvas, with distinctive fonts (more on that in a bit), strong images and a clean, spacious layout. And one subtle motif that came out of an interesting train of thought:

Internet. Business. Chaos. Circle, Circle, Circle. Period? Dot. Dot. Dot

News. Collect. Connect. Weaves. Stitches. Fabric.

The word “context”, we found, comes from the Latin “contextus”, meaning “to weave together”. The English word has over the centuries moved on from that definition, but it struck a chord. The weaving of stories, with a thread running through it providing context, seemed to us a perfect fit for The Morning Context.

We had come up with mini-circles or dots, again in our three category colours, as an element, one which you can see everywhere from the home page to the publishing calendar. When we decided to add “weaving” as a theme of sorts, we built on the same idea, using dotted lines as stitches running throughout The Morning Context in one form or another. It’s a subtle motif that represents direction or chronology and, we feel, adds character to TMC’s visual identity. 

The contemporary sans serif font Matteo manages the difficult task of combining subtlety and readability with memorable geometries. A standout feature of its well-thought out geometries for us is its careful letter spacing. This makes it impressive at large sizes as well as a breeze to read even when formatted in longer paragraphs. Matteo, for all these reasons, is the typeface in which The Morning Context announces itself.

Which brings us to the stories themselves, the core of The Morning Context. During our workflow, these story page layouts were at the heart of our iterative design process, since The Morning Context is a reader-first site, a place for lovers of the long-form who come for serious and sustained reporting.

Our finalized story layouts combine an emphatic beginning, with bold, strong headlines and expansive images. Stories from each category, in addition to a characteristic accent colour, are visually distinctive in their own way. We have selected two headline typefaces, Monorama (for Business) and Ray (in two styles, one for Internet and one for Chaos).

The industrial-looking Monorama, with its strong sense of proportions, fits perfectly with the tone of the stories The Morning Context was planning to tell within its Business category (as we gleaned over several conversations with the founding writers). 

The two styles of Ray we have chosen for Internet (Ray One) and Chaos (Ray Three) are both reminiscent of fonts appearing on digital displays. Ray Three falls somewhere in between the industrial smoothness of Monorama and the FIDS (flight information display system) style of Ray One—a kind of schizophrenic in-between of the two, which we felt was perfect for Chaos. The category’s headlines are further accented in a bright red colour, to further set it off from Internet and Business stories.

Last but certainly not least, our choice of font for the body of every single TMC story: Passenger Sans. This is the font family that ably carries all TMC story text without being in itself remarkable. It feels especially crafted for long reads with its compact proportions and upright design (and also comes with the extended set of glyphs that telling stories of our globalized, digital world requires).

And that brings us to the end of our introduction to the design of The Morning Context. We hope you like it.



Note: Do write to us with your thoughts on our design, and your experiences interacting with it. You can reach us at support(at)mailtmc(dot)com.