Horizontal layout
Width, columns, flow across the screen. LSD ships this as
.lsd-grid (auto-fit responsive) and
.lsd-grid--Ncol (fixed columns) with
.lsd-col-N spans.
Design as physics,
not decoration.
LSD treats every element as having a position in 3D space and a mass. Layout flows from physical intuition. Motion, depth, and color compose under a coherent theory — not a pile of utility classes.
Three axes, not two.
Every other framework models X and Y. LSD adds Z — depth — as a first-class layout axis with its own utilities, tokens, and motion language.
Vertical layout
Height, stacking order, vertical rhythm.
.lsd-stack composes flex-column + token-driven gap;
section spacing tokens (--lsd-section-y-*) carry the
cadence down the page.
Depth & gravity
Elevation tier, stacking order, shadow, scale, mass. This is
LSD's third axis — no other framework models it. Covered by
.lsd-z-*, the Surface Generator, and Orion
pattern-matching.
Every element has weight.
Mass is a composite score LSD derives from tier, scale, size, content density, and shadow depth. Heavier masses reshape the gravity field around them — lighter siblings yield.
mass ≈ (z-tier + 1) × scale ×
size × density + shadow-weight
A tier-3 card with scale 1.08 and dense content might measure Mass: 68. A tier-0 text paragraph with light copy: Mass: 12. Hover the heavy card below — its neighbours yield to its field.
Light
Intro copy
12mass
- Tier 0 · grounded
- Scale 1.00
- Low density (text only)
Medium
Feature card
34mass
- Tier 1 · raised
- Scale 1.02
- Mixed content · soft shadow
Heavy
Hero showcase
68mass
- Tier 3 · peak
- Scale 1.08
- High density · deep shadow
Altitude, made visible.
Higher tier = larger visual scale = more perceived presence. Defaults are 1.0 (opt-in). Brands with tight grids keep it subtle; showcase brands push it bold.
--lsd-z-scale-raised1.02
--lsd-z-scale-elevated1.05
--lsd-z-scale-high1.08
--lsd-z-scale-modal1.10
High-tier card
Drag the slider — watch this card grow and its shadow deepen.
The motion of depth.
Gravity pulls every element toward its rest altitude. Lift (hover) moves it up; release drops it back. Mass determines how resistant an element is to motion; heavy elements reshape the field around themselves.
Tier 0
Grounded
Sits at rest. No shadow. Hover does nothing — the ground can't lift further.
Tier 1 · hover
Lifted
Hover raises to tier 1. Shadow grows. Settles on release.
Tier 4 · modal
Floating
Ignores the flow. Drifts slowly. Above ambient layout noise.
Tier 5 · overlay
Orbit
No gravity at all. Translucent, above everything — toasts, HUDs.
Color as shape, not list.
LSD treats a palette as a constellation — not a flat list, but a relationship topology in OKLCH space. Orion is the engine that preserves constellation shape when any swatch is edited.
290°
50°
170°
How it all composes.
One vocabulary runs through the stack. Galaxy is the color space. Nebula wraps it with semantic axes. Constellation names the palette's shape. Orion preserves that shape. Aurora is motion through time; Gravity is motion through depth; Mass determines how they interact.
Galaxy
OKLCH space
The 3D color space LSD addresses. Standards-based. Perceptually uniform.
Nebula
Extended color model
Wraps OKLCH with temperature, role, motion, and contrast metadata.
Constellation
Palette shape
Relationship topology — triadic, split-comp, analogous. Not a list.
Orion
Shape engine
Preserves constellation shape when any swatch is edited.
Aurora
Motion through time
The animation + gradient layer. Easing, duration, rhythm.
Gravity
Motion through depth
The Z-axis. Altitude, lift, release, yield.
Mass
Visual weight
Derived from tier, scale, size, density. Governs interaction.
Surface Generator
Tier-linked surfaces
Backgrounds, borders, and shadows derived from the same tokens.
LSD's advantage is not a feature count. It's a coherent theory where every design decision maps to a physical intuition. Color has depth. Elements have weight. Motion obeys gravity. The framework encodes the physics; authors reach for one class and the rest follows.
Start building.
Download the framework, browse the motion library, or open the editor and compose live.