# CSS design system generator

> Open-source design system and token library generator.

Live: https://design-system.farhan.app/  
Source code: https://github.com/farhanmunim/design-system  
Role: Developer  
Date: 2026-01  
Built with: Open-source, CSS  
Page: https://farhan.app/projects/css-design-system-generator/

## Problem

Keeping UI consistent across projects is harder than it should be. Styles, spacing and components get redefined every time, which causes inconsistencies and slows things down. A design system fixes this by giving you a single source of truth, but most setups are either too rigid or disconnected from the actual code. I wanted a practical way to define and generate a complete visual system directly in the browser.

## Approach

The generator works like a lightweight page builder. You set colours, typography, spacing and UI styles in panels and watch a live style guide update as you go. It then exports clean CSS with design tokens, plus a small utility-style framework you can reuse across projects.

## Outcome

It’s a faster way to set up a consistent design system without doing it by hand. Because it generates ready-to-use CSS, the design and the code stay in step, which makes consistency easier to maintain across projects.