Current Version: 1.0.0-RC4

Utility CSS for Developers

Iterate quickly by using terse, single-purpose utility classes (but not too many).


Get a usable design faster via the grid-based design system. You don't need 20 font sizes and 48 shades of blue.

No build step and no dependencies. It's just custom properties and a stylesheet.

No mini-languges, no DSLs, no nonsense. Class names are based on initialisms and convention, quickly learned.

Simple customization options without a complex toolchain or dependencies.

<button style="display: inline-block; padding-left: var(--mg-sp-4); padding-right: var(--mg-sp-4); padding-top: var(--mg-sp-3); padding-bottom: var(--mg-sp-3); text-align: center; font-size: var(--mg-fs-3); border: all; border-radius: var(--mg-sw-3); background-color: var(--mg-blue-900); color: var(--mg-blue-100); cursor: pointer box-shadow: 1px 1px 2px 1px rgba( 0, 0, 0, 0.2 ); "> Make Spice Flow </button> <button class="dib ph-4 pv-3 tc f-3 ba br-3 bg-blue-900 blue-100 pointer shadow-1 "> Make Spice Flow </button>



<link rel="stylesheet" href=""/>


curl > melange.css


npm install --save melange-css


A single .css file with custom variables you can override using regular CSS. No build step.

Three breakpoints allow you to create responsive designs right from your HTML. Optional dark mode and high-contrast media queries.

Works with .css you have, and isn't designed to replace it.

Classnames use a consistent naming convention. It's based on CSS properties and can be quickly internalized. You'll be typing faster than any automcomplete or LLM.

Everything is based on modular scales for fonts, sizing, and spacing. Quickly find the right one for your UI, and know that everything will work well together.

Customize anything by setting CSS properties - no special configuration language needed.

Add your own classes and have MelangeCSS create versions for each media query or pseudo class.

MelangeCSS Isn't For Everyone

MelangeCSS works great when…

MelangeCSS isn't right for you if…

Get Started