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

HermesS55 — Fri, 16 Jan 2026 12:03:24 +0000

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.
You can check it out from here! [https://lumina-three-omega.vercel.app/]

🎨 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:


css
.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);
}

DEV Community: HermesS55

[Boost]