TroyCars
Design System · v1.0 · LCARS Prodigy Edition
Stardate
—
Color System
Typography · Font: Antonio
Display / Hero
TROY · LCARS
Title
Starship Interface
Heading
Section Header
Subheading
System Status · Online
Body
LCARS interface design derived from Star Trek: Prodigy aesthetic. Glassmorphic overlays with liquid refraction effects applied to structural chrome elements. Antonio typeface throughout.
Caption / Label
Stardate 80432.7 · Sector 47 · Online
Data / Monospace
SYS: OK · TEMP: 312K · FLUX: 1.21GW · WARP: 9.9
Buttons & Interactive Elements
LCARS Chrome · Elbows, Shoulders & Bars
Top-Left & Bottom-Left Elbows
CONTENT AREA

Elbow = large rounded cap + concave inner corner using radial-gradient pseudo-element trick.
Shoulder (Sidebar + Content Join)
SECTION
01
▸ ACTIVE LOG
Content panel joins shoulder via border overlap and matching border-radius cutout.
Sidebar Panels
Glass System · Liquid + Backdrop
Glass Intensity Controls (live preview)
Blur 18px
Opacity 12%
Distort 8
Standard Glass
Backdrop blur + rgba fill. Works on all backgrounds.
LCARS Glass Panel
Pill-cap shape applied to glass for sidebar feel.
Frost Glass
Heavy blur, higher opacity. Max frosted window effect.
Tinted Glass
Violet tint for LCARS-colored overlays.
iOS 26-Style Liquid Glass Controls
Enabled
Intensity
Color Shift
Sound
↑ These pill-style controls will be used throughout the site for glass effect intensity, sound toggles, and user preferences.
Animation Library
Pulse Ring
.pulse-ring
Scan Line
.scan-box
Loading Spin
.spin-delta
Data Blink
.blink-bar
Float
.float-pill
Warp Stream
.warp-stream
CSS Variables — Copy & Paste
/* ═══ TROYCARS DESIGN TOKENS — paste into any :root {} ═══ */ --bg: #0c0a14; /* page background */ --bg-panel: #100d1e; /* card/panel background */ --bg-screen: #080610; /* content screen */ --frame: #2a2440; /* LCARS chrome */ --elbow: #3a3060; /* borders & dividers */ --magenta: #cc44aa; /* primary accent */ --magenta-hot: #ff33bb; /* hover/active magenta */ --violet: #7b4fa6; /* secondary accent */ --violet-lt: #9966cc; --violet-pale: #bb99dd; --purple-dk: #3d1f66; --purple-mid: #5c3399; --teal: #00ccbb; /* data/info accent */ --teal-dk: #008877; --teal-pale: #66ddcc; --cyan: #33ddff; --gold: #ffaa00; /* alert/highlight */ --gold-pale: #ffcc66; --green: #44cc88; --aqua: #00eedd; --text: #cdb8f0; /* body text */ --text-dim: #7755aa; /* secondary text */ --glass-blur: 18px; /* glass backdrop blur */ --glass-opacity: 0.12; /* glass fill opacity */ --glass-border: rgba(255,255,255,0.18);
Project File Structure
troycars/ ├── _site/ ← deployed files │ ├── index.html ← landing / about │ ├── blog/ │ │ └── index.html │ ├── store/ │ │ └── index.html │ ├── assets/ │ │ ├── tokens.css ← all CSS vars │ │ ├── lcars.css ← LCARS chrome styles │ │ ├── glass.css ← glass system │ │ ├── animations.css │ │ └── main.js │ ├── backgrounds/ ← space background assets │ │ ├── space-bg.js ← starfield/nebula engine │ │ └── README.md ← how to tweak │ └── screens/ ← animation canvases │ ├── waveform.js │ ├── spectrum.js │ └── README.md ← how to tweak ├── cms/ ← your content editor app │ ├── index.html ← password-protected CMS UI │ └── publish.js ← GitHub commit API └── docs/ ├── design-system.html ← this file └── README.md ← setup guide