Introducing the TRMNL Design System

If you've written code for more than 5 minutes, you're well aware of several frontend libraries claiming to be the "final solution" for painless UI development.

When I started building 9 years ago, it was Bootstrap. Then it was Material. Now it's Tailwind. I'm leaving out several in between to keep paragraphs 3 sentences long.

But all these frameworks have one thing in common -- as they gain popularity, websites start to look like their default examples. The path of lesser resistence always wins.

In modern web development this is taboo. We don't want our website to look derivative. Especially not of our competition.

But what if there was a use case for design that should leverage default styles?  A context where sameness provides both a better customer experience and a better developer experience?

Today we attempt to kick off that use case with the TRMNL Design System.

Since Day 1 at TRMNL we've been wrestling in the mud with modern web technology to ensure our hardware (old school e-ink) is compatible with our software (Rails 8 + Hotwire + Hetzner blah blah blah).

Vibrant color palette? Not possible. Font anti-aliasing? Not possible (yet). Responsive, 12 column layouts? Not enough pixels on the page.

So we started small. For example here's our approach to a grayscale effect, which is technically impossible on our 1 bit display.

A few simple "pixel on, pixel off" bool patterns manage to trick our eyes into seeing different shades of grey. And you can use it like so:

<div class="bg-black">Black</div>
<div class="bg-gray-1">Gray 1</div>
<div class="bg-gray-2">Gray 2</div>
<div class="bg-gray-3">Gray 3</div>
<div class="bg-gray-4">Gray 4</div>
<div class="bg-gray-5">Gray 5</div>
<div class="bg-gray-6">Gray 6</div>
<div class="bg-gray-7">Gray 7</div>
<div class="bg-white">White</div>

Many web developers (including me) stopped using `btn btn-primary` when we hit peak Bootstrap, sometime around the first Trump administration.

This was a bummer for backend devs who would rather focus on boring stuff, but also a win for customers who got a little more variety from their daily tools. Until they didn't, as the story goes with Shopify.

The average Shopify merchant uses 6+ apps. These apps are embedded inside the Shopify interface, which means variety in navigation bars, modals, confirmation buttons, and other common UI features makes the user experience worse, not better.

To solve this Shopify launched Polaris, yet-another-design-system but with a twist: app developers who leverage Polaris in their Shopify embedded products are rewarded.

Developers who use Polaris enjoy higher search rank via the "Built for Shopify" badge, and ecommerce merchants are more likely to install apps built on Polaris because they feel native to Shopify. Win-win.

This is our goal with the TRMNL design system.

So let's go back to Day 1 at TRMNL. Or rather, Day 313. Today.

I'm thrilled to roll out v1.0.0 of our very own design system that intends to stay the same.

When you build custom plugins with TRMNL, you shouldn't have to worry about making it "look modern." Because it's not. It's a black and white, moderate resolution, e-ink graphic.

By leaning on us to do the painful stuff, you can focus on creating useful content for focused individuals using TRMNL on their desks, counter, kitchen refrigerator, or wall by the front door.

Over time we'll add more layouts, more features, more charting support, more more. But you don't have to reinvent the wheel.

A TRMNL plugin needs:

<div class="layout layout--center">
  {{ Item 1 }}
  {{ Item 2 }}
  {{ Item 3 }}
</div>
<div class="title_bar">
  <img class="image" src="/images/plugins/trmnl--render.svg" />
  <span class="title">Title</span>
</div>

And that's it. Anything is possible, but with TRMNL, less is more.

Here's a chart, leveraging TRMNL borders + Highcharts JS:

Here's a stats dashboard, leveraging TRMNL values + items:

Here's a language learning, word-of-the-day prompt:

And here's a popular one at TRMNL -- the GitHub commit graph.

Everything above is live + replicable by any developer with the TRMNL design system and a little bit of elbow grease.

We built this from the ground up to merge old tech with new tech. To keep the user experience consistent between native and third party plugins. To keep you focused on what's important.

Get started:
https://usetrmnl.com/framework