🚀 Live on NPM

Style karo,
Jugaad se.

A zero-runtime, JIT CSS utility engine built entirely in Hinglish. Write jugadu-piche-laal instead of bg-red.

$ npm i -D jugad-aur-css
↓ Scroll to explore components
✨ Why JACE?

Built Different. Built Desi.

⚡

Zero Runtime

CSS is compiled ahead-of-time. No JavaScript overhead in the browser. Builds complete in under 25ms.

🇮🇳

Hinglish First

Classes like jugadu-piche-laal and jugadu-mota-bold feel natural if you think in Hindi.

🎯

Arbitrary Values

Need a custom value? Use jugadu-choda-[73px] or jugadu-piche-[#1e90ff]. No config needed.

🧩 Components

Copy. Paste. Ship.

Ready-made components built purely with JACE classes. Every one is copyable.

Alert Card

⚠️ Dhyan Do!

Ye ek important alert hai. Isko ignore mat karo bhai, nahi toh baad mein pachtaoge. 

<div class="jugadu-piche-koyla-900
            jugadu-kinaara-l-4
            jugadu-kinaara-jugadu-orange
            jugadu-gol-lg jugadu-dabao-6">
  <div class="jugadu-jugaad-flex
              jugadu-line-me-lao
              jugadu-fasla-3 jugadu-khisko-b-2">
    <span class="jugadu-akshar-xl">⚠️</span>
    <span class="jugadu-akshar-base
                jugadu-mota-bold">Dhyan Do!</span>
  </div>
  <p class="jugadu-akshar-sm
            jugadu-rang-koyla-400">
    Ye ek important alert hai.
  </p>
</div>

Pricing Card

PRO PLAN
₹499 /month
✓ Unlimited projects
✓ Priority support
✓ Custom themes 
<div class="jugadu-piche-koyla-950
            jugadu-kinaara-1 jugadu-kinaara-koyla-800
            jugadu-gol-2xl jugadu-dabao-8
            jugadu-jugaad-flex jugadu-col
            jugadu-beech-bajaar">
  <span class="jugadu-akshar-xs jugadu-mota-bold
               jugadu-rang-jugadu-orange
               jugadu-bada-akshar">PRO PLAN</span>
  <div class="jugadu-jugaad-flex
              jugadu-line-me-lao">
    <span class="jugadu-akshar-5xl
                jugadu-mota-bold">₹499</span>
    <span class="jugadu-rang-koyla-500
                jugadu-akshar-sm">/month</span>
  </div>
  <button class="jugadu-piche-jugadu-orange
                jugadu-rang-kaala jugadu-mota-bold
                jugadu-dabao-y-3 jugadu-choda-full
                jugadu-gol-xl
                chuaa:jugadu-parchai-glow-orange
                jugadu-badlaav-all">
    Subscribe
  </button>
</div>

Buttons 

<!-- Primary -->
<button class="jugadu-piche-jugadu-orange
              jugadu-rang-kaala jugadu-mota-bold
              jugadu-dabao-x-6 jugadu-dabao-y-3
              jugadu-gol-lg jugadu-haath
              chuaa:jugadu-parchai-glow-orange
              jugadu-badlaav-all">Primary</button>

<!-- Secondary -->
<button class="jugadu-piche-parchai
              jugadu-kinaara-1 jugadu-kinaara-koyla-600
              jugadu-rang-safed jugadu-gol-lg
              chuaa:jugadu-piche-koyla-800
              jugadu-badlaav-all">Secondary</button>

<!-- Outline -->
<button class="jugadu-piche-parchai
              jugadu-rang-jugadu-orange
              jugadu-kinaara-1
              jugadu-kinaara-jugadu-orange
              chuaa:jugadu-piche-jugadu-orange
              chuaa:jugadu-rang-kaala
              jugadu-badlaav-all">Outline</button>

Stats Grid

60+
Utilities
10
Color Palettes
<25ms
Build Time 
<div class="jugadu-jugaad-grid
            jugadu-jaali-cols-3
            jugadu-fasla-4">
  <div class="jugadu-piche-koyla-900
              jugadu-gol-xl jugadu-dabao-6
              jugadu-center-kar">
    <div class="jugadu-akshar-3xl
                jugadu-mota-bold
                jugadu-rang-jugadu-orange">
      60+
    </div>
    <div class="jugadu-akshar-xs
                jugadu-rang-koyla-500">
      Utilities
    </div>
  </div>
  <!-- Repeat for each stat -->
</div>

Navbar

🛠️ MyApp
Home About Sign Up 
<nav class="jugadu-jugaad-flex jugadu-failao
            jugadu-line-me-lao
            jugadu-piche-koyla-950
            jugadu-kinaara-1 jugadu-kinaara-koyla-800
            jugadu-gol-xl
            jugadu-dabao-x-6 jugadu-dabao-y-3">
  <div class="jugadu-jugaad-flex
              jugadu-line-me-lao jugadu-fasla-2">
    <span class="jugadu-akshar-xl">🛠️</span>
    <span class="jugadu-mota-bold">MyApp</span>
  </div>
  <div class="jugadu-jugaad-flex jugadu-fasla-4">
    <a class="jugadu-akshar-sm jugadu-rang-koyla-400
              chuaa:jugadu-rang-safed
              jugadu-badlaav-rang">Home</a>
    <a class="jugadu-piche-jugadu-orange
              jugadu-rang-kaala jugadu-mota-bold
              jugadu-dabao-x-4 jugadu-dabao-y-1.5
              jugadu-gol-lg">Sign Up</a>
  </div>
</nav>
🎨 Colors

10 Curated Palettes. Zero Purple.

Every color has 11 shades (50–950). Use them with jugadu-rang-, jugadu-piche-, or jugadu-kinaara-.

laal (Red)
sona (Amber)
samundari (Teal)
hara (Green)
nila (Blue)
koyla (Zinc)
📦 Installation

Get Started in 3 Steps.

1 Install
npm install -D jugad-aur-css
2 Configure 
// jugadu.config.js
module.exports = {
  content: ["./**/*.html"],
};
3 Build
npx jace build -c jugadu.config.js -o style.css

Ready to build some
Bawaal?

Open source. Free forever. Made in India.

Read the Docs GitHub ↗