LSD Framework
Blocks · FAQs

Two-Col Sidebar

Sticky category rail on the left drives the main FAQ list. Categories swap panes without a route change.

SLUG: faq-flare-two-col-sidebar↩ FAQs
02 · live

Pattern

General

What is LSD?

A substrate — the layer beneath your design system. Derives color, surface tiers, and motion from a single OKLCH source.

Who is it for?

Three audiences: humans authoring sites, AI agents consuming structure, framework-agnostic teams adopting the .lsd contract.

Install

How do I install LSD?

One npm package and a single CSS import. The runtime is < 12kb gzipped.

Does it work with my framework?

Yes. Output is CSS custom properties — Next, Svelte, WordPress, static HTML, all consume the same .lsd file.

Color

Why OKLCH?

Perceptually uniform. A 10% lightness step looks like a 10% lightness step — RGB and HSL both lie about that.

Can I keep my brand palette?

The Surfaces panel takes any custom color and derives the full tier stack from it. Brand stays. Tiers compute.

Motion

What's Aurora?

Our timeline editor. Authors motion as DAW-style tracks, not tween graphs.

Agents

Why do agents matter here?

Every component manifest and Cosmos label doubles as agent training material. The substrate is legible by design.

View HTML
<aside><button class="fts-cat" data-cat="x">X</button>…</aside><main><div class="fts-pane" data-pane="x">…</div>…</main>
LSD blocks · FAQs · Two-Col Sidebar
↩ All blocks