Blocks · Heroes

Hero sections

Four opening patterns for marketing pages. Each renders with LSD framework classes only — swap brand, layout reflows. Click Copy HTML on any pattern to paste it straight into a page that already loads lsd-motion.css.

Centered hero

Eyebrow + headline + lead + dual CTA, all center-aligned, subtle radial accent glow, slide-up stagger on entrance.

.lsd-container-narrow .lsd-fx--slide-up .lsd-fx--delay-sm
New · Acid Index

Brand-to-code,
without the guesswork.

Ship a design system in an afternoon. Color, motion, layout — one token graph, every surface in sync.

Start a project Read the spec

Split image hero

Two-column layout — copy and CTAs on the left, visual on the right. Collapses to a single stack under 780px.

.lsd-grid--2col .lsd-align-center .lsd-aspect-4-3
Framework v0.8

Tokens in, production CSS out.

LSD compiles your brand into portable utility classes, SCSS mixins, and JS hooks. Drop the bundle, ship tomorrow.

Download bundle View on GitHub

Gradient mass hero

Full-bleed background with a pulsing decorative blob behind an elevated card. Brand's gravity/mass vocabulary made visible.

.lsd-z-elevated .lsd-fx--anim-scroll-morph .lsd-fx--fade-in
Motion library

Mass you can feel,
depth you can code.

Every surface sits in a stacking tier. Every tier has its own scale, shadow, and transition. Authors reach for one class.

Explore motion See the spec

Magenta panel hero

Surface-secondary background with high-contrast text and an asymmetric callout card at modal tier. Loud on purpose.

.lsd-z-modal .lsd-grid .lsd-align-center
Launch week

The brand-to-code compiler is public.

Four years of tokens, one afternoon to ship. Loud launch, dual-licensed, batteries included.

Read the post Star on GitHub