I built a type scale generator that exports CSS, Tailwind v3/v4 & Style Dictionary tokens - all in the browser

Every time I started a new design system, the same ritual: open a calculator, pick a base size,...

mercoledì 3 giugno 2026 New tab

828 words~4 min read

Every time I started a new design system, the same ritual: open a calculator, pick a base size, choose a modular ratio, hand-compute every step, paste into CSS variables - then do it all over again when the designer changed the base from 16px to 17px.

There are type scale tools out there, but none of them exported to Tailwind v4 @theme syntax, Style Dictionary JSON, and let me preview my actual Google Font pairing - all in one place. So I built one.

Live demo: typoscale.vercel.app - open source, MIT licensed.

Table of Contents

The Problem

I built a type scale generator that exports CSS, Tailwind v3/v4 & Style Dictionary tokens - all in the browser

I built a type scale generator that exports CSS, Tailwind v3/v4 & Style Dictionary tokens - all in the browser

Related reading

I Built a Screenshot-to-React Generator in 3 Hours

I built a free, client-side code screenshot tool — here's what I learned

I don't want to write HTML or fight global CSS, so I built a TypeScript DSL

I built 39 free browser-based dev tools — here's every decision I made and why

I Built 10 Developer Tools in One Day - Here They Are (Free, Open Source)

I built 170+ tools and 37 browser games as a side project: here's what I learned

Related reading

I Built a Screenshot-to-React Generator in 3 Hours

I built a free, client-side code screenshot tool — here's what I learned

I don't want to write HTML or fight global CSS, so I built a TypeScript DSL

I built 39 free browser-based dev tools — here's every decision I made and why

I Built 10 Developer Tools in One Day - Here They Are (Free, Open Source)

I built 170+ tools and 37 browser games as a side project: here's what I learned