LEMM Design System & Component Library¶

This page documents the custom UI components and style guidelines for the LEMM Core Specs documentation.

Color Palette¶

The theme automatically switches between Light (Technical) and Dark (Cyber) modes.

• Primary Color (Cyan)
• Accent Color (Violet)

Typography¶

We use Inter for body text and JetBrains Mono (or Fira Code) for code and technical specs.

Gradient Headers¶

You can create gradient headers using the .text-gradient class (via Attribute Lists).

# The Future of Music {.text-gradient}

The Future of Music¶

Custom Admonitions¶

1. Epic Card¶

Used for high-level feature descriptions or "Epics".

!!! epic "Epic 1: The Planner"
    The symbolic reasoning engine that determines song structure before generation.

2. Tech Spec Card¶

Used for detailed technical specifications, model architectures, or data schemas.

!!! tech-spec "Model Architecture: Transformer-XL"
    **Layers:** 24
    **Hidden Size:** 1024
    **Attention Heads:** 16
    **Context Window:** 2048 tokens

Visualizations¶

1. Flow Arrow¶

A simple visual connector between sections.

<div class="flow-arrow"></div>

2. Piano Roll¶

A CSS-grid based visualization of musical notes.

<div class="piano-roll">
    <div class="piano-cell"></div><div class="piano-cell"></div><div class="piano-note"></div><div class="piano-cell"></div>
    <!-- ... more cells ... -->
    <div class="piano-cell"></div><div class="piano-note long"></div><div class="piano-cell"></div>
</div>

Buttons & Interactions¶

Standard MkDocs Material buttons are supported.

Get Started Learn More