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:
<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:
<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:
<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:
<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
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:
<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
<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:
Color System and Classes
Standard LCARS colors with utility classes for backgrounds and text:
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:
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:
<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:
<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:
<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
<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