Blocks · Content
Content sections
Four structural patterns for filling the middle of a marketing
page — a 4-up stats grid, an alternating timeline, a native
<details> FAQ, and an icon + heading + copy
feature list.
Stats grid
Four metrics in a .lsd-grid--4col with .lsd-gap-lg. Big display figures, short labels.
.lsd-grid--4col
.lsd-gap-lg
.lsd-z-raised
.lsd-fx--fade-in
View HTML
Copy HTML
12.4k
Active brands
▲ 18% qoq
98%
Contrast pass
▲ 2 pts
3.2×
Ship velocity
vs handoff
Timeline
Vertical axis with alternating left/right items. Centered nodes, connector line. Collapses to a left-aligned list on mobile.
.lsd-stack
.lsd-grid--2col
.lsd-z-raised
View HTML
Copy HTML
2024 · Q1
Token engine
Color graph, contrast solver, derivation pipeline shipped.
2024 · Q3
Motion library
27 classes, z-tiers, filters, reactive data bindings.
2025 · Q1
Mass & gravity
Anchor / orbit tiers; component weight reacts to scroll.
2026 · now
Blocks library
Ready-to-paste compositions — heroes, cards, forms, more.
FAQ
Native <details> accordions. No JS, fully a11y. The plus rotates to a cross when open.
.lsd-stack
.lsd-gap-sm
.lsd-container-narrow
View HTML
Copy HTML
Is LSD actually free to use?
The framework is MIT-licensed. The hosted editor has a paid tier. Self-host costs nothing.
Do I need a build step?
No. Ship the compiled lsd-motion.css and you're done — classes resolve at runtime from CSS variables.
Does it work with Tailwind / Bootstrap / Foundation?
Yes — LSD classes don't collide. Run them side by side or pick one. The tokens stay stable either way.
How do I migrate an existing brand?
Drop your hex values into the editor's color panel — the derivation engine back-fills the rest. Takes about ten minutes.
Feature list
Three columns — icon + heading + copy per feature. Each tile raised to .lsd-z-raised and lifts on hover.
.lsd-grid--3col
.lsd-z-raised
.lsd-fx--hover-lift
.lsd-stack
View HTML
Copy HTML
◆
Token graph
One source of truth for color, type, spacing — derivations stay consistent across every surface.
⇅
Motion tiers
Z-layers from sunken to orbit. Every tier has a scale, a shadow, and a transition — pick one class.
✦
Zero runtime
Compiled CSS. No JS required. Add LSD to any stack without inheriting a framework.