LCARS Style Guide

Library Computer Access/Retrieval System - HTML/CSS Implementation Guide

Installation

NPM Installation

Install the LCARS CSS framework via npm:

npm install @kung-fu/lcars

CDN Usage

Include the CSS directly from a CDN:

<link rel="stylesheet" href="https://unpkg.com/@kung-fu/lcars/dist/lcars.min.css">

Local Installation

Download and include the CSS file locally:

<link rel="stylesheet" href="path/to/lcars.css">

Basic Elements

Buttons

Standard LCARS buttons with various color schemes:

<button class="lcars-button">PRIMARY</button> <button class="lcars-button lcars-button-blue">SECONDARY</button> <button class="lcars-button lcars-button-purple">TERTIARY</button> <button class="lcars-button lcars-button-red">ALERT</button>

Elbow Elements

The iconic LCARS elbow shapes for corners and framing with content support:

LEFT
RIGHT
TOP
BOTTOM
<div class="lcars-elbow-left lcars-orange"> <div class="elbow-content">LEFT</div> </div> <div class="lcars-elbow-right lcars-blue"> <div class="elbow-content">RIGHT</div> </div>

Decorative Brackets

Brackets for grouping related elements:

GROUPED CONTENT AREA
<div class="lcars-bracket"> <div class="lcars-bracket-left"></div> <div class="lcars-bracket-content">GROUPED CONTENT AREA</div> <div class="lcars-bracket-right"></div> </div>

Spacers and Bars

Spacers for layout and bars for headers:

SYSTEM STATUS BAR
<div class="lcars-spacer"></div> <div class="lcars-bar">SYSTEM STATUS BAR</div> <div class="lcars-spacer"></div>

Indicators

Status indicators with pulsing animation:

<button class="lcars-button lcars-indicator">SYSTEM ONLINE</button>

Advanced Components

Circular Control Widget

Complex SVG-style circular control for X/Y positioning:

<div class="lcars-circular-control"></div>

Progress Bars and Sliders

Interactive progress indicators and slider controls:

SHIELDS 75%
HULL INTEGRITY 45%
<div class="lcars-progress"> <div class="lcars-progress-bar" style="width: 75%;">SHIELDS 75%</div> </div> <div class="lcars-slider"> <div class="lcars-slider-track"> <div class="lcars-slider-fill"></div> </div> <div class="lcars-slider-thumb"></div> </div>

Complex Elbow Variants

Advanced elbow shapes with clipping and complex geometry:

COMPLEX TL
COMPLEX TR
<div class="lcars-elbow-complex lcars-elbow-complex-tl">COMPLEX TL</div> <div class="lcars-elbow-complex lcars-elbow-complex-tr">COMPLEX TR</div>

Status Grid Display

Grid-based status monitoring with state indicators:

01
02
03
04
05
06
07
08
09
10
11
12
<div class="lcars-status-grid"> <div class="lcars-status-cell active">01</div> <div class="lcars-status-cell warning">03</div> <div class="lcars-status-cell error">05</div> <!-- More cells --> </div>

LCARS Panel

TACTICAL ANALYSIS

This is a content panel with LCARS styling. It can contain any type of content including text, buttons, or other interface elements.

<div class="lcars-panel"> <div class="lcars-panel-header">TACTICAL ANALYSIS</div> <p>Panel content goes here...</p> <!-- Additional elements --> </div>

Interactive and Specialized Elements

Terminal/Console Display

Command line interface style display with scrolling text:

LCARS TERMINAL INTERFACE v47.0.1
========================================
STATUS REPORT
WARP CORE: ONLINE
SHIELDS: 100%
WEAPONS: READY
READY FOR COMMAND_
<div class="lcars-terminal"> <div class="lcars-terminal-line">LCARS TERMINAL INTERFACE v47.0.1</div> <div class="lcars-terminal-line lcars-terminal-prompt">STATUS REPORT</div> <div class="lcars-terminal-line">WARP CORE: ONLINE</div> </div>

Audio Visual Indicators

Audio level indicators with animated bars:

