gitwtfhub

wtf is n8n-design-system?

n8n-io/n8n-design-system — explained in plain English

Analysis updated 2026-07-17 · repo last pushed 2021-08-06

★ 14SCSSAudience · designerComplexity · 2/5DormantSetup · easy

TL;DR

A shared library of UI components and visual guidelines that keeps n8n's interface consistent across the whole product.

Mindmap

mindmap
  root((n8n-design-system))
    What it does
      Shared UI components
      Visual guidelines
      Consistent styling
    Tech stack
      SCSS
      Storybook
    Use cases
      Preview components
      Reuse buttons and forms
      Keep UI consistent
    Audience
      Designers
      Frontend developers
      Product managers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Browse a visual catalog of n8n's UI components in Storybook before using them.

REASON 2

Reuse pre-built buttons, forms, and dropdowns instead of building from scratch.

REASON 3

Update a shared style once and have it flow through the whole n8n interface.

REASON 4

Keep an internal team aligned on consistent colors, fonts, and spacing.

What's in the stack?

SCSSStorybook

How it stacks up

n8n-io/n8n-design-systemdeezer/deezer.github.ion8n-io/element-theme-n8n
Stars14127
LanguageSCSSSCSSSCSS
Last pushed2021-08-062026-06-182021-07-21
MaintenanceDormantActiveDormant
Setup difficultyeasyeasyeasy
Complexity2/51/52/5
Audiencedesignerresearcherdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 30min

Standard Storybook + SCSS build setup.

No license information is provided in the explanation.

Yoink these prompts

Prompt 1
Help me browse and understand the components in this n8n design system via Storybook.
Prompt 2
Show me how to add a new component to this SCSS-based design system.
Prompt 3
Explain how style changes here propagate to n8n's main application.
Prompt 4
How do I run and build this design system locally to test my changes?

Frequently asked questions

wtf is n8n-design-system?

A shared library of UI components and visual guidelines that keeps n8n's interface consistent across the whole product.

What language is n8n-design-system written in?

Mainly SCSS. The stack also includes SCSS, Storybook.

Is n8n-design-system actively maintained?

Dormant — no commits in 2+ years (last push 2021-08-06).

What license does n8n-design-system use?

No license information is provided in the explanation.

How hard is n8n-design-system to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is n8n-design-system for?

Mainly designer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.

Other repos in this lane