How I Built a SaaS UI Kit in Pure HTML/CSS/JS

Source: Dev.to

In a world dominated by React, Vue, and a dozen other frameworks, I decided to take a step back and build something premium using only the fundamentals. Here is the story behind Lumina Kit, a high‑end SaaS UI Kit built with nothing but pure HTML, CSS, and vanilla JavaScript.

Check it out here!

🎨 The Design Process

My goal was to create a “wow” factor from the first load. I drew inspiration from modern “linear‑style” designs and the glassmorphism trend.

Color Palette: I used specific HSL values to ensure deep, harmonious dark tones combined with vibrant blue‑to‑purple gradients.

Glassmorphism: Implementing a sense of depth was key. I used subtle backdrop-filter effects and semi‑transparent borders to make components feel like they are floating over the background.

Typography: I chose Inter for its incredible readability on digital screens, setting it with tight letter‑spacing for that premium “SaaS” look.

💻 Code Snippets

The core of the “glass” look is surprisingly simple but requires careful tuning:

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}