AUDIO LEVEL
<div class="lcars-audio-indicator"> <span>AUDIO LEVEL</span> <div class="lcars-audio-bars"> <div class="lcars-audio-bar"></div> <div class="lcars-audio-bar"></div> <div class="lcars-audio-bar"></div> <div class="lcars-audio-bar"></div> <div class="lcars-audio-bar"></div> </div> </div>

Alert States and Decorators

Emergency alert animations and decorative elements:

DECORATED ELEMENT WITH POSITION INDICATOR
<button class="lcars-button lcars-alert-red">RED ALERT</button> <button class="lcars-button lcars-alert-yellow">YELLOW ALERT</button> <div class="lcars-decorator"> <span>DECORATED ELEMENT</span> </div>

Button Variants

Additional button sizes and configurations:

<button class="lcars-button lcars-button-small">SMALL</button> <button class="lcars-button">STANDARD</button> <button class="lcars-button lcars-button-large">LARGE</button> <button class="lcars-button lcars-button-wide">FULL WIDTH</button>

Data Display Grid

WARP CORE
97%
SHIELDS
100%
WEAPONS
READY
IMPULSE
NOMINAL
<div class="lcars-data-display"> <div class="lcars-data-item"> <div class="lcars-data-label">WARP CORE</div> <div class="lcars-data-value">97%</div> </div> <!-- More data items --> </div>

Grid System

LCARS uses a unit-based grid system. Use classes like lcars-u-1 through lcars-u-6 for width and lcars-h-1 through lcars-h-3 for height:

1
2
3
2x2
4x1

Color System and Classes

Standard LCARS colors with utility classes for backgrounds and text:

ORANGE
#FF9900
BLUE
#9999FF
PURPLE
#CC99CC
RED
#FF6666
YELLOW
#FFFF99
GREEN
#99FF99

Text Color Classes

Orange text using .lcars-text-orange

Blue text using .lcars-text-blue

Purple text using .lcars-text-purple

Red text using .lcars-text-red

Yellow text using .lcars-text-yellow

Green text using .lcars-text-green

<!-- Complete Color Classes (background + text) --> <div class="lcars-orange">Orange Background with Black Text</div> <div class="lcars-blue">Blue Background with Black Text</div> <!-- Text-only Classes --> <p class="lcars-text-orange">Orange Text</p> <p class="lcars-text-blue">Blue Text</p>

Layout Components

Layout Helpers

Flexbox layout utilities for organizing LCARS elements:

ROW 1
ROW 2
ROW 3
COLUMN 1
COLUMN 2
COLUMN 3
<div class="lcars-row lcars-gap"> <div class="lcars-button">ROW 1</div> <div class="lcars-button">ROW 2</div> </div> <div class="lcars-column lcars-gap"> <div class="lcars-button">COLUMN 1</div> <div class="lcars-button">COLUMN 2</div> </div>

Grid Layout Classes

CSS Grid layouts for common LCARS patterns:

PANEL 1
PANEL 2
PANEL 3
<div class="lcars-grid-3 lcars-gap"> <div class="lcars-data-panel lcars-orange">PANEL 1</div> <div class="lcars-data-panel lcars-blue">PANEL 2</div> <div class="lcars-data-panel lcars-purple">PANEL 3</div> </div>

Data Panels

Standardized panels for displaying data and information:

DEFAULT PANEL

Black background with orange border

ORANGE PANEL

Orange background with black text

BLUE PANEL

Blue background with black text

<div class="lcars-data-panel"> <h4>DEFAULT PANEL</h4> <p>Content here</p> </div> <div class="lcars-data-panel lcars-orange"> <h4>ORANGE PANEL</h4> <p>Content here</p> </div>

Menu Buttons

Specialized menu buttons with enhanced styling:

HOME
SYSTEMS
DATABASE
ALERTS
<div class="lcars-menu-button lcars-orange">HOME</div> <div class="lcars-menu-button lcars-blue">SYSTEMS</div> <div class="lcars-menu-button lcars-purple">DATABASE</div>

