lucUI Docs

01. Design Tokens

All styles in the luca.ecosystem are built around custom CSS variables. They enable modular customization of baseline colors, background cards, text sizes, and font-families without writing redundant code.

Import our design tokens directly into your global stylesheet:

/* Global design tokens */
:root {
    --luca-navy: #1D2D44;       /* Primary corporate base */
    --card-bg: #243b55;         /* Lighter refraction back */
    --studio-gold: #AE9D5D;     /* Luxury accenting gold */
}

02. Transparency Components

The lucUI design system simulates light passing through dynamic polished surfaces. Utilize the `.lucui-transparency` utility to implement premium refraction values, inset drop shadows, and high-performance backdrop filters.

Standard HTML structure for a transparency card element:

<!-- Refractive container structure -->
<div class="lucui-transparency">
    <h3>Modular Core</h3>
    <p>Refracted container description.</p>
</div>

03. Glow Effects

To achieve a sleek "Silicon Valley OS" look, we employ background sub-surface lighting. Use absolute-positioned `.glow-spot` elements inside containers to project dynamic gradients without affecting paragraph readabilities.

Example implementation of a centered lighting glow:

<!-- Light projecting container -->
<div class="transparency-card">
    <div class="glow-spot center-glow"></div>
    <h2>Unified System</h2>
</div>

04. Installation

lucUI CSS Framework is available through multiple distribution channels. Choose the method that best fits your workflow.

CDN (Recommended for quick start)

Include lucUI via jsDelivr CDN in your HTML:

<!-- Minified version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucui-css-framework@1.0.0/lucUI.min.css">

<!-- Full version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucui-css-framework@1.0.0/lucUI.css">

npm

Install via npm for Node.js projects:

# Install
npm install lucui-css-framework

# Include in your project
<link rel="stylesheet" href="node_modules/lucui-css-framework/lucUI.css">

# Or import in CSS
@import 'lucui-css-framework/lucUI.css';

GitHub

Clone the repository for full access to source files:

# Clone repository
git clone https://github.com/lucaf1-15/lucUI.git

# Include in your project
<link rel="stylesheet" href="lucUI.css">

05. GitHub Repository

The lucUI CSS Framework is open-source and available on GitHub. Access the repository for:

• Complete source code
• Issue tracking
• Contribution guidelines
• Release notes and changelog
• MIT License

View on GitHub →