CSS Framework or Design System?

Introduction

This (first (small)) blog post is about “hype” in the world of web development. More specifically, it focuses on a front-end oriented topic: the distinction between a framework and a design system.

What I mention in this article reflects a subjective point of view, based on personal experience. But it is also tied to a broader and more objective perspective, purely “technical”, on the tools we use today.

What exactly is a design system?

According to Figma, in SHORTCUT, a design system “records the principles and elements that define the user experience. Colors and icons are carefully chosen, buttons have consistent sizes and shapes.”

We can clearly see the purpose of a design system and how it is built: ensuring a pleasant visual consistency through strict, immutable, and global characteristics. Its technical implementation can range from a simple stylesheet to a technical document spanning dozens of pages.

According to Google, Material Design is a set of characteristics that define the user experience of a piece of software, through: - vibrant colors
- intuitive gestures
- modular components
- flexible typography
- contrasting shapes

All of this describes a clear design system. It is broad, but it still defines the direction Google wants to take with its own design system.

This allows us to compare design systems with more common frameworks.

Framework?

On Bootstrap’s homepage, it defines itself as a front-end “toolbox”. Not really a framework, not really a design system. Yet it has characteristics of both concepts: utility classes for grids, predefined color palettes, and even a large collection of prebuilt components.

This shows that a middle ground exists, and Bootstrap is not alone. Most front-end design tools share these characteristics: PicoCSS, Simple.css, Pure, etc. All of them possess, to varying degrees, traits of both frameworks and design systems.

None of these technologies are full-fledged frameworks nor complete design systems. Personally, I find the term “toolbox” quite appropriate.

Tailwind

Tailwind, in its simplest form as a library, is a framework, which the community has expanded through collections of ready-to-use components that are not included natively in Tailwind.

However, Tailwind Labs, the company behind Tailwind, itself offers a UI kit: components and complete templates, paid, and built on top of Tailwind.

Even in its free version, Tailwind indirectly imposes a color palette. It is broad, but it subtly pushes us to use it, while refusing the label of a design system.

What’s the point?

All of these points led me to the following reflection: does a true front-end framework really exist? A technology that would impose a point of view on how to technically design an interface?

Is it even coherent to talk about a “CSS framework”? Shouldn’t we use a more idiomatic term to describe what a “CSS framework” really is?

This is an open reflection, likely to evolve over time, but I don’t find the term “framework” to be appropriate.