Get in touch

Send us a message, or mail us at hello@resonate.digital

Get in touch

Send us a message, or mail us at hello@resonate.digital

Categories
Topics

Resonate BrewKit: Brew your design system for the web in minutes

The process of designing for the web is a balancing act. At first, you need the creative freedom of the blank canvas to explore ideas that will lead to stand-out design. But soon enough, a sound set of guardrails can help you more predictably turn your design into a scalable design system.
Jul 8, 2024 ∙ read
Resonate BrewKit: Brew your design system for the web in minutes

It’s like brewing a craft beer. You want to experiment with unique hops and malts, but adhering to the fundamental principles of fermentation ensures your beer will be a hit. (Also, making it a limited edition can create scarcity!)

This is why we have the BrewKit at Resonate. It’s a starter design system for websites you can duplicate, customize and build upon. It doesn’t impose design decisions upfront but helps you ensure that you’re building a scalable design system.

Refactoring a design system isn’t fun, so start with a tried-and-tested setup.

Collections and modes

Collections in BrewKit are organized around modes — that is, we introduce a new collection only to enable a new set of modes:

  • Brand modes — support for multiple brands
  • Color modes — support for dark and light modes
  • Size modes — support for responsive design

This scaffolding lets you easily add modes as you go.

Brand modes

Brand modes collection defines everything that doesn’t depend on color or size modes, which is usually brand tokens. If you need to create a multi-brand design system, add a mode here.

If you’re creating multiple design systems (e.g., separate design systems for web, web app or mobile app), create a separate brand library. Then, make the variables here to reference the brand library.

Color modes

Color modes collection defines semantic colors for light and dark modes.

Semantic colors make it easy for designers to choose the right color for the right purpose consistently.

The default color variable setup helps avoid common pitfalls when adding support for color modes. Even if you’re not thinking about color modes now, this setup makes it easy to add support later.

Size modes

Size modes collection defines all variables that depend on screen size — responsive typography, spacings, grids etc.

If you need more breakpoints, add modes.

Foundations

BrewKit foundations include a simple writing style guide, semantic colors and typography (e.g., H1 to H6), spacers, border radius values, etc.

Semantic colors work with color modes, and typography and other size values work with size modes.

We also provide three responsive grids to get you started.

Components

BrewKit includes a small but powerful set of components — buttons, inputs, checkboxes, and radio buttons — that you won’t need to re-engineer as your system grows in complexity.

These are based on real-life enterprise design systems. If you need a split button at some point, we have you covered.

The icon container component is how we use icons all the time. Swap our default icon library with your own, and easily set size, recolor icons, or add icon badges.

What isn’t included

We don’t include navigation, layouts (headers, footers, page sections, galleries) or complex controls (cards, tables, etc.). We usually want to make these unique to the project.

Try it out

We constantly improve BrewKit by adding and removing elements based on feedback and actual usage from our internal design team.

Let us know what works and doesn’t work for you.

Get BrewKit on Figma Community.

Continue reading
Redesigning a website to speak to users’ needs
Redesigning a website to speak to users’ needs