lucUI Logo
Open-source design system

lucUI

Luca Ecosystem's reusable design system: modular components, shared tokens, responsive foundations, and a unified light/dark experience.

What it is

The lucUI Design System

Created on April 28, 2026 and launched on May 25, 2026, lucUI is Luca Ecosystem's open-source design system and CSS framework. It provides reusable, modular UI components and styling foundations built around the Luca design language.

lucUI 2 is the current public generation. The system continues with refined components, updated visual foundations, responsive behavior, theme-aware styling aligned with the Luca Ecosystem rebrand, and Lucide icon integration.

Public generations

lucUI evolution

lucUI 1

First Release

May 25, 2026. Standardized CSS variables, typography classes, base buttons, alerts, and the basic glassmorphism rendering tags.

lucUI 2 · current

Prism System

July 29, 2026. Introduced the current public generation and the Prism interface language.

Signature layer

Prism Components

Surfaces

Reactive Glass

Prism surfaces respond to pointer position with reactive spotlight lighting. Add data-luc-spotlight to any card.

prism.html 
<article class="luc-card luc-prism" data-luc-spotlight>
  <span class="luc-kicker">New perspective</span>
  <h2 class="luc-gradient-text">Build a feeling.</h2>
  <p>Compose from the lucUI visual language.</p>
</article>
Themes

Multi-Theme Dock

Dark and light themes are built into lucUI and can be switched from the navigation control. The selected theme is remembered by the framework.

theme-dock.html 
<div class="luc-theme-dock">
  <button data-luc-theme-switch="dark"></button>
  <button data-luc-theme-switch="light"></button>
  <button data-luc-theme-switch="midnight"></button>
  <button data-luc-theme-switch="sunrise"></button>
</div>
Composition

Editorial Stage

The .luc-stage class creates atmospheric hero sections with animated drift and editorial layout.

stage.html 
<section class="luc-stage">
  <div class="luc-stage-content">
    <span class="luc-kicker">Subtitle</span>
    <h1 class="luc-gradient-text">Title</h1>
  </div>
</section>
Interaction

Command Palette

Full keyboard-driven command palette with Ctrl/Command+K support, filtering, and accessible focus management.

command.html 
<button data-luc-toggle="command">Search</button>
<div class="luc-command-backdrop">
  <div class="luc-command">
    <input class="luc-command-search">
    <div class="luc-command-list">
      <button class="luc-command-item">...</button>
    </div>
  </div>
</div>