Adding a blog post about React Router brand updates (#304)

* Blog post for React Router Brand Updates

A written record of the design thinking and process, with technical diagrams and examples of how to use the new brand identity.

* Update react-router-brand-update.md

* Update data/posts/react-router-brand-update.md

Co-authored-by: Michael Jackson <[email protected]>

* Update data/posts/react-router-brand-update.md

Co-authored-by: Brooks Lybrand <[email protected]>

* Update react-router-brand-update.md

* Update react-router-brand-update.md

* Update data/posts/react-router-brand-update.md

Co-authored-by: Brooks Lybrand <[email protected]>

* Update react-router-brand-update.jpg

---------

Co-authored-by: Michael Jackson <[email protected]>
Co-authored-by: Brooks Lybrand <[email protected]>

data/authors.yml

@@ -28,3 +28,6 @@
 - name: Arisa Fukuzaki
   avatar: /authors/profile-arisa-fukuzaki.png
   title: Senior DevRel Engineer at Storyblok
+- name: Tim Quirino
+  avatar: /authors/profile-tim-quirino.png
+  title: Staff Product Designer

data/posts/react-router-brand-update.md

@@ -0,0 +1,73 @@
+---
+title: React Router Brand Update
+summary: "The evolution of the React Router brand identity in conjunction with the release of v7."
+featured: false
+date: 2024-10-30
+image: /blog-images/headers/react-router-brand-update.jpg
+ogImage: /blog-images/headers/react-router-brand-update.jpg
+imageAlt: React Router Brand Update
+imageDisableOverlay: true
+authors:
+  - Tim Quirino
+---
+
+
+My formal design training predates much of what we now know about the modern web. In school, I was steeped in ancient texts and trained as a print designer where I learned that the future always benefits from a rich history of experiences and references. If you pay close attention to fashion and trends, you know this to be true. Old things frequently inspire the new, and while the Remix team has been hard at work shipping React Router v7, we decided to take a look at the brand identity to see if we could freshen it up a bit.
+
+My name is Tim Quirino, and I've recently joined Remix as a Staff Product Designer after Shopify acquired my former company (Threads.com). In this blog post, we'll take a tour of the brand updates to React Router. I'll break it down into 3 parts; starting with the logo changes, continuing with the updates to the wordmark, and finishing with the creation of a ligature that marks this release. 
+
+<img alt="A visual summary of updates to the React Router brand identity, with visible guidelines" src="/blog-images/posts/react-router-brand-update/update-guidelines.png" class="my-8 border rounded-md" />
+
+## Updating the logo
+
+<img alt="Side by side comparison of the React Router logo before and after the update" src="/blog-images/posts/react-router-brand-update/logo-before-and-after.png" class="my-8 border rounded-md" />
+
+The React Router logo is already an elegant abstraction of what React Router does. For anyone that doesn't know, it's a visual representation of a route tree. The connected nodes are an actively rendered route. There is meaning in the way it flows from top-to-bottom and connects adjacent nodes to present the quickest and cleanest path. If you've read [Matt Brophy's post about Fog of War](https://remix.run/blog/fog-of-war), you can see the obvious similarities.
+
+I admire its simplicity, but from an execution perspective, there were obvious opportunities for improvement. 
+
+<img alt="The old React Router logo with guidelines showing what to fix" src="/blog-images/posts/react-router-brand-update/logo-before.png" class="my-8 border rounded-md" />
+
+Nodes were misaligned, inconsistently positioned, and upon closer inspection it was easy to see that the curves in their connective tissue were not smooth. While I spent some time exploring alternative logos, I came to realize that fixing these issues were the top priority.  
+
+<img alt="The new React Router logo showing what has changed" src="/blog-images/posts/react-router-brand-update/logo-after.png" class="my-8 border rounded-md" />
+
+## Updating the wordmark
+
+When it came to this piece of the puzzle, the team had a greater appetite for something new. Ever since posting about [merging Remix and React Router](https://remix.run/blog/merging-remix-and-react-router) in May, we've been toying with the idea of merging the brands together visually. In particular, we wondered whether this was an opportunity for the Remix "R" to be integrated, considering the way we've used Founders Grotesk Bold as the logo font for both identities in the past. 
+
+Ultimately, we decided against visually integrating it. The Remix brand will stay separate, free to evolve as we awaken from our nap in 2025 to release new Remix packages. By making this decision, the React Router wordmark wouldn't depend on another logo (and wouldn't limit this exploration either). It allowed us to explore something more specific to React Router. 
+
+<img alt="Three iterations of the React Router wordmark" src="/blog-images/posts/react-router-brand-update/wordmark-iterations.png" class="my-8 border rounded-md" />
+
+Another problem was simply that the words "React Router" were quite long when included in a brand lockup. Instead of creating various vertically and horizontally stacked configurations of the Logo + Wordmark, we wondered if we could provide a single, evergreen solution.
+
+Inspired by the ancient ["compact disc" logo](https://en.m.wikipedia.org/wiki/File:CDDAlogo.svg), we embraced a method of nesting the word "React" and emphasizing "Router" as the more significant idea. Visually, this was an elegant way of reconciling the long width issue while establishing a more accurate hierarchy for the identity.
+
+I kept some usage of Founders Grotesk and created a custom ligature that more comfortably allowed for nesting. Connecting the "u" with the "t" is also a visual reference to the way nodes connect in the logo.
+
+<img alt="A closeup of the React Router wordmark showing the custom ligature" src="/blog-images/posts/react-router-brand-update/wordmark.png" class="my-8 border rounded-md" />
+
+<img alt="Stylistic variants for the React Router wordmark in black and white" src="/blog-images/posts/react-router-brand-update/wordmark-variants.png" class="my-8 border rounded-md" />
+
+When the word "Router" is styled as an outline, you can more clearly see the retro inspiration behind it.
+
+## Creating a mark for this release
+
+Initially, I didn't think we needed a unique visual identifier for "v7." After all, React Router has been around for years and previous versions never received a visual identity of their own. But a release such as this is significant to millions of React Router projects (and the 5 million line Shopify App) and we take our work very seriously. 
+
+In the world outside of tech, major releases typically get custom treatments. If you have a favorite Metallica logo, it likely has to do with the music they released in that era. The logos for "The Empire Strikes Back" and "A New Hope" were made by the same team, with the same actors, but designed to convey different parts of the story. Just as the logo and wordmark are crafted with intention, there is significance to marking this release.
+
+<img alt="Four iterations of the custom ligature created specifically for the v7 release" src="/blog-images/posts/react-router-brand-update/v7-ligature-iteration.png" class="my-8 border rounded-md" />
+
+I included the evolution of the "v7" ligature to illustrate where I initially saw an opportunity. When initially typing the characters "v" and "7", the default letter spacing made them feel like separate objects at an uncomfortable distance apart. 
+
+When kerning them together, nesting started to emerge as an obvious direction. There were nested elements in the wordmark, so nesting elements here seemed conceptually sound as well. The task of refining this was then an issue of finding a balance between keeping the characters consistent with the proportions for the rest of the lockup, while customizing the characters to feel like they *belong together.*
+
+<img alt="A closeup of the custom v7 ligature" src="/blog-images/posts/react-router-brand-update/v7-ligature.png" class="my-8 border rounded-md" />
+
+<img alt="All three updates to the React Router brand identity against a white background" src="/blog-images/posts/react-router-brand-update/update.png" class="my-8 border rounded-md" />
+
+I'm happy with the way this brand update turned out because the process is a reflection of the way the Remix team works. Far from being linear, this task meandered playfully without compromising detail and intentionality. Perhaps more importantly, it's a true evolution—one that allows us to be more flexible and creative about our identity—without losing sight of how we got here.
+
+<img alt="Six badges designed in the style of the old web to show how new React Router brand updates can be used" src="/blog-images/posts/react-router-brand-update/badges.png" class="my-8 border rounded-md" />