Introduction

Luminary UI is a CSS framework that takes a radically different approach to building user interfaces. Instead of requiring you to memorize dozens of utility classes, Luminary styles standard HTML elements directly — giving you beautiful glassmorphic UIs out of the box.

The Core Idea: Zero-Class Semantics

Most CSS frameworks require you to apply classes to every element:

<!-- Traditional CSS Framework -->
<div class="card shadow-lg backdrop-blur-md bg-white/10 rounded-xl p-6 border border-white/20">
  <button class="btn btn-primary px-4 py-2 rounded-lg">Click me</button>
  <input class="form-input bg-transparent border border-gray-300 rounded" />
</div>

With Luminary UI, you write plain, semantic HTML and the framework does the rest:

<!-- Luminary UI -->
<main>
  <button>Click me</button>
  <input type="text" placeholder="Type here..." />
</main>

The <main> centers and constrains your layout. The <section> inside it automatically becomes a frosted glass container. The <button> gets specular shimmer effects. The <input> gets a focus glow ring. No classes needed.

What Gets Styled Automatically?

The semantic layer covers these HTML elements:

Element	What It Becomes
<body>	Gradient background, font system, smooth scrollbars
<h1> – <h6>	Vibrant text with distinct sizes and tight letter spacing
<p>, <small>, <strong>, <em>	Secondary/muted text colors
<a>	Accent-colored links with hover opacity
<code>	Accent-tinted inline code pill
<pre>	Dark glass code block with horizontal scroll
<blockquote>	Accent left-border quote panel with <cite> support
<ul>, <ol>, <dl>	Properly indented lists with secondary text color
<hr>	1px glass-border divider
<mark>	Warning-tinted highlight pill
<kbd>	3D keycap with inset glare
<main>	Transparent centering shell — max-width: 800px, no glass
<section>, <article>	Glassmorphic content cards with depth shadows
<nav>	Glassmorphic navigation bar with flex layout
<details>, <summary>	Native collapsible with animated arrow
<fieldset>, <legend>	Glass-paneled form group with uppercase label
<button>	Glass button with shimmer hover and active scale
<input>, <textarea>, <select>	Frosted inputs with focus rings and custom select caret
<form>, <label>	Flex column layout with spacing
<table>	Full table with hover rows and glass-border dividers

When You Need Classes

Sometimes you’re working with a <div> or another element that isn’t part of the semantic layer. For these cases, Luminary provides explicit utility classes that mirror the semantic styles:

• .glass-card — same as <section> or <article> (a glass content card)
• .glass-button — same as <button>
• .glass-nav — same as <nav>
• .glass-input — same as <input>

Additionally, there are 20 component classes (.glass-alert, .glass-modal, .glass-spinner, etc.) for UI patterns that have no semantic HTML equivalent.

Architecture Overview

Luminary UI is built in 4 layers:

1. Design Tokens — CSS custom properties for colors, radii, blur, transitions
2. Semantic Base — Zero-class styles for standard HTML tags
3. Components — 20 explicit .glass-* component classes
4. Modifiers — Cross-cutting classes like .thin, .thick, .vibrant, .glow

Installation

Package Manager

Install the package via npm:

npm install luminary-ui

Import the compiled CSS in your project:

@import "luminary-ui/dist/luminary.css";

CDN (Direct HTML)

Alternatively, you can load the framework directly into your HTML via a CDN like jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luminary-ui/dist/luminary.min.css">

Once installed, just start writing HTML. No configuration is required.