Status Indicators

Color-coded status indicators for system monitoring:

ONLINE
WARNING
OFFLINE
<div class="lcars-status-indicator green">ONLINE</div> <div class="lcars-status-indicator yellow">WARNING</div> <div class="lcars-status-indicator red">OFFLINE</div>

Numeric Displays

Monospace displays for numeric data and codes:

023-407
47634.44
NCC-1701-D
<div class="lcars-numeric">023-407</div> <div class="lcars-numeric">47634.44</div> <div class="lcars-numeric">NCC-1701-D</div>

Status Bar Groups

Multiple status bars for complex interface layouts:

PRIMARY
SECONDARY
TERTIARY
ALERT
WARNING
NORMAL
<div class="lcars-status-bar"> <div class="lcars-bar lcars-orange">PRIMARY</div> <div class="lcars-bar lcars-blue">SECONDARY</div> <div class="lcars-bar lcars-purple">TERTIARY</div> </div>

Audio Framework Integration

LCARS includes audio feedback for authentic interaction. Add this JavaScript for basic audio support:

// Basic LCARS Audio Framework const lcarsAudio = { TactileInputAcknowledge: function() { // Play positive acknowledgment sound console.log('Tactile Input Acknowledge'); }, TactileInputNegativeAcknowledge: function() { // Play negative acknowledgment sound console.log('Tactile Input Negative Acknowledge'); }, Alert: function() { // Play alert sound console.log('Alert Sound'); } }; // Add automatic sound effects to buttons document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.lcars-button'); buttons.forEach(button => { button.addEventListener('click', function() { if (this.classList.contains('lcars-button-red')) { lcarsAudio.Alert(); } else { lcarsAudio.TactileInputAcknowledge(); } }); }); });

For full audio implementation, replace console.log statements with actual audio playback using Web Audio API or HTML5 audio elements.

Advanced Implementation Notes

SVG Integration

For complex geometric elements, SVG can be integrated with LCARS classes:

<svg width="100" height="100" class="lcars-button lcars-bg-orange"> <circle cx="50" cy="50" r="40" fill="currentColor" class="button"/> <text x="50" y="55" text-anchor="middle" fill="black">SVG</text> </svg>

JavaScript Interactivity

Add dynamic behavior to LCARS elements:

// Example: Dynamic status updates function updateSystemStatus(element, status) { element.className = 'lcars-status-cell'; if (status === 'active') element.classList.add('active'); if (status === 'warning') element.classList.add('warning'); if (status === 'error') element.classList.add('error'); } // Example: Progress bar animation function animateProgress(progressBar, targetWidth) { let currentWidth = 0; const interval = setInterval(() => { if (currentWidth >= targetWidth) { clearInterval(interval); } else { currentWidth += 2; progressBar.style.width = currentWidth + '%'; } }, 50); }

Accessibility Considerations

• Ensure sufficient color contrast for text readability

• Provide alternative text for visual indicators

• Include keyboard navigation support for interactive elements

• Consider screen reader compatibility with proper ARIA labels

Performance Optimization

• Use CSS transforms instead of changing layout properties for animations

• Minimize the number of animated elements running simultaneously

• Consider using CSS containment for complex layouts

• Optimize SVG elements and use appropriate fallbacks

Usage Guidelines

Typography

• Use condensed, sans-serif fonts (Orbitron is used here as a substitute for Swiss 911 Ultra Compressed)

• Text should be uppercase with increased letter spacing

• High contrast between text and background colors

Layout

• Follow the unit-based grid system for consistent sizing

• Use rounded corners (20px for large elements, 10px for small)

• Maintain generous spacing between elements

Interaction

• Buttons should have hover effects and subtle animations

• Use color changes to indicate state (active, inactive, alert)

• Implement audio feedback for authentic LCARS experience

Responsiveness

• Adapt layout for mobile devices while maintaining LCARS aesthetic

• Use flexible grid system that works across screen sizes

• Consider touch targets for mobile interfaces

END OF TRANSMISSION - LCARS 47.0.1